HTML5塔防（一）

最新推荐文章于 2024-03-11 11:18:43 发布

原创最新推荐文章于 2024-03-11 11:18:43 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#游戏 #html #html5 #javascript #dom

H5前端专栏收录该内容

54 篇文章

订阅专栏

现在我们就开始做一个HTML5塔防游戏，首先我们需要建工程好吧！接下来我们直接开始html文件和js了。

首先index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的TD</title>
		<style type="text/css">
		    html,body{
		    	margin: 0px;
		    	padding: 0px;
		    }
			#game {
				margin: 10px;
				width: 600px;
				height: 500px;
				border: 1px solid #589300;
			}
			
			#map {
				width: 500px;
				height: 500px;
				/*border: 1px solid #000000;*/
				/*position: absolute;*/
				left: 0;
				top: 0;
				z-index: 99;
			}
		</style>
	</head>

	<body>
		<div id="game">
			<canvas id="map" width="500" height="500"></canvas>
		</div>
		<div style="float:left;width:500px;margin-left:50px;">
				<br /> 选择地图
				<select id="select_map">
					<option value="1">地图一</option>
					<option value="2">地图二</option>
				</select>,然后按
				<input type="button" value="开始游戏" onclick="startGame()" />
			</p>

		</div>
	</body>
	<script type="text/javascript" src="Td-game.js"></script>
	<script type="text/javascript">
		function startGame() {
			Td_Game.start();
		}
	</script>

</html>

然后呢，开始写Td_Game.js

首先我们写的是控制器，如下：

//游戏控制类
var Td_Game = {
	FPS: 20, //帧
	imgList: {}, //图片信息列表
	canvasList: {}, //画布信息列表
	//计时器ID
	timer: 0,
	//初始化
	init: function() {
	},
	//初始化图片
	initImg: function() {
	},
	//初始化画布
	initCanvas: function() {
	},
	//开始游戏
	start: function() {
	},
	//循环体
	loop: function() {
	}
};

这个就是我们接下来的主体框架，接下来就是根据自己的想法去完善里面的方法；

初始化：

	//初始化
	init: function() {
		this.initImg();
		this.initCanvas();
	},

我们需要初始化下图片和画布，好吧其实光写地图的话不需要这个，但是我们写了备用你懂得。

初始画布：

	//初始化画布
	initCanvas: function() {
		this.canvasList = {
			map: document.getElementById("map").getContext("2d")
		}
	},

然后该开始游戏了，大家都知道开始游戏要加载地图对吧，但是我们没有地图阿怎么办？

构造地图：

var Map = {
		//画出地图
		draw: function(map) {
			var i, j;
			for (i = 0; i < 10; i++) {
				for (j = 0; j < 10; j++) {
					//画背景地图
					if (this.data[i][j] == 0) Canvas.drawRect(map, i * 50, j * 50, 50, 50, '#589300');
					//画可以走的路
					else Canvas.fillRect(map, i * 50, j * 50, 50, 50, 'antiquewhite');
				}
			}
		},
		data: [],
		data_1: [
			[1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
			[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
		]
};

构造地图的过程中我们用到了canvas这个类，大家别想太多哦，其实这个类也是我们自己定义的；

构造画布：

var Canvas = {
	//清除画布
	clear: function(cxt, x, y) {
		cxt.clearRect(0, 0, x, y);
	},
	clearRect: function(cxt, x, y, width, height) {
		cxt.clearRect(x, y, width, height);
	},
	//画图
	drawImg: function(cxt, img, x, y, sw, sh, dx, dy, dw, dh) {

		if (!sw) cxt.drawImage(img, x, y);
		else cxt.drawImage(img, x, y, sw, sh, dx, dy, dw, dh);
	},
	//画文字
	drawText: function(cxt, string, x, y, color) {

		cxt.fillStyle = color;
		cxt.font = 'bold 12px sans-serif';
		cxt.fillText(string, x, y);
	},
	//画填充的方
	fillRect: function(cxt, x, y, width, height, color) {

		cxt.fillStyle = color;
		cxt.fillRect(x, y, width, height);
	},
	//画边框的方
	drawRect: function(cxt, x, y, width, height, color) {

		cxt.strokeStyle = color;
		cxt.lineWidth = 1;
		cxt.strokeRect(x, y, width, height);
	},
	//画圆
	//ctx:context2d对象,x:圆心x坐标,y:圆心y坐标,radius:半径,color:颜色
	fillArc: function(cxt, x, y, radius, color) {
		cxt.fillStyle = color;
		cxt.beginPath();
		cxt.arc(x, y, radius, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
	}
}

接下来我们开始画土地把：

//开始游戏
	start: function() {
        Map.data=Map.data_1;
		Map.draw(this.canvasList.map);
		this.timer = setInterval(Td_Game.loop, 1000 / this.FPS);
	},

这样我们就完成了，绘制地图.

完整JS：

//游戏控制类
var Td_Game = {
	FPS: 20, //帧
	imgList: {}, //图片信息列表
	canvasList: {}, //画布信息列表
	//计时器ID
	timer: 0,
	//初始化
	init: function() {
		this.initImg();
		this.initCanvas();
	},
	//初始化图片
	initImg: function() {

	},
	//初始化画布
	initCanvas: function() {
		this.canvasList = {
			map: document.getElementById("map").getContext("2d")
		}
	},
	//开始游戏
	start: function() {
        Map.data=Map.data_1;
		Map.draw(this.canvasList.map);
		this.timer = setInterval(Td_Game.loop, 1000 / this.FPS);
	},
	//循环体
	loop: function() {

	}
};
//地图绘制类
var Map = {
		//画出地图
		draw: function(map) {
			var i, j;
			for (i = 0; i < 10; i++) {
				for (j = 0; j < 10; j++) {
					//画背景地图
					if (this.data[i][j] == 0) Canvas.drawRect(map, i * 50, j * 50, 50, 50, '#589300');
					//画可以走的路
					else Canvas.fillRect(map, i * 50, j * 50, 50, 50, 'antiquewhite');
				}
			}
		},
		data: [],
		data_1: [
			[1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
			[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
		]
};
	//画布类
var Canvas = {
	//清除画布
	clear: function(cxt, x, y) {
		cxt.clearRect(0, 0, x, y);
	},
	clearRect: function(cxt, x, y, width, height) {
		cxt.clearRect(x, y, width, height);
	},
	//画图
	drawImg: function(cxt, img, x, y, sw, sh, dx, dy, dw, dh) {

		if (!sw) cxt.drawImage(img, x, y);
		else cxt.drawImage(img, x, y, sw, sh, dx, dy, dw, dh);
	},
	//画文字
	drawText: function(cxt, string, x, y, color) {

		cxt.fillStyle = color;
		cxt.font = 'bold 12px sans-serif';
		cxt.fillText(string, x, y);
	},
	//画填充的方
	fillRect: function(cxt, x, y, width, height, color) {

		cxt.fillStyle = color;
		cxt.fillRect(x, y, width, height);
	},
	//画边框的方
	drawRect: function(cxt, x, y, width, height, color) {

		cxt.strokeStyle = color;
		cxt.lineWidth = 1;
		cxt.strokeRect(x, y, width, height);
	},
	//画圆
	//ctx:context2d对象,x:圆心x坐标,y:圆心y坐标,radius:半径,color:颜色
	fillArc: function(cxt, x, y, radius, color) {
		cxt.fillStyle = color;
		cxt.beginPath();
		cxt.arc(x, y, radius, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
	}
}
Td_Game.init();

看看我做的效果吧：