使用jquery—Canvas实现html5小游戏——《坦克大战》
目录
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() {
// canvas
var 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 canvas
ctx.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'; //up
i++;
}
} else if (directRandom > 20 && directRandom <= 40) {
var j = i + Math.round(Math.random() * 20);
while (i < j) {
moveArray_enemy[m][i] = 'down'; //down
i++;
}
} else if (directRandom > 40 && directRandom <= 60) {
var j = i + Math.round(Math.random() * 20);
while (i < j) {
moveArray_enemy[m][i] = 'left'; //left
i++;
}
} else if (directRandom > 60 && directRandom <= 80) {
var j = i + Math.round(Math.random() * 20);
while (i < j) {
moveArray_enemy[m][i] = 'right'; //right
i++;
}
} else if (directRandom > 80 && directRandom <= 150) {
moveArray_enemy[m][i] = 'fire'; //fire
i++;
}
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);
//如果向上发射的子弹击中了敌人坦克0
if (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);
}
//如果向上发射的子弹击中了敌人坦克1
if (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);
//如果向下发射的子弹击中了敌人坦克0
if (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);
}
如果向下发射的子弹击中了敌人坦克1
if (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);
//如果向左发射的子弹击中了敌人坦克0
if (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);
}
//如果向左发射的子弹击中了敌人坦克1
if (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; //子弹飞行速度
//如果向右发射的子弹击中了敌人坦克0
if (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);
}
//如果向右发射的子弹击中了敌人坦克1
if (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) {
//IE
elem.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) {
//IE
elem.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;
}
};
},
//获取键盘code
getCharCode: 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小游戏——《坦克大战》的更多相关文章
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- 软件工程 Android小游戏 猜拳大战
一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...
- Java小项目--坦克大战（version1.0）
Java小项目--坦克大战<TankWar1.0> 这个小项目主要是练习j2se的基础内容和面向对象的思想.项目实现了基本的简单功能,我方一辆坦克,用上下左右键控制移动方向,按F键为发射炮 ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- Html5 小游戏 俄罗斯方块
导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...
- HTML5小游戏之见缝插针
今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...
- 菜鸟做HTML5小游戏 - 翻翻乐
记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...
随机推荐
- bfs与dfs基础
bfs像二叉树的层序遍历 像这个图走bfs就{1, 2, 3, 4, 5, 6, 7, 8}这样走: dfs就{1, 2, 5, 6, 3, 7, 8, 4}. bfs与queue相结合,走到哪就把哪 ...
- vulnhub靶场之THE PLANETS: EARTH
准备: 攻击机:虚拟机kali.本机win10. 靶机:THE PLANETS: EARTH,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnh ...
- 1.Python面向对象基础
面向对象(OOP) 面向对象编程--object oriented programming 简写 OOP 面向过程和面向对象的区别: 面向过程: 1.把完成某一个需求的所有步骤从头到尾逐步实现 2 ...
- CSS 渐变锯齿消失术
在 CSS 中,渐变(Gradient)可谓是最为强大的一个属性之一. 但是,经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题. 何为渐变锯齿? 那么,什么是渐变图形产生的锯齿呢? 简单的一个 ...
- 在不受支持的 Mac 上安装 macOS Ventura、Monterey、Big Sur (OpenCore Legacy Patcher)
请访问原文链接:https://sysin.org/blog/install-macos-13-on-unsupported-mac/,查看最新版.原创作品,转载请保留出处. 作者主页:www.sys ...
- Java安全之Tomcat6 Filter内存马
Java安全之Tomcat6 Filter内存马 回顾Tomcat8打法 先回顾下之前Tomcat789的打法 这里先抛开 7 8之间的区别, 在8中,最后add到filterchain的都是一个fi ...
- QML 怎么调用 C++ 中的内容？
以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」https://mp.weixin.qq.com/s/z_JlmNe6cYldNf11Oad_JQ 先说明一下测试环境 编 ...
- Spring Boot 项目自定义 banner
前言 我们在启动 Spring Boot 项目时,控制台会打印出 Spring Boot 专属的标语,也称 banner(横幅标语/广告),效果如下: 实际上,上面这个 banner,我们可以自定义, ...
- 以开发之名 | bilibili会员购让IP在眼前动起来
随着ACG文化(二次元文化)影响力的不断提升,哔哩哔哩平台上衍生品消费群体不断扩大,手办行业迅速崛起.2017年,B站推出ACG衍生品消费品牌bilibili会员购,涵盖二次元手办销售等多项业务,拓展 ...
- 「浙江理工大学ACM入队200题系列」问题 B: 零基础学C/C++12——求平均值
本题是浙江理工大学ACM入队200题第二套中的B题 我们先来看一下这题的题面. 由于是比较靠前的题目,这里插一句.各位新ACMer朋友们,请一定要养成仔细耐心看题的习惯,尤其是要利用好输入和输出样例. ...