【互动媒体专题设计】《打群架》——模拟《拥挤城市》

背景&创意

在新的一个学期里，我们继续在互动媒体的道路上前行，这个学期主要是学习用代码将我们真实的世界尽可能的还原。比如，如何将牛顿力学写入代码，如何让一个物体看上去是在自主运动等。
这就让我想到了最近在Instagram上疯狂投放广告的拥挤城市。我的实践就是将这个游戏模拟出来。
话不多说，强烈建议读者们先玩玩！
点下面试玩！
http://45.32.81.13/JiangFeng/gangWar/
使用WSAD键控制粒子的移动，按下鼠标可以将视野扩大
点上面试玩！
强烈推荐试玩！
（自有服务器，所以加载会慢一点，可能需要五秒左右）

不方便玩吗？那看看我们准备的视频吧！
https://v.youku.com/v_show/id_XNDEyNTUxNDc2OA==.html?spm=a2h3j.8428770.3416059.1

技术

应该还挺好玩的吧！
那我们现在来看看这个游戏中的一些技术细节。

镜头跟随

镜头跟随是游戏带给玩家沉浸感的一个重要手段。最早是Nintendo在超级马里奥中引入。

在此之前，游戏的背景是固定的，人物在地图上跑来跑去，如果超出了屏幕，要么死亡，要么进入下一个游戏背景。大家很熟悉的贪吃蛇就是一个固定视角的游戏。

在任天堂引入镜头跟随之后，人物或者说是游戏中的主角就会主要处于屏幕的中心，人物运动的时候背景随之改变。这一点应该很好理解。

在《打群架》中，镜头也是跟随代表玩家的小球运动。

考虑到游戏的可玩性，还对视野进行了控制，当按下鼠标的时候，镜头拉远，获得更大的视野，防止玩家在游戏过程中脱离主战场。以下是小视野和大视野的对比

实现

在本项目中，我们使用的是p5.js library中的p5.play库中的camera¹。通过同步camera和玩家小球的x，y坐标，达到运动跟随的效果。

代码如下：

camera.position.x = this.particleArray[i].location.x;
camera.position.y = this.particleArray[i].location.y;

通过对zoom的值进行调整，而获得不同大小的视野。
代码如下：

if(mouseIsPressed)
 camera.zoom = 2;
else
  camera.zoom = 5;

随机漫游

在两款游戏中，小球（或者说人物）的随机漫游是很重要的一环。这样能让游戏的难度上升，并且使得小球更加人格化。

没有被染色的小球和NPC玩家的小球都是随机漫游，玩家小球需要通过键盘输入控制。

实现

随机漫游时我们这个学期课程中很重要的一个知识点，一说到随机，大部分人的脑海中第一个蹦出来的词就是random，以及它的衍生函数。但是使用random对小球进行操控会让小球的运动不连续，这样对真实世界的模拟就非常的差。

解决方案是noise函数，noise函数是一条连续的随机函数，用两条noise函数曲线分别映射一个小球x和y轴上的运动，就可以获得一个运动轨迹平滑连续的小球。
代码如下：

roam() {
   
  this.tx +=