整个项目都已经开源,项目地址: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层楼的地图吻合,
因此我们魔塔的地图设计可以直接借鉴《灵山圣战》里的地图,
只需在《灵山圣战》无敌版中,利用楼层传送器,将《灵山圣战》中每层楼的地图都记录下来,
再人工转换成地图数据,即可简化开发时间。
在此还是要向《灵山圣战》的开发者致个歉,我在界面设计、数值系统、地图设计等很多地方借鉴了您的作品,
我只是将此作为一个个人的练手项目,并无以此谋私的意图,还请您谅解。
整体设计和实现思路
架构设计
这个游戏的架构主要分为两部分:逻辑部分和数据部分。
逻辑部分:绘图逻辑,规则逻辑和事件逻辑;
数据部分:地图数据,数值表数据,资源加载器
功能模块
绘图逻辑:负责绘制状态栏,道具栏、地图、角色、道具、交互信息
规则逻辑:负责碰撞检测和处理,创建游戏基本规则
事件逻辑:在规则逻辑的基础上,负责处理特定事件
地图数据:存储了魔塔的每一楼层的所有的道具位置,角色位置、建筑结构位置(墙,门,无法接触的地表)
数值表数据:存储了魔塔的所有怪物以及主角的属性信息
资源加载器:负责加载游戏必须的图片资源
实现思路
因为魔塔游戏的所有内容都是在地图上呈现的,因此要开始实现这个游戏就必须先研究地图的设计问题。
魔塔的每张地图都是 11 × 11 块的正方形,每次主角只能在横向或纵向移动一格,
因此很自然地就想到,可以用一个点 ( x , y ) 来表示主角在地图中的位置。
那么地图数据本身怎么存储呢?
仔细想想就可以想出来,每张地图可以表示为一个二维数组,按行或者按列储存,
地图数组里的每个元素储存着对应基础块的角色道具或建筑信息,绘制地图时就遍历整个数组,读取每个元素的信息进行绘制。
这种方法比较简单,但是还有很多值得探讨的地方:
第一