因为之前写了一个画图板 , 就想再写个塔防玩玩 所以呢,最近抽空写了个塔防 , 一直在写 也没有总结, 就想来 ITEYE 总结一下自己塔防的设计模式以及思路,大家可以参考一下。先上图 , 要不怕大家没兴趣了。
1.做这个塔防我用到了 8 张 canvas 分别是
<canvas id="map_canvas" style="z-index:0"></canvas> //地图
<canvas id="mouster_canvas"></canvas> //怪物
<canvas id="bullet_canvas" style="z-index:2"></canvas> //子弹
<canvas id="tower_canvas" style="z-index:1"></canvas> //塔
<canvas id="bak_canvas" style="z-index:99"></canvas> //备用
<canvas id="tower_info_canvas" style="z-index:2"></canvas> //塔的信息
<canvas id="background_canvas" style="z-index:-1"></canvas> //地图
<canvas id="info_canvas" style="z-index:3"></canvas> //所有信息 包括金钱提示之类的
这8张canvas 重叠起来就是我们的 游戏了 , 自己只用操作自己的 画图板即可,否则清空画板的时候 维护的成本太大。
2.接下来说一下我的代码 , 让大家可以看起来比较轻松一点。 代码的分布 和 canvas 基本做到了对应, 一张canvas 就对应以一个 js 去控制 。 如图:看名字应该差不多就能理解了
3.这里开始讲解一下代码的设计。简单说明一下把
首先先看一下地图的代码 map.js 如图,大家可以看到里面有一个 二维数组 用于标记地图。0带表不能建造,1代表是怪物行走的路, 肯定也不能建造 , 2代表是可以建造的区域。 那么初始化的时候只需要判断二维数组中的值 ,画出相应的图标即可 。 SO EASY !所类似的 还有 tower.js 中的 二维数组标记了 塔的位置和类型 , background.js 中的二维数组标记了 背景等等。 同理!
之后看一下对象的处理 ,当出怪的时候其实就是创建一个怪物的对象 , 然后把怪物放入 now_mousterAry 的数组中即可 , 其他的事情,创建的方法一概不管。 然后其他地方需要用到, 则取 now_mousterAry 拿数据即可 , 包括怪物行走 , 扣血, 死亡都是一样的 。
最后我们再来看一下 怪物是怎么动起来的 。 入口是 init.js 中的一个 初始化方法
从图中可以看到,当页面加载完的时候会执行 init 方法 , 会加载所有的图片 , 理论上应该是等图片加载完成之后 再调用 _init (有一个下划线哦!) 方法,但是这里我偷懒了一下, 直接延迟了三秒 等图片加载完成。开始调用所有的init方法,包括初始化所有的 context , canvas , map , mouster , tower , controller , task 等等 。 这个读者可以之后自己去看对应的方法。
这里提到一个重点就是 startTask 的方法 , 这个是核心, 也就是为什么 怪物 ,子弹 , 塔 , 文字 等等,会动得原因。 打开 task.js 中可以看到 startTask 的实现很简单 。 就是每个 25 毫秒 调用所有的 显示信息。 也就是我们常说的帧数。 拿 __task 其中的一个 autoMove 的一个方法来说 。 在 autoMove 中是控制了怪物自动行走的 方法。 但是其实我们不希望怪物每隔 25 毫秒就走动 ,为什么呢? 因为如果 帧数和 怪物走动的频率做了绑定的话 , 当你帧数调高的时候 怪物行走也会变快 , 这是用户不希望的 , 帧数调高只是希望画面变的流畅 ,但是怪物行走 肯定还是原来的速度的。 所以在怪物的对象中 设置了2个属性 , lastUpdateTime 和 refreshTime 用于判断怪物是否到了可以刷新的时间 , 目前 refreshTime 的时间为50 毫秒 , 就是怪物 是每隔50毫秒才会走动 XXX 距离 , 和帧数就没有关系了 , 哪怕是10毫秒 刷新一下 , 怪物还是会 50 毫秒走一步 。 怪物是这样 , 塔也是这样。 如果是塔的话 就通过这个来控制攻击速度了。
因为时间有限,今天就先写到这里 ,代码在附件中, 解压之后可以直接运行。 如果有疑问可以给我留言 ,我会定时看了恢复的哈,
转发请标明出处,谢谢配合。
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0085/4233/f7158458-9d4c-3473-aca2-e2962625168c-thumb.jpg)
- 大小: 18.5 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0085/4235/567879ba-23c4-32c3-b742-9a192f783619-thumb.jpg)
- 大小: 20.6 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0085/4244/4697cf19-a499-3c9f-955b-1b05b2a68a6d-thumb.jpg)
- 大小: 38.6 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0085/4253/0441898d-46c1-3bba-96c4-9efbcff040eb-thumb.jpg)
- 大小: 106.1 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0085/4255/cf365def-ddc6-3550-9e73-38dc4e7ea9c2-thumb.jpg)
- 大小: 103.3 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0085/5051/29db626e-d878-358a-a8ec-391b5c2c078d-thumb.jpg)
- 大小: 33.3 KB
分享到:
相关推荐
总的来说,"html+css+js表格动态增删改与xml加载与保存"这个项目涵盖了网页开发中的基本技能,包括动态HTML操作、CSS美化、JavaScript事件处理和XML数据交互。掌握这些技术,能够帮助开发者构建具有强大功能和良好...
在动态表格中,HTML `<table>` 标签用于创建表格,`<tr>` 代表行,`<td>` 或 `<th>` 代表单元格。通过JavaScript,我们可以对这些元素进行动态操作,比如在用户交互时创建、删除或修改表格内容。 JavaScript则赋予...
总结,"html+css+js购物车"项目涵盖了前端开发的基本技术栈,从HTML构建页面结构,CSS进行美化和布局,到jQuery实现动态交互和数据计算,再到移动端适配和多店铺计算逻辑,每一个环节都至关重要。通过这个项目,...
本主题将深入探讨如何使用JAVA、JavaScript(JS)和HTML来实现分页功能。 首先,我们来看JAVA部分。在JAVA中,分页通常与数据库操作结合,如JDBC或者ORM框架(如Hibernate或MyBatis)一起工作。以下是一些关键概念...
在本项目中,"五子棋纯html+jquery+js写法"是一个使用HTML、JavaScript(JS)和jQuery实现的在线五子棋游戏。这个项目对于初学者来说是一个很好的学习资源,因为它展示了如何将这三个核心技术结合在一起,创建一个...
最后,JavaScript(JS)是一种强大的脚本语言,用于实现网页的动态功能。`JavaScript.chm`文档可能包含: 1. 变量、数据类型:声明变量(var、let、const),基本类型(字符串、数字、布尔、null、undefined)。 2....
本项目使用HTML、JavaScript(JS)和CSS这三种技术实现了一个网页版的扫雷游戏。下面我们将详细探讨这三个方面的知识。 **HTML(超文本标记语言)** HTML是网页的基础结构,负责定义页面的布局和内容。在这个扫雷...
在这个项目中,HTML可能包含了9x9的表格元素(`<table>`),每个单元格(`<td>`)对应数独的一个格子。用户可以通过这些单元格输入数字,同时可能存在额外的按钮元素,如“开始”、“清空结果”和“重置”,用于触发...
网页设计是创建交互式、视觉吸引人的在线内容的关键步骤,HTML、CSS和JavaScript是实现这一目标的三大核心技术。本文将深入解析这些知识点,并通过实例来阐述如何使用它们进行网页设计。 首先,HTML(HyperText ...
JavaScript 代码可以直接写在 HTML 文档中,也可以独立编写扩展名为 .js 的文件。 JavaScript 中的 alert 函数用于弹出一个警告框,例如:<script>alert("这是一个警告框");。 HTML、CSS 和 JavaScript 的角色...
《CSS+CSS3+HTML+HTML4+JS离线手册》是一份综合性的技术文档集合,涵盖了Web前端开发中的核心语言和技术。这份手册旨在为开发者提供全面、详细且易于理解的指南,帮助他们在没有网络连接的情况下也能查阅相关知识。...
3. 表格和列表:`<table>`, `<tr>`, `<td>`, `<ul>`, `<ol>`, 和`<li>`等用于创建数据表格和列表。 4. HTML5新特性:如`<canvas>`用于画布,`<audio>`和`<video>`用于多媒体播放,`<section>`, `<article>`等语义化...
网页设计是构建互联网应用的基础,它涉及到HTML、CSS和JavaScript等关键技术。HTML(HyperText Markup Language)是网页内容的结构化语言,用于定义网页的基本元素;CSS(Cascading Style Sheets)则负责样式和布局...
本游戏完全使用 HTML5 / JavaScript / CSS 实现,没有用到 Flash、SilverLight 等技术。 2.这一个版本没有用到图片,游戏中的所有物品都是使用 HTML5 画出来的。 3.这一个版本部分地方为 IE9 做了专门的优化,...
在IT行业中,JavaScript(简称JS)和HTML是构建网页交互性的重要工具。本文将深入探讨如何使用这两者来实现表格的动态增删改查以及表单验证,这对于前端开发人员来说是必备技能。 首先,HTML(HyperText Markup ...
韩顺平HTML+CSS+JavaScript笔记 - DIV+CSS详解 本笔记主要介绍了DIV+CSS的基本概念和应用,涵盖了DIV的介绍、CSS的基本语法、CSS的分类、使用CSS统一网站风格、使用滤镜等内容。 DIV+CSS是什么? ----------------...
【万年历(html + javascript)】是一个实用的网页日历应用示例,它结合了HTML和JavaScript技术,为用户提供了一种方便的方式来查看日期,并且包含了农历功能,这意味着用户不仅可以查看公历日期,还可以查看农历日期...
Web前端开发是构建互联网应用程序和网站的关键技术,主要包括HTML、CSS和JavaScript这三大核心部分。以下是对这些知识点的详细说明: 1. HTML (HyperText Markup Language):HTML是用于创建网页的标准标记语言,...
在前端开发中,HTML(超文本标记语言)和JavaScript(JS)是构建动态网页不可或缺的两个核心技术。"html+js前端百度日历"这个项目,就是利用这两种技术来实现一个类似百度日历的功能,通常这样的日历组件可以用于...
在日历控件中,HTML部分通常会创建一个表格(`<table>`元素)来展示月份和日期,每个日期单元格(`<td>`元素)都可以通过JavaScript进行交互处理。 二、JavaScript动态交互 1. **事件绑定**:JavaScript允许我们为...