1、项目背景

2021年春节期间在家无聊，正好又学过一些前端的知识，因此就捣鼓了一款基于html5的小游戏——《坦克大战》。这款小游戏是参照了一个“移动的女孩”的demo（如下图）可以通过方向键移动女孩。

demo代码： https://gitee.com/wulinchun/front-end/tree/master/ html移动的女孩

2、项目展示

绿色坦克为玩家坦克，方向键控制玩家坦克移动，空格发射子弹。如果被击中就会在左上角重生。

黄色坦克为敌方坦克，会随机出现在画布中，会自己移动+发射子弹。如果被击中就会在随机位置重生。

3、设计思路

3.1、坦克移动

坦克移动就是根据坐标x,y在canvas画布相应位置上画出坦克。坦克一共有四个坐标（x,y,imageX,imageY)，坦克设计的图片如下所示：包括上下左右四个方向为一张坦克设计图。（x,y)对应的是一整张坦克图片在canvas画布中的坐标位置。而（imageX,imageY）对应的是在一整张包含上下左右四个方向的坦克设计图中，选取哪块图片。简单来说(x,y)控制出现的位置，（imageX,imageY)控制呈现的方向。

3.1.1、玩家坦克

玩家坦克的移动是用了js的键盘事件+setInterval方法。使用setInterval方法每隔指定时间会在画布上绘制坦克的最新位置。然后再将之前的位置清除掉。就是将坦克图像一帧一帧地绘制在画布上。

3.1.2、敌方坦克

敌方坦克的移动原理和玩家坦克的移动原理一样，只不过将玩家坦克通过键盘控制坦克移动变成了由随机数确立一个move数组，在这个move数组中会存放坦克移动信息，然后直接读取这个数组获取坦克该怎么移动就行了

3.2、坦克开火

首先，子弹飞行的原理和坦克移动的原理一样，都是使用了setInterval方法一帧一帧的绘制在画布上，然后根据坦克的炮口方向不同，子弹飞行也有不同的方向。因此子弹也有四个坐标（x,y,imageX,imageY)

3.3、击中坦克

如何确定子弹是否击中了坦克？通过比较子弹飞行时的坐标与每辆坦克的坐标，来确定子弹是否击中了坦克，如果击中坦克，就会触发一个“bomb!!!”的效果。我这里做掉比较简陋，就是放一张爆炸效果图，把这张效果图的坐标设置成被击中坦克的坐标就行了。然后被击中的坦克会在其他地方复活（通过改变坦克坐标x,y实现）

4、实现代码

代码下载地址：https://gitee.com/wulinchun/front-end/tree/master/ 使用jquery—Canvas实现html5小游戏——《坦克大战》

tank.js

$(document).ready(function() {// canvasvar canvas = document.getElementById('demo');var ctx = canvas.getContext('2d'); //画布上的绘图环境为“2D”//绘制Canvas画布大小function drawCanvas() {canvas.width = 1400;canvas.height = 700;}//判断玩家坦克目前的方向var directUp = 1; //初始状态为"Up"var directDown = 0;var directLeft = 0;var directRight = 0;//判断敌方坦克目前的方向（有两辆敌方坦克，所以是一个数组）var enemydirectUp = [1, 1]; //初始状态为"Up"var enemydirectDown = [0, 0];var enemydirectLeft = [0, 0];var enemydirectRight = [0, 0];//玩家坦克信息var playerImage = new Image();playerImage.src = 'img/tank.png';var player = {x: 0, // 在canvas中的坐标y: 0,imageX: 150, // 图像定位坐标imageY: 0,width: 120, // 图像显示区域大小height: 100,stop: true // 是否停止};//敌方坦克信息var enemyImage = new Image();enemyImage.src = 'img/enemy.png';var enemy = [{x: Math.round(Math.random() * 1300), // 在canvas中的坐标(随机)y: Math.round(Math.random() * 600),imageX: 150, // 图像定位坐标imageY: 0,width: 120, // 图像显示区域大小height: 100,stop: true // 是否停止},{x: Math.round(Math.random() * 1400), // 在canvas中的坐标(随机)y: Math.round(Math.random() * 700),imageX: 150, // 图像定位坐标imageY: 0,width: 120, // 图像显示区域大小height: 100,stop: true // 是否停止}];//击中的爆炸效果信息（三辆坦克分别对应一个爆炸效果）var bombImage = new Image();bombImage.src = 'img/bomb.png';var bomb = [{x: -200, // 在canvas中的坐标(隐藏)y: -200,imageX: 0, // 图像定位坐标imageY: 0,width: 150, // 图像显示区域大小height: 120,stop: true // 是否停止},{x: -100, // 在canvas中的坐标(隐藏)y: -100,imageX: 0, // 图像定位坐标imageY: 0,width: 150, // 图像显示区域大小height: 120,stop: true // 是否停止},{x: -100, // 在canvas中的坐标(隐藏)y: -100,imageX: 0, // 图像定位坐标imageY: 0,width: 150, // 图像显示区域大小height: 120,stop: true // 是否停止}];//移动数组（负责控制坦克的前进方向）var moveArray_enemy = new Array();for (var i = 0; i < 2; i++) {moveArray_enemy[i] = new Array();for (var j = 0; j < 500; j++) {moveArray_enemy[i][j] = '';}}//子弹信息（因为是三辆坦克，所以是子弹数组）var bulletImage = new Image();bulletImage.src = 'img/bullet.png';var bullet = [{x: 0, // 在canvas中的坐标y: 0,imageX: 0, // 图像定位坐标imageY: 0,width: 27, // 图像显示区域大小height: 27,stop: true // 是否停止},{x: 0, // 在canvas中的坐标y: 0,imageX: 0, // 图像定位坐标imageY: 0,width: 27, // 图像显示区域大小height: 27,stop: true // 是否停止},{x: 0, // 在canvas中的坐标y: 0,imageX: 0, // 图像定位坐标imageY: 0,width: 27, // 图像显示区域大小height: 27,stop: true // 是否停止}];/*** 清除画布上的内容*/function clean() {// clear canvasctx.clearRect(0, 0, canvas.width, canvas.height);}/*** 初始化玩家坦克*/function playerInit() {playerImage.onload = _drawPlayer; //onload加载图片，_drawPlayer在画布中绘制图像console.log('canvas：' + canvas.width + canvas.height)}/*** 初始化敌方坦克*/function enemyInit() {enemyImage.onload = _drawEnemy;/*** 使用随机数，随机生成“上”，“下”，“左”，“右”，“开火”坦克的四个动作*/for (var m = 0; m < moveArray_enemy.length; m++) {for (var i = 0; i < moveArray_enemy[0].length;) {var directRandom = Math.round(Math.random() * 150);console.log(directRandom);if (directRandom <= 20) {var j = i + Math.round(Math.random() * 20);while (i < j) {moveArray_enemy[m][i] = 'up'; //upi++;}} else if (directRandom > 20 && directRandom <= 40) {var j = i + Math.round(Math.random() * 20);while (i < j) {moveArray_enemy[m][i] = 'down'; //downi++;}} else if (directRandom > 40 && directRandom <= 60) {var j = i + Math.round(Math.random() * 20);while (i < j) {moveArray_enemy[m][i] = 'left'; //lefti++;}} else if (directRandom > 60 && directRandom <= 80) {var j = i + Math.round(Math.random() * 20);while (i < j) {moveArray_enemy[m][i] = 'right'; //righti++;}} else if (directRandom > 80 && directRandom <= 150) {moveArray_enemy[m][i] = 'fire'; //firei++;}console.log('数组[' + m + ']' + '[' + i + ']' + '值为:' + moveArray_enemy[m][i]);}}/*** 使用定时函数，每隔2毫秒调用一次enemyMove，enemyMove函数的作用是使坦克移动起来*/var k = 0;var enemyTank = window.setInterval(function() {enemyMove(moveArray_enemy[0][k], 0);enemyMove(moveArray_enemy[1][k], 1);if (k == moveArray_enemy[0].length) {clearInterval(enemyTank);}k++;},200);console.log("enemy Move");}/*** 加载玩家坦克，并引入键盘事件，键盘控制坦克*/function drawPlayerTank() {playerInit();eventjs.bind(document, 'keydown', function(event) {var d = eventjs.getDirection(event);player.stop = true;playerAction(d, 0);});eventjs.bind(document, 'keyup', function(event) {var d = eventjs.getDirection(event);player.stop = false;playerAction(d, 0);});}/*** 引入初始化敌方坦克*/function drawEnemy() {enemyInit();}/*** 分别引入画布，玩家坦克，敌人坦克*/var initCanvas = drawCanvas();var initTank = drawPlayerTank();var initEnemy = drawEnemy();/*** @param {Object} value* @param {Object} index  //标明用到了哪个子弹，哪个爆炸效果* 玩家坦克动作*/function playerMove(value, index) {if ('right' === value) {directRight = 1;directDown = 0;directUp = 0;directLeft = 0;player.imageX = 280;player.imageY = 0;player.x += 20; //玩家坦克速度clean();console.log("right y=" + player.y + " x=" + player.x);} else if ('left' === value) {directLeft = 1;directRight = 0;directUp = 0;directDown = 0;player.imageX = 0;player.imageY = 0;player.x -= 20; //玩家坦克速度clean();console.log("left y=" + player.y + " x=" + player.x);} else if ('up' == value) {directUp = 1;directRight = 0;directDown = 0;directLeft = 0;player.imageX = 150;player.imageY = 0;player.y -= 20; //玩家坦克速度clean();console.log("up y=" + player.y + " x=" + player.x);} else if ('down' == value) {directDown = 1;directRight = 0;directUp = 0;directLeft = 0;player.imageX = 150;player.imageY = 100;player.y += 20; //玩家坦克速度clean();console.log("down y=" + player.y + " x=" + player.x);} else if ('fire' == value) {/*** 根据坦克目前的方向，判断出子弹的射向*/if (directUp == 1) {bullet[index].imageX = 20;bullet[index].imageY = 0;bullet[index].x = player.x + 35;bullet[index].y = player.y + 50;/*** 使用定时函数setInterval实现子弹一帧一帧的飞行效果*/var bulletFlyUp = window.setInterval(function() {console.log("发射了Up子弹");bullet[index].y -= 20; //子弹飞行速度console.log(bullet[index].x + "," + bullet[index].y);//如果向上发射的子弹击中了敌人坦克0if (bullet[index].x + 50 >= enemy[0].x && bullet[index].x - 50 <= enemy[0].x &&bullet[index].y + 20 >= enemy[0].y && bullet[index].y - 20 <= enemy[0].y) {bomb[index].x = enemy[0].x;bomb[index].y = enemy[0].y;clearInterval(bulletFlyUp); //击中后就清除子弹，防止子弹继续飞行enemy[0].x = Math.round(Math.random() * 1400); //设置敌人坦克0的复活地点（随机）enemy[0].y = Math.round(Math.random() * 700);}//如果向上发射的子弹击中了敌人坦克1if (bullet[index].x + 50 >= enemy[1].x && bullet[index].x - 50 <= enemy[1].x &&bullet[index].y + 20 >= enemy[1].y && bullet[index].y - 20 <= enemy[1].y) {bomb[index].x = enemy[1].x;bomb[index].y = enemy[1].y;clearInterval(bulletFlyUp); //击中后就清除子弹，防止子弹继续飞行enemy[1].x = Math.round(Math.random() * 1400); //设置敌人坦克1的复活地点（随机）enemy[1].y = Math.round(Math.random() * 700);}clean();_drawBullet(index);_drawPlayer();_drawEnemy();_drawBomb(index);bomb[index].x = -200; //初始化爆炸效果的出现位置bomb[index].y = -200;//超出画布，则子弹停止飞行并清除子弹if (bullet[index].x >= 1400 || bullet[index].y >= 700 || bullet[index].x <= 0 || bullet[index].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyUp);}}, 100);} else if (directDown == 1) {bullet[index].imageX = 20;bullet[index].imageY = 30;bullet[index].x = player.x + 35;bullet[index].y = player.y + 50;/*** 使用定时函数setInterval实现子弹一帧一帧的飞行效果*/var bulletFlyDown = window.setInterval(function() {console.log("发射了Down子弹");bullet[index].y += 20; //子弹飞行速度console.log(bullet[index].x + "," + bullet[index].y);//如果向下发射的子弹击中了敌人坦克0if (bullet[index].x + 50 >= enemy[0].x && bullet[index].x - 50 <= enemy[0].x &&bullet[index].y + 20 >= enemy[0].y && bullet[index].y - 20 <= enemy[0].y) {bomb[index].x = enemy[0].x;bomb[index].y = enemy[0].y;clearInterval(bulletFlyDown);enemy[0].x = Math.round(Math.random() * 1400); //设置敌人坦克0的复活地点（随机）enemy[0].y = Math.round(Math.random() * 700);}如果向下发射的子弹击中了敌人坦克1if (bullet[index].x + 50 >= enemy[1].x && bullet[index].x - 50 <= enemy[1].x &&bullet[index].y + 20 >= enemy[1].y && bullet[index].y - 20 <= enemy[1].y) {bomb[index].x = enemy[1].x;bomb[index].y = enemy[1].y;//_drawBomb(index);clearInterval(bulletFlyDown);enemy[1].x = Math.round(Math.random() * 1400); //设置敌人坦克1的复活地点（随机）enemy[1].y = Math.round(Math.random() * 700);}clean();_drawBullet(index);_drawPlayer();_drawEnemy();_drawBomb(index);bomb[index].x = -200; //初始化爆炸效果的出现位置bomb[index].y = -200;//超出画布，则子弹停止飞行并清除子弹if (bullet[index].x >= 1400 || bullet[index].y >= 700 || bullet[index].x <= 0 || bullet[index].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyDown);}}, 100);} else if (directLeft == 1) {bullet[index].imageX = 0;bullet[index].imageY = 0;bullet[index].x = player.x + 20;bullet[index].y = player.y + 24;/*** 使用定时函数setInterval实现子弹一帧一帧的飞行效果*/var bulletFlyLeft = window.setInterval(function() {console.log("发射了Left子弹");bullet[index].x -= 20; //子弹飞行速度console.log(bullet[index].x + "," + bullet[index].y);//如果向左发射的子弹击中了敌人坦克0if (bullet[index].x + 20 >= enemy[0].x && bullet[index].x - 20 <= enemy[0].x &&bullet[index].y + 50 >= enemy[0].y && bullet[index].y - 50 <= enemy[0].y) {bomb[index].x = enemy[0].x;bomb[index].y = enemy[0].y;clearInterval(bulletFlyLeft);enemy[0].x = Math.round(Math.random() * 1400); //设置敌人坦克0的复活地点（随机enemy[0].y = Math.round(Math.random() * 700);}//如果向左发射的子弹击中了敌人坦克1if (bullet[index].x + 20 >= enemy[1].x && bullet[index].x - 20 <= enemy[1].x &&bullet[index].y + 50 >= enemy[1].y && bullet[index].y - 50 <= enemy[1].y) {bomb[index].x = enemy[1].x;bomb[index].y = enemy[1].y;clearInterval(bulletFlyLeft);enemy[1].x = Math.round(Math.random() * 1400); //设置敌人坦克1的复活地点（随机enemy[1].y = Math.round(Math.random() * 700);}clean();_drawBullet(index);_drawPlayer();_drawEnemy();_drawBomb(index);bomb[index].x = -200; //初始化爆炸效果的出现位置bomb[index].y = -200;if (bullet[index].x >= 1400 || bullet[index].y >= 700 || bullet[index].x <= 0 || bullet[index].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyLeft);}}, 100);} else if (directRight == 1) {bullet[index].imageX = 40;bullet[index].imageY = 0;bullet[index].x = player.x + 70;bullet[index].y = player.y + 24;/*** 使用定时函数setInterval实现子弹一帧一帧的飞行效果*/var bulletFlyRight = window.setInterval(function() {console.log("发射了Right子弹");bullet[index].x += 20; //子弹飞行速度//如果向右发射的子弹击中了敌人坦克0if (bullet[index].x + 20 >= enemy[0].x && bullet[index].x - 20 <= enemy[0].x &&bullet[index].y + 50 >= enemy[0].y && bullet[index].y - 50 <= enemy[0].y) {bomb[index].x = enemy[0].x;bomb[index].y = enemy[0].y;clearInterval(bulletFlyRight);enemy[0].x = Math.round(Math.random() * 1400); //设置敌人坦克0的复活地点（随机）enemy[0].y = Math.round(Math.random() * 700);}//如果向右发射的子弹击中了敌人坦克1if (bullet[index].x + 20 >= enemy[1].x && bullet[index].x - 20 <= enemy[1].x &&bullet[index].y + 50 >= enemy[1].y && bullet[index].y - 50 <= enemy[1].y) {bomb[index].x = enemy[1].x;bomb[index].y = enemy[1].y;clearInterval(bulletFlyRight);enemy[1].x = Math.round(Math.random() * 1400); //设置敌人坦克1的复活地点（随机）enemy[1].y = Math.round(Math.random() * 700);}clean();_drawBullet(index);_drawPlayer();_drawEnemy();_drawBomb(index);bomb[index].x = -200; //初始化爆炸效果的出现位置bomb[index].y = -200;if (bullet[index].x >= 1400 || bullet[index].y >= 700 || bullet[index].x <= 0 || bullet[index].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyRight);}}, 100);}}_drawPlayer();_drawEnemy();}/*** @param {Object} value* @param {Object} index* 敌方坦克动作（逻辑同“playerMove方法”*/function enemyMove(value, index) {/*** 限制敌方坦克移动不会超过画布，如果超过画布就会被弹回*/if (enemy[index].x >= canvas.width - 20) {enemy[index].x -= 100;} else if (enemy[index].y > canvas.height - 20) {enemy[index].y -= 100;} else if (enemy[index].x < 20) {enemy[index].x += 100;} else if (enemy[index].y < 20) {enemy[index].y += 100;}if ('right' == value) {enemydirectRight[index] = 1;enemydirectDown[index] = 0;enemydirectUp[index] = 0;enemydirectLeft[index] = 0;enemy[index].imageX = 280;enemy[index].imageY = 0;enemy[index].x += 15;clean();console.log("right y=" + enemy[index].y + " x=" + enemy[index].x);} else if ('left' == value) {enemydirectLeft[index] = 1;enemydirectRight[index] = 0;enemydirectUp[index] = 0;enemydirectDown[index] = 0;enemy[index].imageX = 0;enemy[index].imageY = 0;enemy[index].x -= 15;clean();console.log("left y=" + enemy[index].y + " x=" + enemy[index].x);} else if ('up' == value) {enemydirectUp[index] = 1;enemydirectRight[index] = 0;enemydirectDown[index] = 0;enemydirectLeft[index] = 0;enemy[index].imageX = 150;enemy[index].imageY = 0;enemy[index].y -= 15;clean();console.log("up y=" + enemy[index].y + " x=" + enemy[index].x);} else if ('down' == value) {enemydirectDown[index] = 1;enemydirectRight[index] = 0;enemydirectUp[index] = 0;enemydirectLeft[index] = 0;enemy[index].imageX = 150;enemy[index].imageY = 100;enemy[index].y += 15;clean();console.log("down y=" + enemy[index].y + " x=" + enemy[index].x);} else if ('fire' == value) {console.log("敌方发射了子弹");console.log("Up：" + enemydirectUp[index]);console.log("Down：" + enemydirectDown[index]);console.log("Left：" + enemydirectLeft[index]);console.log("Right：" + enemydirectRight[index]);var index_1 = index + 1;if (enemydirectUp[index] == 1) {bullet[index_1].imageX = 20;bullet[index_1].imageY = 0;bullet[index_1].x = enemy[index].x + 35;bullet[index_1].y = enemy[index].y + 50;var bulletFlyUp = window.setInterval(function() {console.log("发射了Up子弹");bullet[index_1].y -= 20;console.log(bullet[index_1].x + "," + bullet[index_1].y);if (bullet[index_1].x + 50 >= enemy[0].x && bullet[index_1].x - 50 <= enemy[0].x &&bullet[index_1].y + 20 >= enemy[0].y && bullet[index_1].y - 20 <= enemy[0].y) {bomb[index_1].x = enemy[0].x;bomb[index_1].y = enemy[0].y;clearInterval(bulletFlyUp);enemy[0].x = Math.round(Math.random() * 1400); //设置敌方坦克0的复活地点enemy[0].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 50 >= enemy[1].x && bullet[index_1].x - 50 <= enemy[1].x &&bullet[index_1].y + 20 >= enemy[1].y && bullet[index_1].y - 20 <= enemy[1].y) {bomb[index_1].x = enemy[1].x;bomb[index_1].y = enemy[1].y;clearInterval(bulletFlyUp);enemy[1].x = Math.round(Math.random() * 1400); //设置敌方坦克1的复活地点enemy[1].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 50 >= player.x && bullet[index_1].x - 50 <= player.x &&bullet[index_1].y + 20 >= player.y && bullet[index_1].y - 20 <= player.y) {bomb[index_1].x = player.x;bomb[index_1].y = player.y;clearInterval(bulletFlyUp);player.x = 0; //设置玩家坦克的复活地点player.y = 0;}clean();_drawBullet(index_1);_drawPlayer();_drawEnemy();_drawBomb(index_1);bomb[index_1].x = -200;bomb[index_1].y = -200;if (bullet[index_1].x >= 1400 || bullet[index_1].y >= 700 || bullet[index_1].x <= 0 || bullet[index_1].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyUp);}}, 100);} else if (enemydirectDown[index] == 1) {bullet[index_1].imageX = 20;bullet[index_1].imageY = 30;bullet[index_1].x = enemy[index].x + 35;bullet[index_1].y = enemy[index].y + 50;var bulletFlyDown = window.setInterval(function() {console.log("发射了Down子弹");bullet[index_1].y += 20;console.log(bullet[index_1].x + "," + bullet[index_1].y);if (bullet[index_1].x + 50 >= enemy[0].x && bullet[index_1].x - 50 <= enemy[0].x &&bullet[index_1].y + 20 >= enemy[0].y && bullet[index_1].y - 20 <= enemy[0].y) {bomb[index_1].x = enemy[0].x;bomb[index_1].y = enemy[0].y;clearInterval(bulletFlyDown);enemy[0].x = Math.round(Math.random() * 1400); //设置enemy0的复活地点enemy[0].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 50 >= enemy[1].x && bullet[index_1].x - 50 <= enemy[1].x &&bullet[index_1].y + 20 >= enemy[1].y && bullet[index_1].y - 20 <= enemy[1].y) {bomb[index_1].x = enemy[1].x;bomb[index_1].y = enemy[1].y;clearInterval(bulletFlyDown);enemy[1].x = Math.round(Math.random() * 1400); //设置enemy1的复活地点enemy[1].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 50 >= player.x && bullet[index_1].x - 50 <= player.x &&bullet[index_1].y + 20 >= player.y && bullet[index_1].y - 20 <= player.y) {bomb[index_1].x = player.x;bomb[index_1].y = player.y;clearInterval(bulletFlyDown);player.x = 0; //设置player的复活地点player.y = 0;}clean();_drawBullet(index_1);_drawPlayer();_drawEnemy();_drawBomb(index_1);bomb[index_1].x = -200;bomb[index_1].y = -200;if (bullet[index_1].x >= 1400 || bullet[index_1].y >= 700 || bullet[index_1].x <= 0 || bullet[index_1].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyDown);}}, 100);} else if (enemydirectLeft[index] == 1) {bullet[index_1].imageX = 0;bullet[index_1].imageY = 0;bullet[index_1].x = enemy[index].x + 20;bullet[index_1].y = enemy[index].y + 24;var bulletFlyLeft = window.setInterval(function() {console.log("发射了Left子弹");bullet[index_1].x -= 20;console.log(bullet[index_1].x + "," + bullet[index_1].y);if (bullet[index_1].x + 20 >= enemy[0].x && bullet[index_1].x - 20 <= enemy[0].x &&bullet[index_1].y + 50 >= enemy[0].y && bullet[index_1].y - 50 <= enemy[0].y) {bomb[index_1].x = enemy[0].x;bomb[index_1].y = enemy[0].y;clearInterval(bulletFlyLeft);enemy[0].x = Math.round(Math.random() * 1400); //设置enemy0的复活地点enemy[0].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 20 >= enemy[1].x && bullet[index_1].x - 20 <= enemy[1].x &&bullet[index_1].y + 50 >= enemy[1].y && bullet[index_1].y - 50 <= enemy[1].y) {bomb[index_1].x = enemy[1].x;bomb[index_1].y = enemy[1].y;clearInterval(bulletFlyLeft);enemy[1].x = Math.round(Math.random() * 1400); //设置enemy1的复活地点enemy[1].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 20 >= player.x && bullet[index_1].x - 20 <= player.x &&bullet[index_1].y + 50 >= player.y && bullet[index_1].y - 50 <= player.y) {bomb[index_1].x = player.x;bomb[index_1].y = player.y;clearInterval(bulletFlyLeft);player.x = 0; //设置player的复活地点player.y = 0;}clean();_drawBullet(index_1);_drawPlayer();_drawEnemy();_drawBomb(index_1);bomb[index_1].x = -200;bomb[index_1].y = -200;if (bullet[index_1].x >= 1400 || bullet[index_1].y >= 700 || bullet[index_1].x <= 0 || bullet[index_1].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyLeft);}}, 100);} else if (enemydirectRight[index] == 1) {bullet[index_1].imageX = 40;bullet[index_1].imageY = 0;bullet[index_1].x = enemy[index].x + 70;bullet[index_1].y = enemy[index].y + 24;var bulletFlyRight = window.setInterval(function() {console.log("发射了Right子弹");bullet[index_1].x += 20;console.log(bullet[index_1].x + "," + bullet[index_1].y);if (bullet[index_1].x + 20 >= enemy[0].x && bullet[index_1].x - 20 <= enemy[0].x &&bullet[index_1].y + 50 >= enemy[0].y && bullet[index_1].y - 50 <= enemy[0].y) {bomb[index_1].x = enemy[0].x;bomb[index_1].y = enemy[0].y;clearInterval(bulletFlyRight);enemy[0].x = Math.round(Math.random() * 1400); //设置enemy0的复活地点enemy[0].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 20 >= enemy[1].x && bullet[index_1].x - 20 <= enemy[1].x &&bullet[index_1].y + 50 >= enemy[1].y && bullet[index_1].y - 50 <= enemy[1].y) {bomb[index_1].x = enemy[1].x;bomb[index_1].y = enemy[1].y;clearInterval(bulletFlyRight);enemy[1].x = Math.round(Math.random() * 1400); //设置enemy1的复活地点enemy[1].y = Math.round(Math.random() * 700);}if (bullet[index_1].x + 20 >= player.x && bullet[index_1].x - 20 <= player.x &&bullet[index_1].y + 50 >= player.y && bullet[index_1].y - 50 <= player.y) {bomb[index_1].x = player.x;bomb[index_1].y = player.y;clearInterval(bulletFlyRight);player.x = 0; //设置player的复活地点player.y = 0;}clean();_drawBullet(index_1);_drawPlayer();_drawEnemy();_drawBomb(index_1);bomb[index_1].x = -200;bomb[index_1].y = -200;if (bullet[index_1].x >= 1400 || bullet[index_1].y >= 700 || bullet[index_1].x <= 0 || bullet[index_1].y <= 0) {console.log("子弹飞行停止");clearInterval(bulletFlyRight);}}, 100);}}_drawPlayer();_drawEnemy();}/*** 在画布上绘制玩家坦克*/function _drawPlayer() {ctx.drawImage(playerImage, player.imageX, player.imageY, player.width, player.height, player.x, player.y, player.width,player.height);}/*** 在画布上绘制敌方坦克*/function _drawEnemy() {for (var i = 0; i < 2; i++) { //两辆敌方坦克ctx.drawImage(enemyImage, enemy[i].imageX, enemy[i].imageY, enemy[i].width, enemy[i].height, enemy[i].x, enemy[i].y,enemy[i].width,enemy[i].height);}}/*** @param {Object} index  index参数表示是哪辆坦克的子弹，0为玩家坦克子弹，1为敌方坦克0子弹，2为敌方坦克1子弹*  在画布上绘制子弹*/function _drawBullet(index) {ctx.drawImage(bulletImage, bullet[index].imageX, bullet[index].imageY, bullet[index].width, bullet[index].height,bullet[index].x,bullet[index].y, bullet[index].width,bullet[index].height);}/*** @param {Object} index index参数表示是哪辆坦克被击中爆炸了，0为玩家坦克爆炸，1为敌方坦克0爆炸，2为敌方坦克1爆炸* 绘制爆炸效果*/function _drawBomb(index) {ctx.drawImage(bombImage, bomb[index].imageX, bomb[index].imageY, bomb[index].width, bomb[index].height,bomb[index].x,bomb[index].y, bomb[index].width,bomb[index].height);}/*** @param {Object} value* @param {Object} index* 对玩家坦克的移动进行边界控制，即限制玩家坦克开出画布*/function playerAction(value, index) {var posX = 0;var posY = 0;switch (value) {case 'up':if (player.y < 5) {return;};playerMove(value, index);break;break;case 'right':posX = player.x + player.width;if (posX >= canvas.width) {return;};playerMove(value, index);break;case 'down':posY = player.y + player.height;if (posY >= canvas.height) {return;};playerMove(value, index);break;case 'left':if (player.x < 5) {return;};playerMove(value, index);break;case 'fire':playerMove(value, index);break;};return {x: player.x,y: player.y};}
});/*** 键盘事件*/
var eventjs = {//添加事件bind: function(elem, type, handler) {if (elem.addEventListener) {elem.addEventListener(type, handler, false);} else if (elem.attachEvent) {//IEelem.attachEvent("on" + type, handler);} else {elem["on" + type] = handler;};},//删除事件unbind: function(elem, type, handler) {if (elem.removeEventListener) {elem.removeEventListener(type, handler, false);} else if (elem.detachEvent) {//IEelem.detachEvent("on" + type, handler)} else {elem["on" + type] = handler;};},//获取事件getEvent: function(event) {return event ? event : window.event;},//获取事件目标getTarget: function(event) {return event.target || event.srcElement;},//相关元素relatedTarget: function(event) {if (event.relatedTarget) {return event.relatedTarget;} else if (event.toElement) {return event.toElement;} else if (event.formElement) {return event.formElement;} else {return null;};},//阻止默认行为preventDefault: function(event) {if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}},//取消捕获/冒泡cancelBubble: function(event) {if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;};},//获取鼠标按钮getMouseButton: function(event) {if (document.implementation.hasFeature("MouseEvents", "2.0")) {return event.button;} else {switch (event.button) {case 0:case 1:case 3:case 5:case 7:return 0;case 2:case 6:return 2;case 4:return 1;}};},//获取键盘codegetCharCode: function(event) {if (typeof event.charCode == "number") {console.log('char code');return event.charCode;} else {return event.keyCode;};},getDirection: function(event) {var keyCode = event.which || event.keyCode;switch (keyCode) {case 38:return 'up';break;case 40:return 'down';break;case 37:return 'left';break;case 39:return 'right';break;case 32:return 'fire';break;}}
};

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/tank.js"></script></head><body><canvas id="demo" style="border:1px solid #ddd;">您的浏览器不支持canvas标签。</canvas></body>
</html>

5、总结

这款游戏做的很粗糙很简陋，代码写得也挺复杂的。因为明天要上班所以就不继续优化了。我只是提供一个demo。

html取代flash是必然的趋势，随着游览器的升级，以及flash的慢慢停更，以后的浏览器可能就无法支持flash插件了，因此许多像4399,7K7K这些flash小游戏逐渐的就无法玩了。当然如果把那些网页flash小游戏全部做成html的，那么也可以在浏览器上玩这些小游戏。但很少甚至不会有人去做。因为随着移动技术的发展，以及像微信小程序这种技术。以前玩flash小游戏就是图这些小游戏加载起来快，不用安装，即点即玩，消磨时间。但现在智能手机的普及带动了手游的繁荣，微信小程序完美复刻了以前的网页flash小游戏的感觉。

https://mp.weixin.qq.com/s/TqZRynxO_X-ZjyKf4bHqkQ 《“爷青结”！Flash Player正式停止支持服务，《黄金矿工》、4399终究是到了结束的这一天......》

这是之前微信上看到的文章，也许几年以后，4399，7K7K这些flash小游戏，就会像上世纪的红白机游戏一样隐退江湖。

使用jquery—Canvas实现html5小游戏——《坦克大战》相关推荐

HTML源码小游戏——坦克大战、飞机大战、捕鱼达人
捕鱼达人小游戏飞机大战小游戏坦克大战小游戏关注公众号"程序员秋田君",回复坦克大战.飞机大战.捕鱼达人等信息即可获取源码文件. ...
Python小游戏-坦克大战（tank war）
Python小游戏-坦克大战(tank war) 前言这款游戏一直都是我很喜欢的游戏,很童年,太经典啦!也很好玩,所以我来做一做这款游戏. 开发工具 python版本:3.7.3 相关模块:pyga ...
c语言编程简单小游戏坦克大战,坦克大战1990(c语言文件版)游戏
坦克大战1990(c语言文件版)是一款很炫的坦克战争类游戏.游戏设计感很强.敌人千变万化,但是你可别被迷惑哦,将他们通通歼灭吧! 作者的话经过四五天的奋斗,第一次编的游戏终于完成了,好激动. 首先得 ...
C++小游戏---坦克大战(一)
刚开始写的时候想想这个应该是非常好写的,但是写到后面,尤其是遇到很多莫名其妙的bug之后,发现似乎没那么简单.以下是开发过程中的一些想法,在这里做个笔记. 目录游戏介绍素材引入初始化全局初始化 ...
火箭工作室c++小游戏——坦克大战（初始版）
今天第四次写博客,给大家发一个坦克大战的初始版,可以开外挂,要自己去探索 #include<windows.h> #include<conio.h> #include<i ...
射击类小游戏——坦克大战(java实现)
项目名称:坦克大战项目背景:坦克大战是一款非常经典的游戏,也是学习面向对象编程的理想实例.现在面向对象的计算机编程语言很多,很多想法都可以通过编程来实现.本文的坦克大战有完整的界面,能够实现人机大战 ...
【flash】小游戏坦克大战下载多个敌人
下载地址: 链接:https://pan.baidu.com/s/120Zu9F2qTnFlScE6YAXllg 提取码:0hrv 3种敌人一种向前攻击一种向前攻击3个子弹红色坦克会向你的 ...
HTML5小游戏动手做（二）：使用PIXI引擎制作坦克大战游戏
这里写自定义目录标题 1. 简介 1.1 PIXI 简介 1.2 坦克大战游戏简介 2. PIXI 引擎入门 2.1 基本概念 2.1.1 舞台 Stage 2.1.2 容器 Container 2. ...
分享21个丰富多彩的 HTML5 小游戏
作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性.HTML5 的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动设备上使用 HTML5 技术.随着 HTML5 跨平台支持 ...

使用jquery—Canvas实现html5小游戏——《坦克大战》