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

最新推荐文章于 2022-07-26 06:05:21 发布

会编程的阿强

最新推荐文章于 2022-07-26 06:05:21 发布

阅读量1.5k

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/9337675

版权

Html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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 οnkeydοwn="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>