html5小游戏塔防,HTML5塔防（一）

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

首先index.html

我的TD

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;

}

选择地图

地图一

地图二

,然后按

function startGame() {

Td_Game.start();

}

然后呢，开始写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();

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

初始画布：

//初始化