从零开始手把手教你使用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 | 教你如何用代码开发一个拍照翻译小程序
引子 想必有很多小伙伴喜欢外出旅游,能去海外玩一圈那是更好不过了,旅游前大家一定会对吃.穿.住.行.游玩路线做各种攻略,然后满怀期待的出发- 想象中的旅游 出发前,想象中的旅游目的地可能有漂亮 ...
随机推荐
- 对数组进行排序成最小的，相当于自己实现了一次String的compareTo函数，不过是另类的。
题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. //一气呵成 ...
- yii2-imagine的使用
<?php /** * 图片常用处理 * * 需要 yii/yii2-imagine 的支持 * php composer.phar require --prefer-dist yiisoft/ ...
- Session 与 sql 会话，mysql 权限设置，mybatis 逆向工程
Session 与 Sql 会话注意点: 通过 sqlSessionFactoty 工厂建立的与sql的会话,在进行相应的插入操作后,需要进行 commit 操作才会让数据库执行插入更新操作.如何主键 ...
- Java基础教程——Jshell
Jshell 从java9开始,java提供Jshell工具,可以输入代码片段并马上看到运行结果. 对于简单的Java语句测试,不需要新建文件,编译,运行了 Microsoft Windows [版本 ...
- HEXO | 给博客添加RSS
Hexo是一个简洁.高效.易用的博客框架,同时它拥有十分丰富的主题环境,本次我们所谈到的是cards主题,但是该主题的原生环境里没有相关的rss配置,所以我们需要采用手动添加的方式,进而实现rss功能 ...
- [从源码学设计]蚂蚁金服SOFARegistry之消息总线
[从源码学设计]蚂蚁金服SOFARegistry之消息总线 目录 [从源码学设计]蚂蚁金服SOFARegistry之消息总线 0x00 摘要 0x01 相关概念 1.1 事件驱动模型 1.1.1 概念 ...
- JavaScript使用中的一些小技巧
任何一门技术在实际中都会有一些属于自己的小技巧.同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略.而在互联网上,时不时的有很多同行朋友会总结(或收集)一些这 ...
- Flv.js记录（vue）
下载 npm install flv.js 插入 import flvjs from 'flv.js' 第一种报错:Failed to read the 'buffered' property f ...
- Python中倒转输入序列元素顺序的reversed函数
reversed函数将输入的序列的元素倒转后存储到一个类型为"reversed"可迭代对象,不能直接访问,可以转换为其他对象如列表或通过for循环方法访问. 注意:这里是倒转不是倒 ...
- PyQt（Python+Qt）学习随笔：Model/View中的枚举类 Qt.MatchFlag的取值及含义
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 枚举类 Qt.MatchFlag描述在模型中搜索项时可以使用的匹配类型,它可以在QStandardI ...