目錄

1、項目背景

2、項目展示

3、設計思路

3.1、坦克移動

3.2、坦克開火

3.3、擊中坦克

4、實現代碼

5、總結

---

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小游戏——《坦克大战》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。