前几天粗略地学了HTML5，然后就用它写了一个《经典坦克大战》游戏。
现在想分享一下我写的代码，写得不好请大家多多指教。
给大家推荐一个网站，这个网站是为大学生而做，为方便学习编程的同学而做的。（淘课学院）http://www.taokeschool.com/
《经典坦克大战》游戏截图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>HTML5经典坦克大战</title>
<script src="jquery-1.10.2.min.js"></script>
<style type="text/css">
body {
margin: 0px 0px;
padding: 0px 0px;
}
.con {
margin-left: auto;
margin-right: auto;
width: 650px;
}
</style>
</head>
<body onkeydown="getCommand()">
<div class="con">
<h1>HTML5——经典坦克大战</h1> <canvas id="tankmap" width="600" height="500" style="background-color:#000;"></canvas>
<div style="margin-top:20px;font-weight:bolder;font-size:20px;color:red;">
W、S、A、D分别控制：上、下、左、右；J是发子弹。暂时不支持Firefox浏览器。
</div>
</div> <script type="text/javascript">
var gameover = false;
var verygood = false;
var canH = document.getElementById("tankmap");
var cxt = canH.getContext("2d"); var bomb3 = new Image();
bomb3.src = "images/bomb_3.gif";
var bomb2 = new Image();
bomb2.src = "images/bomb_2.gif";
var bomb1 = new Image();
bomb1.src = "images/bomb_1.gif"; var born1 = new Image();
born1.src = "images/born1.gif";
var born2 = new Image();
born2.src = "images/born2.gif";
var born3 = new Image();
born3.src = "images/born3.gif";
var born4 = new Image();
born4.src = "images/born4.gif"; var buBoImg = new Image();
buBoImg.src = "images/blast1.gif"; var base1 = new Image();
base1.src = "images/symbol.gif";
var base2 = new Image();
base2.src = "images/destory.gif"; </script>
<script src="Draw.js"></script>
<script src="opera_js.js"></script>
</body>
</html> HTML页
HTML页
///玩家坦克颜色（机身颜色，盖子颜色）
var heroColor1 = new Array("#ba9658", "#fef26e");
var heroColor2 = new Array("#00a2b5", "#00fefe"); ///敌人坦克颜色（机身颜色，盖子颜色）
var enemyColor1 = new Array("#006f43", "#43b387");
var enemyColor2 = new Array("#f00", "#e34444");
var enemyColor3 = new Array("#fa02e6", "#d45bca");
var enemyColor4 = new Array("#0600fd", "#3531c4"); ///敌人子弹数组
var enemyBullets = new Array(null, null, null, null, null, null, null, null, null, null,
null, null, null, null, null, null, null, null, null, null);
///敌人子弹爆炸数组
var enemyBulletBombs = new Array(null, null, null, null, null, null, null, null, null, null,
null, null, null, null, null, null, null, null, null, null);
///定义玩家子弹数组
var hero1bullet = null;
var hero1bulletBomb = null; ////出身效果
function Born(x, y) {
this.x = x;
this.y = y;
this.time = 0;
this.born = true; this.drawBorn = function drawBorn() {
if (this.time <= 1) {
cxt.drawImage(born1, this.x, this.y, 50, 50);
}
if (this.time > 1 && this.time <= 3) {
cxt.drawImage(born2, this.x, this.y, 50, 50);
}
if (this.time >= 4 && this.time <= 5) {
cxt.drawImage(born3, this.x, this.y, 50, 50);
}
if (this.time >= 6 && this.time <= 7) {
cxt.drawImage(born4, this.x, this.y, 50, 50);
}
if (this.time >= 8 && this.time <= 9) {
cxt.drawImage(born2, this.x, this.y, 50, 50);
}
if (this.time >= 10 && this.time <= 11) {
cxt.drawImage(born3, this.x, this.y, 50, 50);
}
if (this.time >= 12 && this.time <= 13) {
cxt.drawImage(born4, this.x, this.y, 50, 50);
} this.time++;
if (this.time >= 13) {
this.born = false;
this.time = 0;
}
}
} ////坦克类
function Tank(x, y, speed, direct, tankcolor, islive)
{
this.x = x;
this.y = y;
this.speed = speed;
this.direct = direct;
this.tankcolor = tankcolor;
this.islive = islive; this.moveUp = function ()
{
this.y = this.y - this.speed;
if (this.y <= 0)
{
this.y = 0;
}
this.direct = 0;
}
this.moveDown = function ()
{
this.y = this.y + this.speed;
if (this.y >= 450)
{
this.y = 450;
}
this.direct = 2;
}
this.moveLeft = function ()
{
this.x = this.x - this.speed;
if (this.x <= 0)
{
this.x = 0;
}
this.direct = 3;
}
this.moveRight = function ()
{
this.x = this.x + this.speed;
if (this.x >= 550)
{
this.x = 550;
}
this.direct = 1;
}
} ///玩家坦克类，继承于坦克类（Tank）
function Hero(x, y, speed, direct, tankcolor, islive)
{
this.tank = Tank;
this.tank(x, y, speed, direct, tankcolor, islive); this.attackEnemy = function ()
{
if (hero1bullet != null)
{
return;
}
switch (this.direct)
{
case 0:
hero1bullet = new Bullet(this.x + 24, this.y, 4, 0);
break;
case 1:
hero1bullet = new Bullet(this.x + 50, this.y + 24, 4, 1);
break;
case 2:
hero1bullet = new Bullet(this.x + 24, this.y + 50, 4, 2);
break;
case 3:
hero1bullet = new Bullet(this.x, this.y + 24, 4, 3);
break;
}
hero1bullet.time = window.setInterval("hero1bullet.run('h')", 20);
}
}
///敌人坦克类，继承坦克类（Tank）
function Enemy(x, y, speed, direct, tankcolor, islive)
{
this.tank = Tank;
this.tank(x, y, speed, direct, tankcolor, islive);
///敌人移动
this.run = function ()
{
if (this.islive == 0)
{
return;
}
this.changeDir();
switch (this.direct)
{
case 0:
if (this.y <= 0)
{
this.beyondChange();
}
if (!this.enemyTankCollision(this)) {
this.moveUp();
}
break;
case 1:
if (this.x >= 550)
{
this.beyondChange();
}
if (!this.enemyTankCollision(this))
{
this.moveRight();
}
break;
case 2:
if (this.y >= 450)
{
this.beyondChange();
}
if (!this.enemyTankCollision(this)) {
this.moveDown();
}
break;
case 3:
if (this.x <= 0)
{
this.beyondChange();
}
if (!this.enemyTankCollision(this)) {
this.moveLeft();
}
break;
}
}
this.changeDir = function ()
{
var dri_num = Math.round(Math.random() * 99);
if (dri_num < 4) {
this.direct = Math.round(Math.random() * 3);
}
}
this.beyondChange = function () {
this.direct = Math.round(Math.random() * 3);
} ///敌人攻击
this.attackEnemy = function (en)
{
if (enemyBullets[en] != null)
{
return;
}
if ((Math.round(Math.random() * 99)) < 4)
{
switch (this.direct) {
case 0:
enemyBullets[en] = new Bullet(this.x + 24, this.y, 4, 0);
break;
case 1:
enemyBullets[en] = new Bullet(this.x + 50, this.y + 24, 4, 1);
break;
case 2:
enemyBullets[en] = new Bullet(this.x + 24, this.y + 50, 4, 2);
break;
case 3:
enemyBullets[en] = new Bullet(this.x, this.y + 24, 4, 3);
break;
} enemyBullets[en].time = window.setInterval("enemyBullets[" + en + "].run(" + en + ")", 20);
}
}
///敌人坦克碰撞
this.enemyTankCollision = function (enemy1)
{ var enemy2 = null;
{
for (var en2 = 0; en2 < enemys.length; en2++)
{
enemy2 = enemys[en2];
if (enemy2 != null && enemy2.islive != 0)
{
switch (enemy1.direct) {
case 0:
if ((hero1 != null && hero1.islive != 0) && (enemy1.x > hero1.x - 50) && (enemy1.x < hero1.x + 50) &&
((enemy1.y == hero1.y + 47) || (enemy1.y == hero1.y + 50) || (enemy1.y == hero1.y + 49) || (enemy1.y == hero1.y + 48))) {
return true;
}
if ((enemy1.x > enemy2.x - 50) && (enemy1.x < enemy2.x + 50) &&
((enemy1.y == enemy2.y + 47) || (enemy1.y == enemy2.y + 50) || (enemy1.y == enemy2.y + 49) || (enemy1.y == enemy2.y + 48))) {
return true;
} break;
case 1:
if ((hero1 != null && hero1.islive != 0) && (enemy1.y > hero1.y - 50) && (enemy1.y < hero1.y + 50) &&
((enemy1.x + 47 == hero1.x) || (enemy1.x + 50 == hero1.x) || (enemy1.x + 49 == hero1.x) || (enemy1.x + 48 == hero1.x))) {
return true;
}
if ((enemy1.y > enemy2.y - 50) && (enemy1.y < enemy2.y + 50) &&
((enemy1.x + 47 == enemy2.x) || (enemy1.x + 50 == enemy2.x) || (enemy1.x + 49 == enemy2.x) || (enemy1.x + 48 == enemy2.x))) {
return true;
}
break;
case 2:
if ((hero1 != null && hero1.islive != 0) && (enemy1.x > hero1.x - 50) && (enemy1.x < hero1.x + 50) &&
((enemy1.y == hero1.y - 47) || (enemy1.y == hero1.y - 50) || (enemy1.y == hero1.y - 49) || (enemy1.y == hero1.y - 48))) {
return true;
}
if ((enemy1.x > enemy2.x - 50) && (enemy1.x < enemy2.x + 50) &&
((enemy1.y == enemy2.y - 47) || (enemy1.y == enemy2.y - 50) || (enemy1.y == enemy2.y - 49) || (enemy1.y == enemy2.y - 48))) {
return true;
}
break;
case 3:
if ((hero1 != null && hero1.islive != 0) && (enemy1.y > hero1.y - 50) && (enemy1.y < hero1.y + 50) &&
((enemy1.x - 47 == hero1.x) || (enemy1.x - 50 == hero1.x) || (enemy1.x - 49 == hero1.x) || (enemy1.x - 48 == hero1.x))) {
return true;
}
if ((enemy1.y > enemy2.y - 50) && (enemy1.y < enemy2.y + 50) &&
((enemy1.x - 47 == enemy2.x) || (enemy1.x - 50 == enemy2.x) || (enemy1.x - 49 == enemy2.x) || (enemy1.x - 48 == enemy2.x))) {
return true;
}
break;
}
}
}
} ///敌人坦克与阻碍物之间碰撞
var hamper = null;
for (var ha = 0; ha < hampers.length; ha++)
{
hamper = hampers[ha];
if (hamper != null)
{
switch (hampers[ha].style) {
case 1:
switch (enemy1.direct) {
case 0:
if ((enemy1.x >= hamper.x - 50) && (enemy1.x <= hamper.x + 17) &&
((enemy1.y == hamper.y + 7) || (enemy1.y == hamper.y + 8) || (enemy1.y == hamper.y + 9) || (enemy1.y == hamper.y + 10))) {
return true;
}
break;
case 1:
if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
((enemy1.x + 50 == hamper.x) || (enemy1.x + 49 == hamper.x) || (enemy1.x + 48 == hamper.x) || (enemy1.x + 47 == hamper.x))) {
return true;
}
break;
case 2:
if ((enemy1.x > hamper.x - 50) && (enemy1.x < hamper.x + 17) &&
((enemy1.y + 50 == hamper.y) || (enemy1.y + 49 == hamper.y) || (enemy1.y + 48 == hamper.y) || (enemy1.y + 47 == hamper.y))) {
return true;
}
break;
case 3:
if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
((enemy1.x == hamper.x + 17) || (enemy1.x == hamper.x + 16) || (enemy1.x == hamper.x + 15) || (enemy1.x == hamper.x + 14))) {
return true;
}
break;
}
break;
case 2:
switch (enemy1.direct) {
case 0:
if ((enemy1.x >= hamper.x - 50) && (enemy1.x <= hamper.x + 17) &&
((enemy1.y == hamper.y + 14) || (enemy1.y == hamper.y + 15) || (enemy1.y == hamper.y + 16) || (enemy1.y == hamper.y + 17))) {
return true;
}
break;
case 1:
if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
((enemy1.x + 50 == hamper.x) || (enemy1.x + 49 == hamper.x) || (enemy1.x + 48 == hamper.x) || (enemy1.x + 47 == hamper.x))) {
return true;
}
break;
case 2:
if ((enemy1.x > hamper.x - 50) && (enemy1.x < hamper.x + 17) &&
((enemy1.y + 50 == hamper.y) || (enemy1.y + 49 == hamper.y) || (enemy1.y + 48 == hamper.y) || (enemy1.y + 47 == hamper.y))) {
return true;
}
break;
case 3:
if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
((enemy1.x == hamper.x + 17) || (enemy1.x == hamper.x + 16) || (enemy1.x == hamper.x + 15) || (enemy1.x == hamper.x + 14))) {
return true;
}
break;
}
break;
case 3:
break;
case 4:
break;
}
}
} } } ///子弹类
function Bullet(x, y, speed, direct)
{
this.x = x;
this.y = y;
this.speed = speed;
this.direct = direct;
this.time = null;
this.islive = true;
this.run = function run(whotank)
{
//$("#tx").html(heroBullets[0].x);
//$("#ty").html(heroBullets[0].y); if ((this.x >= 600 || this.x <= 0 || this.y >= 500 || this.y <= 0) && this.islive) {
window.clearInterval(this.time);
this.islive = false;
if (whotank == "h") {
hero1bullet = null;
switch (this.direct) {
case 0:
hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 50);
break;
case 1:
hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 54);
break;
case 2:
hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 54);
break;
case 3:
hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 52);
break;
}
//alert("00");
}
else {
enemyBullets[whotank] = null;
switch (this.direct)
{
case 0:
enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 50);
break;
case 1:
enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 54);
break;
case 2:
enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 54);
break;
case 3:
enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 52);
break;
} } }
else {
switch (this.direct) {
case 0:
this.y = this.y - this.speed;
break;
case 1:
this.x = this.x + this.speed;
break;
case 2:
this.y = this.y + this.speed;
break;
case 3:
this.x = this.x - this.speed;
break;
}
} }
} ////画坦克函数
function DrawTank(tank)
{
switch (tank.direct)
{
case 0:
case 2:
///画玩家坦克，坦克尺寸为50*50
cxt.beginPath();
cxt.fillStyle = tank.tankcolor[0];
cxt.fillRect(tank.x, tank.y, 11, 50); //画玩家坦克*
cxt.fillRect(tank.x + 12, tank.y + 10, 26, 30); //中间部分
cxt.fillRect(tank.x + 39, tank.y, 11, 50); //画玩家坦克*
///画坦克盖子
cxt.fillStyle = tank.tankcolor[1];
cxt.arc(tank.x + 25, tank.y + 25, 10, 360, 0, true);
cxt.fill();
cxt.closePath();
////画炮口（炮口2px）
cxt.beginPath(); //开始一条新的路径，或重置当前的路径。
cxt.strokeStyle = tank.tankcolor[1]; //线条的颜色
cxt.lineWidth = 2; //线条的宽度（炮口2px）
cxt.moveTo(tank.x + 25, tank.y + 25); //炮口开始位置
if (tank.direct == 0) {
cxt.lineTo(tank.x + 25, tank.y + 0); //炮口结束位置
}
else if (tank.direct == 2) {
cxt.lineTo(tank.x + 25, tank.y + 50); //炮口结束位置
} cxt.closePath(); //创建从当前点到开始点的路径。
cxt.stroke(); //画线
break;
case 1:
case 3:
///画玩家坦克，坦克尺寸为50*50
cxt.beginPath();
cxt.fillStyle = tank.tankcolor[0];
cxt.fillRect(tank.x, tank.y, 50, 11); //画玩家坦克*
cxt.fillRect(tank.x + 10, tank.y + 12, 30, 26); //中间部分
cxt.fillRect(tank.x, tank.y + 39, 50, 11); //画玩家坦克*
///画坦克盖子
cxt.fillStyle = tank.tankcolor[1];
cxt.arc(tank.x + 25, tank.y + 25, 10, 360, 0, true);
cxt.fill();
cxt.closePath();
////画炮口（炮口2px）
cxt.beginPath(); //开始一条新的路径，或重置当前的路径。
cxt.strokeStyle = tank.tankcolor[1]; //线条的颜色
cxt.lineWidth = 2; //线条的宽度（炮口2px）
cxt.moveTo(tank.x + 25, tank.y + 25); //炮口开始位置
if (tank.direct == 1) {
cxt.lineTo(tank.x + 50, tank.y + 25); //炮口结束位置
}
else if (tank.direct == 3) {
cxt.lineTo(tank.x, tank.y + 25); //炮口结束位置
}
cxt.closePath(); //创建从当前点到开始点的路径。
cxt.stroke(); //画线
break;
}
}
///画出阻碍物（地图）、（style有4个值，1表示砖头、2表示钢铁、3表示草地、4表示河流）
function Hamper(x, y, style)
{
this.x = x;
this.y = y;
this.style = style;
//this.islive = true;
this.Draw = function ()
{
switch (this.style)
{
case 1:
cxt.fillStyle = "#bc5018";
cxt.fillRect(this.x, this.y, 17, 10);
break;
case 2:
cxt.fillStyle = "#ffffff";
cxt.fillRect(this.x, this.y, 17, 17);
break;
case 3:
break;
case 4:
break;
}
}
} ///画出子弹
function DrawBullet()
{
var enemyBullet = null;
cxt.fillStyle = "#ba9658";
for (var en = 0; en < enemyBullets.length; en++) {
enemyBullet = enemyBullets[en];
if (enemyBullet != null && enemyBullet.islive) {
switch (enemyBullet.direct) {
case 0:
case 2:
cxt.fillRect(enemyBullet.x, enemyBullet.y, 2, 3);
break;
case 1:
case 3:
cxt.fillRect(enemyBullet.x, enemyBullet.y, 3, 2);
break;
}
}
}
if (hero1bullet != null && hero1bullet.islive) {
switch (hero1bullet.direct) {
case 0:
case 2:
cxt.fillRect(hero1bullet.x, hero1bullet.y, 2, 3);
break;
case 1:
case 3:
cxt.fillRect(hero1bullet.x, hero1bullet.y, 3, 2);
break;
}
} } ////画出基地
function DrawSymbol()
{
cxt.beginPath();
if (gameover) {
cxt.drawImage(base2, 280, 450, 50, 50);
}
else {
cxt.drawImage(base1, 280, 450, 50, 50);
}
cxt.closePath();
} ////判断子弹是否打中坦克
function hitTank()
{
////敌人子弹是否打中玩家坦克
for (var eb = 0; eb < enemyBullets.length; eb++)
{
if (hero1 != null && hero1.islive != 0 && enemyBullets[eb] != null) {
switch (enemyBullets[eb].direct) {
case 0:
if ((enemyBullets[eb].x + 2 >= hero1.x) && (enemyBullets[eb].x + 2 <= hero1.x + 50) && (enemyBullets[eb].y + 3 <= hero1.y + 50) && (enemyBullets[eb].y + 3 >= hero1.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBullets[eb] = null;
hero1.islive--;
}
break;
case 1:
if ((enemyBullets[eb].x + 3 >= hero1.x) && (enemyBullets[eb].x + 3 <= hero1.x + 50) && (enemyBullets[eb].y + 2 >= hero1.y) && (enemyBullets[eb].y + 2 <= hero1.y + 50)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBullets[eb] = null;
hero1.islive--;
}
break;
case 2:
if ((enemyBullets[eb].x + 2 >= hero1.x) && (enemyBullets[eb].x + 2 <= hero1.x + 50) && (enemyBullets[eb].y + 3 <= hero1.y + 50) && (enemyBullets[eb].y + 3 >= hero1.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBullets[eb] = null;
hero1.islive--;
}
break;
case 3:
if ((enemyBullets[eb].x <= hero1.x + 50) && (enemyBullets[eb].x >= hero1.x) && (enemyBullets[eb].y + 2 >= hero1.y) && (enemyBullets[eb].y + 2 <= hero1.y + 50)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBullets[eb] = null;
hero1.islive--;
}
break;
}
if (hero1.islive == 0) {
var tankbomb = new TankBomb(hero1.x, hero1.y);
tankbombs.push(tankbomb);
hero1 = null;
if (hero1 == null) {
gameover = true;
}
}
}
}
////敌人子弹是否打中阻碍物
var enemybullet = null;
var hamper = null;
for (var eb = 0; eb < enemyBullets.length; eb++)
{
enemybullet = enemyBullets[eb];
if (enemybullet != null)
{
for (var ha = 0; ha < hampers.length; ha++) {
hamper = hampers[ha];
if (hamper != null && enemybullet != null) {
switch (enemybullet.direct) {
case 0:
switch (hamper.style) {
case 1:
if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y <= hamper.y + 10) && (enemybullet.y >= hamper.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
hampers[ha] = null;
}
break;
case 2:
if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y <= hamper.y + 20) && (enemybullet.y >= hamper.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
}
break; } break;
case 1:
switch (hamper.style) {
case 1:
if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y <= hamper.y + 10) && (enemybullet.y >= hamper.y - 1)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
hampers[ha] = null;
}
break;
case 2:
if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y <= hamper.y + 17) && (enemybullet.y >= hamper.y - 1)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
}
break; }
break;
case 2:
switch (hamper.style) {
case 1:
if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y + 2 <= hamper.y + 10) && (enemybullet.y + 2 >= hamper.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
hampers[ha] = null;
}
break;
case 2:
if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y + 2 <= hamper.y + 17) && (enemybullet.y + 2 >= hamper.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
}
break;
}
break;
case 3:
switch (hamper.style) {
case 1:
if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y + 1 <= hamper.y + 10) && (enemybullet.y + 1 >= hamper.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
hampers[ha] = null;
}
break;
case 2:
if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
(enemybullet.y + 1 <= hamper.y + 20) && (enemybullet.y + 1 >= hamper.y)) {
enemyBullets[eb].islive = false;
window.clearInterval(enemyBullets[eb].time);
enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
enemyBullets[eb] = null;
}
break; }
break;
}
}
} }
}
////玩家子弹是否打中敌人坦克
////是否打中阻碍物
if (hero1bullet != null)
{
for (var en = 0; en < enemys.length; en++) {
if (enemys[en] != null && enemys[en].islive != 0 && hero1bullet != null) {
switch (hero1bullet.direct) {
case 0:
if ((hero1bullet.x + 2 >= enemys[en].x) && (hero1bullet.x + 2 <= enemys[en].x + 50) && (hero1bullet.y + 3 <= enemys[en].y + 50) && (hero1bullet.y + 3 >= enemys[en].y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
enemys[en].islive--;
}
break;
case 1:
if ((hero1bullet.x + 3 >= enemys[en].x) && (hero1bullet.x + 3 <= enemys[en].x + 50) && (hero1bullet.y + 2 >= enemys[en].y) && (hero1bullet.y + 2 <= enemys[en].y + 50)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
enemys[en].islive--;
}
break;
case 2:
if ((hero1bullet.x + 2 >= enemys[en].x) && (hero1bullet.x + 2 <= enemys[en].x + 50) && (hero1bullet.y + 3 <= enemys[en].y + 50) && (hero1bullet.y + 3 >= enemys[en].y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
enemys[en].islive--;
}
break;
case 3:
if ((hero1bullet.x <= enemys[en].x + 50) && (hero1bullet.x >= enemys[en].x) && (hero1bullet.y + 2 >= enemys[en].y) && (hero1bullet.y + 2 <= enemys[en].y + 50)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
enemys[en].islive--;
}
break;
}
if (enemys[en].islive == 0) {
var tankbomb = new TankBomb(enemys[en].x, enemys[en].y);
tankbombs.push(tankbomb);
enemys[en] = null;
}
}
}
var hamper = null;
for (var ha = 0; ha < hampers.length; ha++)
{
hamper = hampers[ha];
if (hamper != null && hero1bullet!=null)
{
switch (hero1bullet.direct) {
case 0:
switch (hamper.style)
{
case 1:
if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y <= hamper.y + 10) && (hero1bullet.y >= hamper.y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
hampers[ha] = null;
}
break;
case 2:
if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y <= hamper.y + 20) && (hero1bullet.y >= hamper.y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
}
break; } break;
case 1:
switch (hamper.style) {
case 1:
if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y <= hamper.y + 10) && (hero1bullet.y >= hamper.y-1)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
hampers[ha] = null;
}
break;
case 2:
if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y <= hamper.y + 17) && (hero1bullet.y >= hamper.y-1)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
}
break; }
break;
case 2:
switch (hamper.style) {
case 1:
if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y + 2 <= hamper.y + 10) && (hero1bullet.y + 2 >= hamper.y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
hampers[ha] = null;
}
break;
case 2:
if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y+2 <= hamper.y + 17) && (hero1bullet.y+2 >= hamper.y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
}
break;
}
break;
case 3:
switch (hamper.style) {
case 1:
if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y+1 <= hamper.y + 10) && (hero1bullet.y+1 >= hamper.y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
hampers[ha] = null;
}
break;
case 2:
if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
(hero1bullet.y+1 <= hamper.y + 20) && (hero1bullet.y+1 >= hamper.y)) {
hero1bullet.islive = false;
window.clearInterval(hero1bullet.time);
hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
hero1bullet = null;
}
break; }
break;
}
}
} }
} ///坦克爆炸类
function TankBomb(x, y) {
this.x = x;
this.y = y;
this.time = 0;
this.imgsrc = "";
this.isLive = true; this.drawBomb = function drawBomb() {
if (this.time <= 2) {
cxt.drawImage(bomb3, this.x, this.y, 50, 50);
}
if (this.time > 2 && this.time <= 5) {
cxt.drawImage(bomb2, this.x, this.y, 50, 50);
}
if (this.time >= 6 && this.time <= 9) {
cxt.drawImage(bomb1, this.x, this.y, 50, 50);
}
if (this.time >= 10 && this.time <= 12)
{
cxt.drawImage(bomb2, this.x, this.y, 50, 50);
}
if (this.time >= 13 && this.time <= 15)
{
cxt.drawImage(bomb3, this.x, this.y, 50, 50);
}
this.time++;
if (this.time >= 15) {
this.isLive = false;
this.time = 0;
}
};
}
///子弹爆炸类
function bulletBomb(x, y)
{
this.x = x;
this.y = y; this.drawBomb = function ()
{
cxt.drawImage(buBoImg, this.x, this.y); }
}
///判断基地是否被打中
function hitBase() {
if (gameover) {
return;
}
var enemybullet = null;
for (var en = 0; en < enemyBullets.length; en++) {
enemybullet = enemyBullets[en];
if (enemybullet != null) {
switch (enemybullet.direct) {
case 0:
break;
case 1:
if ((enemybullet.x >= 280) && (enemybullet.x <= 330) &&
(enemybullet.y + 1 >= 450) && (enemybullet.y <= 500)) {
gameover = true;
enemyBullets[en] = null;
}
break;
case 2:
if ((enemybullet.x + 1 >= 280) && (enemybullet.x <= 330) &&
(enemybullet.y + 2 >= 450) && (enemybullet.y + 2 <= 500)) {
gameover = true;
enemyBullets[en] = null;
}
break;
case 3:
if ((enemybullet.x >= 280) && (enemybullet.x <= 330) &&
(enemybullet.y + 1 >= 450) && (enemybullet.y <= 500)) {
gameover = true;
enemyBullets[en] = null;
}
break;
}
}
}
if (hero1bullet != null) {
switch (hero1bullet.direct) {
case 0:
break;
case 1:
if ((hero1bullet.x >= 280) && (hero1bullet.x <= 330) &&
(hero1bullet.y + 1 >= 450) && (hero1bullet.y <= 500)) {
gameover = true;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
}
break;
case 2:
if ((hero1bullet.x + 1 >= 280) && (hero1bullet.x <= 330) &&
(hero1bullet.y + 2 >= 450) && (hero1bullet.y + 2 <= 500)) {
gameover = true;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
}
break;
case 3:
if ((hero1bullet.x >= 280) && (hero1bullet.x <= 330) &&
(hero1bullet.y + 1 >= 450) && (hero1bullet.y <= 500)) {
gameover = true;
window.clearInterval(hero1bullet.time);
hero1bullet = null;
}
break;
}
}
} ///画出GAMEOVER
var gameY = 500;
function GameOver()
{
if (gameY > 193) {
gameY = gameY - 4;
}
if (verygood)
{
cxt.beginPath();
cxt.fillStyle = "#CCCCCC";
cxt.fillRect(190, gameY, 215, 115)
cxt.closePath();
cxt.beginPath();
cxt.fillStyle = "#ff0000";
cxt.font = "35px Engravers MT";
cxt.fillText("V E R Y", 212, gameY + 57);
cxt.fillText("G O O D", 212, gameY + 90);
cxt.closePath();
return;
}
if (gameover)
{
cxt.beginPath();
cxt.fillStyle = "#CCCCCC";
cxt.fillRect(190, gameY, 215, 115)
cxt.closePath();
cxt.beginPath();
cxt.fillStyle = "#ff0000";
cxt.font = "35px Engravers MT";
cxt.fillText("G A M E", 212, gameY + 57);
cxt.fillText("O V E R", 212, gameY + 90);
cxt.closePath();
} }
Draw.js
////阻碍物 Hamper类参数：x,y,style
var hampers = new Array();
///画出保存基地的墙（一个20块砖头）
var basehamX = 260;
var basehamY = 490;
for (var ham = 0; ham < 20; ham++) {
if (ham < 7) {
hampers[ham] = new Hamper(basehamX, basehamY - ham * 11, 1);
}
if (ham >= 7 && ham < 10) {
hampers[ham] = new Hamper(basehamX + (ham - 6) * 18, basehamY - 5 * 11, 1);
}
if (ham >= 10 && ham < 13) {
hampers[ham] = new Hamper(basehamX + (ham - 9) * 18, basehamY - 6 * 11, 1);
}
if (ham >= 13) {
hampers[ham] = new Hamper(basehamX + 4 * 18, basehamY - (ham - 13) * 11, 1)
}
}
$.getScript("script/js/map1.js"); ///定义玩家1坦克
var hero1born = new Born(180, 450);
var hero1 = null; //敌人坦克出生数组
var enemyborns = new Array(); enemyborns[0] = new Born(0, 0);
enemyborns[1] = new Born(275, 0);
enemyborns[2] = new Born(550, 0); ///定义敌人数组
var enemys = new Array(); ///判断屏幕是否有5个敌人坦克，如果少于5个，则生产一个
var enemy_loca = 1;
function enemyBorn() {
var enemynum = 0;
for (var en = 0; en < enemys.length; en++) {
if (enemys[en] != null) {
enemynum++;
}
}
if (enemynum < 5 && enemys.length < 20) {
var enemyborn = null;
switch (enemy_loca) {
case 1:
enemyborn = new Born(0, 0);
enemy_loca = 2;
break;
case 2:
enemyborn = new Born(275, 0);
enemy_loca = 3;
break;
case 3:
enemyborn = new Born(550, 0);
enemy_loca = 1;
break;
default:
enemyborn = new Born(0, 0);
break;
} enemyborns.push(enemyborn);
}
if (enemynum <= 0 && enemys.length >= 20) {
verygood = true;
} }
window.setInterval("enemyBorn()", 3000); ////爆炸
var tankbombs = new Array(); ///敌人坦克移动
function moveEnemyTank() {
for (var e = 0; e < enemys.length; e++) {
if (enemys[e] != null && enemys[e].islive != 0) {
enemys[e].run();
enemys[e].attackEnemy(e);
}
}
}
window.setInterval("moveEnemyTank()", 100); function flashTankMap() {
cxt.clearRect(0, 0, 600, 500);
///画出阻碍物
for (var ha = 0; ha < hampers.length; ha++) {
if (hampers[ha] != null) {
hampers[ha].Draw();
}
}
/// //画出玩家坦克
if (hero1born != null) {
if (hero1born.born) {
hero1born.drawBorn();
}
else {
hero1 = new Hero(hero1born.x, hero1born.y, 2, 0, heroColor1, 4);
hero1born = null;
}
}
if (hero1 != null && hero1.islive != 0) {
DrawTank(hero1);
}
///画出子弹
DrawBullet();
///判断子弹是否打中坦克
///画出敌人坦克
for (var bo = 0; bo < enemyborns.length; bo++) {
if (enemyborns[bo] != null) {
if (enemyborns[bo].born) {
enemyborns[bo].drawBorn();
}
else {
var enemy = null;
switch (Math.round(Math.random() * 3)) {
case 0:
enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor1, 1);
break;
case 1:
enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor2, 1);
break;
case 2:
enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor3, 1);
break;
case 3:
enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor4, 1);
break;
}
if (enemy != null) {
enemys.push(enemy);
}
enemyborns[bo] = null;
}
}
}
for (var e = 0; e < enemys.length; e++) {
if (enemys[e] != null && enemys[e].islive != 0) {
DrawTank(enemys[e]);
}
}
///画出爆炸效果
for (var bo = 0; bo < tankbombs.length; bo++) {
if (tankbombs[bo].isLive) {
tankbombs[bo].drawBomb();
}
}
////子弹爆炸
for (var bubo = 0; bubo < enemyBulletBombs.length; bubo++) {
if (enemyBulletBombs[bubo] != null) {
enemyBulletBombs[bubo].drawBomb();
}
enemyBulletBombs[bubo] = null;
}
if (hero1bulletBomb != null) {
hero1bulletBomb.drawBomb();
hero1bulletBomb = null;
}
///画出基地
DrawSymbol();
///调用判断基地是否被打中的函数
hitBase();
///
GameOver();
}
flashTankMap(); ///判断按键
var lastcode = 87;
function getCommand() {
if (hero1 == null || hero1.islive == 0 || gameover) {
return;
}
var keycode = event.keyCode;
switch (keycode) {
case 87:///上
if (lastcode == 87) {
if (!heroTankCollision()) {
hero1.moveUp();
}
}
else {
lastcode = 87;
hero1.direct = 0;
}
break;
case 68:///右
if (lastcode == 68) {
if (!heroTankCollision()) {
hero1.moveRight();
}
}
else {
lastcode = 68;
hero1.direct = 1;
}
break;
case 83:////下
if (lastcode == 83) {
if (!heroTankCollision()) {
hero1.moveDown();
}
}
else {
lastcode = 83;
hero1.direct = 2;
}
break;
case 65:///左
if (lastcode == 65) {
if (!heroTankCollision()) {
hero1.moveLeft();
}
}
else {
lastcode = 65;
hero1.direct = 3;
}
break;
case 74:////开炮
//hero1.tankbullet = "1";
hero1.attackEnemy();
break;
case 66:
break;
default:
break;
}
flashTankMap();
}
window.setInterval("flashTankMap()", 100);
window.setInterval("hitTank()", 20);
//玩家坦克与敌人坦克、阻碍物之间的碰撞
function heroTankCollision() {
//玩家坦克与敌人坦克之间的碰撞
var enemy = null;
for (var en = 0; en < enemys.length; en++) {
enemy = enemys[en];
if (enemy != null && enemy.islive != 0) {
switch (hero1.direct) {
case 0:
if ((hero1.x > enemy.x - 50) && (hero1.x < enemy.x + 50) &&
((hero1.y == enemy.y + 47) || (hero1.y == enemy.y + 48) || (hero1.y == enemy.y + 49) || (hero1.y == enemy.y + 50))) {
return true;
}
//else {
// return false;
//}
break;
case 1:
if ((hero1.y > enemy.y - 50) && (hero1.y < enemy.y + 50) &&
((hero1.x + 47 == enemy.x) || (hero1.x + 50 == enemy.x) || (hero1.x + 49 == enemy.x) || (hero1.x + 48 == enemy.x))) {
return true;
} break;
case 2:
if ((hero1.x > enemy.x - 50) && (hero1.x < enemy.x + 50) &&
((hero1.y + 47 == enemy.y) || (hero1.y + 50 == enemy.y) || (hero1.y + 49 == enemy.y) || (hero1.y + 48 == enemy.y))) {
return true;
} break;
case 3:
if ((hero1.y > enemy.y - 50) && (hero1.y < enemy.y + 50) &&
((hero1.x == enemy.x + 47) || (hero1.x == enemy.x + 50) || (hero1.x == enemy.x + 49) || (hero1.x == enemy.x + 48))) {
return true;
} break;
}
}
}
//玩家坦克与阻碍物之间的碰撞
var hamper = null;
for (var ha = 0; ha < hampers.length; ha++) {
hamper = hampers[ha];
if (hamper != null) {
switch (hampers[ha].style) {
case 1:
switch (hero1.direct) {
case 0:
if ((hero1.x > hamper.x - 50) && (hero1.x < hamper.x + 17) &&
((hero1.y == hamper.y + 7) || (hero1.y == hamper.y + 8) || (hero1.y == hamper.y + 9) || (hero1.y == hamper.y + 10))) {
return true;
}
break;
case 1:
if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
((hero1.x + 50 == hamper.x) || (hero1.x + 49 == hamper.x) || (hero1.x + 48 == hamper.x) || (hero1.x + 47 == hamper.x))) {
return true;
}
break;
case 2:
if ((hero1.x > hamper.x - 50) && (hero1.x < hamper.x + 17) &&
((hero1.y + 50 == hamper.y) || (hero1.y + 49 == hamper.y) || (hero1.y + 48 == hamper.y) || (hero1.y + 47 == hamper.y))) {
return true;
}
break;
case 3:
if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
((hero1.x == hamper.x + 17) || (hero1.x == hamper.x + 16) || (hero1.x == hamper.x + 15) || (hero1.x == hamper.x + 14))) {
return true;
}
break;
}
break;
case 2:
switch (hero1.direct) {
case 0:
if ((hero1.x >= hamper.x - 50) && (hero1.x <= hamper.x + 17) &&
((hero1.y == hamper.y + 14) || (hero1.y == hamper.y + 15) || (hero1.y == hamper.y + 16) || (hero1.y == hamper.y + 17))) {
return true;
}
break;
case 1:
if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
((hero1.x + 50 == hamper.x) || (hero1.x + 49 == hamper.x) || (hero1.x + 48 == hamper.x) || (hero1.x + 47 == hamper.x))) {
return true;
}
break;
case 2:
if ((hero1.x > hamper.x - 50) && (hero1.x < hamper.x + 17) &&
((hero1.y + 50 == hamper.y) || (hero1.y + 49 == hamper.y) || (hero1.y + 48 == hamper.y) || (hero1.y + 47 == hamper.y))) {
return true;
}
break;
case 3:
if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
((hero1.x == hamper.x + 17) || (hero1.x == hamper.x + 16) || (hero1.x == hamper.x + 15) || (hero1.x == hamper.x + 14))) {
return true;
}
break;
}
break;
case 3:
break;
case 4:
break;
}
}
} }
opera_js.js
还有地图……
需要代码的可以联系我，我的邮箱是：YJZhen@live.com
如需更多教程，请到 淘课学院 http://www.taokeschool.com/ 下载。
（欢迎关注“角速度”微信：jiaosud）