TurfWar.io是基于GPS的全球领土控制游戏。 在我在Fullstack学院学习期间，它是作为黑客马拉松项目开发的。 它目前已通过Expo部署并可用，并且服务器在Heroku上启动（下面的链接）
怎么玩？
正如我提到的，TurfWar.io是一款区域控制游戏。 激发灵感的游戏包括Splatoon，Planetside，Agar.io和Pokemon Go。 在TurfWar.io中注册时，玩家可以选择加入其中一个活跃的团队，其中包括红色团队和蓝色团队。 从那里开始，为玩家提供3个每日捕获令牌，这些令牌可用于捕获玩家当前在现实世界中所处的区域。
只要玩家当前位于敌方队伍的俘获区域内，俘获令牌也可以用来俘获敌人的领土。
每个玩家的每日捕获令牌在每天的世界标准时间上午12:00重置，并且回合持续一周，直到每个星期五的世界标准时间下午12:00结束。 在每个回合结束时，将汇总所有捕获点，并在Heroku网站上宣布获胜者。 另外，这时，地图上的所有捕获点都将被删除，新一轮开始。
使TurfWar.io成为可能的技术
简要地说，TurfWar.io技术堆栈包括：
React Native，Socket.io，Node.js，Express.js和PostgreSQL
React Native应用程序是使用Expo开发的，并使用了React Native Elements ， React Native Maps ， React Navigation和其他常见库（例如Axios和Socket.io-client）中的组件 。
Heroku服务器运行带有Express.js的 Node.js和PostgreSQL，以保持有关用户，团队和捕获位置的信息的持久性。 该服务器还使用Socket.io来促进当前正在玩游戏的客户端之间的实时通信，以便他们可以看到出现了新的捕获区域并更新了分数。
发展挑战以及我如何克服挑战
在这次黑客马拉松中开发TurfWar.io是一项艰巨的任务，在此过程中，我遇到了很多阻碍者。 这是我遇到的一些问题，以及如何解决它们。
1.在捕获区域被破坏时更新用户的本地状态
当TurfWar.io中的占领区被破坏时，当前在游戏中的每个玩家都会从服务器收到一条消息，要求删除该占领区，从而更新所占领区域的地图，并更新两支球队的得分（以及您自己的得分）如果该破坏的捕获区域是您自己的，则更新个人分数）。 最初，我将捕获应用程序列表在客户端应用程序的本地状态下存储为array 。 在对应用程序进行压力测试后，我意识到，遍历此本地阵列，根据服务器的消息查找与要删除的捕获区域相匹配的捕获区域，这会使我的应用程序变慢。 相反，我使用每个捕获区域的唯一标识符作为键，在用户的本地状态下实现了地图 。 这减少了将捕获区域从O（n）移到O（1）的操作的运行时间，并且应用程序的性能反映了这一点！
2.在地图上渲染数千个捕获区域
最初，我没有采取任何措施来限制对手机处理能力的需求，以便在地图上呈现捕获区域的整个本地状态。 这没有任何问题，直到我测试了如果成千上万的玩家单独在纽约和全球范围内放置成千上万个捕获区，应用程序将如何运行。 手机开始变热，应用程序的帧速率降至10fps以下。
经过研究，我发现React Native Maps MapView组件（由Airbnb开发）具有内置的事件侦听器，用于平移和捏缩放手势。 此事件侦听器的回调函数提供了一些有用的信息：位于用户平移到的中心的纬度和经度值，以及代表距离（以度为单位）的经度和纬度的增量值，从屏幕的中心点到屏幕的所有边缘。 这使我可以做一些数学运算，并且只渲染落在接近视口范围内的捕获区域。
结论
不管您是开发自己的基于地图的应用程序还是实时游戏，希望您学到了一两件事。 如果您对玩游戏感兴趣，可以在Expo上找到它，并且所有游戏公告都将通过Heroku页面发布！
