08-html5游戏坦克大战第四战（画出敌人的坦克,并解决刷新问题）

最新推荐文章于 2022-06-01 14:48:45 发布

会编程的阿强

最新推荐文章于 2022-06-01 14:48:45 发布

阅读量1.1k

点赞数

分类专栏： Html5

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

版权

Html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

tank.js

/定义Tank类颜色开始/
var heroColor = new Array("#BA9658", "#FEF26E");
var enemyColor=new Array("#00A2B5","#00FEFE");
// ///定义Tank类颜色结束/
// ///创建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);
}
// ///创建Hero类结束/
// ///创建Enemy类开始/
function EnemyTank(x, y, direct,color) {
	// 通过对象冒充，达到继承的效果
	this.tank = Tank;
	// 运行一下
	this.tank(x, y, direct,color);
}
// ///创建Enemy类结束/
// /画坦克开始//
// 把绘制坦克封装成一个函数
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;
	}
}
// /画坦克结束//

MyHtml.html

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

<body οnkeydοwn="getCommand();">
	<h1>html5经典坦克大战</h1>
	<!--创建一个画布,坦克大战的战场-->
	<canvas id="tankMap" width="400px" height="300px"
		style="background-color:black"></canvas>
	<script type="text/javascript">
		//得到画布
		var canvas1 = document.getElementById("tankMap");
		//得到画笔
		var cxt = canvas1.getContext("2d");
		//我的坦克
		var hero = new Hero(140, 140, 0, heroColor);
		//定义敌人的坦克
		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);
			//画敌人的坦克
			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;
			}
			flashTankMap();
			//重新绘制
			//drawTank(hero);
			//重新绘制所有的敌人的坦克

		}
		///监听按键结束//
	</script>
</body>
</html>

例子：javascript继承的解决（对象冒充）

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<body>
	<script type="text/javascript">
		//Animal 类
		function Animal(name, age) {
			this.name = name;
			this.age = age;

			this.aaa = function() {
				alert("yyy");
			};

		}

		function Dog(name, age) {
			//把Animal 构造函数赋给this.hsp
			this.hsp = Animal;
			//运行调用!!!
			this.hsp(name, age);
		}

		var dog1 = new Dog("小狗", 20);

		alert(dog1.name);
		dog1.aaa();
	</script>
</body>

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
08-html5游戏坦克大战第四战（画出敌人的坦克,并解决刷新问题）

tank.js/////////////////////////////////////////定义Tank类颜色开始/////////////////////var heroColor = new Array("#BA9658", "#FEF26E");var enemyColor=new Array("#00A2B5","#00FEFE");// //////////////////
复制链接

扫一扫