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;
}