มินิเกม JS Snake + คอมเมนท์แบบละเอียด

เคล็ดลับ: (老鸟跳过，希望对新手有所帮助)

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

代码(มี详细注释）：

// รหัสโดย CNwander
// ทั่วไป
ฟังก์ชั่น $(str) {
กลับ document.getElementById(str);
-
ฟังก์ชั่น $tag(str,เป้าหมาย) {
เป้าหมาย = เป้าหมาย || เอกสาร;
กลับ target.getElementsByTagName(str);
-
// ทั่วโลก
// const
var WIDTH = 20, //网格宽度
HEIGHT = 20, //网格高度
SAY = ["相当不错，虽然说和CNwander还不是一个级别的", 可以啊, 再加点油都可以和CNwander媲美了！", 一个字, 牛, 连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
วาร์ เลน = 3, //蛇的长度
ความเร็ว //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
ผู้ให้บริการ // 承载对象(ทานอาหาร物，障碍，滑板，刹车)
งู //蛇每节的坐标点
ข้อมูล //交互对话
btnStart, //เปิด始按钮
คะแนนสูงสุด = เลน
SnakeTimer // 蛇行走计时器
brakeTimers = [], //随机刹车
SkateTimers = [], //随机滑板
ไดเร็กคีย์; // 方向键值 37-40 左上右下
window.onload = ฟังก์ชั่น () {
ข้อมูล = $("พูด");
btnStart = $("btnStart");
initGrid(); //网格初始化
document.onkeydown = แนบเหตุการณ์; //绑定方向事件
btnStart.onclick = ฟังก์ชั่น (e) {
btnStart.เบลอ(); //firefox中必须释放焦点
เริ่ม(); //游戏เปิด始
btnStart.setAttribute("ปิดการใช้งาน",จริง);
btnStart.style.color = "#aaa";
-
-
//เริ่ม始游戏
ฟังก์ชั่นเริ่มต้น () {
เลน = 3;
ความเร็ว = 10;
ไดเร็กคีย์ = 39;
ผู้ให้บริการ = multiArray (กว้าง, สูง);
งู = อาร์เรย์ใหม่ ();
ชัดเจน();
initSnake(); //蛇初始化
addObject("อาหาร");
เดิน();
เพิ่มสุ่มเบรค();
-
//创建网格
ฟังก์ชัน initGrid() {
var body = $tag("body"[0];
ตาราง var = document.createElement("ตาราง"),
tbody = document.createElement("tbody")
สำหรับ (var j = 0; j <ความสูง; j ++) {
var col = document.createElement("tr");
สำหรับ (var i = 0; i < WIDTH; i ++) {
แถว var = document.createElement("td");
gridElems[i][j] = col.appendChild(แถว);
-
tbody.appendChild (คอลัมน์);
-
table.appendChild (tbody);
$("snakeWrap").appendChild(ตาราง);
-
//创建蛇
ฟังก์ชั่น initSnake() {
ตัวชี้ var = RandomPointer (len-1, len-1, WIDTH/2);
สำหรับ (var i = 0; i <len; i++) {
var x = ตัวชี้ [0] - ฉัน
y = ตัวชี้ [1];
งู.push([x,y]);
ผู้ให้บริการ[x][y] = "ปก";
-
-
//添加键盘事件
ฟังก์ชั่นแนบเหตุการณ์ (e) {
อี = อี || เหตุการณ์;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
กลับเท็จ;
-
ฟังก์ชั่นเดิน () {
ถ้า (snakeTimer) window.clearInterval (snakeTimer);
SnakeTimer = window.setInterval (ขั้นตอน, Math.floor (3000/ความเร็ว));
-
ฟังก์ชั่นขั้นตอน () {
//获取目标点
var headX = งู[0][0],
หัว Y = งู [0] [1];
สวิตช์ (ไดเร็กคีย์) {
กรณีที่ 37: headX -= 1; หยุดพัก;
กรณีที่ 38: headY -= 1; หยุดพัก;
กรณีที่ 39: headX += 1; หยุดพัก
กรณีที่ 40: ส่วนหัว Y += 1; หยุดพัก;
-
//碰到边界,阻挡物,则结束游戏
ถ้า (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);
สำหรับ (var i = 0; i < brakeTimers.length; i ++) window.clearTimeout (brakeTimers [i]);
สำหรับ (var i = 0; i <skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
กลับ;
-
//加速
if(len % 4 == 0 && ความเร็ว < 60 && ผู้ให้บริการ [headX] [headY] == "อาหาร") {
ความเร็ว += 5;
เดิน();
ติดตาม("加速！");
-
//捡到刹车
ถ้า (ผู้ให้บริการ [headX] [headY] == "เบรค") {
ความเร็ว = 5;
เดิน();
ติดตาม("恭喜！捡到刹车一个。");
-
//遭遇滑板
ถ้า (ผู้ให้บริการ [headX] [headY] == "สเก็ต") {
ความเร็ว += 20;
เดิน();
ติดตาม("遭遇滑板!");
-
//添加阻挡物
ถ้า (len % 6 == 0 && len < 60 && ผู้ให้บริการ [headX] [headY] == "อาหาร") {
addObject("บล็อก");
-
//对话
ถ้า (เลน <= 40 && เลน % 10 == 0) {
var เชียร์ = พูด [len/10-1];
ติดตาม(เชียร์);
-
//吃东西
ถ้า (ผู้ให้บริการ [headX] [headY] ! = "อาหาร") {
var LastX = งู[snake.length-1][0],
LastY = งู[snake.length-1][1];
ผู้ให้บริการ [lastX] [lastY] = เท็จ;
gridElems[lastX][lastY].className = "";
งู.ป๊อป();
} อื่น {
ผู้ให้บริการ [headX] [headY] = เท็จ;
ติดตาม("吃到รับประทานอาหาร物");
addObject("อาหาร");
-
งู.unshift([headX,headY]);
ผู้ให้บริการ [headX] [headY] = "ปก";
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);
สำหรับ (var i = 0; i < num; i++) {
brakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10,000,100000)) );
SkateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5,000,100000)) );
-
-
//输出信息
ติดตามฟังก์ชัน (sth ใคร) {
ใคร = ใคร || ข้อมูล;
ถ้า (document.all) who.innerText = sth;
อื่น who.textContent = sth;
-
//获取信息
ฟังก์ชั่น getText (เป้าหมาย) {
ถ้า (document.all) ส่งคืน target.innerText;
มิฉะนั้นส่งคืน target.textContent;
-
//创建二维数组
ฟังก์ชั่น multiArray (m, n) {
var arr = อาร์เรย์ใหม่ (n);
สำหรับ (var i=0; i<m; i++)
arr[i] = อาร์เรย์ใหม่(m);
กลับถึง;
-
//清除画的
ฟังก์ชั่นชัดเจน() {
สำหรับ (var y = 0; y < gridElems.length; y++) {
สำหรับ (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 || ความกว้าง;
สิ้นสุด Y = สิ้นสุด Y || ความสูง;
วาร์ พี = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
ถ้า (ผู้ให้บริการ [x] [y]) ส่งคืน RandomPointer (startX, startY, endX, endY);
พี[0] = x;
พี[1] = ย;
กลับพี;
-
//产生随机整数
ฟังก์ชั่น randowNum (เริ่มต้นสิ้นสุด) {
กลับ Math.floor(Math.random()*(end - start)) + start;
-