2048是大家都熟悉的一款魔性小遊戲，其操作簡單，卻極其有效地殺時間。本篇將詳細講解如何構建這款小遊戲的開發思路、如何根據玩法進一步分析設計程式設計結構，適合有一定html、css、js、jquery語言基礎的讀者閱讀。

一.遊戲試玩

      遊戲玩法大家都很熟悉，每次可以選擇上下左右中的一個方向滑動一次，所有數字方塊都會向滑動的方向靠攏，每次滑動後空白的地方隨機出現一個數字方塊2或4，相鄰的相同數字的方塊在靠攏時會相加融合為一個方塊。不斷疊加以拼湊出標誌性數字2048，並仍可以無休止地繼續疊加下去，直至空間塞滿方格無法移動遊戲結束。

二.遊戲剖析

2.1 介面

    介面主體部分就是由4×4的方格框與其中會動的數字方格構成，再加上游戲分數累計。空方格框的介面編寫較為簡單，float：left與寬高百分比結合即可實現。根據觀察我們可發現數字方格具有以下重要屬性：數值與其對應顏色、位置，在系統增加隨機格子或操作移動格子時，介面所呈現的是某位置格子的出現或伴隨某位置格子的消失，以及某數值格子的出現或消失。因而我們想到用一組名為座標的class類定義位置屬性，用一組名為數值的class類定義對應數值的對應背景顏色屬性，通過jquery中addClass與removeClass方法操控格子屬性變化，

/*position陣列座標位置*/
.pos00{left:0;top:0;}
 .pos01{left:0; top:25%; } 
 .pos02{left:0; top:50%; } 
 .pos03{left:0; top:75%; } 
 .pos10{left:25%; top:0; } 
 .pos11{left:25%; top:25%; } 
 .pos12{left:25%; top:50%; } 
 .pos13{left:25%; top:75%; } 
 .pos20{left:50%; top:0; } 
 .pos21{left:50%; top:25%; } 
 .pos22{left:50%; top:50%; } 
 .pos23{left:50%; top:75%; } 
 .pos30{left:75%; top:0; } 
 .pos31{left:75%; top:25%; } 
 .pos32{left:75%; top:50%; } 
 .pos33{left:75%; top:75%; }
/*級別格子樣式*/
.n2{background: #ede6d9; color: #625b4e; } 
.n4{background: #eee1cc; color: #625b4e; } 
.n8{background: #eab678; color: #fff; } 
.n16{background: #e5925b; color: #fff; } 
.n32{background: #ef805e; color: #fff; } 
.n64{background: #e75b37; color: #fff; } 
.n128{background: #edcf70; color: #fff; } 
.n256{background: #ebcd64; color: #fff; } 
.n512{background: #ecc950; color: #fff; } 
.n1024{background: #edc63e; color: #fff; } 
.n2048{background: #f0c52f; color: #fff; } 
.n4096{background: #fab912; color: #fff; } 
 

位置組的class類名定義格式為pos+二維陣列索引，數值組的class類名定義格式為n+方格上數字。

2.2 遊戲操作

1.初始狀態下系統在4×4所有格子框中的兩個隨機位置生成數值為2的方格------建立形態對應的二維陣列arr[ ][ ]存放動態的數值，隨機索引的數值，將之通過jquery的append方法將class為pos+i+j的div注入html文件（i、j為索引），在介面顯示出來；

    2.進行一輪操作：向上下左右中的一個方位滑動（手機版）或上下左右方向鍵（電腦版），方格向該方向移動或合併或移動+合併或碰壁狀態無法移動------先用js監聽事件判上、下、左、右操作，後判斷並進行相應的移動或合併操作

    3.每執行方向操作後若移動或合併操作有條件發生（即未碰壁）空白處隨機位置新增格子------遍歷陣列篩選出數值為空的陣列物件再進行隨機並用1中方法畫出格子；

    4.每新增格子後判斷一次遊戲是否結束------遍歷陣列檢查是否無空值且是否無相鄰方格數值相等，是則遊戲結束，通知玩家並回到1，否則繼續下一輪操作，返回2。

三.函式設計

    根據2.2可畫出設計圖，其中呼叫的方法的位置、頻率、順序通過圖示將更為清晰。

設計函式

Game2048.prototype = {
	constructor:Game2048,
	//初始化
	init:function(){
        this.score = 0;
		this.arr = [];
		this.moveAble = false;
		$("#score").html("0");
		$(".number_cell").remove();
		this.creatArr();
	},
    //建立二維陣列
	creatArr:function(){
		var i,j;
		for(i=0;i<4;i++){
			this.arr[i] = [];
			for(j=0;j<4;j++){
				this.arr[i][j] = {};
				this.arr[i][j].value = 0;
			}
		}
		//在全空白情況下隨機生成第一個方格2
		var i1,j1;
		i1 = getRandom(4);
		j1 = getRandom(4);
		this.arrValueUpdate(2,i1,j1);
		this.drawCell(i1,j1);
	},
	//方格數字更新
	arrValueUpdate:function(num,i,j){
		this.arr[i][j].oldValue = this.arr[i][j].value;
		this.arr[i][j].value = num;
	},
	//畫出方格
	drawCell:function(i,j){
		var item = '<div class="number_cell pos'+i+j+'"><span>'+this.arr[i][j].value+'</span></div>';
		$(".box").append(item);
	},
	//監聽並執行動作
	addEvent:function(){
		var that = this;
		document.onkeydown = function(event){
			var e = event||window.event||arguments.callee.caller.arguments[0];
			var keyCode = e.keyCode;
			switch(keyCode){
				case 37:
				that.moveAble = false;
				that.moveLeft();
				that.checkLose();
				break;
				case 38:
				that.moveAble = false;
				that.moveUp();
				that.checkLose();
				break;
				case 39:
				that.moveAble = false;
				that.moveRight();
				that.checkLose();
				break;
				case 40:
				that.moveAble = false;
				that.moveDown();
				that.checkLose();
				break;
			}
		}
	},
	//向上
	moveUp:function(){ 	  },
	//向下
	moveDown:function(){    },
	//向左
	moveLeft:function(){    },
	//向右
	moveRight:function(){    },
    //新增新格子
	newCell:function(){    },
	//移動
	moveCell:function(){    },
	//合併
	mergeCell:function(){	 },
	//判斷輸
	checkLose:function(){	 }
}
function getRandom(n){
	return Math.floor(Math.random()*n)
}
function Game2048(){
	this.addEvent();
}
var g = new Game2048;
g.init();

2048小遊戲整體的思路與結構如上，具體的演算法填充見《js編寫的2048小遊戲開發（下：演算法實現）》。轉載請註明出處，不足之處歡迎討論^_^~。