HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5游戏 查看内容

2048 根本停不下来的开源HTML5游戏

2014-3-28 10:10| 发布者: html5cn| 查看: 26087| 评论: 3|原作者: SegmentFault|来自: OPEN咨询

摘要: 2048是现在开始火起来的一个HTML5小游戏。这个游戏借鉴了有名的手机游戏1024。
        2048是现在开始火起来的一个HTML5小游戏。这个游戏借鉴了有名的手机游戏1024。

2048的GitHub页面

       游戏的玩法很简单,在4x4的棋盘上,用方向键选择数字移动的方向,遇到相同的数字就会合并,每次移动会增加一个数字。合并出2048就算通关。虽然简单,但是很有乐趣,被誉为“根本停不下来的游戏”。


       这个游戏完全使用HTML5开发,代码基于MIT协议开源。


       游戏的CSS部分使用了Sass,一门编译到CSS的语言。Sass基于Ruby,诞生于2007年,是最早也是最成熟的一款编译到CSS的高级语言,它可以使用变量、常量、嵌套、混入、函数等功能,加速CSS的开发。


       JavaScript部分使用jQuery,jQuery应该算是目前最流行的前端JavaScript库,越来越多的开发者使用jQuery开发HTML 5游戏。我们以前介绍过的HTML5版的flappy bird也使用了jQuery框架。


       这个HTML 5游戏不仅可以在浏览器里玩哦~ 在手机上玩效果也很不错。


       比如,在iPhone上玩的话,会进入全屏模式,让你玩得尽心。也可以将这个游戏加入主屏幕(home screen)。这些实现起来其实很简单,只需在html的header中声明一下即可:

 

      这就告诉Safari这个页面在全屏模式下运行。

 

      这个rel为apple-touch-icon的文件就是显示在主屏幕上的图标(注意必须是PNG格式)。

      还有一个彩蛋就是,官方的说明是用方向键控制移动,其实还可以用别的键:


  KeyboardInputManager.prototype.listen = function () {   var self = this;


     var map = {

         38: 0, // Up     39: 1, // Right     40: 2, // Down     37: 3, // Left     75: 0, // vim keybindings     76: 1,

         74: 2,

         72: 3,

         87: 0, // W     68: 1, // D     83: 2, // S     65: 3  // A   };

     很多游戏都支持的W、D、S、A键,还有vim党最爱的h、j、k、

更多
11

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (12 人)

相关阅读

发表评论

最新评论

引用 XiaoweiQ 2015-3-26 07:45
html5小游戏 4g90.com
引用 火蓝星 2014-7-31 12:46
不错
引用 strawberry 2014-6-18 18:01
玩过,简单但吸引人的游戏

查看全部评论(3)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-19 21:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部