素材牛VIP会员
微信“飞机大战”使用的HTML5,想问问关于它的一些问题?
 us***es  分类:Html5  人气:1048  回帖:5  发布于6年前 收藏
  1. 最近在微信上尝试些web app的东西,用微信上自带的浏览器会有顶端和低端的工具栏和状态栏,如何将这两个隐藏?在iphone上还有自带的拖拽问题,手势会造成整个屏幕的拖拽,这个问题怎么解决,因为“打飞机”是可以在屏幕上随意move的?
  2. 它使用的是什么引擎?框架?
  3. 怎么入门html5游戏的开发?
  4. 微信分享到朋友圈的接口文档?

新手!谢谢大家!

讨论这个帖子(5)垃圾回帖将一律封号处理……

Lv5 码农
阿***7 产品经理 6年前#1

隐藏微信底部栏
可以在代码中加入一段js

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {WeixinJSBridge.call('hideToolbar');});

这一功能一般使用在下述公众号页面:

  1. 公众号认为该页面中,用户一般不需要频繁的前进后退操作
  2. 公众号人为该页面中的内容已经能够帮助用户进行前进后退导航

隐藏网页显示在微信中右上角的按钮
可以通过在网页中增加以下JavaScript代码:

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {WeixinJSBridge.call('hideOptionMenu');});

这一功能一般使用在下述公众号页面:

  1. 公众号认为该页面不适合被用户分享给其他人的
  2. 公众号认为该页面不适合被用户收藏的
  3. 公众号认为该页面不适合通过其他外部浏览器打开的
  4. 其他基于谨慎和安全的考虑

在网页中获取用户的网络状态
为了方便开发者根据用户的网络状态来提供不同质量的服务,公众号可以在公众号内部的网页中使用JavaScript代码调用来获取网络状态。

调用代码如下:

WeixinJSBridge.invoke('getNetworkType',{},
                   function(e){
                      WeixinJSBridge.log(e.err_msg);
             });

返回结果:
network_type:wifi wifi网络
network_type:edge 非wifi,包含3G/2G
network_type:fail 网络断开连接

例子

window.onload = function () {
        document.addEventListener("WeixinJSBridgeReady", onWeixinReady, false);
     }
    function onWeixinReady() {
        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            WeixinJSBridge.log(e.err_msg);    
            network = e.err_msg.split(":")[1];  //结果在这里    
        });

我只能帮你到这了。不过html5游戏开发,我感觉腾讯后期肯定会开放平台,也许会专门为微信游戏出一些对应的api哦。

Lv1 新人
非***扰 交互设计师 6年前#2

mark...

Lv6 码匠
爱***粉 移动开发工程师 6年前#3

android 版的微信飞机大战不是 html5 ,而是 libGDX ,主要采用 java 方式开发

出处

Lv1 新人
BO***OS 职业无 6年前#4

打飞机不是html5的。
可以使用cocos2d-html5,但是html5在小游戏上还可以接受,低端一点的设备上随便都很卡的。
你就想一下所有移动设备都跑flash游戏。 而且html5 还没有图像差分,

Lv4 码徒
se***ng 技术总监 6年前#5

下面我会拆分解决你这个大部头问题。请你用心,耐心,仔细的读完它,保证有收获。


  1. 首先这两个东西你是无法通过普通手段去除的。
    我没有研究过微信的游戏SDK,可能会有相关的设置。
    不过看你这么说,应该是想通过外部链接进行的,所以 无法做到隐藏顶部、底部栏

  2. iPhone拖拽问题,你确定只是iPhone上会出问题?
    据我所知,应该要在<head>中加入这一条

<meta name="viewport" content="width=device-width, initial-scale=1" />

这样才适合手机使用。这个是html5开发的基本啊!

  1. 他们用的是什么引擎我不太清楚,因为经过别人反编译后得出,这玩意儿是微信一种插件式的APP,也就是脱离 了微信就存活不了了(待考证),因此他不是纯HTML5+js开发的。

    具体资料来源于这里,你能在这里看到关于打飞机的一些详细情况。 http://www.creturn.com/android%E7%89%88%E5%BE%AE%E4%BF%A1%E6%89%93%E9%A3%9E%E6%9C%BA%E6%97%A0%E6%95%8C%E8%A1%A5%E4%B8%81%E5%88%86%E6%9E%90%E5%8F%8A%E5%85%B6%E5%88%B6%E4%BD%9C%E6%96%B9%E6%B3%95/

  2. 怎么入门html5游戏的开发?
    看来你应该是个初学者,具体怎么开发我也不知道,因为目前Html5刚起步,有些东西还没有完善。但是Html5还是很有看头的,我自己都在学,不过不是学游戏方面的而已。
    因此这类问题很没有意义,你不自己去动手看看文档,在这里光问是没有用的。SF有关于这方面的讨论,你可以去看看。

    http://segmentfault.com/search?q=html5%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91

    点击去慢慢看,你会收获挺多的。

  3. 微信分享到朋友圈的接口文档?
    好吧。直接上链接给你了。

    http://www.weste.net/2012/10-23/85931.html

    这个是一个取巧的方法,不知道目前还有没有用,你可以试试。代码也贴上来:

function WeiXinShareBtn() {
    if (typeof WeixinJSBridge == "undefined") {
        alert("请先通过微信搜索 wow36kr 添加36氪为好友,通过微信分享文章:)  ");
    } else {
        WeixinJSBridge.invoke('shareTimeline', {
            "title": "36氪",
            "link": "http://www.36kr.com",
            "desc": "关注互联网创业",
            "img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png"
        });
    }
}  

然后是微信官方的文档,只有iOS和Android的SDK文档。

http://open.weixin.qq.com/


写了这么多给你,如果你不给我赞我真心无语了。如果你没有耐心读完,那我也没办法了..
希望你能早日模仿出来~

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取