项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

本节做完效果

游戏主页面

index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" />
  6. <title>塔防</title>
  8. </head>
  9. <body>
  11. <img src="img/enemy.png" id="enemy_img" style="display:none;" />
  12. <img src="img/tower.png" id="tower_img" style="display:none;" />
  13. <img src="img/bullet.png" id="bullet_img" style="display:none;" />
  14. <img src="img/btn.png" id="btn_img" style="display:none;" />
  16. <div id="game" style="position:relative;float:left;width:600px;height:500px;">
  17. 	<canvas id="map" width="500" height="500" style="background:url(img/bg.png) repeat;position:absolute;left:0;top:0;z-index:99;"></canvas>
  18. 	<canvas id="main" width="500" height="500" style="position:absolute;left:0;top:0;z-index:100;"></canvas>
  19. 	<canvas id="tower" width="500" height="500" style="position:absolute;left:0;top:0;z-index:100;"></canvas>
  20. 	<canvas id="select" width="500" height="500" style="position:absolute;left:0;top:0;z-index:101;"></canvas>
  21. 	<canvas id="info" width="100" height="500" style="background-color:black;position:absolute;left:500px;top:0;z-index:102;"></canvas>
  22. </div>
  24. <div style="float:left;width:500px;margin-left:50px;">
  26. 	<p>
  27. 		说明：每种塔都可以升级到3级，升级的价格与本身建造相同，卖掉的话就是总额的一半。<br/><br/>
  28. 		第一种塔：升级到3级，有小偷功能，每攻击一次会偷取1块钱。<br/>
  29. 		第二种塔：减速攻击，3级时可以同时减速两个。<br/>
  30. 		第三种塔：多重攻击。攻击多个目标。<br/>
  31. 		第四种塔：穿刺攻击，攻击一条线上，攻击力最高。<br/>
  32. 		第五种塔：秒杀攻击，有一定几率把敌人秒杀。<br/><br />
  33. 		选择地图<select id="select_map"><option value="1">地图一</option><option value="2">地图二</option></select>,然后按<input type="button" value="开始" onclick="startGame()" />开始游戏！
  34. 	</p>
  36. </div>
  38. <script type="text/javascript" src="js/tools.js"></script>
  39. <script type="text/javascript" src="js/MapData.js"></script>
  40. <script type="text/javascript" src="js/Map.js"></script>
  41. <script type="text/javascript" src="js/Info.js"></script>
  42. <script type="text/javascript" src="js/Enemy.js"></script>
  43. <script type="text/javascript" src="js/Tower.js"></script>
  44. <script type="text/javascript" src="js/Bullet.js"></script>
  45. <script type="text/javascript" src="js/Game.js"></script>
  47. <script type="text/javascript">
  49.     var isStart = false;
  51. 	function startGame(){
  53.         if(!isStart)Game.start();
  54.         else Game.restart();
  56.         isStart = true;
  57. 	}
  59. </script>
  61. </body>
  62. </html>

游戏主模块

game.js

  1. //游戏数据控制类
  2. var Game = {
  3.     //图片列表信息
  4.     imgList : {},
  5.     //画布列表信息
  6.     canvasList : {},
  8.     //初始化
  9.     init : function(){
  10.         this.initImg();
  11.         this.initCanvas();
  12.     },
  13.     //初始化图片
  14.     initImg : function(){
  16.         this.imgList = {
  18.             enemy_img : document.getElementById("enemy_img"),
  19.             tower_img : document.getElementById("tower_img"),
  20.             bullet_img : document.getElementById("bullet_img"),
  21.             btn_img : document.getElementById("btn_img")
  22.         }
  23.     },
  24.     //初始化画布
  25.     initCanvas : function(){
  27.         this.canvasList = {
  29.             map : document.getElementById("map").getContext("2d"),
  30.             main : document.getElementById("main").getContext("2d"),
  31.             info : document.getElementById("info").getContext("2d"),
  32.             select : document.getElementById("select").getContext("2d"),
  33.             tower : document.getElementById("tower").getContext("2d")
  34.         }
  35.     },
  37.     //开始
  38.     start : function(){
  40.         switch(document.getElementById("select_map").value){
  41.             case "1":
  42.                 MapData = MapOne;
  43.                 break;
  44.             case "2":
  45.                 MapData = MapTwo;
  46.                 break;
  47.             default:
  48.                 MapData = MapOne;
  49.                 break;
  50.         }
  51.         Map.draw(this.canvasList.map);
  52.         this.timer = setInterval(Game.loop,20);
  53.     },
  54.     //循环体
  55.     loop : function(){
  56.         Canvas.clear(Game.canvasList.main,500,500);
  57.     }
  58. }
  60. Game.init();

代码不言自明。

简单说明一下：

Game.init()加载图片和Canvas对象，本游戏有5个Canvas对象，具体用途我们在后面图层章节进行说明。

点击网页上的开始按钮，调用start方法。start方法加载地图，并画到canvas上。

地图数据

0是墙壁，1是可以走的路径。可以简单的改变数据，生成不同形状的地图。

MapData.js

  1. //地图类
  2. var MapData = [];
  4. //地图二数据
  5. var MapTwo = [[0,0,0,0,0,0,0,0,0,0],
  6.     [1,1,1,1,1,1,1,1,1,0],
  7.     [0,0,0,0,0,0,0,0,1,0],
  8.     [0,0,0,0,0,0,0,0,1,0],
  9.     [0,1,1,1,1,1,1,1,1,0],
  10.     [0,1,0,0,0,0,0,0,0,0],
  11.     [0,1,0,0,0,0,0,0,0,0],
  12.     [0,1,1,1,1,1,1,1,1,0],
  13.     [0,0,0,0,0,0,0,0,1,0],
  14.     [0,0,0,0,0,0,0,0,1,0]];
  15. //地图一数据
  16. var MapOne = [[0,0,0,0,0,0,0,0,0,0],
  17.     [1,1,1,1,1,1,1,1,1,0],
  18.     [0,0,0,0,0,0,0,0,1,0],
  19.     [0,0,0,0,0,0,0,0,1,0],
  20.     [0,0,0,0,0,0,0,0,1,0],
  21.     [0,1,1,1,1,1,1,1,1,0],
  22.     [0,1,0,0,0,0,0,0,0,0],
  23.     [0,1,0,0,0,0,0,0,0,0],
  24.     [0,1,0,0,0,0,0,0,0,0],
  25.     [0,1,0,0,0,0,0,0,0,0]];

画地图

Map.js

  1. //地图绘制类
  2. var Map = {
  3.     //画出地图
  4.     draw : function(map){
  6.         var i,j;
  8.         for(i = 0; i < 10;i++){
  10.             for(j = 0;j<10;j++){
  11.                 //画背景地图
  12.                 if(MapData[i][j] == 0)Canvas.drawRect(map,i*50,j*50,50,50,'red');
  13.                 //画可以走的路
  14.                 else Canvas.fillRect(map,i*50,j*50,50,50,'black');
  15.             }
  16.         }
  17.     }
  18. }

很简单，看注释即可明白。

游戏循环

  1.     //开始
  2.     start : function(){
  4.         switch(document.getElementById("select_map").value){
  5.             case "1":
  6.                 MapData = MapOne;
  7.                 break;
  8.             case "2":
  9.                 MapData = MapTwo;
  10.                 break;
  11.             default:
  12.                 MapData = MapOne;
  13.                 break;
  14.         }
  15.         Map.draw(this.canvasList.map);
  16.         this.timer = setInterval(Game.loop,20);
  17.     },
  18.     //循环体
  19.     loop : function(){
  20.         Canvas.clear(Game.canvasList.main,500,500);
  21.     }

每隔20毫秒，刷新一下界面。

That's All

项目源码：

项目源码

从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建的更多相关文章

  1. iOS 非ARC基本内存管理系列 -手把手教你ARC——iOS/Mac开发ARC入门和使用(转)

    手把手教你ARC——iOS/Mac开发ARC入门和使用 Revolution of Objective-c 本文部分实例取自iOS 5 Toturail一书中关于ARC的教程和公开内容,仅用于技术交流 ...

  2. 【转】手把手教你把Vim改装成一个IDE编程环境(图文)

    手把手教你把Vim改装成一个IDE编程环境(图文) By: 吴垠 Date: 2007-09-07 Version: 0.5 Email: lazy.fox.wu#gmail.com Homepage ...

  3. Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(二)

    一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(一)篇 二.本篇目标: l  说说关于cocos2dx手机分辨率适配 l  对前一篇完成的塔防游戏原型进 ...

  4. Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(三)

    一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(二)篇 二.本篇目标: l  说说游戏中各种角色的动作.属性以及重构思路 l  进行代码重构让色狼大叔和 ...

  5. Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(一)

    一.前提: 完成Hello Game项目的创建编译. 具体参考:Cocos2dx.3x_Hello Game项目创建篇 二.本篇目标: l  说说关于塔防游戏的想法和思路 l  实现一个简单的塔防游戏 ...

  6. VS2013配合EgretVS开发简单塔防游戏

    VS2013配合EgretVS开发简单塔防游戏(1) - 环境配置 VS2013配合EgretVS开发简单塔防游戏(2) – 原型设计 VS2013配合EgretVS开发简单塔防游戏(3) – 精灵动 ...

  7. Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...

  8. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

  9. Android | 教你如何用代码开发一个拍照翻译小程序

    引子   想必有很多小伙伴喜欢外出旅游,能去海外玩一圈那是更好不过了,旅游前大家一定会对吃.穿.住.行.游玩路线做各种攻略,然后满怀期待的出发- 想象中的旅游   出发前,想象中的旅游目的地可能有漂亮 ...

随机推荐

  1. Java基础教程——枚举类型

    枚举类型 枚举类型在JDK 5时引入. enum WeekEnum { MONDAY, TUESDAY, WEDNESDAY, THURDAY, FRIDAY, SATURDAY, SUNDAY } ...

  2. Java集合【3】-- iterable接口超级详细解析

    目录 iterable接口 1. 内部定义的方法 1.1 iterator()方法 1.2 forEach()方法 1.3 spliterator()方法 总结 iterable接口 整个接口框架关系 ...

  3. 编程小白必备——主流语言C语言知识点

    对于编程语言来说,经常看到有因为各自支持的语言阵营而互怼的,其实根本没那个必要,都只是一种工具而已.当多数主流语言都会使用时也许你就不会有偏见了,本质不过都是用来描述计算机的一个任务,只是每门语言设计 ...

  4. mybatis-plus使用记录

    如何and和or: QuoteSalaryEnum salaryMax = QuoteSalaryEnum.of(memberObjectInfo.getQuoteSalaryMax()); Quot ...

  5. 如何在Linux下关闭ARP协议

    方法一:临时关闭ARP协议 echo 1 > /proc/sys/net/ipv4/conf/eth0/arp_ignoreecho 2 > /proc/sys/net/ipv4/conf ...

  6. python大数问题

    python不需要特殊的声明,可以直接进行大数运算 验证:

  7. Android Studio下的简单网页解析

    Android Studio下的简单网页解析 一.导入数据 导入前添加依赖 implementation 'org.jsoup:jsoup:1.11.3' 使用字符串导入 String html = ...

  8. docker centos容器无法yum

      问题 dockerfile yum -y install vim的时候一直未响应 但是在本地虚拟机centos7上运行则没问题   https://blog.csdn.net/jimiao_xxx ...

  9. Linux|CentOS下配置Maven环境

    1.下载maven包 wget http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.3.9/binaries/apache-maven ...

  10. 第3章 Python的数据类型 第3.1节 功能强大的 Python序列概述

    一.概述 序列是Python中最基本的数据结构,C语言中没有这样的数据类型,只有数组有点类似,但序列跟数组差异比较大. 序列的典型特征如下: 序列使用索引来获取元素,这种索引方式适用于所有序列: 序列 ...