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

背景&创意

在新的一个学期里，我们继续在互动媒体的道路上前行，这个学期主要是学习用代码将我们真实的世界尽可能的还原。比如，如何将牛顿力学写入代码，如何让一个物体看上去是在自主运动等。
这就让我想到了最近在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