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

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

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

游戏的玩法很简单,在4×4的棋盘上,用方向键选择数字移动的方向,遇到相同的数字就会合并,每次移动会增加一个数字。合并出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中声明一下即可:

<meta name="apple-mobile-web-app-capable" content="yes">

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

<link rel="apple-touch-icon" href="apple-touch-icon.png">

这个relapple-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、l哦~

2048的GitHub页面

更新 玩了一晚上都玩不到2048? 别急,有攻略

撰文 SegmentFault

    原文作者:weakish
    原文地址: https://segmentfault.com/a/1190000000432197
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞