跑跑飞弹AR是一款模拟二战士兵通过无线电指令作战的室外跑步游戏，使用手机定位功能，设置4个相距30米以上的补给点就可以游戏了：把手机放在口袋，戴上耳机，按照听到的指令收集飞弹等补给，发射攻击对手，和各地玩家对战。

游戏既可以人机对战，也可以和其他玩家对战，游戏除了补给点，发射点，还有专门的喊话点，可以让玩家之间语音交流，适合一个人无聊时和陌生人对战，也适合朋友亲子间游戏，室外团建游戏，可以访问  game.zhengai.cn 了解更多。

      游戏为我一个人独立创意设计开发，包括服务端和客户端开发，因为精力优先，加上对Android和ios原生APP不太熟练，后续也没那么多精力维护，开始想是用微信小程序，结果到微信开发平台研究了下，发现许多东西都需要微信官方审批，比如最基础的获取位置功能，说起来微信小程序真是个大坑啊，N多浏览器都支持的基础接口都需要一堆审批，还需要一大堆这个证那个证，所以很快放弃。

      抱着先基于H5写个简单的原型来玩一玩验证下效果，因为游戏主要通过语音和位置交互，不需要复杂的界面，所以我这个不熟悉前端开发技术的音视频开发工程师也很快开发出一个原型，服务端用自己熟悉的C++实现了游戏逻辑，另外实现了简单的能和玩家对战的机器人，保证即使没有其他玩家时，用户也能够进行人机对战。

      基于H5的客户端效果实现了游戏基本的逻辑，自己玩体验挺不错，想到要是这个H5能直接封装成APP就好了，于是去网上研究，才知道H5封装成APP的技术早就有了，原谅我这个非前端开发孤陋寡闻:)， 于是开始学习Hbuilderx和Html5+，用H5加plus技术，给游戏增加更多功能，比如喊话点就是后来加上去的，让用户对战时还能像真实战争一样向对方喊话进行心理战，最最重要的是解决了网页版本游戏时，手机放口袋一段时间后自动锁屏，需要重新解锁继续游戏问题。

      现在基于Hbuilderx和Html5+技术，让我能完全实现游戏设计的功能，而且开发量低，容易维护，所以为什么说系统架构师非常重要，选择正确的系统架构，可以让所有端开发起来轻松又不容易出错。

这里记录一些遇到的前端技术坑，也是本篇文章最有价值的地方：

第一、实时位置获取，游戏需要实时获取用户当前位置，开始为了位置更加精确，用html5+的plus调用高德地图插件来获取位置，为此还确高德申请了token，申请方法网上很多。插件确实成功获取了位置，但是高楼底下精确度也和浏览器原生一样，高德地图在信号弱时会根据速度惯性往前，而实际游戏时经常会掉头跑，另外一个问题就是高德地图插件手机发烫厉害，所以舍弃了，好做游戏本身不需要非常精确的位置，浏览器本身的API获取的位置精度基本满足要求。附获取实时位置接口：

   watchposId = navigator.geolocation.watchPosition(function(position){var json = {};        },function(err){switch(err.code){case 1:        navigator.geolocation.clearWatch(timer);break;case 2:console.log(err.message);break;case 3:console.log(err.message);break;case 4:console.log(err.message);break;}},{ timeout:2000, maximumAge:500, enableHighAccuracy: true,desiredAccuracy: 0, frequency: 1});

注意打开enableHighAccuracy为true,另外一个坑就是国内文章里的样例都没有frequency:1 这个配置项，导致位置数据报了一下就停止了，后来google了国外的文章发现有这个配置，加上后就正常了。

第二、Html5+ plus无法预览摄像头，这个问题也研究了好久，我这个APP怎么会要预览摄像头呢？其实这个不是给玩家用的，是给我自己用的，我想把玩游戏的声音和周边环境一起录下来发发抖音啥的，就是玩的时候在APP上打开摄像头预览，然后用手机的录屏功能录下周边环境，自己有时也露个脸，所以最好还有美颜功能，但是找来找去，plus居然没有摄像头预览的接口，研究了好久，最好居然用了直播功能来解决预览和美颜功能，就是我初始化话直播模块，开启预览和美白但是不推流，参考代码如下：

			plusPusher = plus.video.createLivePusher('livepusher', {url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',top:'0px',left:'0px',width: '100%',height: '100%',position: 'static',beauty:1,whiteness:5});plus.webview.currentWebview().append(plusPusher);plusPusher.preview();	

开了5级美白，完美解决我的需求，哈哈哈。

第三、原本在web上都可以正常跑的录音功能居然在Html5+APP上用不了了，因为我需要录下的声音到blob直接发给服务端，这个我在web上已经可以实现，但是html5+ plus只支持录音到文件，而且录下来的文件找了很多办法居然没法读到arraybuffer,而直接用web的录音api变成提示没有权限，搞得我都打算放弃喊话功能了，直到偶然发现有一次用web原生的录音居然成功了，后来研究发现是因为先调用了html5+ plus的录音功能，出现了录音权限请求，通过后就可以，直接用H5的录音接口是不会出现这个权限请求的，直接给报没有权限错误了，坑啊。

第四、这个不是坑，只是顺带记录下供参考，游戏需要配置4个补给点，用户配置的顺序是不确定的，要将4个点组成按顺序组成一个矩形区就需要对4个点排序，这个排序有点学问，记录一下，原理就是先找四个点的中心点或者至少在4个点中间的点，然后算每个点对这个中心点的角度，然后按角度排序。

function appGetIsLess(a, b)
{if(a.angl<b.angl)return 1;return -1;
}function appGetGeoCenterOfPoints(points)
{var pointmin={ x:points[0].x, y: points[0].y };var pointmax={ x:points[0].x, y: points[0].y };for(i=1;i<points.length;i++){if(pointmin.x >points[i].x)pointmin.x = points[i].x;if(pointmin.y >points[i].y)pointmin.y = points[i].y;if(pointmax.x <points[i].x)pointmax.x = points[i].x;if(pointmax.y <points[i].y)pointmax.y = points[i].y;}return {x:(pointmin.x+pointmax.x)/2, y:(pointmin.y+pointmax.y)/2};
}function sortRectCorners()
{var ptsall = [];ptsall = ptsall.concat(battle_scene);	geoCenter = appGetGeoCenterOfPoints(ptsall);for(i=0;i<ptsall.length;i++){ptsall[i].angl= getAngle(ptsall[i].x,ptsall[i].y,geoCenter.x,geoCenter.y);}ptsall.sort(appGetIsLess);
}

最后，大家有兴趣可以去玩一玩我的 跑跑飞弹AR ，中英文同步发布，说不定你能和一个外国妹子对战哦。