Skip to content
白鹭引擎 H5小游戏 中秋节 保护嫦娥
JavaScript TypeScript Other
Branch: master
Clone or download
Latest commit bfc7d69 Oct 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.wing 项目新建 Sep 24, 2017
bin-debug 嫦娥和玉兔的贴图 Sep 25, 2017
css 中秋活动完成 Sep 30, 2017
img 中秋活动完成 Sep 30, 2017
libs/modules
promise 碰撞检测 Sep 25, 2017
resource 中秋活动完成 Sep 30, 2017
src 中秋活动完成 Sep 30, 2017
stylesheets 大部分贴图完成 Sep 27, 2017
template/runtime 嫦娥和玉兔的贴图 Sep 25, 2017
README.md Update README.md Oct 31, 2018
_config.yml Set theme jekyll-theme-slate Oct 31, 2018
egretProperties.json 嫦娥和玉兔的贴图 Sep 25, 2017
favicon.ico 项目新建 Sep 24, 2017
index.html 中秋活动完成 Sep 30, 2017
manifest.json
tsconfig.json 项目新建 Sep 24, 2017
wingProperties.json 项目新建 Sep 24, 2017

README.md

项目已完结

在线演示链接:  点我开始玩耍
请在手机微信端或者谷歌浏览器调试工具打开   游戏玩法: 点击嫦娥的四周发射月饼击退紫色的兔子,不能集中白色的兔子。三条生命用完则游戏结束   游戏逻辑比较简单,其中有意思的是兔子出现的顺序。是根据背景音乐的音频来决定的,这里的参数需要   调整。  

特别说明:游戏内静态资源原稿基本来源于网上,后经过美工的加工完成。背景音乐是天天消消乐的,因为找不到  合适的音乐资源,如有侵权,请联系我更改>qq:1036971959

实际开发周期

2017/9/24~2017/9/30  

遗憾之处

折腾半天才知道微信公众号的服务号才有权限调用接口,然而申请服务号的要求我一个都达不到,
只能放弃微信接口了。这个游戏也算定期完结了吧。

最后,祝大家中秋快乐~~


以下为计划书:  

defend-Chang-e

白鹭引擎 H5小游戏 中秋节 保护嫦娥
之前接触白鹭引擎一个月,但因为种种原因没接着往下搞。
中秋将至,这几天又想写一款简单的《保护嫦娥》的游戏。和学美工的同学合作。  

工具说明  

白鹭引擎:  egretWing textureMerger

项目计划:  

开发人员:杜浩     美工:吕伯程

背景描述:

中秋将至,月球上的兔子们听说嫦娥发月饼吃,纷纷来讨要,白兔们是嫦娥的好闺蜜,
嫦娥当然要温柔的将月饼递在它们手里,可黑兔就不一样了,它们无恶不作,平日里,
总欺负善良单纯的白兔们,还把月亮咬的坑坑洼洼的,嫦娥当然不乐意。用月饼把它
们击退吧!!!

游戏描述:

背景: 广寒宫内
人物: 嫦娥 白兔 黑兔
物品: 好吃的月饼
玩法: 点击不同角度,发射月饼击退黑兔,白兔不能击退哦,让白兔来嫦娥这里领月饼。
奖励: 嫦娥的一个吻。

制作周期:

2017/9/24~2017/9/30

技术难点:

虽然这个游戏逻辑很简单,但在进行开发的过程中,遇到了一些比较难解决的问题,这里罗列一下。

微信公众号开发者文档  

因为游戏需要调用微信用户id,以对用户游戏成绩进行排序,来增强玩家成就感,所以需要调用微信   登陆接口和分享功能。目前只能通过调用微信官方API来实现。

  • 申请个人公众号
  • 需要注册微信开发者账号
  • 进行微信开发的一系列配置。  主要是 开发-> 基本配置 -> 设置开发者密码 -ip 白名单
  • 服务器配置   这里服务器配置包含:url token EncodingAESKey 和加密方式。   过程就是,配置完成后,微信官方后台会向你的url发送get请求,请求参数是 signature、timestamp、nonce、echostr   你需要在后台将token、timestamp、nonce进行字典序排序和加密,完成后返回结果,具体逻辑在下面。  
let crypto = require('crypto'),  //引入加密模块
    config = require('./config');//引入配置文件
app.get('/token',function(req,res){
    //1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
    var signature = req.query.signature,//微信加密签名
        timestamp = req.query.timestamp,//时间戳
            nonce = req.query.nonce,//随机数
          echostr = req.query.echostr;//随机字符串

    //2.将token、timestamp、nonce三个参数进行字典序排序
    var array = [config.token,timestamp,nonce];
    array.sort();

    //3.将三个参数字符串拼接成一个字符串进行sha1加密
    var tempStr = array.join('');
    const hashCode = crypto.createHash('sha1'); //创建加密类型 
    var resultCode = hashCode.update(tempStr,'utf8').digest('hex'); //对传入的字符串进行加密
    console.log(signature,timestamp,nonce,echostr);
    //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
    if(resultCode === signature){
        res.send(echostr);
    }else{
        res.send('mismatch');
    }
});
```  
如果保存成功,则服务器配置完成。  
## 获取access_token  
access_token就是每个api必须的字符串,每隔两个小时刷新一次,所以后台逻辑需要每隔两个小时请求一次access_token  
然后进行全局保存。  
请求路径是 'api.weixin.qq.com'
请求参数是'grant_type=client_credential&appid=appid&secret=secret'  
grant_type是固定的不用改变,appid就是你的开发者id,secret是你的开发者密码,可以在微信进行重置得到。  
以下是实现代码:

const URL = "api.weixin.qq.com";
const path = "/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret"; let access_token; let http = require('https'); let qs = require('querystring'); let options = {
hostname: URL,
path: path,
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}; let playMusic = (callback)=>{ var req = http.request(options, function (serverFeedback) {
if (serverFeedback.statusCode == 200) {
var body = "";
serverFeedback.on('data', function (data) { body += data; })
.on('end', function () { access_token = body; });
}
else {
res.send(500, "error");
}
});
req.end();
}

微信公众号接口完成  
_______________________________________________________________________________________________________________

You can’t perform that action at this time.