作品交流:HTML5宝石迷阵

在本文中,我将介绍怎样用HTML5创建一个简单的益智游戏,并转换成Android应用。

我一直喜欢玩益智游戏:俄罗斯方块,马里奥医生,Puyo Puyo,超级方块战士等等。所以作为一个网页开发者,我想使用熟悉的技术(HTML/CSS/JavaScript)尝试并创建自己的游戏。我当然也希望游戏可以做到“响应式设计”,可以在电脑上玩也可以在手机上玩。

我把游戏宝石迷阵作为参考游戏,因为此游戏的设计非常适合触摸屏设备,你滑动手指对齐宝石使其消失。

这是网页版游戏:
http://www.baptistebrunet.com/games/fruit_salad

这是用PhoneGap转换的Android版游戏:
https://play.google.com/store/apps/details?https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions” target=”_blank” >CSS过渡制作

  • Sprite动画使用CSS关键帧制作
  • 最佳成绩保存在本地存储

  • 关于图片
    我不是平面设计师,所以我使用虚拟图片创建第一个游戏原型。当游戏成型的时候,我使用免费的成套icon替换资源。最后我使用水果图案,因为色彩鲜艳的图片更适合匹配游戏的玩法。为了避免无效的HTTP请求,我将图片转换成PNG格式,然后我使用tinypng.org压缩PNG图片(容量减少了70%!)。

    测试和用户反馈
    在把游戏发布到Google Play之前,我在朋友的手机上测试网页版游戏,看看游戏运行的效果,测试Bug以及获得用户反馈。我得到一些反馈,例如:“字体太小了”,“我不知道我能移动多少次”。

    观察用户操作没有说明的界面真的非常有趣。有些人会立刻理解游戏的机制,有一些会到处点击看看会发生什么,还有一些会等待画面出现一些动画后才开始尝试玩游戏。了解这些后,我添加了一些发光的提示帮助新手更快上手游戏。

    用户测试对于调整游戏难度也非常有帮助。游戏必须对新手足够简单,而对硬核玩家需要有一些挑战(连击,高分等)。

    在你的浏览器模拟手机运行效果在手机上调试网页不是件容易的事。幸运的是,Chrome和Firefox提供工具来测试网页(模拟手机端效果),而不必在手机上每隔2分钟加载一次网页。

    使用Firefox,你可以按下Ctrl + Shift + M开启响应式设计模式。

    使用Chrome,你可以模拟触摸事件,重写用户代理和变更协议。按F12启动开发工具,点击右下角设置选项。

    当然在真机上测试还是有必要,可以发现某些Bug。

    PhoneGap转换
    网页版游戏存在2个问题:
    1、如果用户没有联网就无法启动游戏(我尝试执行程序缓存,没有成功)
    2、大部分人不知道为网页应用创建一个快捷方式图标

    所以我使用PhoneGap将游戏打包成原生应用并提交Google Play。

    PhoneGap Build是一个基于云的服务,可以把你的HTML应用(.zip文件或Github repo)打包成移动应用(例如一个.apk文件)。PhoneGap的杀手锏是你不需要写原生应用代码。不需要安装clipse,Android SDK等等。你只需要通过config.xml文件http://build.phonegap.com/docs/config-xml设置一些选项(方向,全屏模式,图标,弹出窗口,等等)。

    生成证书
    向Google Play这类应用商店提交应用,你需要注册登入并获得证书。如果你使用Windows,可以用keytools.exe生成证书,位于你的Java文件夹C:Program Files (x86)Javajre7inkeytool.exe。

    我建议你遵循这些文档:http://developer.android.com/tools/publishing/app-signing.html

    Google Play
    提交应用到Google Play非常简单。首先,访问developer.android.com购买开发者证书(25美金)。然后通过填写表格提交应用:说明文字,插图(图标,截图),当然还有.apk文件。

    审核几乎是瞬间,几分钟后你的应用就上线了。

    结论

    使用PhoneGap Build,使网页开发者可以轻松的使用HTML,CSS和JS创建移动应用。这个游戏的Android版似乎比网页版表更吸引用户,所以很快我发布了IOS版本。

    Baptiste Brunet是一名为X-PRIME集团(法国网站代理商)服务的网页前端工程师,他喜欢尝试使用HTML5,CSS,JS尝试新东西。


    本文来源:91天地会