1 /* 全局變量      */
  2 
  3 var WIDTH = 24; 
  4 var    HEIGHT = 24; 
  5 var len ;//蛇的長度
  6 var    speed; //爬行速度
  7 var    gridElems = multiArray(WIDTH,HEIGHT); //地圖坐標，table對應的數組
  8 var    carrier; //蛇標志二維數組
  9 var    snake; //蛇每節的坐標點
 10 var    btnStart; 
 11 var    snakeTimer;//蛇行走計時器
 12 var    directkey; // 鍵盤按鍵類型
 13 
 14 /*  其中gridElems和snake，carrier三個數組是完成表格和數組映射的關鍵   */
 15 
 16 window.onload = function(){
 17     //info = document.getElementById("alerts");
 18     btnStart = document.getElementById("btnStart");
 19     initGrid(); 
 20     document.onkeydown = attachEvents; //鍵盤事件獲取，跨瀏覽器事件處理
 21     btnStart.onclick = function (e) {
 22         start(); 
 23         btnStart.setAttribute("disabled",true);
 24         btnStart.style.color = "gray";
 25     }
 26 }
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 //開始游戲
 39 function start() {
 40     len = 3;
 41     speed = 10;
 42     directkey = 39;
 43     carrier = multiArray(WIDTH,HEIGHT);
 44     snake = new Array();
 45     clear();
 46     initSnake(); //蛇初始化
 47     addObject("food");
 48     walk();
 49     
 50 }
 51 
 52 
 53 //創建地圖，DOM節點創建增加
 54 function initGrid() {
 55     var body = document.getElementsByTagName("body")[0];
 56     var table = document.createElement("table");
 57     var    tbody = document.createElement("tbody");
 58     for(var j = 0; j < HEIGHT; j++) {  
 59         var col = document.createElement("tr");  
 60         for(var i = 0; i < WIDTH; i++) {  
 61             var row = document.createElement("td");
 62             gridElems[i][j] = col.appendChild(row); //完成表格和二維數組的映射 
 63         }
 64         tbody.appendChild(col);  
 65     }
 66     table.appendChild(tbody);
 67     document.getElementById("map").appendChild(table);//向div中添加創建好的表格
 68 }
 69 
 70 
 71 //一開始創建蛇
 72 function initSnake() {
 73     var pointer = randomPointer(len-1, len-1, WIDTH/2);
 74     for(var i = 0; i < len; i++) {
 75         var x = pointer[0] - i;//產生三個相連的表格
 76         var    y = pointer[1];
 77         snake.push([x,y]);//采用數組壓棧方法（js數組自帶方法）將產生的蛇坐標壓入坐標數組中
 78         carrier[x][y] = "cover";
 79     }
 80 }
 81 
 82 
 83 //添加鍵盤事件，防止瀏覽器不兼容
 84 function attachEvents(e) {
 85     e = e || event;
 86     directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向鍵、反向無效
 87     return false;
 88 }
 89 
 90 //設置間隔計時器，使蛇運動
 91 function walk() {
 92     if(snakeTimer) window.clearInterval(snakeTimer);
 93     snakeTimer = window.setInterval(step, Math.floor(3000/speed));//3000/speed呈現速度效果
 94 }
 95 
 96 //核心部分
 97 function step() {
 98     //獲取目標點
 99     var headX = snake[0][0];//從坐標數組中獲取蛇頭坐標
100     var    headY = snake[0][1];
101     switch(directkey) { //進行按鍵位判斷，蛇轉向
102         case 37: headX -= 1; break;
103         case 38: headY -= 1; break;
104         case 39: headX += 1; break
105         case 40: headY += 1; break;
106     }
107     //死亡檢測
108     if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0  || carrier[headX][headY] == "cover" ) {
109         alert("辣雞高城，你掛了！");
110         if((document.getElementById("score").innerHTML)*1 < len) 
111             {document.getElementById("score").innerHTML=len;}//最高分信息
112         btnStart.removeAttribute("disabled");//釋放“開始游戲”按鈕
113         btnStart.style.color = "#000";//釋放“開始游戲”按鈕
114         window.clearInterval(snakeTimer);//清屏
115         return;
116     }
117     //加速，吃到食物后提速
118     if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
119         speed += 5;
120         walk();    
121     }    
122     if(carrier[headX][headY] != "food") {
123         var lastX = snake[snake.length-1][0];//提取蛇的尾部坐標
124         var    lastY = snake[snake.length-1][1];//提取蛇的尾部坐標
125         carrier[lastX][lastY] = false;//蛇尾移動
126         gridElems[lastX][lastY].className = "";//制空單元格背景色
127         snake.pop();//刪除蛇尾坐標
128     } 
129     else {
130         carrier[headX][headY] = false;//記錄蛇頭和食物重疊，碰撞處，碰撞后：蛇尾不減，false標志重疊
131         
132         addObject("food");//添加新的食物；
133     }
134     snake.unshift([headX,headY]);//將食物作為新的蛇頭坐標壓入蛇坐標數組，unshift函數為頭壓入數據，snake長度增加1
135     carrier[headX][headY] = "cover";//cover代表為蛇身，此時將標志false改為正常caver
136     gridElems[headX][headY].className = "cover";//給移動后的蛇身修改相應的表格單元格顏色
137     len = snake.length;
138     document.getElementById('nowscore').innerHTML = len;
139 }
140 
141 //添加物品
142 function addObject(name) {
143     var p = randomPointer();
144     carrier[p[0]][p[1]] = name;
145     gridElems[p[0]][p[1]].className = name;//封裝投放食物函數
146 }
147 
148 //產生指定范圍隨機點，食物和蛇的初始值產生
149 function randomPointer(startX,startY,endX,endY) {
150     startX = startX || 0;
151     startY = startY || 0;
152     endX = endX || WIDTH;
153     endY = endY || HEIGHT;
154     var p = [];
155     var    x = Math.floor(Math.random()*(endX - startX)) + startX;//控制產生數據在WIDTH即表格橫向范圍內
156     var    y = Math.floor(Math.random()*(endY - startY)) + startY;//控制產生數據在HEIGHT即表格縱向范圍內
157     if(carrier[x][y]) //如果產生數據和蛇身重復了，則遞歸再次產生
158     {return randomPointer(startX,startY,endX,endY);}
159     p[0] = x;
160     p[1] = y;
161     return p;//返回一個一維數組，僅兩個數（坐標），傳至坐標數組
162 }
163 
164 //產生隨機整數
165 function randowNum(start,end) {
166     return Math.floor(Math.random()*(end - start)) + start;
167 }
168 
169 //創建二維數組
170 function multiArray(m,n) {
171     var arr =  new Array(n);
172     for(var i=0; i<m; i++) 
173         arr[i] = new Array(m);//數組套數組
174     return arr;
175 }
176 
177 //清除畫面，游戲開始時和死亡后刷新使用
178 function clear() {
179     for(var y = 0; y < gridElems.length; y++) {
180         for(var x = 0; x < gridElems[y].length; x++) {
181             gridElems[x][y].className = "";
182         }
183     }
184 }