JS-Minispiel Snake + ausführliche Kommentare

Tipps:

1. IE: element.innerText = FF: element.textContent；
2. setAttribute("cellpadding","0")在IE中无效，正确写法cellPadding (nicht verfügbar).犯错了；；
3. IE中create table element, 记得加tbody
4. ；

代码（有详细注释）：

// Code von CNwander.
// gemeinsam
Funktion $(str) {
return document.getElementById(str);
}
Funktion $tag(str,target) {
Ziel = Ziel || dokumentieren;
return target.getElementsByTagName(str);
}
// global
// const
var WIDTH = 20, //网格宽度
HEIGHT = 20, //网格高度
SAY = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字牛,连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
Geschwindigkeit, //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
Träger, //承载对象(食物，障碍，滑板，刹车)
Schlange, //蛇每节的坐标点
info, //交互对话
btnStart, //开始按钮
topScore = länge,
SnakeTimer, //蛇行走计时器
BrakeTimers = [], //Erweiterte Informationen
skateTimers = [], //随机滑板
Direkttaste; // 方向键值 37-40 左上右下
window.onload = function(){
info = $("say");
btnStart = $("btnStart");
initGrid(); //网格初始化
document.onkeydown = attachmentEvents; //绑定方向事件
btnStart.onclick = Funktion (e) {
btnStart.blur(); //firefox中必须释放焦点
Start(); //游戏开始
btnStart.setAttribute("disabled",true);
btnStart.style.color = "#aaa";
}
}
//开始游戏
Funktion start() {
Länge = 3;
Geschwindigkeit = 10;
Direkttaste = 39;
Träger = multiArray(WIDTH,HEIGHT);
Schlange = neues Array();
klar();
initSnake(); //蛇初始化
addObject("food");
gehen();
addRandomBrake();
}
//创建网格
Funktion initGrid() {
var body = $tag("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);
$("snakeWrap").appendChild(table);
}
//创建蛇
Funktion initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = Zeiger[0] - i,
y = Zeiger[1];
Snake.push([x,y]);
Träger[x][y] = "Abdeckung";
}
}
//添加键盘事件
Funktion attachmentEvents(e) {
e = e || Ereignis;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode: Direktschlüssel; //非方向键、反向无效
return false;
}
Funktion walk() {
if(snakeTimer) window.clearInterval(snakeTimer);
SnakeTimer = window.setInterval(step, Math.floor(3000/speed));
}
Funktion step() {
//获取目标点
var headX = Snake[0][0],
headY = Schlange[0][1];
switch(directkey) {
Fall 37: headX -= 1; brechen;
Fall 38: headY -= 1; brechen;
Fall 39: headX += 1; brechen
Fall 40: headY += 1; brechen;
}
//碰到边界，阻挡物，则结束游戏
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || Carrier[headX][headY] == "Block" || Carrier[headX][headY] == "cover" ) {
Trace("GAME OVER");
if(getText($("score"))*1 < len) Trace(len,$("score"));
btnStart.removeAttribute("disabled");
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]);
zurückkehren;
}
//加速
if(len % 4 == 0 && speed < 60 && Carrier[headX][headY] == "food") {
Geschwindigkeit += 5;
gehen();
Trace("加速！");
}
//捡到刹车
if(carrier[headX][headY] == "brake") {
Geschwindigkeit = 5;
gehen();
Trace("恭喜！捡到刹车一个。");
}
//遭遇滑板
if(carrier[headX][headY] == "skate") {
Geschwindigkeit += 20;
gehen();
Trace("遭遇滑板！");
}
//添加阻挡物
if(len % 6 == 0 && len < 60 && Carrier[headX][headY] == "food") {
addObject("block");
}
//对话
if(len <= 40 && len % 10 == 0) {
var cheer = SAY[len/10-1];
Spur(jubeln);
}
//吃东西
if(carrier[headX][headY] != "food") {
var lastX = Snake[snake.length-1][0],
lastY = Snake[snake.length-1][1];
Carrier[lastX][lastY] = false;
gridElems[lastX][lastY].className = "";
Snake.pop();
} anders {
Träger[KopfX][KopfY] = false;
Trace("吃到食物");
addObject("food");
}
Snake.unshift([headX,headY]);
Carrier[headX][headY] = "cover";
gridElems[headX][headY].className = "cover";

len = Snake.length;
}
//添加物品
Funktion addObject(name) {
var p = randomPointer();
Träger[p[0]][p[1]] = Name;
gridElems[p[0]][p[1]].className = name;
}
//添加随机数量刹车和滑板
Funktion 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)) );
}
}
//输出信息
Funktion Trace(sth,who) {
wer = wer || Info;
if(document.all) who.innerText = sth;
sonst who.textContent = etw;
}
//获取信息
Funktion getText(target) {
if(document.all) return target.innerText;
sonst return target.textContent;
}
//创建二维数组
Funktion multiArray(m,n) {
var arr = neues Array(n);
for(var i=0; i<m; i++)
arr[i] = neues Array(m);
Rückkehr arr;
}
//清除画面
Funktion klar() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
GridElems[x][y].className = "";
}
}
}
//产生指定范围随机点
Funktion randomPointer(startX,startY,endX,endY) {
startX = startX || 0;
startY = startY || 0;
endX = endX || BREITE;
endY = endY || HÖHE;
var p = [],
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);
p[0] = x;
p[1] = y;
Rückkehr p;
}
//产生随机整数
Funktion randowNum(start,end) {
return Math.floor(Math.random()*(end - start)) + start;
}