【第22期】观点:IT 行业加班,到底有没有价值?

HTML5塔防(一)

原创 2015年11月18日 17:09:50

现在我们就开始做一个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();

看看我做的效果吧:


格子是放塔的位子,黄色的是跑道。谢谢大家!




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

HTML5 塔防、休闲类微信小游戏《魔兽城堡》源码下载

该资源说明: HTML5 塔防、休闲类微信小游戏《魔兽城堡》源码

矢量化的HTML5拓扑图形组件设计

HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: <ul style="color: #333333; f

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

美防长来了,HTML5 画个星条旗(美国国旗)

美防长来了,不希望中国与美国在未来开战,HTML5 画个星条旗(美国国旗)祈祷。 [img]http://dl2.iteye.com/upload/attachment/0095/8174/89e635e6-98b7-3d0c-94b1-24156fdf1c62.gif[/img] 代码: ...
  • 128kj
  • 128kj
  • 2014-04-07 16:13
  • 1000

HTML5 塔防射击、休闲类微信小游戏《老虎不吃素》源码下载

该资源说明: HTML5 塔防射击、休闲类微信小游戏《老虎不吃素》源码 老虎不吃素是一款玩法有创新的塔防游戏,Q版画风,值得大家探索一番。
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)