Mini jeu JS Snake + commentaires détaillés

Astuces : (老鸟跳过，希望对新手有所帮助)

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

代码（有详细注释）：

// Code par CNwander.
// commun
fonction $(str) {
return document.getElementById(str);
}
fonction $tag(str,cible) {
cible = cible || document;
return target.getElementsByTagName(str);
}
// mondial
// const
var WIDTH = 20, //网格宽度
HAUTEUR = 20, //网格高度
DITES = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字，牛，连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
vitesse, //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
transporteur, //承载对象(食物，障碍，滑板，刹车)
serpent, //蛇每节的坐标点
info, //交互对话
btnStart, //开始按钮
topScore = len,
SnakeTimer, //蛇行走计时器
BrakeTimers = [], //随机刹车
skateTimers = [], //随机滑板
clé directe ; // 方向键值 37-40 左上右下
window.onload = fonction(){
info = $("dire");
btnDébut = $("btnDébut");
initGrid(); //网格初始化
document.onkeydown = attachEvents; //绑定方向事件
btnStart.onclick = fonction (e) {
btnStart.blur(); //firefox中必须释放焦点
commencer(); //游戏开始
btnStart.setAttribute("disabled",true);
btnStart.style.color = "#aaa";
}
}
//开始游戏
fonction start() {
longueur = 3 ;
vitesse = 10 ;
touche directe = 39 ;
transporteur = multiArray (LARGEUR, HAUTEUR);
serpent = nouveau tableau ();
clair();
initSnake(); //蛇初始化
addObject("nourriture");
marcher();
addRandomBrake();
}
//创建网格
fonction initGrid() {
var corps = $tag("corps")[0];
var table = document.createElement("table"),
tbody = document.createElement("tbody")
pour(var j = 0; j < HAUTEUR; j++) {
var col = document.createElement("tr");
pour(var je = 0; je < LARGEUR; je++) {
var row = document.createElement("td");
gridElems[i][j] = col.appendChild(row);
}
tbody.appendChild(col);
}
table.appendChild(tbody);
$("snakeWrap").appendChild(table);
}
//创建蛇
fonction initSnake() {
var pointeur = randomPointer(len-1, len-1, WIDTH/2);
pour(var je = 0; je < len; je++) {
var x = pointeur[0] - je,
y = pointeur[1] ;
serpent.push([x,y]);
transporteur[x][y] = "couverture";
}
}
//添加键盘事件
fonction attachEvents(e) {
e = e || événement;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
renvoie faux ;
}
fonction marcher() {
if(snakeTimer) window.clearInterval(snakeTimer);
serpentTimer = window.setInterval(step, Math.floor(3000/speed));
}
fonction étape() {
//获取目标点
var headX = serpent[0][0],
headY = serpent[0][1];
commutateur (touche directe) {
cas 37 : headX -= 1 ; casser;
cas 38 : têteY -= 1 ; casser;
cas 39 : têteX += 1 ; casser
cas 40 : têteY += 1 ; casser;
}
//碰到边界，阻挡物，则结束游戏
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "block" || carrier[headX][headY] == "couverture" ) {
trace("JEU TERMINÉ");
if(getText($("score"))*1 < len) trace(len,$("score"));
btnStart.removeAttribute("désactivé");
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]);
retour;
}
//加速
if(len % 4 == 0 && vitesse < 60 && transporteur[headX][headY] == "nourriture") {
vitesse += 5 ;
marcher();
trace("加速！");
}
//捡到刹车
if(carrier[headX][headY] == "frein") {
vitesse = 5 ;
marcher();
trace("恭喜！捡到刹车一个。");
}
//遭遇滑板
if(carrier[headX][headY] == "skate") {
vitesse += 20 ;
marcher();
trace("遭遇滑板！");
}
//添加阻挡物
if(len % 6 == 0 && len < 60 && carrier[headX][headY] == "nourriture") {
addObject("bloc");
}
//对话
si(len <= 40 && len % 10 == 0) {
var cheer = SAY[len/10-1];
trace(acclamation);
}
//吃东西
if(carrier[headX][headY] != "nourriture") {
var lastX = serpent[snake.length-1][0],
lastY = serpent[snake.length-1][1];
transporteur[lastX][lastY] = false;
gridElems[lastX][lastY].className = "";
serpent.pop();
} autre {
transporteur[headX][headY] = false;
trace("吃到食物");
addObject("nourriture");
}
serpent.unshift([headX,headY]);
transporteur[headX][headY] = "couverture";
gridElems[headX][headY].className = "couverture";

len = serpent.longueur;
}
//添加物品
fonction addObject (nom) {
var p = randomPointer();
transporteur[p[0]][p[1]] = nom ;
gridElems[p[0]][p[1]].className = nom;
}
//添加随机数量刹车和滑板
fonction addRandomBrake() {
var num = randomNum(1,5);
pour(var je = 0; je < num; je++) {
BrakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
}
}
//输出信息
fonction trace(qc,qui) {
qui = qui || informations ;
if(document.all) who.innerText = qch;
sinon who.textContent = qc;
}
//获取信息
fonction getText (cible) {
if(document.all) return target.innerText;
sinon, retournez target.textContent ;
}
//创建二维数组
fonction multiArray(m,n) {
var arr = nouveau tableau (n);
pour(var i=0; i<m; i++)
arr[i] = nouveau tableau(m);
retour arr;
}
//清除画面
fonction effacer() {
pour(var y = 0; y < gridElems.length; y++) {
pour(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = "";
}
}
}
//产生指定范围随机点
fonction randomPointer(startX,startY,endX,endY) {
débutX = débutX || 0 ;
débutY = débutY || 0 ;
finX = finX || LARGEUR;
finY = finY || HAUTEUR;
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;
retourner p ;
}
//产生随机整数
function randomNum (début, fin) {
return Math.floor(Math.random()*(end - start)) + start;
}