1. 操作描述：
每按下方向键后若格子能够发生变动（即有移动或合并操作产生），便在移动或合并操作后剩下的空白处某一随机位置新增一个数值为2的格子。
2. 编程思路：
我们需要结合其它方法来判断是否执行此方法，因此定义一个全局的布尔类型变量 moveAble，用作新增格子的“开关”。默认状态下让它“关闭”，即在声明时赋值为 false。在进行了移动或合并操作后将它“打开”，即在移动和合并的方法内部将true赋值给 moveAble。并在即将进行新一轮移动或合并操作前再将它“关闭”，即在上篇监听方法中执行向上/下/左/右方法之前将其值设为false。
了解这个“开关”的作用后开始编写新增格子方法。首先判断 moveAble 是否为 true ，为 true 则继续进行，否则控制台返回“不能增加新格子，请尝试其他方向移动！”。接着遍历整个二维数组，将数值为空的坐标保存进局部定义的数组变量 ableArr 中，对下标进行随机方法，将最终的随机下标值和格子值（2）或随机下标值传入 arrValueUpdate 与 drawCell 方法中来画出新格子。
我原来用C语言，借助curses库实现了linux 终端下的贪吃蛇游戏。这个javascript版本的贪吃蛇是http://www.veryhuo.com/game/tanchishe.html 的学习笔记，实现的原理和C版本基本一样。
--------------------
1.怎样表示一条snake
用一个二维数组存snake的各个点(x,y)，同时标记这些点(x,y)为“cover”，这是用于以后检查snake的头是否撞到了snake的body。
//initialize snake
function initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2)
for(var i = 0 i < len i++) {
var x = pointer[0] - i,
y = pointer[1]
snake.push([x,y])
carrier[x][y] = "cover" //标记snake body
}
}
2.用js画出格子
用document.createElent()方法创建出table->tr->td, 然后用document.appendChild()方法追加到id为“snakewrap”的元素上：
//initialize grid
function initGrid() {
var body = document.getElementsByTagName("body")[0]
var table = document.createElement("table"),
tbody = document.createElement("tbody")
for(var j = 0 j < HEIGHT j++) {
var col = document.createElement("tr")
for(var i = 0 i < WIDTH i++) {
var row = document.createElement("td")
gridElems[i][j] = col.appendChild(row)
}
tbody.appendChild(col)
}
table.appendChild(tbody)
document.getElementById("snakewrap").appendChild(table)
}
3.生成食物的随机坐标
function randomPointer(startX,startY,endX,endY) {
startX = startX || 0
startY = startY || 0
endX = endX || WIDTH
endY = endY || HEIGHT
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY
//如果(x,y)有物体，则重新生成坐标
if(carrier[x][y]) {
return randomPointer(startX,startY,endX,endY)
}
p[0] = x
p[1] = y
return p
}
添加新的食物：
//addObject("food")
function addObject(name) {
var p = randomPointer() //get random position
var x = p[0]
var y = p[1]
carrier[x][y] = name
gridElems[x][y].className = name
}
4.方向键按下动作事件监听：允许左上右下这4个按键来改变snake的运动方向，注意，如果方向相反的话，不生效。
对于键盘上的每一个按键，都有一个key cord,我的这篇博客记录了javascript的key cord,可看到：
left arrow 37
up arrow 38
right arrow 39
down arrow 40
//keyboard event listener
function attachEvents(e) {
e = e || event
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey
return false
}
<script type="text/javascript">function createDIV(){
var div=document.createElement("div")//创建一个DIV
div.setAttribute("id", "div")
document.body.appendChild(div)//主要加上这句，把新建的DIV加到页面上。
var left = div.offsetLeft
setInterval(
function () {
left -= 10
div.style.left = left+"px"
},
50)
}
</script>
这样就可以了
