07-html5游戏坦克大战第三战（坦克移动）

最新推荐文章于 2021-05-30 19:27:47 发布

会编程的阿强

最新推荐文章于 2021-05-30 19:27:47 发布

阅读量1.1k

点赞数

分类专栏： Html5

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

版权

Html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--让浏览器指到这是一个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(40, 40, 0);
		drawTank(hero);
		///监听按键开始//
		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;
			}
			//清屏
			cxt.clearRect(0, 0, 400, 300);
			drawTank(hero);
		}
		///监听按键结束//
	</script>
</body>
</html>

tank.js

/创建Hreo类开始/
//定义一个Hero类
function Hero(x, y, direct) {
	this.x = x;
	this.y = y;
	this.speed = 1;
	this.direct = direct;
	// 将移动坦克封装为函数
	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;// 向左转
	};
}
// ///创建Hreo类结束/
// /画坦克开始//
// 把绘制坦克封装成一个函数
function drawTank(tank) {
	switch (tank.direct) {
	case 0:
	case 2:
		// 设置齿轮的颜色
		cxt.fillStyle = "#BA9658";
		// 画出左边矩形
		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 = "#FEF26E";
		cxt.arc(tank.x + 10, tank.y + 15, 4, 0, 360, true);
		cxt.fill();

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