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? 别急，

有攻略