微信扫一扫打赏支持

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>

 

 

 

 
posted @ 2018-06-14 03:04  范仁义  阅读(1580)  评论(0)  编辑  收藏  举报