JS мини-игра Змейка + подробные комментарии

Советы: (老鸟跳过，希望对新手有所帮助)

1. IE: element.innerText = FF: element.textContent；
2. setAttribute("cellpadding","0")在IE中无效，正确写法cellPadding (一不小)心就犯错了)；
3. FF中,使用绑定在某元素上的键盘事件前,先让它获得焦点, document也不例外,这容易疏忽；
4. 在IE中create table element，记得加tbody；

代码（有详细注释）：

// код CNwander.
// общий
функция $(строка) {
вернуть document.getElementById(str);
}
функция $tag(str,target) {
цель = цель || документ;
return target.getElementsByTagName(str);
}
// глобальный
// константа
var WIDTH = 20, //网格宽度
ВЫСОТА = 20, //网格高度
SAY = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字，牛，连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
скорость, //爬行速度
GridElems = multiArray(WIDTH,HEIGHT), // 单元格对象
перевозчик, //承载对象(食物，障碍，滑板，刹车)
змея, //蛇每节的坐标点
информация, //交互对话
btnStart, //开始按钮
topScore = длина,
SnakeTimer, //蛇行走计时器
тормозные таймеры = [], // 随机刹车
SkateTimers = [], // 随机滑板
прямая клавиша; // 方向键值 37-40 左上右下
window.onload = функция(){
информация = $("сказать");
btnStart = $("btnStart");
инициализация(); //网格初始化
document.onkeydown = AttachEvents; //绑定方向事件
btnStart.onclick = функция (e) {
btnStart.blur(); //Firefox中必须释放焦点
начинать(); // 游戏开始
btnStart.setAttribute("отключено", true);
btnStart.style.color = "#aaa";
}
}
//开始游戏
функция старт() {
Лен = 3;
скорость = 10;
прямая клавиша = 39;
перевозчик = multiArray (ШИРИНА, ВЫСОТА);
змея = новый массив ();
прозрачный();
initSnake(); // 蛇初始化
addObject("еда");
ходить();
addRandomBrake();
}
//创建网格
функция initGrid() {
вар тело = $tag("тело")[0];
var table = document.createElement("таблица"),
tbody = document.createElement("tbody")
for(var j = 0; j <HEIGHT; j++) {
var col = document.createElement("tr");
for(var я = 0; я <ШИРИНА; я++) {
var row = document.createElement("td");
GridElems[i][j] = col.appendChild(строка);
}
tbody.appendChild(столбец);
}
table.appendChild(tbody);
$("snakeWrap").appendChild(таблица);
}
//创建蛇
функция initSnake() {
указатель var = randomPointer(len-1, len-1, WIDTH/2);
for(var я = 0; я <len; я++) {
вар х = указатель[0] - я,
у = указатель[1];
змея.push([x,y]);
перевозчик[x][y] = "покрытие";
}
}
//添加键盘事件
функция AttachEvents(e) {
е = е || событие;
Directkey = Math.abs(e.keyCode - Directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode: прямой ключ; //非方向键、反向无效
вернуть ложь;
}
функция прогулка() {
if(snakeTimer) window.clearInterval(snakeTimer);
SnakeTimer = window.setInterval(шаг, Math.floor(3000/скорость));
}
функция шаг() {
//获取目标点
вар headX = змея[0][0],
headY = змея[0][1];
переключатель (прямая клавиша) {
случай 37: headX -= 1; перерыв;
случай 38: headY -= 1; перерыв;
случай 39: headX += 1; перерыв
случай 40: headY += 1; перерыв;
}
//碰到边界,阻挡物,则结束游戏
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || несущей[headX][headY] == "блок" || несущей[headX][headY] == "обложка" ) {
трассировка("ИГРА ЗАКОНЧЕНА");
if(getText($("score"))*1 <len) трассировка(len,$("score"));
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;
ходить();
трассировка("加速！");
}
//捡到刹车
if(carrier[headX][headY] == "тормоз") {
скорость = 5;
ходить();
трассировка("恭喜！捡到刹车一个。");
}
// 遭遇滑板
if(carrier[headX][headY] == "конек") {
скорость += 20;
ходить();
трассировка("遭遇滑板！");
}
//添加阻挡物
if(len % 6 == 0 && len < 60 && несущей[headX][headY] == "еда") {
addObject("блокировать");
}
//对话
if(len <= 40 && len % 10 == 0) {
вар развеселить = SAY[len/10-1];
след (аплодисменты);
}
//吃东西
if(carrier[headX][headY] != "еда") {
вар LastX = змея[snake.length-1][0],
LastY = змея[snake.length-1][1];
перевозчик[lastX][lastY] = ложь;
GridElems[lastX][lastY].className = "";
змея.поп();
} еще {
перевозчик[headX][headY] = ложь;
трассировка("Необходимый эффект");
addObject("еда");
}
Snake.unshift([headX,headY]);
перевозчик[headX][headY] = "обложка";
GridElems[headX][headY].className = "обложка";

лен = змея.длина;
}
//添加物品
функция addObject(имя) {
вар р = случайный указатель();
перевозчик[p[0]][p[1]] = имя;
GridElems[p[0]][p[1]].className = имя;
}
//添加随机数量刹车和滑板
функция addRandomBrake() {
вар num = randowNum(1,5);
for(var я = 0; я <число; я++) {
BrakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
SkateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
}
}
// 输出信息
функция трассировка(sth,кто) {
кто = кто || информация;
если (document.all) who.innerText = sth;
еще who.textContent = sth;
}
//获取信息
функция getText(цель) {
if(document.all) возвращает target.innerText;
иначе верните target.textContent;
}
//创建二维数组
функция multiArray(m,n) {
вар arr = новый массив (n);
for(var i=0; i<m; i++)
arr[i] = новый массив (м);
возврат обр;
}
//清除画面
функция ясно() {
for(var y = 0; y <griElems.length; y++) {
for(var x = 0; x <gridElems[y].length; x++) {
GridElems[x][y].className = "";
}
}
}
//产生指定范围随机点
функция randomPointer(startX,startY,endX,endY) {
стартХ = стартХ || 0;
началоY = началоY || 0;
конецX = конецX || ШИРИНА;
конецY = конецY || ВЫСОТА;
вар р = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
if(carrier[x][y]) return randomPointer(startX,startY,endX,endY);
р[0] = х;
р[1] = у;
вернуть р;
}
//产生随机整数
функция randowNum (начало, конец) {
return Math.floor(Math.random()*(конец - начало)) + начало;
}