2048 根本停不下來的開源HTML5遊戲

2048是如今開始火起來的一個HTML5小遊戲。這個遊戲借鑑了有名的手機遊戲1024。

遊戲的玩法很簡單，在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中聲明一下便可：

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

這就告訴Safari這個頁面在全屏模式下運行。

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

這個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、l哦~

2048的GitHub頁面

更新 玩了一夜都玩不到2048? 別急，有攻略。

---

撰文 SegmentFault