从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
项目演示
项目演示地址：
项目源码：
代码结构
本节做完效果
游戏主页面
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" />
<title>塔防</title>
</head>
<body>
<img src="img/enemy.png" id="enemy_img" style="display:none;" />
<img src="img/tower.png" id="tower_img" style="display:none;" />
<img src="img/bullet.png" id="bullet_img" style="display:none;" />
<img src="img/btn.png" id="btn_img" style="display:none;" />
<div id="game" style="position:relative;float:left;width:600px;height:500px;">
<canvas id="map" width="500" height="500" style="background:url(img/bg.png) repeat;position:absolute;left:0;top:0;z-index:99;"></canvas>
<canvas id="main" width="500" height="500" style="position:absolute;left:0;top:0;z-index:100;"></canvas>
<canvas id="tower" width="500" height="500" style="position:absolute;left:0;top:0;z-index:100;"></canvas>
<canvas id="select" width="500" height="500" style="position:absolute;left:0;top:0;z-index:101;"></canvas>
<canvas id="info" width="100" height="500" style="background-color:black;position:absolute;left:500px;top:0;z-index:102;"></canvas>
</div>
<div style="float:left;width:500px;margin-left:50px;">
<p>
说明：每种塔都可以升级到3级，升级的价格与本身建造相同，卖掉的话就是总额的一半。<br/><br/>
第一种塔：升级到3级，有小偷功能，每攻击一次会偷取1块钱。<br/>
第二种塔：减速攻击，3级时可以同时减速两个。<br/>
第三种塔：多重攻击。攻击多个目标。<br/>
第四种塔：穿刺攻击，攻击一条线上，攻击力最高。<br/>
第五种塔：秒杀攻击，有一定几率把敌人秒杀。<br/><br />
选择地图<select id="select_map"><option value="1">地图一</option><option value="2">地图二</option></select>,然后按<input type="button" value="开始" onclick="startGame()" />开始游戏！
</p>
</div>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/MapData.js"></script>
<script type="text/javascript" src="js/Map.js"></script>
<script type="text/javascript" src="js/Info.js"></script>
<script type="text/javascript" src="js/Enemy.js"></script>
<script type="text/javascript" src="js/Tower.js"></script>
<script type="text/javascript" src="js/Bullet.js"></script>
<script type="text/javascript" src="js/Game.js"></script>
<script type="text/javascript">
var isStart = false;
function startGame(){
if(!isStart)Game.start();
else Game.restart();
isStart = true;
}
</script>
</body>
</html>
游戏主模块
game.js
//游戏数据控制类
var Game = {
//图片列表信息
imgList : {},
//画布列表信息
canvasList : {},
//初始化
init : function(){
this.initImg();
this.initCanvas();
},
//初始化图片
initImg : function(){
this.imgList = {
enemy_img : document.getElementById("enemy_img"),
tower_img : document.getElementById("tower_img"),
bullet_img : document.getElementById("bullet_img"),
btn_img : document.getElementById("btn_img")
}
},
//初始化画布
initCanvas : function(){
this.canvasList = {
map : document.getElementById("map").getContext("2d"),
main : document.getElementById("main").getContext("2d"),
info : document.getElementById("info").getContext("2d"),
select : document.getElementById("select").getContext("2d"),
tower : document.getElementById("tower").getContext("2d")
}
},
//开始
start : function(){
switch(document.getElementById("select_map").value){
case "1":
MapData = MapOne;
break;
case "2":
MapData = MapTwo;
break;
default:
MapData = MapOne;
break;
}
Map.draw(this.canvasList.map);
this.timer = setInterval(Game.loop,20);
},
//循环体
loop : function(){
Canvas.clear(Game.canvasList.main,500,500);
}
}
Game.init();
代码不言自明。
简单说明一下：
Game.init()加载图片和Canvas对象，本游戏有5个Canvas对象，具体用途我们在后面图层章节进行说明。
点击网页上的开始按钮，调用start方法。start方法加载地图，并画到canvas上。
地图数据
0是墙壁，1是可以走的路径。可以简单的改变数据，生成不同形状的地图。
MapData.js
//地图类
var MapData = [];
//地图二数据
var MapTwo = [[0,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,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,0],
[0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,0,0,0,1,0]];
//地图一数据
var MapOne = [[0,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,0,0,0,0,0,0,0,0],
[0,1,0,0,0,0,0,0,0,0]];
画地图
Map.js
//地图绘制类
var Map = {
//画出地图
draw : function(map){
var i,j;
for(i = 0; i < 10;i++){
for(j = 0;j<10;j++){
//画背景地图
if(MapData[i][j] == 0)Canvas.drawRect(map,i*50,j*50,50,50,'red');
//画可以走的路
else Canvas.fillRect(map,i*50,j*50,50,50,'black');
}
}
}
}
很简单，看注释即可明白。
游戏循环
//开始
start : function(){
switch(document.getElementById("select_map").value){
case "1":
MapData = MapOne;
break;
case "2":
MapData = MapTwo;
break;
default:
MapData = MapOne;
break;
}
Map.draw(this.canvasList.map);
this.timer = setInterval(Game.loop,20);
},
//循环体
loop : function(){
Canvas.clear(Game.canvasList.main,500,500);
}
每隔20毫秒，刷新一下界面。
That's All
项目源码：
从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建的更多相关文章
- iOS 非ARC基本内存管理系列 -手把手教你ARC——iOS/Mac开发ARC入门和使用(转)
手把手教你ARC——iOS/Mac开发ARC入门和使用 Revolution of Objective-c 本文部分实例取自iOS 5 Toturail一书中关于ARC的教程和公开内容,仅用于技术交流 ...
- 【转】手把手教你把Vim改装成一个IDE编程环境(图文)
手把手教你把Vim改装成一个IDE编程环境(图文) By: 吴垠 Date: 2007-09-07 Version: 0.5 Email: lazy.fox.wu#gmail.com Homepage ...
- Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(二)
一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(一)篇 二.本篇目标: l 说说关于cocos2dx手机分辨率适配 l 对前一篇完成的塔防游戏原型进 ...
- Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(三)
一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(二)篇 二.本篇目标: l 说说游戏中各种角色的动作.属性以及重构思路 l 进行代码重构让色狼大叔和 ...
- Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(一)
一.前提: 完成Hello Game项目的创建编译. 具体参考:Cocos2dx.3x_Hello Game项目创建篇 二.本篇目标: l 说说关于塔防游戏的想法和思路 l 实现一个简单的塔防游戏 ...
- VS2013配合EgretVS开发简单塔防游戏
VS2013配合EgretVS开发简单塔防游戏(1) - 环境配置 VS2013配合EgretVS开发简单塔防游戏(2) – 原型设计 VS2013配合EgretVS开发简单塔防游戏(3) – 精灵动 ...
- Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）
Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...
- 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏
项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...
- Android | 教你如何用代码开发一个拍照翻译小程序
引子 想必有很多小伙伴喜欢外出旅游,能去海外玩一圈那是更好不过了,旅游前大家一定会对吃.穿.住.行.游玩路线做各种攻略,然后满怀期待的出发- 想象中的旅游 出发前,想象中的旅游目的地可能有漂亮 ...
随机推荐
- T - Permutation 题解（思维+dp)
题目链接 题目大意 给你一个数字n和长为n-1个字符串 字符串包含'<','>' 若s[i]='<' 则代表a[i]<a[i+1] 若s[i]='>' 则代表a[i]&g ...
- Java基础教程——模拟B/S结构的服务器
浏览器发送请求,用Java模拟写个简单的服务器,浏览器可以收到响应. 执行下列代码(设置static final int TEST = 1), 使用浏览器访问:http://127.0.0.1:888 ...
- 华为模拟器ensp老是弹出一堆英文up down，关闭
英文内容: Mar 25 2015 20:38:21-08:00 Huawei DS/4/DATASYNC_CFGCHANGE:OID 1.3.6.1.4.1.2011.5.25.191.3.1 co ...
- CentOS升级参考
CentOS生产系统升级策略: 1)升级前评估 a)确认kernel或包bug. b)用评估工具 c) 测试验证 2)确认升级内容 a)单独升级kernel b)单独升级包 c)都升级 4)确认升级方 ...
- 第15.34节 PyQt(Python+Qt)入门学习：containers容器类部件QStackedWidget堆叠窗口部件详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 StackedWidget堆叠窗口部件为一系列窗口部件的堆叠,对应类为QStackedWi ...
- PyQt（Python+Qt）学习随笔：QScrollArea的alignment属性不起作用的原因
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Scroll Area滚动区域提供了一个呈现在其他部件上的可滚动区域视图,对应类为QScrollAr ...
- PyQt（Python+Qt）学习随笔：QTableWidgetItem项的复选状态checkState访问方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget表格部件中的QTableWidgetItem项可以单独设置复选状态,如图所有 ...
- PyQt（Python+Qt）学习随笔:窗口部件大小策略sizePolicy与SizeConstraint布局大小约束的关系
在<PyQt(Python+Qt)学习随笔:Qt Designer中部件的三个属性sizeHint缺省尺寸.minimumSizeHint建议最小尺寸和minimumSize最小尺寸>. ...
- MySQL技术内幕InnoDB存储引擎（三）——文件相关
构成MySQL数据库和InnoDB存储引擎表的文件类型有: 参数文件:MySQL实例运行时需要的参数就是存储在这里. 日志文件:用来记录MySQL实例对某种条件做出响应时写入的文件. socket文件 ...
- (干货)构建镜像之docker commit
Docker提供了两种构建镜像的方法:docker commit命令喝Dockerfile构建文件. docker commit 不推荐 (1).这是手工构建镜像的方式,容易出错,效率低且可重复性 ...