網頁制作poluoluo文章簡介：JS小游戲貪吃蛇+詳細注釋.
運行代碼框 Tips: (老鳥跳過，希望對新手有所幫助) 代碼（有詳細注釋）： // code by CNwander.
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
// common
function $(str) {
return document.getElementById(str);
}
function $tag(str,target) {
target = target || document;
return target.getElementsByTagName(str);
}
// global
// const
var WIDTH = 20, //網格寬度
HEIGHT = 20, //網格高度
SAY = ["相當不錯，雖然說和CNwander還不是一個級別的","可以啊，再加點油都可以和CNwander媲美了！","一個字，牛，連CNwander都甘拜下風了","差不多行了，別把游戲玩爆了"];
var len = 3, //蛇的長度
speed, //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), //單元格對象
carrier, //承載對象(食物，障礙，滑板，剎車)
snake, //蛇每節的坐標點
info, //交互對話
btnStart, //開始按鈕
topScore = len,
snakeTimer, //蛇行走計時器
brakeTimers = [], //隨機剎車
skateTimers = [], //隨機滑板
directkey; // 方向鍵值 37-40 左上右下
window.onload = function(){
info = $("say");
btnStart = $("btnStart");
initGrid(); //網格初始化
document.onkeydown = attachEvents; //綁定方向事件
btnStart.onclick = function (e) {
btnStart.blur(); //firefox中必須釋放焦點
start(); //游戲開始
btnStart.setAttribute("disabled",true);
btnStart.style.color = "#aaa";
}
}
//開始游戲
function start() {
len = 3;
speed = 10;
directkey = 39;
carrier = multiArray(WIDTH,HEIGHT);
snake = new Array();
clear();
initSnake(); //蛇初始化
addObject("food");
walk();
addRandomBrake();
}
//創建網格
function 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);
}
//創建蛇
function initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = pointer[0] - i,
y = pointer[1];
snake.push([x,y]);
carrier[x][y] = "cover";
}
}
//添加鍵盤事件
function attachEvents(e) {
e = e || event;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向鍵、反向無效
return false;
}
function walk() {
if(snakeTimer) window.clearInterval(snakeTimer);
snakeTimer = window.setInterval(step, Math.floor(3000/speed));
}
function step() {
//獲取目標點
var headX = snake[0][0],
headY = snake[0][1];
switch(directkey) {
case 37: headX -= 1; break;
case 38: headY -= 1; break;
case 39: headX += 1; break
case 40: headY += 1; break;
}
//碰到邊界，阻擋物，則結束游戲
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]);
return;
}
//加速
if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
speed += 5;
walk();
trace("加速！");
}
//撿到剎車
if(carrier[headX][headY] == "brake") {
speed = 5;
walk();
trace("恭喜！撿到剎車一個。");
}
//遭遇滑板
if(carrier[headX][headY] == "skate") {
speed += 20;
walk();
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];
trace(cheer);
}
//吃東西
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();
} else {
carrier[headX][headY] = false;
trace("吃到食物");
addObject("food");
}
snake.unshift([headX,headY]);
carrier[headX][headY] = "cover";
gridElems[headX][headY].className = "cover";
len = snake.length;
}
//添加物品
function addObject(name) {
var p = randomPointer();
carrier[p[0]][p[1]] = name;
gridElems[p[0]][p[1]].className = name;
}
//添加隨機數量剎車和滑板
function 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)) );
}
}
//輸出信息
function trace(sth,who) {
who = who || info;
if(document.all) who.innerText = sth;
else who.textContent = sth;
}
//獲取信息
function getText(target) {
if(document.all) return target.innerText;
else return target.textContent;
}
//創建二維數組
function multiArray(m,n) {
var arr = new Array(n);
for(var i=0; i<m; i++)
arr[i] = new Array(m);
return arr;
}
//清除畫面
function clear() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = "";
}
}
}
//產生指定范圍隨機點
function randomPointer(startX,startY,endX,endY) {
startX = startX || 0;
startY = startY || 0;
endX = endX || WIDTH;
endY = endY || HEIGHT;
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;
return p;
}
//產生隨機整數
function randowNum(start,end) {
return Math.floor(Math.random()*(end - start)) + start;
}