1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>坦克大战</title>
6
7 </head>
8 <body onkeydown="hero.move(event)">
9 <div id="filed" style="background:#000;width:500px;height:400px;position:absolute;"></div>
10 <div id="mytank" style="background:url(w.png) no-repeat;width:40px;height:40px;position:absolute;"></div>
11 <input type="button" value="上">
12 <input type="button" value="右" >
13 <input type="button" value="下" >
14 <input type="button" value="左">
15 <script type="text/javascript">
16 // function change(obj){
17 // if(obj.value=="上"){
18 // tank.style.backgroundPositionY="0px";
19 // }else if(obj.value=="右"){
20 // tank.style.backgroundPositionY="-40px";
21 // }
22 // else if(obj.value=="下"){
23 // tank.style.backgroundPositionY="-80px";
24 // }
25 // else if(obj.value=="左"){
26 // tank.style.backgroundPositionY="-120px";
27 // }
28 // }
29 //用面向对象的方法开发，web版本的坦克大战，可以通过asdw键来控制坦克的走向
30 function MyTank(x,y,direct){
31 this.x=x;//坦克的横坐标
32 this.y=y;//坦克的纵坐标
33 this.speed=3;//速度
34 //初始化
35 mytank.style.left=this.x+"px";
36 mytank.style.top=this.y+"px";
37 mytank.style.backgroundPositionY="0px";
38 //event表示按键事件
39 this.move=function move(event){
40 //a表示左 3
41 //s表示下 2
42 //d表示右 1
43 //w表示上 0
44 switch (event.keyCode){
45 case 65:
46 //a表示左
47 this.x-=this.speed;
48 this.direct=3;
49 mytank.style.backgroundPositionY="-120px";
50 break;
51 case 83:
52 //S表示向下 2
53 this.y+=this.speed;
54 this.direct=2;
55 mytank.style.backgroundPositionY="-80px";
56 break;
57 case 68:
58 //d表示右 1
59 this.x+=this.speed;
60 this.direct=1;
61 mytank.style.backgroundPositionY="-40px";
62 break;
63 case 87:
64 //w表示上 0
65 this.y-=this.speed;
66 this.direct=0;
67 mytank.style.backgroundPositionY="0px";
68 break;
69 }
70 //统一改变位置
71 mytank.style.left=this.x+"px";
72 mytank.style.top=this.y+"px";
73 }
74 }
75 //创建坦克
76 var hero=new MyTank(200,360,0)
77 </script>
78 </body>
79 </html>
