PS:该项目为半成品,学习玩闹之作,已开放源代码

  • 引擎:Cocos2d-x
  • 语言:JavaScript
  • IDE:WebStorm
  • 设计分辨率:640 x 960
  • 当前分辨率:480 x 720
  • 版本:v 0.1

玩法介绍

  1. 首先点击屏幕中的大格子,让游戏获得焦点
  2. 使用 ⬆️ ⬇️ ⬅️ ➡️ 或者 W A S D 操控数字移动,相同的数字会合并成倍数
  3. 最大格子的数字达到 2048 即完成目标

闲言碎语

初次使用 js 来编写 cocos2d-x 游戏,对 html5 并不熟悉,想借着游戏来学习入门,其中踩了很多坑,由于 cocos2d-js 并不完美,所以遇到的问题多是奇葩。

  • 首先开始使用的是 ttf 字体来显示数字,但是开始配置却出现了问题,并不是像图片一样直接在 res 里面引入,而是另一种写法,😂 坑死我了,还好上论坛找到了问题答案,官方文档居然也没有写。

  • 当 ttf 字体正常载入时,本以为圆满了,却发现一个致命问题,白底黑子显示完美,但当深色白字的时候就悲催了,😱 文字边缘出现杂色,就像锯齿一样,然后各种研究 抗锯齿反抗锯齿,然而并没有什么卵用 😂

  • 后来发现一个问题,怎么左下角的 fps 显示的这么模糊?😠 看来官方自己都没有解决这个问题,就像 2.x 中 Windows 版本一样奇葩,显示的字体根本没法看,还是在 3.x 中才修复了。

  • 灵机一动,修改了渲染模式为 canvas ,奇迹出现了,整个世界都清晰了!连左下角的 fps 都高清显示了。终于白字在深色下面完美无瑕了。

  • 持续编写游戏功能一段时间后,在 Mac 中得浏览器测试完美,然后在手机上准备看看成果,简单的发布到了服务器上面,通过微信打开游戏网页,😱 什么鬼,怎么卡得和翔一样,生成和移动数字简直在做慢动作啊,喂!

  • 终于被现实打脸, canvas 模式在手机浏览器里面使用简直是作死,性能完全不行,看来还是要改回 webGL

  • 继续面对这糟糕的字体,既然 ttf 这鸟样,那我还是换成另一种模式显示好了,采用 bmFont 来显示数字,重启电脑进入 windows 系统,使用工具做好0 - 9 数字的 fnt 文件,然后测试,噢,不错,终于显示正常了 😄

  • 在 Mac 上面找到一款 GlyphDesigner 的 bmfont 制作软件,感觉不错,把游戏中得中文字也做成了 bmfont,这样就不会有 ttf 在第一次加载后,有几率显示不成功,而出现锯齿的情况。

  • 感觉性能要比 ttf 好一些,但是针对不同屏幕分辨率的缩放,就显得有些问题了,因为毕竟是一张图片,放大或者缩小都会不清晰。所以发布成 apk 或者 ipa 时,还应该使用 ttf 更好。

  • 游戏逻辑初步完成,界面初步完成,计分系统其其它功能还未完善,待更新… 😌

源码下载

素材来源于网络,仅作学习研究之用