JS貪吃蛇小游戲_ZenDei技術網路在線

效果圖展示：具體實現代碼如下：（1）html部分（2）main.css文件代碼註意：具體圖片可以自行改動（3）game.js文件代碼 1 /* 全局變數 */ 2 3 var WIDTH = 24; 4 var HEIGHT = 24; 5 var len ;//蛇的長度 6 var sp ...

效果圖展示：

具體實現代碼如下：

（1）html部分

 1 !DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8" />
 5     <title>貪吃蛇</title>
 6     <link rel="stylesheet" type="text/css" href="main.css">
 7     </head>
 8     <body onselectstart="return false">
 9         <h1 id="alerts">貪吃蛇</h1>
10          <div id="help">
11             <span style="float:left">當前得分：<strong id="nowscore">0</strong></span>
12             <span style="float:right">最高分：<strong id="score">0</strong></span>
13          </div>
14         <div id="map"></div>     
15         <input type="button" id="btnStart" value="開始游戲" />
16         <script type="text/javascript" src="gamejs.js"></script>
17     </body>
18 </html>

（2）main.css文件代碼

 1 * {margin:0; padding:0}
 2 body {
 3   background:white;
 4   -moz-user-select:none;
 5   text-align:center; 
 6   font-size:12px;
 7   }
 8 
 9 table{
10   margin:30px auto 10px auto;
11   overflow:hidden;
12   box-shadow:0px 0px 30px #4EFE93;
13   border:10px solid yellowgreen;
14   border-image: url(border.png);
15   border-image-slice:10;
16   border-image-width:10px;
17   border-image-outset:0;
18   border-image-repeat:repeat;
19   }
20 td {
21   width:20px; 
22   height:20px;
23   border:1px solid white;
24   background:white;
25   }
26 .cover {background:url(body1.png);}
27 .food {
28     background:url(food.png);
29     background-repeat:no-repeat;    
30      }
31 
32 
33 #nowscore{
34   font-size:20px;
35   font-weight: 800;
36   color:blue;
37 }
38 #score{
39   font-size:20px;
40   font-weight: 800;
41   color:red;
42 }
43 #alerts{
44   margin-top:50px;
45   color:brown;
46   font-size:30px;
47   font-weight: 800;
48   }
49 #help {
50   width:420px;
51   margin:0 auto;
52   line-height:17px;
53   color:green;
54   }
55 #help span {
56   float:left;
57   font-size:15px;
58   font-weight: 800;
59   margin-right:10px}
60 #help .box {
61   width:15px;
62   height:15px;
63   margin-right:5px;
64   border:1px solid white;}
65 #btnStart {
66   clear:both; 
67   width:100px;
68   height:30px;
69   margin-top:10px;
70   padding:0; 
71   background:#4EFE93;
72   color:green; 
73   border:1px solid #fff; 
74   border-bottom-color:#000;
75   border-right-color:#000;
76   border-radius:15px;
77   cursor:pointer}

註意：具體圖片可以自行改動

（3）game.js文件代碼

  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 }

View Code