2022 年 box 小游戏项目总结

box-game-2021 项目总结

今天是 2022 年 1 月 30 日。到今天为止，box 小游戏的技术部分大概算是告一段落了。box 小游戏是我进入求是潮之后写的第一个完整的项目，第一次写出一个表现自己 idea 的 js 小游戏，也是我第一次在项目中与队友和其他小组的成员合作。虽然准备不充分，中途甚至大改了一次算法；交流也不够，最后技术和设计双方都不得不做出一些妥协。但是总而言之在这个项目中我还是收获满满的，也很感谢队友尤里卡，感谢设计的劳斯们。

技术方面

寻路算法

地图建模的方法大概有三种：

1. 格子
2. 路点
3. 导航网格

这种小游戏显然不用过于在意效率问题，所以用了格子表示（但是在实现的时候还是出了很多问题）。

然后寻路算法可以有很多，效率更高的多半是启发式搜索，而非中规中矩的最短路算法。效率比较高的有以下几种：

1. A* 文档
2. B* 博客
3. JPS 博客

A*需要注意路线修正，不然走着走着突然两个 90 度转弯，就很诡异。

自己做的小游戏显然就只写了一个裸的 A*，并且因为只能走格点并且格子设计的过大并且帧率不高每帧必须要走挺长一段路的问题，对角线行走有 bug 并且懒得修了。实际上修起来应该也不会太麻烦，因为路线已经存在数组里了。

js 模块下载

npm 官网可以搜索可下载的包，然后直接在文件夹下 npm install 就行了，然后注意区分使用依赖和开发依赖，别人拿到这个文件夹的时候只要 npm install 不加参数就能把依赖的所有包拉下来。

一些比较细小的点

1. 在 js 中修改 height, width 这种参数前面基本上要加 .style.width 这样，心里有点数，要用的时候搜索一下就好了。
2. innerHTML 中的换行用 <br> 就行
3. 写 css 的时候针对类去写会比针对 id 去写要方便， id 用来找到这个元件， 一个元件修改类就能做到改变样式。
4. 在单个页面内做出类似页面跳转的效果， removeChild + appendChild 暴力搞定
5. canvas 的 translate 和 scale 可以做缩放和镜面翻转操作（属实派了大用场）
6. js 展示动态图：第一种方法是把 gif 拆成每一帧，然后在 canvas 上按帧画。第二种方法是在 canvas 上覆盖一个 div，里面放一个 img 并且用相对位置定位这张 img。

组内交流

规划

1. 非主要页面（如开始界面、结束界面）以及页面跳转
2. 每一帧要做的事情以及顺序（交互、修改参数、画图）
3. 角色的操作或者行为模式
4. 地图的设计或者关卡的设计（如何增加难度，如何吸引用户）

分锅

这次是因为项目小，任务不重，就算一个人包办工作量也能接受；但是一旦项目人多起来，肯定得先做好规划，分配好任务，定好 ddl。其他小组有新的需求，要给组员加新的任务，不能说今天来需求就要求今天改代码今天实现，肯定是先说明然后在几天之后新增一个 ddl，这样大家都不会焦虑。

这次技术和设计都是，提出了一个需求之后并没有给 ddl，基本都是看心情完成，其实效率也不高，并且随手抛出一个 ddl 也会给自己和对方增加压力。

组间交流

交接部分参数的确定

先商定好贴图尺寸，这样技术就能先把代码写起来。

如果技术对自己的需求足够确定，可以事先确定好贴图文件的命名，顺便要求设计先给两张纯色尺寸符合要求的图作为替代。

设计理念的沟通

这次沟通上出的问题就是，设计以为我们的墙是类似于一些 2d RPG，由一些正方形拼起来组成，但是我们的墙是设置长宽参数就能生成，坐标范围在 800*600。然后设计画图的时候意思是图周围有一圈是背景，角色是走不上去的；而我们以为整张图都是可以走的。

所幸最后通过 canvas 绘制时的缩放勉强满足了双方的要求，但是这种问题显然是可以通过前期的讨论避免的。