10-html5游戏坦克大战第六战（自己的坦克可以连续发射子弹）

/////////////////////////////////////////定义Tank类颜色开始/////////////////////
var heroColor = new Array("#BA9658", "#FEF26E");
var enemyColor = new Array("#00A2B5", "#00FEFE");
// ///////////////////////////////////////定义Tank类颜色结束/////////////////////

// ///////////////////////////////////////创建子弹类开始/////////////////////
function Bullet(x, y, direct, speed) {
this.x = x;
this.y = y;
this.direct = direct;// 子弹方向
this.speed = speed;// 子弹速度
this.timer = null;
// 子弹不断刷新方法是否激活
this.isLive = true;
// 去不停修改坐标的函数
this.run = function run() {

// 在修改子弹的坐标的时候，先判断子弹是否到边界了。
if (this.x <= 0 || this.x >= 400 || this.y <= 0 || this.y >= 300) {
// 子弹停止
window.setInterval(this.timer);
// 子弹死亡
this.isLive = false;
} else {

// 修改子弹的坐标
switch (this.direct) {
case 0:
this.y -= speed;
break;
case 1:
this.x += speed;
break;
case 2:
this.y += speed;
break;
case 3:
this.x -= speed;
break;
}
document.getElementById("aa").innerText = "x=" + this.x + "  y="
+ this.y;
}
};
}
// ///////////////////////////////////////创建子弹类结束/////////////////////
// ///////////////////////////////////////创建Tank类开始/////////////////////
// 定义一个坦克类
function Tank(x, y, direct, color) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = direct;
this.color = color;
// 将移动坦克封装为函数
this.moveUp = function() {
this.y -= this.speed;
this.direct = 0;// 向上转
};
this.moveRight = function() {
this.x += this.speed;
this.direct = 1;// 向右转
};
this.moveDown = function() {
this.y += this.speed;
this.direct = 2;// 向下转
};
this.moveLeft = function() {
this.x -= this.speed;
this.direct = 3;// 向左转
};
}
// ///////////////////////////////////////创建Tank类结束/////////////////////
// ///////////////////////////////////////创建Hero类开始/////////////////////
function Hero(x, y, direct, color) {
// 通过对象冒充，达到继承的效果
this.tank = Tank;
// 运行一下
this.tank(x, y, direct, color);
// 增加一个函数，射击敌人的坦克
this.shotEnemy = function() {
// 考虑子弹的方向
switch (this.direct) {
case 0:
heroBullet = new Bullet(this.x + 9, this.y, this.direct, 1);
break;
case 1:
heroBullet = new Bullet(this.x + 30, this.y + 9, this.direct, 1);
break;
case 2:
heroBullet = new Bullet(this.x + 9, this.y + 30, this.direct, 1);
break;
case 3:
heroBullet = new Bullet(this.x, this.y + 9, this.direct, 1);
break;
}

// 把这个子弹对象放入数组中
heroBullets.push(heroBullet);
// 调用这个方法不停地改变子弹的坐标,这个技术难点高，下面启动方式，每个子弹的定时器是独立的
// 如果按照原来的方法，所有的子弹共享一个定时器window.setInterval("heroBullet.run()", 50);
var timer = window.setInterval("heroBullets[" + (heroBullets.length - 1)
+ "].run()", 50);
// 把这个timer赋给这个子弹（js对象是引用传递！）
heroBullet.timer = timer;
};
}
// ///////////////////////////////////////创建Hero类结束/////////////////////
// ///////////////////////////////////////创建Enemy类开始/////////////////////
function EnemyTank(x, y, direct, color) {
// 通过对象冒充，达到继承的效果
this.tank = Tank;
// 运行一下
this.tank(x, y, direct, color);
}
// ///////////////////////////////////////创建Enemy类结束/////////////////////

// /////////////////////////////////////画子弹开始//////////////////////////////////
function drawHeroBullet() {
// 画出所有的子弹
for ( var i = 0; i < heroBullets.length; i++) {
var heroBullet=heroBullets[i];
// 判断子弹是否创建,并且解决子弹到边缘时不能消失的问题
if (heroBullet != null && heroBullet.isLive == true) {
cxt.fillStyle = "#FEF26E";
cxt.fillRect(heroBullet.x, heroBullet.y, 2, 2);
}
}
}
// /////////////////////////////////////画子弹结束//////////////////////////////////
// /////////////////////////////////////画坦克开始//////////////////////////////////
// 把绘制坦克封装成一个函数
function drawTank(tank) {
// 考虑方向
switch (tank.direct) {
case 0:// 上
case 2:// 下
// 设置齿轮的颜色
cxt.fillStyle = tank.color[0];
// 画出左边矩形
cxt.fillRect(tank.x, tank.y, 5, 30);
// 画出右边矩形
cxt.fillRect(tank.x + 15, tank.y, 5, 30);
// 画出中间矩形
cxt.fillRect(tank.x + 6, tank.y + 5, 8, 20);
// 画出坦克盖子
cxt.fillStyle = tank.color[1];
cxt.arc(tank.x + 10, tank.y + 15, 4, 0, 360, true);
cxt.fill();

// 画出炮筒
// 设置炮筒的颜色
cxt.strokeStyle = tank.color[1];
// 设置线条的宽度
cxt.lineWidth = 1.5;
cxt.beginPath();
cxt.moveTo(tank.x + 10, tank.y + 15);
// 判断炮筒的方向上、下
if (tank.direct == 0) {
cxt.lineTo(tank.x + 10, tank.y);
} else if (tank.direct == 2) {
cxt.lineTo(tank.x + 10, tank.y + 30);
}
cxt.closePath();
cxt.stroke();
break;
case 1: // 右
case 3:// 左
// 设置齿轮的颜色
cxt.fillStyle = "#BA9658";
// 画出左边矩形
cxt.fillRect(tank.x, tank.y, 30, 5);
// 画出右边矩形
cxt.fillRect(tank.x, tank.y + 15, 30, 5);
// 画出中间矩形
cxt.fillRect(tank.x + 5, tank.y + 6, 20, 8);
// 画出坦克盖子
cxt.fillStyle = "#FEF26E";
cxt.arc(tank.x + 15, tank.y + 10, 4, 0, 360, true);
cxt.fill();

// 画出炮筒
// 设置炮筒的颜色
cxt.strokeStyle = "#FEF26E";
// 设置线条的宽度
cxt.lineWidth = 1.5;
cxt.beginPath();
cxt.moveTo(tank.x + 15, tank.y + 10);
// 判断炮筒的方向
if (tank.direct == 1) {
cxt.lineTo(tank.x + 30, tank.y + 10);
} else if (tank.direct == 3) {
cxt.lineTo(tank.x, tank.y + 10);
}
cxt.closePath();
cxt.stroke();
break;
}
}
// /////////////////////////////////////画坦克结束//////////////////////////////////

<!--让浏览器指到这是一个html网页-->
<!DOCTYPE HTML>
<html>
<head>
<title>坦克大战</title>
<!--网页的编码-->
<meta charset="GBK" />
<script type="text/javascript" src="tank.js" charset="GBK">

</script>
</head>

<body onkeydown="getCommand();">
<h1>html5经典坦克大战</h1>
<!--创建一个画布,坦克大战的战场-->
<canvas id="tankMap" width="400px" height="300px"
style="background-color:black"></canvas>
<span id="aa">子弹坐标数据</span>
<script type="text/javascript">
//得到画布
var canvas1 = document.getElementById("tankMap");
//得到画笔
var cxt = canvas1.getContext("2d");
//我的坦克
var hero = new Hero(140, 140, 0, heroColor);
//定义一个子弹数组
var heroBullets = new Array();
//定义敌人的坦克
var enemyTanks = new Array();
//先死后活法
for ( var i = 0; i < 6; i++) {
//创建一个坦克
var enemyTank = new EnemyTank((i + 1) * 50, 0, 2, enemyColor);
//将创建的坦克放入数组中
enemyTanks[i] = enemyTank;
}
//打开页面先调用一次
flashTankMap();
///////////////////////////////////////定时刷新作战区开始//////////////////////////////////
//定时刷新作战区
function flashTankMap() {
//清屏
cxt.clearRect(0, 0, 400, 300);
//画我的坦克
drawTank(hero);
//画英雄的坦克
drawHeroBullet();
//画敌人的坦克
for ( var i = 0; i < 3; i++) {
drawTank(enemyTanks[i]);
}
}

///////////////////////////////////////定时刷新作战区结束//////////////////////////////////
///////////////////////////////////////监听按键开始//////////////////////////////////
function getCommand() {
//当按下键的时候，传来even对象
var code = event.keyCode;//ascii码
switch (code) {
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
case 74:
hero.shotEnemy();
break;
}
//触发这个函数flashTankMap();
flashTankMap();
//重新绘制
//drawTank(hero);
//重新绘制所有的敌人的坦克

}
///////////////////////////////////////监听按键结束//////////////////////////////////
//每隔100毫秒去刷新一次作战区
window.setInterval("flashTankMap()", 100);
</script>
</body>
</html>