引言
這是大一剛結束的時候做的東西，之前也寫了文章做記錄，最近想發一下博客，就重新整理了一下，拿來試試水。
知識儲備
我們學校的課程安排在大一的時候只學習了html，所以當時做這個項目的時候我通過自學來實現的。因此在學習之前，你需要做一些準備，瞭解一下html、css、JavaScript的基本語法。前兩項算是比較簡單，依靠大一時期課本便足夠了，最主要的則是JavaScript。這一項大家可以找到一本JavaScript的書進行學習。我當時使用的是《21學通JavaScript》，覺得上面的講解比較基礎，適合初學者快速入門。
就是下面這本：
編譯器推薦
應該回來看這個博客的應該是初學者，我就給大家推薦幾個比較好用的編譯器。
首先，最爲基礎的寫網站的工具是記事本，只需要寫完之後把後綴名txt改爲html便可以直接訪問寫好的html網站。
其次就是入門比較常用的adobe公司出品的Dreamweaver，同樣是這個公司出品的還有Photoshop（PS）、Premiere（Pr）、Flash等等，這個編譯器幾乎可以寫網站涉及到的大多數功能，不過相對來說他的內置預覽功能比較令人頭疼。
最後則是我使用的編譯器——jetbrains公司出品的webstorm，這個編譯器我覺得比較清晰明瞭，而且對於設置的顏色的16位編碼會有一個比較清晰的預覽功能。因爲我經常會使用同樣是jetbrains公司出品的IDEA（JAVA）、pycharm（python）、clion（c++）的編譯器，所以我比較喜歡同樣這個公司出品的軟件的風格。不過就是這個軟件的破解碼不太好找，大家可以通過自己學校edu結尾的郵箱申請一個學生認證賬號，可以免費使用這個公司的大多數產品。
遊戲框架
既然是製作一款遊戲，那咱們便先要創建一個項目，搭建出這個遊戲的基礎架構。
我在這裏放了七個文件來存放遊戲的框架代碼：
2048.css ：2048的遊戲界面樣式
animation.js：遊戲動畫邏輯文件
game.js ：遊戲交互邏輯文件
index.html ：遊戲頁面，並在頭文件中引入其餘的js或css文件：
Jquery -1.11.0.js：網絡上下載的JavaScript的代碼庫，減少遊戲中手寫JS的代碼量（有直接可以調用的就直接用就好了）
main.js ：遊戲主邏輯文件
game.js ：遊戲交互邏輯文件
構建遊戲的基礎頁面
第二步，便要構建遊戲的基礎頁面。
上圖便是遊戲的主要框架，爲了讓代碼更爲清晰，我將這個頁面分爲了兩個部分，前三塊標題、按鈕、計分器，我將其放入header中作爲頁面的頭部，操作界面則由單獨的DIV構成。因爲主要實現遊戲的邏輯語言是JavaScript，在其中一些需要鏈接的地方便要用id來進行命名。而遊戲更新按鈕，再點擊時需要重置遊戲，便引用javascript:newgame()方法，具體的方法內容則在.js後綴的文件中編寫。
頭部位置設置好了，再來看操作界面。這個界面是由四行四列的方格組成，最外側還有一個大方格，便用17個div來定義這一區域。而在命名小格子的名稱時使用的數字時0-0，是因爲計算機在一般情況下都是從0開始計數的，比如：數組，這樣命名符合計算機規則。
<header>
<h1>2048</h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>score:<span id="score">0</span></p>
</header>
<div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
將上面這個代碼體現出來便是這樣一個效果，因爲還沒由加上CSS樣式，便沒有什麼具體的顯示。
大致的頁面設置完了，就要設置CSS樣式，先是將整個界面居中，調整字體大小，再設置操作界面中各個div的間隔，大小與寬度，鑑於這些內容比較基礎，我就不一一描述了，大家可以參照以下代碼進行調整。建議大家先自己嘗試着編寫這部分代碼，等編寫完之後在來對照我的代碼，如果有問題歡迎大家指正交流。
#grid-container{
width: 520px;
height: 520px;
margin: 50px auto;
background-color: #bbada0;
border-radius:10px;
position: relative;
overflow: auto;
}
.grid-cell{
width: 100px;
height: 100px;
margin: 10px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
}
.number-cell{
margin: 10px;
border-radius: 6px;
font-family: Arial;
font-weight: bold;
font-size: 60px;
line-height: 100px;
text-align: center;
position: absolute;
}
這樣構建完頁面會出現只顯示一個格子的狀況，後續的JS程序會調整成剛開始預覽的16格的狀況。而使用JS來初始化是爲了方便在編寫其他函數時方便調用每個方塊的信息。