html+css实现坦克大战游戏简单布局
html+css实现坦克大战游戏简单布局
一、总结
一句话总结:找好素材。
1、如何实现通过键盘让坦克移动?
通过event对象的keyDode
68 $(window).keydown(function(event){
69 ek=event.keyCode;
70 switch(ek){
71 case 37:
72 //左
2、坦克不同方向移动过程中如何逼真显示?
因为总共不只一张坦克图片,不动、向上下左右动都有一张图片
3、页面布局的技巧是什么?
好的图片:好的背景图,好的障碍物的图片
4、坦克自由移动的布局基础是什么?
坦克必须设置为绝对定位
18 .tank{
19 cursor: pointer;
20 position: absolute;
21 top:0px;
22 left:0px;
23 }
5、overflow 属性作用是什么?
overflow 属性规定当内容溢出元素框时发生的事情。
12 body{
13 overflow: hidden;
14 background: url('img/bg.jpg');
15 background-size:100%;
16 }
二、html+css实现坦克大战游戏简单布局
1、截图
2、百度盘下载地址
链接:https://pan.baidu.com/s/1MYYyxsC8sgnvYP900_Dkwg 密码:s7du
3、开发描述
1.CSS3界面布局
2.jQuery特效开发
3.设定游戏规则
4.游戏产品的调试
4、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>坦克游戏</title> 6 <style> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 12 body{ 13 overflow: hidden; 14 background: url('img/bg.jpg'); 15 background-size:100%; 16 } 17 18 .tank{ 19 cursor: pointer; 20 position: absolute; 21 top:0px; 22 left:0px; 23 } 24 .f1{ 25 width: 400px; 26 height:200px; 27 background: url('img/f1.png'); 28 background-size:100%; 29 position: absolute; 30 top:0px; 31 left:400px; 32 } 33 34 .f2{ 35 width: 400px; 36 height:200px; 37 background: url('img/f2.png') no-repeat; 38 background-size:100%; 39 position: absolute; 40 left:0px; 41 bottom:0px; 42 } 43 44 .f3{ 45 width: 400px; 46 height:200px; 47 background: url('img/f3.png') no-repeat left bottom; 48 background-size:100%; 49 position: absolute; 50 right:0px; 51 bottom:0px; 52 } 53 </style> 54 <script src='js/jquery.js'></script> 55 </head> 56 <body> 57 <img src="img/src.png" class="tank"> 58 <div class="f1"></div> 59 <div class="f2"></div> 60 <div class="f3"></div> 61 </body> 62 <script> 63 ys=0; 64 yv=10; 65 xs=0; 66 xv=10; 67 68 $(window).keydown(function(event){ 69 ek=event.keyCode; 70 switch(ek){ 71 case 37: 72 //左 73 xs-=xv; 74 $('.tank').attr({'src':'img/left.png'}); 75 $('.tank').css({'left':xs+'px'}); 76 break; 77 case 38: 78 //上 79 ys-=yv; 80 $('.tank').attr({'src':'img/top.png'}); 81 $('.tank').css({'top':ys+'px'}); 82 break; 83 case 39: 84 //右 85 xs+=xv; 86 $('.tank').attr({'src':'img/right.png'}); 87 $('.tank').css({'left':xs+'px'}); 88 break; 89 case 40: 90 //下 91 ys+=yv; 92 $('.tank').attr({'src':'img/bottom.png'}); 93 $('.tank').css({'top':ys+'px'}); 94 break; 95 } 96 }); 97 </script> 98 </html>
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、每年专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2024-10-30:27岁,宅加太忙,特此在网上找女朋友,坐标上海,非诚勿扰,vx:fan404006308
AI交流资料群:753014672