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

jopen 10年前發布 | 13K 次閱讀 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   };