坦克尺寸如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>坦克大战</title> 6 </head> 7 <body onkeydown="tankMove()"> 8 <canvas id="canvas" width="1000" height="500" style="border:1px solid red; display:block; margin:50px auto;">浏览器不支持</canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext("2d"); 12 //构造方法，创建一个坦克类 13 function Tank(x, y, direct, speed) { 14 this.x = x; 15 this.y = y; 16 this.direct = direct; 17 this.speed = speed; 18 this.moveUp = function () { 19 this.y -= this.speed; 20 } 21 this.moveDown = function () { 22 this.y += this.speed; 23 } 24 this.moveLeft = function () { 25 this.x -= this.speed; 26 } 27 this.moveRight = function () { 28 this.x += this.speed; 29 } 30 } 31 var hero = new Tank(100, 60, 1, 5); 32 function drawTank(tank) { 33 switch (tank.direct) { 34 case 0: 35 case 2: 36 //向左，向右 37 //清空画布 38 context.clearRect(0, 0, canvas.width, canvas.height); 39 //开始画坦克 40 //上轮 41 context.fillStyle = "red"; 42 context.fillRect(hero.x, hero.y, 30, 5); 43 context.fill(); 44 //下轮 45 context.fillRect(hero.x, hero.y + 15, 30, 5); 46 context.fill(); 47 //中间 48 context.fillStyle = "green"; 49 context.fillRect(hero.x + 5, hero.y + 6, 20, 8); 50 context.fill(); 51 //盖子 52 context.beginPath()//加个开始，不然炮筒会粘连 53 context.fillStyle = "blue"; 54 context.arc(hero.x + 15, hero.y + 10, 3, 0, 2 * Math.PI); 55 context.fill(); 56 context.closePath(); 57 //炮筒 58 context.beginPath(); 59 context.strokeStyle = "black"; 60 context.lineWidth = "0.5"; 61 context.moveTo(hero.x + 15, hero.y + 10); 62 if (tank.direct == 0) { 63 context.lineTo(hero.x, hero.y + 10); 64 } else if (tank.direct == 2) { 65 context.lineTo(hero.x + 30, hero.y + 10); 66 } 67 context.stroke(); 68 context.closePath(); 69 break; 70 case 1: 71 case 3: 72 //向上，向下 73 //清空画布 74 context.clearRect(0, 0, canvas.width, canvas.height); 75 //开始画坦克 76 //左轮 77 context.fillStyle = "red"; 78 context.fillRect(hero.x, hero.y, 5, 30); 79 context.fill(); 80 //右轮 81 context.fillRect(hero.x + 15, hero.y, 5, 30); 82 context.fill(); 83 //中间 84 context.fillStyle = "green"; 85 context.fillRect(hero.x + 6, hero.y + 5, 8, 20); 86 context.fill(); 87 //盖子 88 context.beginPath()//加个开始，不然炮筒会粘连 89 context.fillStyle = "blue"; 90 context.arc(hero.x + 10, hero.y + 15, 3, 0, 2 * Math.PI); 91 context.fill(); 92 //炮筒 93 context.beginPath(); 94 context.strokeStyle = "black"; 95 context.lineWidth = "0.5"; 96 context.moveTo(hero.x + 10, hero.y + 15); 97 if (tank.direct == 1) { 98 context.lineTo(hero.x + 10, hero.y); 99 } else if (tank.direct == 3) { 100 context.lineTo(hero.x + 10, hero.y + 30); 101 } 102 context.stroke(); 103 break; 104 default: 105 106 } 107 108 } 109 function tankMove() { 110 switch (event.keyCode) { 111 case 65://左A 112 hero.direct = 0; 113 hero.moveLeft(); 114 break;//不要忘记break！ 115 case 68://右D 116 hero.direct = 2; 117 hero.moveRight(); 118 break; 119 case 87://上W 120 hero.direct = 1; 121 hero.moveUp(); 122 break; 123 case 83://下S 124 hero.direct = 3; 125 hero.moveDown(); 126 break; 127 //68 87 83 128 default: 129 } 130 drawTank(hero); 131 //alert(event.keyCode); 132 } 133 drawTank(hero); 134 </script> 135 </body> 136 </html>