从零开始手把手教你使用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 | 教你如何用代码开发一个拍照翻译小程序
引子 想必有很多小伙伴喜欢外出旅游,能去海外玩一圈那是更好不过了,旅游前大家一定会对吃.穿.住.行.游玩路线做各种攻略,然后满怀期待的出发- 想象中的旅游 出发前,想象中的旅游目的地可能有漂亮 ...
随机推荐
- pixi.js持续渲染页面
Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而制作游戏或应用. 项目地址:https://github.com/pixijs/pixi.js A ...
- Beta冲刺——用户测试报告
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 用户测试报告 用户 ...
- jwt介绍
jwt原理 最简单理解:jwt本质就是, 把用户信息通过加密后生成的一个字符串 JWT的原则是在服务器身份验证之后,将生成一个JSON对象并将其发送回用户 { "UserName" ...
- CentOS创建管理LVM分区（挂载新分区）
来源: CentOS 8.0 创建管理LVM分区(挂载新分区) https://www.iwmyx.cn/centos80cjgllvmfa.html 1.查看可用磁盘 fdisk -l 2.新盘(/ ...
- 学习工具---maven
写在前面 为什么要用maven? 作为一跨平台的项目管理工具,它有着以下丰富的应用场景: 作为程序员,有相当一部分时间花在编译.运行单元测试.生成文档.打包.部署和发布等不起眼的工作上,而maven将 ...
- 第3.10节 Python强大的字符串格式化新功能：使用format字符串格式化
一. 引言 前面两节介绍的字符串格式化方法,都有其本身对应的缺陷,老猿不建议大家使用,之所以详细介绍主要是考虑历史代码的兼容性,方便大家理解前人留下的代码.老猿推荐大家新编码时使用format方 ...
- 转：Python考核试题及答案
Python测试(总分:120) 选择题(每题2分,共20分) 1．下列哪个语句在Python中是非法的? (B) A.x = y = z = 1 B.x = (y = z + 1) C.x, y = ...
- RSA简单实践
RSA公钥文件解密密文的原理分析 前言 最近在学习 RSA 加解密过程中遇到一个这样的难题:假设已知 publickey 公钥文件和加密后的密文 flag ,如何对其密文进行解密,转换成明文~~ 分析 ...
- 直接插入排序（python实现）
这篇博文用来介绍直接插入排序 直接插入排序基本思想: 每次将一个待排序的记录插入到已经排好序的数据区中,直到全部插入完为止 直接插入排序算法思路: 在直接插入排序中,数据元素分为了有序区和无序区两个部 ...
- Linux文件系统简介一（磁盘分区、开机过程、目录结构、文件权限、文件扩展名、目录管理）
Linux:就是一组软件,一套操作系统=核心+系统呼叫接口层. 1.操作系统 操作系统 = 核心(内核) + 系统呼叫(接口) 操作系统其实也是一组程序,重点在于管理计算机的所有活动以及驱动系统中的所 ...