HTML5之坦克大战游戏开发
1.在使用arc方法进行画圆时,在IE9+，FF，Safari，Chrome等已经支持HTML5标准的浏览器中进行渲染时，采用逆时针方向画时，也就是说
arc(x, y, radius, startAngle, endAngle, counterclockwise) 中 counterclockwise值为true时，渲染存在问题。
解决方法：采用顺时针，即counterclockwise值为false
补充说明：在360安全浏览器中两种方法都可以。
2.移动坦克
1 <!Doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 </head> 6 <body onkeydown="moveTank()"> 7 <canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas> 8 <script type="text/javascript"> 9 10 //获取画布 11 var canvas_1 = document.getElementById("canvas"); 12 13 //获取上下文 14 var cxt = canvas_1.getContext("2d"); 15 16 //坦克构造函数 17 function Tank(x,y,direct) 18 { 19 this.x = x; 20 this.y = y; 21 this.speed = 1; 22 this.direct = direct; 23 this.moveUp = function() 24 { 25 this.y-= this.speed; 26 } 27 28 this.moveRight = function() 29 { 30 this.x+= this.speed; 31 } 32 33 this.moveDown = function() 34 { 35 this.y+= this.speed; 36 } 37 38 this.moveLeft = function() 39 { 40 this.x-= this.speed; 41 } 42 } 43 44 var tank = new Tank(10,10,0); 45 46 drawTank(tank); 47 48 //画坦克 49 function drawTank(tank) 50 { 51 //设置画笔颜色 52 cxt.fillStyle="#DED284"; 53 54 //画坦克左边轮子 55 cxt.fillRect(tank.x,tank.y,5,30); 56 57 //画坦克右边的轮子 58 cxt.fillRect(tank.x+15,tank.y,5,30); 59 60 //画坦克主体 61 cxt.fillRect(tank.x+6,tank.y+5,8,20); 62 63 //画坦克盖子 64 cxt.fillStyle="#FFD972"; 65 cxt.arc(tank.x+10,tank.y+15,4,0,360,false); 66 cxt.fill(); 67 68 //画坦克炮筒 69 cxt.strokeStyle="#FFD972"; 70 cxt.lineWidth = 2; 71 cxt.beginPath(); 72 cxt.moveTo(tank.x+10,tank.y+15); 73 cxt.lineTo(tank.x+10,tank.y); 74 cxt.closePath(); 75 cxt.stroke(); 76 } 77 78 //移动坦克 79 function moveTank() 80 { 81 var code = event.keyCode; 82 83 switch(code) 84 { 85 case 87: tank.moveUp();break; 86 case 68: tank.moveRight();break; 87 case 83: tank.moveDown();break; 88 case 65: tank.moveLeft();break; 89 } 90 91 //清除画布内容 92 cxt.clearRect(0,0,500,500); 93 94 drawTank(tank); 95 } 96 </script> 97 </body> 98 </html>
3.根据按键的方向来画坦克(运用OOP思想)
注：先插播一段上、下、左、右 按键的js代码
1 //获取canvas dom对象 2 var can = document.getElementById("move"); 3 4 //获取画笔对象 5 var cxt = can.getContext("2d"); 6 7 var ballX = 30; 8 var ballY = 30; 9 10 drawBall(); 11 12 //画圆 13 function drawBall() 14 { 15 cxt.beginPath(); 16 cxt.fillStyle = "red"; 17 cxt.arc(ballX,ballY,10,0,360,false); 18 cxt.closePath(); 19 20 cxt.fill(); 21 } 22 23 function moveBall() 24 { 25 var code = event.keyCode; 26 switch(code) 27 { 28 case 87: ballY--;break; 29 case 83: ballY++;break; 30 case 65: ballX--;break; 31 case 68: ballX++;break; 32 } 33 34 //每次重画之前要清除画布 35 cxt.clearRect(0,0,400,300); 36 37 drawBall(); 38 }
在drawTank方法中通过 语法switch case 来根据按键方向画tank.关键是要找准参考点
1 function drawTank(tank) 2 { 3 switch(tank.direct) 4 { 5 //向上 6 case 0: 7 //向下 8 case 2: 9 //添加画tank代码 10 //cxt 11 break; 12 13 //向右 14 case 1: 15 //向左 16 case 3: 17 break; 18 } 19 }
第一阶段学习汇报，哈哈，my tank moves freely
1 <!Doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <script type="text/javascript" src="tank.js"></script> 6 <script type="text/javascript" src="move.js"></script> 7 </head> 8 <body onkeydown="moveTank()" onload="initTank()"> 9 <canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas> 10 </body> 11 </html>
1 //坦克构造函数 2 function Tank(x,y,direct) 3 { 4 this.x = x; 5 this.y = y; 6 this.speed = 1; 7 this.direct = direct; 8 this.moveUp = function() 9 { 10 this.y-= this.speed; 11 this.direct = 0; 12 } 13 14 this.moveRight = function() 15 { 16 this.x+= this.speed; 17 this.direct = 1; 18 } 19 20 this.moveDown = function() 21 { 22 this.y+= this.speed; 23 this.direct = 2; 24 } 25 26 this.moveLeft = function() 27 { 28 this.x-= this.speed; 29 this.direct = 3; 30 } 31 }
1 var tank; 2 var canvas_1; 3 var cxt; 4 5 function initTank() 6 { 7 //获取画布 8 canvas_1 = document.getElementById("canvas"); 9 10 //获取上下文 11 cxt = canvas_1.getContext("2d"); 12 13 tank = new Tank(10,10,0); 14 15 drawTank(tank); 16 } 17 18 //画坦克 19 function drawTank(tank) 20 { 21 switch(tank.direct) 22 { 23 //向上和向下 24 case 0: 25 case 2: 26 //设置画笔颜色 27 cxt.fillStyle="#DED284"; 28 29 //画坦克左边轮子 30 cxt.fillRect(tank.x,tank.y,5,30); 31 32 //画坦克右边的轮子 33 cxt.fillRect(tank.x+15,tank.y,5,30); 34 35 //画坦克主体 36 cxt.fillRect(tank.x+6,tank.y+5,8,20); 37 38 //画坦克盖子 39 cxt.fillStyle="#FFD972"; 40 cxt.arc(tank.x+10,tank.y+15,4,0,360,false); 41 cxt.fill(); 42 43 //画坦克炮筒 44 cxt.strokeStyle="#FFD972"; 45 cxt.lineWidth = 2; 46 cxt.beginPath(); 47 cxt.moveTo(tank.x+10,tank.y+15); 48 49 //上和下主要就是tank的炮筒的方向的改变 50 if(0 == tank.direct) 51 { 52 cxt.lineTo(tank.x+10,tank.y); 53 } 54 else if(2 == tank.direct) 55 { 56 cxt.lineTo(tank.x+10,tank.y+30); 57 } 58 cxt.closePath(); 59 cxt.stroke(); 60 break; 61 62 //向左和向右 63 case 1: 64 case 3: 65 cxt.fillStyle="#DED284"; 66 cxt.fillRect(tank.x,tank.y,30,5); 67 cxt.fillRect(tank.x,tank.y+15,30,5); 68 cxt.fillRect(tank.x+5,tank.y+6,20,8); 69 70 cxt.fillStyle="#FFD972"; 71 cxt.arc(tank.x+15,tank.y+10,4,0,360,false); 72 cxt.fill(); 73 74 cxt.strokeStyle="#FFD972"; 75 cxt.lineWidth = 2; 76 cxt.beginPath(); 77 cxt.moveTo(tank.x+15,tank.y+10); 78 79 if(1 == tank.direct) 80 { 81 cxt.lineTo(tank.x+30,tank.y+10); 82 } 83 else if(3 == tank.direct) 84 { 85 cxt.lineTo(tank.x,tank.y+10); 86 } 87 cxt.closePath(); 88 cxt.stroke(); 89 break; 90 } 91 92 } 93 94 //移动坦克 95 function moveTank() 96 { 97 var code = event.keyCode; 98 99 switch(code) 100 { 101 case 87: tank.moveUp();break; 102 case 68: tank.moveRight();break; 103 case 83: tank.moveDown();break; 104 case 65: tank.moveLeft();break; 105 } 106 107 //清除画布内容 108 cxt.clearRect(0,0,500,500); 109 110 drawTank(tank); 111 }
