跑跑飞弹室外跑步AR游戏代码方案设计

跑跑飞弹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 ，中英文同步发布，说不定你能和一个外国妹子对战哦。

跑跑飞弹室外跑步AR游戏代码方案设计相关推荐

Python版基于pygame的玛丽快跑小游戏源代码，玛丽冒险小游戏代码，支持双人模式
基于pygame的玛丽快跑小游戏源代码,玛丽冒险小游戏代码,支持双人模式按空格进入单人模式,按't'进入双人模式,双人模式下玛丽1采用空格键上跳,玛丽2采用方向上键上跳. 完整代码下载地址:Pyth ...
rust 局域网联机_腐蚀怎么进行局域网联机方式酷跑加速器和你畅玩游戏世界
到现在,还是有人在玩腐蚀这个游戏,玩的人还很多,小编就是其中一个,那如果要进行搭建rust的局域网联机方式要怎么办呢,大家是不是觉得有点意思呢,接下来就一起看看这个rust局域网的联机方式且腐蚀怎么进 ...
夏天晨跑好还是夜跑好有哪些跑步注意事项
很多热爱运动的朋友会选择跑步来锻炼.到了夏天,天亮得早.晨跑好还是夜跑好,有什么区别,有什么好处? 夏天晨跑好还是夜跑好夏天晨跑更减肥. 如果有减肥想法人群,晨跑比夜跑更好,因为早晨起床后,人的血糖 ...
带你开发类似 Pokemon Go 的 AR 游戏
-- 作者谢恩铭转载请注明出处终于完结了经过前两课带你开发类似Pokemon Go的AR游戏(1) 和带你开发类似Pokemon Go的AR游戏(2) ,这一课我们必须结束这个主题了. 这 ...
笨木头的跑跑跑笔记三精灵的运动动画
Cocos2d-x游戏实例-<跑跑跑>制作教程(第三篇)--让主角跑笨木头花心贡献,啥?花心?不呢,是用心~ 转载请注明,原文地址: http://blog.csdn.net/music ...
招了一大群学生的游戏代码
点宽即时通讯(DOTWIDE)通讯员(陈飞飞)还越来越喜欢她了,我才发现她是我的妈妈,那名同学到我班说,彻底改变了我对它的看法,要不是为了准时到校,我生气地说,外公,每当下雨时,我的游戏代码神情却是更 ...
iPhone8带来AR新技术，AR游戏要火了吗？
万众瞩目的iPhone 8 终于如约而至.这次十周年的发布吸引了所有人的目光,大家都在猜测苹果/库克将会用什么手段实现与其他手机厂商拉开距离. 大部分粉丝.消费者.以及市场人士,都把目光集中在iPho ...
兼容ios和android的ar,安卓又落后这几款AR游戏只能iOS玩
近日苹果正式推送iOS 11,很多AR应用也随之上线. iOS 11一个很重要的亮点就是AR增强现实,利用它用户可以实现很多前所未有的体验,比如将室内的环境与游戏融为一体:还能测量距离. 想知道你喜欢 ...
笔记37 笨办法学python练习43面向对象OOP的游戏代码（二）代码的反复理解
笔记37 笨办法学python练习43面向对象OOP的游戏代码(二)代码的反复理解连续贴着这个练习43的代码折腾了整整两天,把那些英文文本翻译为中文文本,重新装进这个代码之中.本想一段一段的运行,发 ...

跑跑飞弹室外跑步AR游戏代码方案设计

跑跑飞弹室外跑步AR游戏代码方案设计相关推荐

最新文章

热门文章