JSミニゲーム「スネーク」＋詳細コメント

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

1. IE: element.innerText = FF: element.textContent；
2. setAttribute("cellpadding","0")在IE中無效，正确写法cellPadding (一不小心就犯行済み);
3. FF では、特定の要素上で決定された错盘イベントを使用して、事前に焦点を取得し、ドキュメントも例外なく、これは簡単に実行できます;
4. IE では、テーブル要素を作成し、追加ボディを取得します; 代コード

(注意事項あり) ）：

// CNwander によるコード。
// 一般
関数 $(str) {
document.getElementById(str) を返します。
}
関数 $tag(str,target) {
ターゲット = ターゲット ||書類;
target.getElementsByTagName(str) を返します。
}
// グローバル
// 定数
var WIDTH = 20, //ネットワーク格宽度
HEIGHT = 20, //ネットワーク高さ
SAY = ["相当不错、虽然说およびCNwanderは一級ではない","可啊、再加点油都可以和CNwander媲美了！","一字、牛、CNwander都甘拜下风了","差不多行了，别握游戏玩爆了"];
var len = 3, //蛇の長さ
速度, // 繰り返し速度
GridElems = multiArray(WIDTH,HEIGHT), //单元格对オブジェクト
carrier, //承ダウンロード对象(食品，障碍，滑板，瞬間车)
蛇, //蛇每节的坐标点
info, // 対話对话
btnStart, //开始按钮
トップスコア = len、
SnakeTimer, //蛇行走计タイマー
BrakeTimers = [], //随机刹车
スケートタイマー = [], //随机滑板
ダイレクトキー; // 方向键值 37-40 左上右下
window.onload = function(){
info = $("言う");
btnStart = $("btnStart");
initGrid(); //ネット格初化
document.onkeydown = アタッチイベント; //定方向イベント
btnStart.onclick = 関数 (e) {
btnStart.blur(); //firefox中必须释放焦点
始める（）; //游戏开始
btnStart.setAttribute("無効",true);
btnStart.style.color = "#aaa";
}
}
//開始游戏
関数 start() {
レン = 3;
速度 = 10;
ダイレクトキー = 39;
キャリア = multiArray(WIDTH,HEIGHT);
ヘビ = 新しい Array();
クリア（）;
initSnake(); //蛇初化
addObject("食べ物");
歩く（）;
addRandomBrake();
}
//创建网格
関数 initGrid() {
var body = $tag("body")[0];
var table = document.createElement("テーブル"),
tbody = document.createElement("tbody")
for(var j = 0; j < HEIGHT; j++) {
varcol = 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(テーブル);
}
//创建蛇
関数 initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = ポインタ[0] - i、
y = ポインタ[1];
ヘビ.push([x,y]);
キャリア[x][y] = "カバー";
}
}
//追加键盘イベント
関数attachEvents(e) {
e = e ||イベント;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : ダイレクトキー; //非方向键、逆方向無效
false を返します。
}
関数 walk() {
if(snakeTimer) window.clearInterval(snakeTimer);
SnakeTimer = window.setInterval(step, Math.floor(3000/speed));
}
関数ステップ() {
//获取目标点
var 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($("スコア"))*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 <kateTimers.length; i++) window.clearTimeout(skateTimers[i]);
戻る;
}
//加速
if(len % 4 == 0 && 速度 < 60 && キャリア[headX][headY] == "食べ物") {
速度 += 5;
歩く（）;
トレース("加速！");
}
//捡到刹车
if(キャリア[ヘッドX][ヘッドY] == "ブレーキ") {
速度 = 5;
歩く（）;
トレース("恭喜！捡到一瞬车一。");
}
// 対面滑板
if(キャリア[ヘッドX][ヘッドY] == "スケート") {
速度 += 20;
歩く（）;
トレース("遭遇滑板！");
}
// 阻止物を追加
if(len % 6 == 0 && len < 60 && キャリア[headX][headY] == "食べ物") {
addObject("ブロック");
}
//对话
if(レン <= 40 && レン % 10 == 0) {
var 応援 = SAY[len/10-1];
トレース（歓声）;
}
//吃东西
if(キャリア[ヘッドX][ヘッドY] != "食べ物") {
var lastX = スネーク[snake.length-1][0],
lastY = スネーク[snake.length-1][1];
キャリア[lastX][lastY] = false;
GridElems[lastX][lastY].className = "";
ヘビ.ポップ();
} それ以外 {
キャリア[ヘッドX][ヘッドY] = false;
トレース("吃到食品");
addObject("食べ物");
}
ヘビ.unshift([頭X,頭Y]);
キャリア[ヘッドX][ヘッドY] = "カバー";
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)) );
スケートタイマー.push( window.setTimeout(function(){addObject("スケート")},randowNum(5000,100000)) );
}
}
//出出情報
関数トレース(sth,who) {
誰 = 誰 ||情報;
if(document.all) who.innerText = sth;
それ以外の場合はwho.textContent = sth;
}
//获取情報
関数 getText(ターゲット) {
if(document.all) return 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;
}