微信2048游戏开发中的几个前端知识点 进入全屏
line

问题一:既然这个数字游戏是放到了微信公众账号里,那用户玩儿的时候也就必然是在微信里玩儿的,如果用户在玩儿的过程中,来了一条微信消息,用户该犹豫了,是继续玩儿呢,还是去看消息?

  • 继续玩儿:那万一是一条很重要的消息,现在继续玩儿,不去看的话,耽误了怎么办?

  • 去看消息:那现在都快玩到目标了,退出去以后,积分不就都丢了,那不白玩了么?


解决方案:为游戏增加本地存储的功能,具体策略:

  • 在用户每次移动一个小格子之后,都更新游戏状态到本地

  • 游戏胜利或失败时,清除游戏本地缓存

  • 游戏重新开始时,清除游戏本地缓存

  • 首次进入游戏时,加载游戏本地缓存,并提示用户:有自动存局的游戏,是否继续?


所用知识点:HTML5之localStorage



问题二:为了便于游戏的传播,当然是希望用户主动分享游戏到朋友圈、微信好友、或腾讯微博,但在微信内置的浏览器中,默认分享出去的,就是游戏的标题和游戏的地址,连个配图都没用,传播效果会很差!


解决方案:利用前一篇文章(微信内置浏览器的JsAPI)中提到的WeixinApi,监听各个微信分享行为:

  • 监听分享到朋友圈的操作,自定义分享内容(当前游戏的信息)

  • 监听分享到微信好友的操作,自定义分享内容(当前游戏的信息)

  • 监听分享到腾讯微博的操作,自定义分享内容(当前游戏的信息)


所用知识点:微信公众平台如何对WebView进行Javascript Interface支持的,调研并完善WeixinApi.js类库



问题三:用户对新事物的认知,图片一定比文字更能直接。所以用户分享出去的游戏,一定要配图,而且每个人玩儿自己的游戏,配图一定都是不一样的。接下来需要做的,就是如何将当前的游戏状态生成为图片,并通过微信分享出去?


解决方案:首先能想到的办法,就是直接将HTML节点转换到Canvas上,通过Canvas的toDataURI方法将节点(就是游戏状态了)转换为图片数据。分别对iPhone和Android手机上得微信内置浏览器(WebView)进行分析调研与尝试,然后分平台进行处理:

  • iPhone上,直接将Canvas转换出来的dataURI格式图片数据,作为微信分享Data中的imgUrl分享出去,iPhone端的微信会自动上传dataURI数据到服务器并生成图片URL

  • Android手机上,微信不会将dataURI的图片数据上报,所以我需要自己开一个服务接口,实现data:image/png;base64, 格式的图片到图片文件的转存,并生成固定URL;并分享出去

  • 由于Android端上需要将数据上报到我自己的服务器,所以整个分享过程必须异步执行,为了避免“用户点击相应的分享按钮后,分享对话框一直不弹出”的情况,需要增加一个loading的效果,让用户感知到分享正在进行中


所用知识点:共两点

  • HTML节点到Canvas的转换,并用Canvas生成dataURI格式图片;用到之前的一个组件:html2canvas.js

  • 在服务器端开一个接口,完成dataURI格式数据到图片文件的转换,并生成固定URL

阿里巴巴-钉钉-开放平台,能力开放&开发者运营岗位招聘中, 期待你的加入!
钉钉开放,让应用开发更简单
充分开放,是钉钉的重要方向!除致力于为开发者打造丰富的开放API, 更易接入的场景化能力包, 完备的应用开发工具之外, 还需要持续构建开放能力的布道、开发者生态运营体系,包括培训、沙龙、大会、社区合作等等。业务在快速发展,我们也还需要更多优秀的小伙伴加入!

评论区域

line
  • flypag 2014-09-30 16:59:01 回复
    回复 海天 : 看下JS脚本,然后在结算方法的里面加功能 通过ajax将分传到服务器
    海天 said:
    我又来了……
    我看了你在评论里说的源码
    但是我是在不懂html5
    现在源码也能用 不过想知道 怎么样可以将游戏的得分传送到数据库?
    能帮我一下吗?
  • Alien 2014-08-10 11:19:33 回复
    回复 微信梯子 : 赞啊!不过我不是专门儿搞微信开发的,我就是以前随便玩儿玩儿而已
    微信梯子 said:
    用过你的微信内置浏览器脚本,想不到大侠也在做微信游戏。我根据别人代码修改了一些bug,做了个2048恋爱高手版,并觉得这个2048游戏可以做一些品牌植入,参见我的博客http:...
  • Alien 2014-08-10 11:19:01 回复
    回复 海天 : 实在是抱歉,连续忙了两个月。。。blog都没有时间更新了。你的问题解决了吗?
    海天 said:
    ……博主能帮忙解决下吗
  • 微信梯子 2014-07-14 16:17:52 回复
    用过你的微信内置浏览器脚本,想不到大侠也在做微信游戏。我根据别人代码修改了一些bug,做了个2048恋爱高手版,并觉得这个2048游戏可以做一些品牌植入,参见我的博客http://www.weixintizi.com/blog/3.html
  • 海天 2014-06-24 15:41:04 回复
    ……博主能帮忙解决下吗
  • 海天 2014-06-20 13:44:33 回复
    回复 Alien : 我在js文件夹下的local_storage_manager.js文件里加了类似这段代码
    var a='{"id":"1",}';	
    var data='shareinfo='+a;
    $.post("share.php", data );
    我加载LocalStorageManager.prototype.getBestScore = function () {里的
    但是貌似没有运行啊,而且之前你文章里那个 微信分享的是可以成功的?
    是不是 我代码不对 或位置有问题?
    Alien said:
    回复 海天 : 发一个ajax请求就可以了啊,随时都能保存数据
  • Alien 2014-06-20 11:34:33 回复
    回复 海天 : 发一个ajax请求就可以了啊,随时都能保存数据
    海天 said:
    我又来了……
    我看了你在评论里说的源码
    但是我是在不懂html5
    现在源码也能用 不过想知道 怎么样可以将游戏的得分传送到数据库?
    能帮我一下吗?
  • 海天 2014-06-20 11:32:59 回复
    我又来了……
    我看了你在评论里说的源码
    但是我是在不懂html5
    现在源码也能用 不过想知道 怎么样可以将游戏的得分传送到数据库?
    能帮我一下吗?
  • Alien 2014-05-23 16:46:53 回复
    回复 pengpeng : 目前看来,是的。android的微信上不支持datauri图片
    pengpeng said:
    请教一个问题 关于图片base64格式的 是不是安卓微信浏览器内src为此种格式的图片不会被显示出来,我在做一个微信浏览器内的编辑器 需要上传图片后,能直接插入到编辑框中,...
  • pengpeng 2014-05-23 16:45:35 回复
    请教一个问题 关于图片base64格式的  是不是安卓微信浏览器内src为此种格式的图片不会被显示出来,我在做一个微信浏览器内的编辑器  需要上传图片后,能直接插入到编辑框中,实现预览,我用filereader获取的图片base64  在其他手机浏览器行 微信内 一直不显示图片  是不是只有和您一样的 把这个base64传给后台 生成网址  我再拿过来用啊
  • Alien 2014-05-08 11:33:50 回复
    回复 料料 : 去github上搜2048,你会找到源码的。你想实现什么都可以
    料料 said:
    您好,我也想做一个这个游戏给我们论坛里的朋友用,请问这个数字块可以改成漂漂一点的图片吗?哪里有这个源码提供?
  • 料料 2014-05-08 11:32:25 回复
    您好,我也想做一个这个游戏给我们论坛里的朋友用,请问这个数字块可以改成漂漂一点的图片吗?哪里有这个源码提供?
  • 海天 2014-04-30 21:57:55 回复
    回复 Alien : 太感谢了!您说的在安卓上生成图片我还真看不懂……所以真的不好用了 呵呵 
    再次感谢
    Alien said:
    回复 海天 : 很高兴你能对这个东西这么感兴趣,而且你是学生,我怎么可以“卖”给你呢?我会整理一下,直接把游戏部分的源码给你的。不过游戏里用到了我的一些服务,比如在...
  • Alien 2014-04-30 07:04:41 回复
    回复 海天 : 很高兴你能对这个东西这么感兴趣,而且你是学生,我怎么可以“卖”给你呢?我会整理一下,直接把游戏部分的源码给你的。不过游戏里用到了我的一些服务,比如在android上生成游戏图片,你直接拿过去估计用不了。
    海天 said:
    您好,我是一个学生,正在运营一个学校的公众号
    最近玩了2048这个游戏,很好玩,觉得同学们要是能一起玩并PK分数就更好了
    在网上找了源码,但由于本人是小白,对html5不是...
  • 海天 2014-04-29 23:10:18 回复
    您好,我是一个学生,正在运营一个学校的公众号
    最近玩了2048这个游戏,很好玩,觉得同学们要是能一起玩并PK分数就更好了
    在网上找了源码,但由于本人是小白,对html5不是很懂,看到您的版本最好,功能好多
    请问能分享一下源码吗?或者我花钱购买,因为是学生,只要不是太贵就好
    我的QQ81733580 期待您的联系,谢谢啦
  • Alien 2014-04-18 11:21:00 回复
    回复 nicevoice : 查了一下,应该是微信自身的问题了,Webview未设置DatabasePath。未设置的后果就是:杀进程后,数据就丢失了。
    nicevoice said:
    回复 Alien : 阅后即焚么?可是在安卓数据上这个data数据还是存在本地啊,这个数据并没有被销毁呢?
  • nicevoice 2014-04-18 10:15:51 回复
    回复 Alien : 阅后即焚么?可是在安卓数据上这个data数据还是存在本地啊,这个数据并没有被销毁呢?
    Alien said:
    回复 nicevoice : 那是因为自己打开自己分享的链接,本地数据只有一份儿,是会复用的。其他人打开你分享出去的链接,是会重新开始的。游戏是尽可能的保护用户本地数据。
  • nicevoice 2014-04-18 10:11:30 回复
    还有个问题是,存档
    当继续用公众号的当然能够存档
    但是问题来了
    当你分享给好友后,打开分享给好友的链接后不存档了,然后返回到公众号发的链接
    点开继续后发现存档没了
    哈哈
    可能是微信api的限制还是什么?求攻略,谢谢
    nicevoice said:
    有个小问题
    分享给朋友后,再打开分享的链接后就replay了
    请问能解决么
    哈哈哈哈
  • Alien 2014-04-18 10:10:06 回复
    回复 nicevoice : 那是因为自己打开自己分享的链接,本地数据只有一份儿,是会复用的。其他人打开你分享出去的链接,是会重新开始的。游戏是尽可能的保护用户本地数据。
    nicevoice said:
    有个小问题
    分享给朋友后,再打开分享的链接后就replay了
    请问能解决么
    哈哈哈哈
  • nicevoice 2014-04-18 10:07:59 回复
    有个小问题
    分享给朋友后,再打开分享的链接后就replay了
    请问能解决么
    哈哈哈哈
    nicevoice said:
    mark~
  • 还有1条较早的评论...