09-html5游戏坦克大战第五战（自己的坦克可以发射单颗子弹）

tank.js

/////////////////////////////////////////定义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;}// 调用这个方法不停地改变子弹的坐标window.setInterval("heroBullet.run()", 50);};}// ///////////////////////////////////////创建Hero类结束/////////////////////// ///////////////////////////////////////创建Enemy类开始/////////////////////function EnemyTank(x, y, direct, color) {// 通过对象冒充，达到继承的效果this.tank = Tank;// 运行一下this.tank(x, y, direct, color);}// ///////////////////////////////////////创建Enemy类结束/////////////////////// /////////////////////////////////////画子弹开始//////////////////////////////////function drawHeroBullet() {// 判断子弹是否创建,并且解决子弹到边缘时不能消失的问题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 heroBullet = null;//定义敌人的坦克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>