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;500px;height:400px;position:absolute;"></div> 10 <div id="mytank" style="background:url(w.png) no-repeat;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>