因為公司有個部門要負責開發小遊戲，之前跟工程師提議了可以試試看2048那種遊戲啊，感覺規則很好懂，應該不難寫吧？雖然後來工程師真的花了兩三個禮拜成功用Java刻出了一個山寨版的2048，但內心深處的良心仍然向著我吶喊：
你這嘴砲，怎麼不自己寫啊～～～
因為我不是工程師啊～～～（小聲+fade out)
受不了良心的譴責，於是決定下班來試試看能不能自幹一個Javascript版本的2048出來，為了安撫良心，順便也當作平日的練習題來做做看，說不定做成功了掛個廣告也是個斂財的一尾活龍（？）。
目標：山寨一個Javascript版本的2048。
實際下手開始做之後，我才發現自己太天真了，TOO NAIVE！菜鳥如我，在HTML要刻格子出來的時候就遇到大麻煩了，如果要有數字移動，還要RWD，我想應該是要用DIV來刻吧，但我CSS還很弱啊。所以最後自我妥協，因為我是新手，那就把目標放低一點吧！嗯！（嗯個屁）
目標變更：做一個可以用方向鍵控制亮燈的16宮格
這樣就簡單多了，首先用table做了一個16宮格，一開始我的想法是這樣的，為每個格子都命名一個ID，然後我花了312行的Javascript，其中有286行都在switch case，裡面就是相當土法煉鋼的一個格子一個格子給case。其實當時就覺得這樣寫很智障，腦袋裡想要巢狀迴圈一下，卻毫無頭緒，最後就變成這樣。
後來跑去請老師給我一個方向之後（果然該發問還是要問啊），一切就豁然開朗起來。老師的建議是，可以試著用座標的概念，加上陣列來抓每個格子。
最後陣列的部分我失敗了（尚在研究中），不過用座標的方式成功了，目前的成果41行，比之前的312行聰明太多了，於是就還是來紀錄一下做法。
首先，先宣告四個變數，分別用來判斷按按鍵變更前後的x,y軸。預設值先給0，所以一打開來燈就先亮在最左上角。
var r=0, d=0, rp=0, dp=0;
document.getElementsByTagName("tr")[r].getElementsByTagName("td")[d].style.backgroundColor = '#FFFFCD';接著就是寫function，使用event.keyCode來執行上下左右鍵發生的時候要做的事情（推薦一個查keyCode的好用網頁，就不用自己在那邊console.log半天）。
要做的事情是這樣的：
- 按按鍵之後，先把現在（移動前）的座標值存起來
- 開始依照按鍵加減座標值
- Break
- 宣告一個box變數，這個用來依照移動後的座標上鵝黃色
- 宣告一個boxpass變數，依照移動前的座標上白色
- 各變數抓出來上色
- 其實已經結束了，但還是好習慣寫一下console.log來debug
function light(){
var key = event.keyCode;
switch(key){
case 37:
if(d>0){
dp = d;
rp = r;
d-=1;
}
break;
case 38:
if(r>0){
rp = r;
dp = d;
r-=1;
}
break;
case 39:
if(d<3){
dp = d;
rp = r;
d+=1;
}
break;
case 40:
if(r<3){
rp = r;
dp = d;
r+=1;
}
break;
}
var box = document.getElementsByTagName("tr")[r].getElementsByTagName("td")[d];
var boxpass = document.getElementsByTagName("tr")[rp].getElementsByTagName("td")[dp];
box.style.backgroundColor = '#FFFFCD';
boxpass.style.backgroundColor = '#FFFFFF';
console.log("("+d+","+r+")");
}最後再把這個function呼叫出來即可，使用addEventListener的keydown。
document.addEventListener("keydown",light,false);大概就這樣，花了我一個禮拜的下班時間，看來距離2048還有好長一段距離。