有关《因果》的技术详解

2025/11/0765 浏览技术交流

在《因果》中我使用了一系列不常用的思路来制作游戏，希望我现在的思路在以后还是有帮助

首先想分享的是碰撞检测

一般来说，进行碰撞检测常用的方案是碰撞体，即检测玩家是否与障碍物进行碰撞

在我上一个游戏《T.B.I》中使用的就是这种技术

另外说明一下，我使用的是h5技术（html+css+javascript）来制作游戏，目的是为了实现跨平台打包和分发，在pc端使用nw.js打包成exe，在移动端使用cordova打包成安装包

在js（javascript）中，对于div元素可以使用offset关键字来获取元素的各种属性，例如宽高，相较于父元素的绝对坐标，等等

在《T.B.I》中，对每一个障碍物增加一个“block”的类名，在加载场景的时候就获取包含“block”这个类名的所有元素，获得每一个元素的宽高和坐标并与与玩家的坐标进行判断

如果玩家的坐标位于任意一个障碍物的判定区域内，就判断为“被障碍挡住”，进而执行一系列的逻辑处理

方法是好方法，就是太麻烦了

使用这种碰撞体检测不仅需要手动创建元素，还要将其放进游戏场景进行微调

而且这种“摆放”不能预览，如果位置不合适只能在代码里进行微调后重新进入游戏场景查看

就，不太优雅

于是我将目光放在了canvas画布上

canvas画布算是万金油，如果有特效或其他效果一时间没法用常规的html结构实现，将重心放在canvas画布上准没错

canvas画布允许开发者直接在上面绘制像素，和渲染是一个思路，同时也允许直接在上面绘制图片

在《因果》中，我将游戏场景的布局在ps里直接绘制出来，然后将障碍物的部分标记为纯黑，然后将canvas画布平铺整个游戏场景，将场景图片绘制到canvas画布上

这时仅需要判断玩家的位置是否有黑色像素，如果玩家站在黑色像素上就判断为“被障碍物挡住”，进而执行其他逻辑

这样做的好处是可以预览整个游戏场景，且修改起来十分方便，基本上半个小时左右就可以完成一个小场景的制作和调试

在后期开发中还将这个障碍判定画布作为障碍物的阴影或底部来体现3d空间，算是开发《因果》时最用心的工作了

注意观察障碍底部的阴影，不仅是3D效果的呈现，也是重要的碰撞判断条件

另外还发现喷溅的毒液会覆盖障碍物的黑色像素，达到了“场景破坏”的效果，但由于时间比较赶没有深入开发

接下来想分享的是敌人脚本加载

如果是在引擎上加载敌人脚本压根不是难事，但我使用的是js

在《T.B.I》中，我使用的是“中心管理”的方式，即在进入场景时就加载一个敌人脚本，这个脚本相当于“总指挥”，指挥每一个敌人应该干什么

但这种方式不能实现“动态添加敌人”的效果，只能在进入房间时就确定好每个敌人的序号，如果这时再加入一个敌人就会打乱获取敌人元素的顺序，整个场景就会变得不可控

但在《因果》中这个难题被解决了

在《因果》中，每一个敌人都有自己的脚本，即使用的是同一套动作模板

使用js的url参数可以区分不同敌人的脚本，在创建敌人的时候就将敌人的id作为url参数传进脚本文件的url中，这样就可以动态加载脚本文件了，基于此还制作了不停刷新敌人的无尽模式

创建敌人的函数，六个参数分别为id名，类名，初始化图片路径，x坐标，y坐标，脚本路径

《因果》是我首次实现动态添加敌人的游戏，当我得知url参数居然能用在js文件的请求路径时，整个代码思路瞬间打开了

但问题仍然存在，在某些低端移动设备（oppo A5）上加载过多的敌人脚本就会发生卡顿，之前提到过的“总指挥”的方案只需要加载一个脚本

目前有一个折中的办法：每次加载一批敌人，清除一批后删除当前批的敌人脚本，然后加载新一批敌人和与之对应的脚本

但这就不能达到“动态添加”，只是分批加载而已

另外还有全向移动，子弹判定等技术细节，碍于篇幅就不在此一一列举了，日后可能会出额外篇幅详细说明

下面是《因果》的链接

猜你想搜

聚光灯游戏创作挑战因果 js游戏开发技巧

9.1