Mini game JS Snake + komentar mendetail

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

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

代 码 （有 详 细 ​​注释）：

// kode oleh CNwander.
// umum
fungsi $(str) {
kembalikan dokumen.getElementById(str);
}
fungsi $tag(str,target) {
sasaran = sasaran || dokumen;
kembalikan target.getElementsByTagName(str);
}
// global
// konst
var LEBAR = 20, //网格宽度
TINGGI = 20, //网格高度
KATAKAN = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字,牛,连CNwander都甘拜下风了","差不多行了,别把游戏玩爆了"];
var len = 3, //蛇的长度
kecepatan, //爬行速度
gridElems = multiArray(LEBAR,TINGGI), //单元格对象
operator, //承载对象(食物,障碍,滑板,刹车)
ular, //蛇每节的坐标点
info, //交互对话
btnStart, //开始按钮
skor teratas = len,
SnakeTimer, //蛇行走计时器
brakeTimers = [], //随机刹车
skateTimers = [], //随机滑板
kunci langsung; // 方向键值 37-40 左上右下
jendela.onload = fungsi(){
info = $("katakanlah");
btnMulai = $("btnMulai");
initGrid(); //网格初始化
document.onkeydown = lampirkanEvents; //绑定方向事件
btnStart.onclick = fungsi (e) {
btnStart.blur(); //firefox中必须释放焦点
awal(); //游戏开始
btnStart.setAttribute("dinonaktifkan",benar);
btnStart.style.color = "#aaa";
}
}
//开始游戏
fungsi mulai() {
len = 3;
kecepatan = 10;
kunci langsung = 39;
pembawa = multiArray(LEBAR,TINGGI);
ular = Array baru();
jernih();
initSnake(); //蛇初始化
addObject("makanan");
berjalan();
addRandomBrake();
}
//创建网格
fungsi initGrid() {
var tubuh = $tag("tubuh")[0];
var tabel = dokumen.createElement("tabel"),
tbody = dokumen.createElement("tbody")
untuk(var j = 0; j < TINGGI; j++) {
var col = dokumen.createElement("tr");
untuk(var i = 0; i < LEBAR; i++) {
var baris = dokumen.createElement("td");
gridElems[i][j] = col.appendChild(baris);
}
tbody.appendChild(col);
}
tabel.appendChild(tbody);
$("snakeWrap").appendChild(tabel);
}
//创建蛇
fungsi initUlar() {
var pointer = randomPointer(len-1, len-1, LEBAR/2);
untuk(var saya = 0; saya < len; saya++) {
var x = penunjuk[0] - saya,
y = penunjuk[1];
ular.push([x,y]);
pembawa[x][y] = "penutup";
}
}
//添加键盘事件
fungsi melampirkanEvents(e) {
e = e || peristiwa;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.Kode Kunci : kunci langsung; //非方向键、反向无效
kembali salah;
}
fungsi berjalan() {
if(snakeTimer) window.clearInterval(snakeTimer);
ularTimer = window.setInterval(langkah, Math.floor(3000/kecepatan));
}
langkah fungsi() {
//获取目标点
var headX = ular[0][0],
kepalaY = ular[0][1];
beralih(kunci langsung) {
kasus 37: kepalaX -= 1; merusak;
kasus 38: kepalaY -= 1; merusak;
kasus 39: kepalaX += 1; merusak
kasus 40: kepalaY += 1; merusak;
}
//碰到边界,阻挡物,则结束游戏
if(headX >= LEBAR || headX < 0 || headY >= TINGGI || headY < 0 ||carrier[headX][headY] == "blok" ||carrier[headX][headY] == "penutup" ) {
jejak("PERMAINAN BERAKHIR");
if(getText($("skor"))*1 < len) trace(len,$("skor"));
btnStart.removeAttribute("dinonaktifkan");
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]);
kembali;
}
//加速
if(len % 4 == 0 && kecepatan < 60 && operator[headX][headY] == "makanan") {
kecepatan += 5;
berjalan();
trace("加速！");
}
//捡到刹车
if(carrier[headX][headY] == "rem") {
kecepatan = 5;
berjalan();
trace("恭喜！捡到刹车一个。");
}
//遭遇滑板
if(pembawa[headX][headY] == "skate") {
kecepatan += 20;
berjalan();
trace("遭遇滑板！");
}
//添加阻挡物
if(len % 6 == 0 && len < 60 && operator[headX][headY] == "makanan") {
addObject("blok");
}
//对话
jika(len <= 40 && len % 10 == 0) {
var bersorak = KATAKAN[len/10-1];
jejak(bersorak);
}
//吃东西
if(pembawa[headX][headY] != "makanan") {
var lastX = ular[ular.panjang-1][0],
lastY = ular[ular.panjang-1][1];
pembawa[lastX][lastY] = salah;
gridElems[lastX][lastY].className = "";
ular.pop();
} kalau tidak {
pembawa[headX][headY] = salah;
trace("吃到食物");
addObject("makanan");
}
ular.unshift([headX,headY]);
pembawa[headX][headY] = "penutup";
gridElems[headX][headY].className = "penutup";

len = ular.panjang;
}
//添加物品
fungsi addObject(nama) {
var p = randomPointer();
operator[p[0]][p[1]] = nama;
gridElems[p[0]][p[1]].className = nama;
}
//添加随机数量刹车和滑板
fungsi addRandomBrake() {
var angka = angka acak(1,5);
untuk(var i = 0; saya < angka; i++) {
brakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
}
}
//输出信息
jejak fungsi(sth,siapa) {
siapa = siapa || informasi;
if(dokumen.semua) who.innerText = sth;
lain siapa.textContent = sth;
}
//获取信息
fungsi getText(target) {
if(document.all) mengembalikan target.innerText;
jika tidak, kembalikan target.textContent;
}
//创建二维数组
fungsi multiArray(m,n) {
var arr = Array baru(n);
untuk(var i=0; saya<m; i++)
arr[i] = Array baru(m);
kembali arr;
}
//清除画面
fungsi jelas() {
for(var y = 0; y < gridElems.length; y++) {
untuk(var x = 0; x < gridElems[y].panjang; x++) {
gridElems[x][y].className = "";
}
}
}
//产生指定范围随机点
fungsi randomPointer(mulaiX,mulaiY,akhirX,akhirY) {
mulaiX = mulaiX || 0;
mulaiY = mulaiY || 0;
akhirX = akhirX || LEBAR;
akhirY = akhirY || TINGGI;
var p = [],
x = Matematika.lantai(Matematika.acak()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
if(pembawa[x][y]) mengembalikan randomPointer(startX,startY,endX,endY);
p[0] = x;
p[1] = kamu;
kembali p;
}
//产生随机整数
fungsi RandowNum(awal,akhir) {
return Math.floor(Math.random()*(end - start)) + start;
}