JS小遊戲貪吃蛇+詳細註釋

Tips:(老鳥跳過，希望對新手有幫助)

1. IE: element.innerText = FF: element.textContent;
2. setAttribute("cellpadding","0")在IE中無效，正確寫法cellPadding (一不小心就錯了）；
3. FF中，在某個元素上的鍵盤事件前使用綁定，先犯獲得焦點，文檔也不例外，這很容易疏忽；
4. 在IE中創建表元素，記得加tbody；

代碼（有詳細註解） ）：

// CNwander 程式碼。
// 常見的
函數 $(str) {
返回 document.getElementById(str);
}
函數 $tag(str,目標) {
目標=目標||文件;
返回 target.getElementsByTagName(str);
}
// 全球的
// 常數
var WIDTH = 20, //網格寬度
HEIGHT = 20, //網格高度
SAY = [“相當，不錯，雖然說和CNwander還不是一個級別的”，“可以啊，再加點油都可以和CNwander相當美了！”，“一個字，牛，連CNwander都甘拜下風了”，“差不多行了，別把遊戲玩爆了”];
var len = 3, // 蛇的長度
speed, //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), // 儲存格物件
Carrier, //承載對象(食物，障礙，滑板，煞車)
Snake, //蛇每節的座標點
info, //互動對話
btnStart, //開始按鈕
最高得分 = len,
SnakeTimer, //蛇行走計時器
BrakeTimers = [], // 隨機煞車
SkateTimers = [], // 滑動滑板
直接鍵； // 方向鍵值 37-40 左上右下
視窗.onload = 函數(){
訊息 = $("說");
btnStart = $("btnStart");
初始化網格（）； //網格初始化
document.onkeydown = AttachEvents; //綁定方向事件
btnStart.onclick = 函數 (e) {
btnStart.blur(); //firefox中必須釋放對焦
開始（）; //遊戲開始
btnStart.setAttribute("停用",true);
btnStart.style.color = "#aaa";
}
}
//開始遊戲
函數開始（）{
長度 = 3;
速度=10；
直接鍵= 39；
載體= multiArray（寬度，高度）；
蛇=新數組（）；
清除（）;
initSnake(); //蛇初始化
添加對象（“食物”）；
走（）;
加入隨機煞車（）；
}
//建立網格
函數 initGrid() {
var body = $tag("body")[0];
var table = document.createElement("table"),
tbody = document.createElement("tbody")
for(var j = 0; j < 高度; j++) {
var col = document.createElement("tr");
for(var i = 0; i < 寬度; i++) {
var row = document.createElement("td");
gridElems[i][j] = col.appendChild(row);
}
tbody.appendChild(col);
}
表.appendChild(tbody);
$("snakeWrap").appendChild(表);
}
//建立蛇
函數 initSnake() {
var 指標 = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = 指標[0] - i,
y = 指標[1]；
蛇.推([x,y]);
載體[x][y] = "覆蓋";
}
}
//新增鍵盤事件
函數附加事件（e）{
e = e ||事件;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : 直接鍵； //非方向鍵、反向無效
返回假；
}
函數步行（）{
if(snakeTimer) window.clearInterval(snakeTimer);
SnakeTimer = window.setInterval(step, Math.floor(3000/速度));
}
函數步驟() {
//取得目標點
var headX = 蛇[0][0],
headY = 蛇[0][1];
開關（直接鍵）{
情況 37：headX -= 1；休息;
情況 38：headY -= 1；休息;
情況 39：headX += 1；休息
情況 40：headY += 1；休息;
}
// 繞過邊界，封閉物，則結束遊戲
if(headX >= 寬度 || headX < 0 || headY >= 高度 || headY < 0 || 載體[headX][headY] == "塊" || 載體[headX][headY] == "覆蓋" ）{
跟蹤（“遊戲結束”）；
if(getText($("分數"))*1 < len) 追蹤(len,$("分數"));
btnStart.removeAttribute("停用");
btnStart.style.color = "#000";
window.clearInterval(snakeTimer);
for(var i = 0; i <brakeTimers.length; i++) window.clearTimeout(brakeTimers[i]);
for(var i = 0; i <skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
返回;
}
// 加速
if(len % 4 == 0 && 速度 < 60 && 載體[headX][headY] == "食物") {
速度+=5；
走（）;
trace("加速！");
}
// 到撿煞車
if(載具[headX][headY] == "煞車") {
速度=5；
走（）;
trace("恭喜撿！到煞車一台。");
}
// 遭遇滑板
if(載體[headX][headY] == "滑冰") {
速度+=20；
走（）;
trace("遭遇滑板！");
}
//新增充實物
if(len % 6 == 0 && len < 60 && 載體[headX][headY] == "食物") {
新增物件（“區塊”）；
}
//對話
if(len <= 40 && len % 10 == 0) {
var 歡呼 = SAY[len/10-1];
痕跡（歡呼）；
}
//吃東西
if(載體[headX][headY] != "食物") {
varlastX=snake[snake.length-1][0],
lastY = 蛇[snake.length-1][1];
載體[lastX][lastY] = false;
gridElems[lastX][lastY].className = "";
蛇.pop();
} 別的 {
載體[headX][headY] = false;
trace("吃到食物");
添加對象（“食物”）；
}
Snake.unshift([headX,headY]);
載體[headX][headY] = "封面";
gridElems[headX][headY].className = "封面";

len = 蛇.長度;
}
//新增項目
函數 addObject(名稱) {
var p = randomPointer();
載體[p[0]][p[1]] = 名稱；
gridElems[p[0]][p[1]].className = 名稱;
}
// 加入隨機數量煞車和滑板
函數addRandomBrake() {
var num = randowNum(1,5);
for(var i = 0; i < num; i++) {
BrakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
SkateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
}
}
//輸出訊息
函數追蹤（某物，誰）{
誰=誰||資訊;
if(document.all) who.innerText = sth;
否則 who.textContent = sth;
}
//取得資訊
函數 getText(目標) {
if(document.all) 回傳 target.innerText;
否則返回target.textContent；
}
//建立二維碼
函數 multiArray(m,n) {
var arr = 新數組(n);
for(var i=0; i<m; i++)
arr[i] = 新數組(m);
返回 arr；
}
//清除畫面
函數清除() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = "";
}
}
}
//產生指定範圍隨機點
函數 randomPointer(startX,startY,endX,endY) {
開始X = 開始X || 0;
起始Y = 起始Y || 0;
結束 X = 結束 X ||寬度;
結束Y = 結束Y ||高度;
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
if(載體[x][y])返回randomPointer(startX,startY,endX,endY);
p[0] = x；
p[1] = y；
返回p；
}
//產生隨機整數
函數 randowNum(開始,結束) {
return Math.floor(Math.random()*(end - start)) + start;
}