HTML5 canvas 游戏设计：创建一个经典的魔塔游戏

最新推荐文章于 2024-07-12 11:10:56 发布

inner_space

最新推荐文章于 2024-07-12 11:10:56 发布

阅读量1.3w

点赞数 24

分类专栏： Canvas 开发文章标签： html5 javascript canvas 游戏开发魔塔

本文链接：https://blog.csdn.net/m8705/article/details/86628153

版权

整个项目都已经开源，项目地址：https://github.com/m8705/MAGIC-TOWER-JS
注：这是我高中时候的作品，BUG 很多，已经不再更新了。下载项目到本地就能玩。

前言

魔塔是一个非常经典的 2D 策略类固定数值RPG游戏，你将扮演一个王国的勇士，前往远方的魔塔，解救里面的公主，探寻魔塔的秘密。以前我在学习机上玩的这款游戏，后来高中学了前端，用前端技术还原了这个经典的魔塔游戏，但是一直没有对这个游戏的制作的过程进行总结归纳。因此就有了现在这篇文章。

让我们从0开始，一起做一个完整的魔塔游戏吧。（剧透警告，建议先自己去玩一玩游戏）

需求分析和原型设计

需求分析：现在的魔塔游戏大多都是 Flash 版本的，没有用 HTML5 技术写的版本，可移植性差，而且我是写前端的，当然要用前端来写啦。因此我们的项目目标就是用 HTML5 canvas 技术实现一个运行在浏览器的经典魔塔游戏。

原型设计：魔塔在国内有很多个版本，从早期的胖老鼠21层版本到后来的50层、60层版本，再到后来的70层、100层版本，不同版本的魔塔在地图设计、故事情节、数值系统设计等方面都存在差异，我们到底要做哪一个版本的经典复刻呢？这里我选择的是以前在学习机上玩过的50层魔塔，这个版本的魔塔不仅情节内容比较丰富，玩法多样，略去了费时的战斗动画，而且具体实现起来也比较容易。

由于学习机里的魔塔虽然是50层魔塔，但是它并不是标准版的50层魔塔，游戏里的界面设计依照的是学习机的屏幕尺寸进行设计的，因此想要移植到浏览器端，就必须对界面进行重新的设计。这里我们参考《齐天大圣系列灵山圣战》的界面设计：

布局设计基本一模一样，最终的界面布局和效果如下图：

（这里因为 canvas 缩放没有处理好，因此文字看起来会比较模糊）

两边是状态栏和道具栏，中间是游戏的内容。
整个游戏以 32 × 32 px 的基本块作为创建游戏内容和布局的基本单位，
所有的角色、装备、宝物和地图都是由不同数量的基本块构成的，逻辑判断时也是以基本块为单位。
游戏地图的大小为 11 × 11 块，两边的状态栏和道具栏大小都为 4 × 11 块。

值得一提的是，
《灵山圣战》里一共有66层楼，
而我们要做的经典复刻版魔塔，只有50层楼，
而这50层楼的地图经过对比，基本和66层楼里的前50层楼的地图吻合，
因此我们魔塔的地图设计可以直接借鉴《灵山圣战》里的地图，
只需在《灵山圣战》无敌版中，利用楼层传送器，将《灵山圣战》中每层楼的地图都记录下来，
再人工转换成地图数据，即可简化开发时间。