JS 미니게임 Snake + 자세한 설명

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

1. IE: element.innerText = FF: element.textContent;
2. setAttribute("cellpadding","0")在IE中无效，正确写법cellPadding (一不小心就犯错了);
3. FF中, 使use绑determined in 某元素上的键盘事件前，先让它获得焦点，document也不例外，这容易疏忽;
4. IE中에서 테이블 요소 생성，记得加tbody;

代码（유详细注释)：

// CNwander의 코드입니다.
// 흔한
함수 $(str) {
return document.getElementById(str);
}
함수 $tag(str,target) {
목표 = 목표 || 문서;
return target.getElementsByTagName(str);
}
// 전역
// const
var WIDTH = 20, //폭의 크기
HEIGHT = 20, //높이 높이
SAY = ["상호 불유, 虽然说와 CNwander还不是一个级别的","可以啊,再加点油도可以와 CNwander媲美了!","一个字,牛连CNwander%甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //좋은 속도
속도, //폭행속도
GridElems = multiArray(WIDTH,HEIGHT), //단원格对象
캐리어, //承载对象(식물，障碍，滑板，刹车)
뱀, //蛇每节的坐标点
정보, //交互对话
btnStart, //开始按钮
탑스코어 = 렌,
snakeTimer, //蛇行走计时器
브레이크 타이머 = [], //금지 타이머
스케이트타이머 = [], //随机滑板
직접키; // 方向键值 37-40 左上右下
window.onload = 함수(){
info = $("말하다");
btnStart = $("btnStart");
초기화그리드(); //网格初始化
document.onkeydown=attachEvents; //결정적인 거래
btnStart.onclick = 함수 (e) {
btnStart.blur(); //firefox中必须释放焦点
시작(); //游戏开始
btnStart.setAttribute("disabled",true);
btnStart.style.color = "#aaa";
}
}
//开始游戏
함수 시작() {
렌 = 3;
속도 = 10;
다이렉트키 = 39;
캐리어 = multiArray(WIDTH,HEIGHT);
뱀 = 새로운 배열();
분명한();
initSnake(); //蛇初始화
addObject("음식");
걷다();
addRandomBrake();
}
//创建网格
함수 initGrid() {
var body = $tag("body")[0];
var 테이블 = document.createElement("테이블"),
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(테이블);
}
//创建蛇
함수 initSnake() {
var 포인터 = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = 포인터[0] - i,
y = 포인터[1];
snake.push([x,y]);
캐리어[x][y] = "커버";
}
}
//添加键盘事件
함수 attachmentEvents(e) {
e = e || 이벤트;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : 직접키; //비방向键、反向无效
거짓을 반환;
}
함수 산책() {
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) Trace(len,$("점수"));
btnStart.removeAttribute("disabled");
btnStart.style.color = "#000";
window.clearInterval(snakeTimer);
for(var i = 0; i < breakTimers.length; i++) window.clearTimeout(brakeTimers[i]);
for(var i = 0; i < 스케이트Timers.length; i++) window.clearTimeout(skateTimers[i]);
반품;
}
//加速
if(len % 4 == 0 && 속도 < 60 && Carrier[headX][headY] == "음식") {
속도 += 5;
걷다();
추적("加速!");
}
//捡到刹车
if(carrier[headX][headY] == "브레이크") {
속도 = 5;
걷다();
Trace("恭喜!捡到刹车一个。");
}
//遭遇滑板
if(carrier[headX][headY] == "스케이트") {
속도 += 20;
걷다();
추적("遭遇滑板!");
}
//添加阻挡물
if(len % 6 == 0 && len < 60 && Carrier[headX][headY] == "음식") {
addObject("블록");
}
//对话
if(len <= 40 && len % 10 == 0) {
var 응원 = SAY[len/10-1];
추적(응원);
}
//吃东西
if(carrier[headX][headY] != "음식") {
var lastX = 뱀[snake.length-1][0],
lastY = 뱀[snake.length-1][1];
캐리어[lastX][lastY] = 거짓;
GridElems[lastX][lastY].className = "";
뱀.팝();
} 또 다른 {
캐리어[headX][headY] = 거짓;
Trace("음식물");
addObject("음식");
}
snake.unshift([headX,headY]);
Carrier[headX][headY] = "커버";
GridElems[headX][headY].className = "표지";

len = 뱀.길이;
}
//添加물품
함수 addObject(이름) {
var p = 무작위 포인터();
캐리어[p[0]][p[1]] = 이름;
GridElems[p[0]][p[1]].className = 이름;
}
//添加随机数weight刹车와滑板
함수 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)) );
}
}
//출처
함수 추적(sth,who) {
누구 = 누구 || 정보;
if(document.all) who.innerText = sth;
else who.textContent = sth;
}
//获取信息
함수 getText(대상) {
if(document.all) return target.innerText;
그렇지 않으면 target.textContent를 반환합니다.
}
//创建two维数组
함수 multiArray(m,n) {
var arr = 새로운 배열(n);
for(var i=0; i<m; i++)
arr[i] = 새로운 배열(m);
반환 도착;
}
//清除画면
함수 클리어() {
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) {
startX = startX || 0;
startY = 시작Y || 0;
endX = endX || 너비;
endY = endY || 키;
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
if(캐리어[x][y]) return randomPointer(startX,startY,endX,endY);
p[0] = x;
p[1] = y;
p를 반환;
}
//产生随机整数
함수 ranowNum(시작,끝) {
return Math.floor(Math.random()*(end - start)) + start;
}