JavaScript小游戏2
- 2019 年 10 月 29 日
- 筆記
用一个JS小游戏来练习下JS的相关知识
创建HTML文件
创建视图文件game1.html:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>小游戏</title> </head> <body> <div id="d1" > <input id="input" type="button" value="来呀，点我呀！" onclick="mv()"/> </div> </body> </html>
添加CSS样式 这类就没有定义外部的样式css文件，之间在页面中head->style标签中写入：
<style type="text/css"> #d1 { width: 160px; height:160px; background-color: #66ffff; border: 2px solid yellow; border-radius:10px 10px 10px 10px ; box-shadow: 2px 2px 10px #cccccc; position: absolute; top: 0%; left: 0%; right:86%; bottom:86%; } #input{ margin-top:45px; margin-left: 30px; width: 101px; height: 68px; background-color: #66ffff; color: #ffffff; font-weight: 700; border: 0px; } </style>
添加Js 代码 同理，JS代码也写在game1.html文件中：
<script type="text/javascript"> var number=1; function mv(){ if (number==1){ mv2(); number=2; } else if(number==2){ mv3(); number=3; } else if(number==3){ mv4(); number=4; } else if(number==4){ mv1(); number=1; } } function mv1(){ document.getElementById('d1').style.left=0+"%"; document.getElementById('d1').style.right=88+"%"; document.getElementById('d1').style.top=0+"%"; document.getElementById('d1').style.bottom=76+"%"; } function mv2() { document.getElementById('d1').style.left=88+"%"; document.getElementById('d1').style.right=0+"%"; document.getElementById('d1').style.top=0+"%"; document.getElementById('d1').style.bottom=76+"%"; } function mv3() { document.getElementById('d1').style.top=76+"%"; document.getElementById('d1').style.bottom=0+"%"; document.getElementById('d1').style.left=88+"%"; document.getElementById('d1').style.right=0+"%"; } function mv4() { document.getElementById('d1').style.bottom=0+"%"; document.getElementById('d1').style.left=0+"%"; document.getElementById('d1').style.top=76+"%"; document.getElementById('d1').style.right=88+"%"; } </script>
运行效果：
最后
附上完整代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>小游戏</title> <script type="text/javascript"> var number=1; function mv(){ if (number==1){ mv2(); number=2; } else if(number==2){ mv3(); number=3; } else if(number==3){ mv4(); number=4; } else if(number==4){ mv1(); number=1; } } function mv1(){ document.getElementById('d1').style.left=0+"%"; document.getElementById('d1').style.right=88+"%"; document.getElementById('d1').style.top=0+"%"; document.getElementById('d1').style.bottom=76+"%"; } function mv2() { document.getElementById('d1').style.left=88+"%"; document.getElementById('d1').style.right=0+"%"; document.getElementById('d1').style.top=0+"%"; document.getElementById('d1').style.bottom=76+"%"; } function mv3() { document.getElementById('d1').style.top=76+"%"; document.getElementById('d1').style.bottom=0+"%"; document.getElementById('d1').style.left=88+"%"; document.getElementById('d1').style.right=0+"%"; } function mv4() { document.getElementById('d1').style.bottom=0+"%"; document.getElementById('d1').style.left=0+"%"; document.getElementById('d1').style.top=76+"%"; document.getElementById('d1').style.right=88+"%"; } </script> <style type="text/css"> #d1 { width: 160px; height:160px; background-color: #66ffff; border: 2px solid yellow; border-radius:10px 10px 10px 10px ; box-shadow: 2px 2px 10px #cccccc; position: absolute; top: 0%; left: 0%; right:86%; bottom:86%; } #input{ margin-top:45px; margin-left: 30px; width: 101px; height: 68px; background-color: #66ffff; color: #ffffff; font-weight: 700; border: 0px; } </style> </head> <body> <div id="d1" > <input id="input" type="button" value="来呀，点我呀！" onclick="mv()"/> </div> </body> </html>
