激情久久久_欧美视频区_成人av免费_不卡视频一二三区_欧美精品在欧美一区二区少妇_欧美一区二区三区的

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - js實現貪吃蛇游戲含注釋

js實現貪吃蛇游戲含注釋

2022-02-16 17:46越學越害怕 js教程

這篇文章主要為大家詳細介紹了js實現貪吃蛇游戲含注釋，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現貪吃蛇游戲的具體代碼，供大家參考，具體內容如下

兩個小時完成的，有點簡陋。

直接看效果。打開調試面板，在resource面板，新建snippet

粘貼以下代碼，右鍵snippet，run。

js實現貪吃蛇游戲含注釋

js實現貪吃蛇游戲含注釋

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
clearInterval(timer);
document.body.innerHTML = "";
 
//每秒移動多少格
let speed = 10;
let speedUpMul = 3;
 
//是否能穿墻
let isThroughTheWall = true;
 
//行數
let row = 40;
let headColor = 'red';
let bodyColor = 'green';
let foodColor = 'yellow';
let borderColor = 'grey';
 
 
// 游戲全局變量
let hasFood = false;
//游戲狀態
let gamestaus = 'start';
let hasAccelerate = false;
 
let mainContainer = document.createElement("div");
mainContainer.style.width = 20 * row + 1 + "px";
mainContainer.style.height = 20 * row + 1 + "px";
mainContainer.style.margin = "0 auto";
mainContainer.style.position = "relative";
mainContainer.style.border = "1px solid " + borderColor;
 
document.body.appendChild(mainContainer);
 
for(let i = 0;i<row;i++){
 let marginTop = 20 * i + "px";
 for(let j = 0;j<row;j++){
 let marginLeft = j * 20 + "px";
 let tempDiv = document.createElement('div');
 tempDiv.style.width = "19px";
 tempDiv.style.height = "19px";
 tempDiv.style.marginTop = marginTop;
 tempDiv.style.marginLeft = marginLeft;
 tempDiv.style.border = "0.5px solid " + borderColor;
 tempDiv.style.position = "absolute";
 tempDiv.id = j + "div" + i;
 mainContainer.appendChild(tempDiv);
 }
}
 
class Cell{
 constructor(x, y, color){
 if(isThroughTheWall){
  if(x < 0) x = row-1;
  if(x > row - 1) x = 0;
  if(y < 0) y = row - 1;
  if(y > row - 1) y = 0;
 }else{
  if(x < 0 || y < 0|| x > row - 1 || y > row - 1){
  clearInterval(timer);
  alert('游戲結束');
  return;
  }
 }
 this.x = x;
 this.y = y;
 this.color = color;
 let tempDiv = document.getElementById(x + 'div' + y);
 if(tempDiv) tempDiv.style.backgroundColor = color;
 }
}
 
snake = {
 head : {},
 body : [],
 dire : 1
}
 
let headx = Math.floor(Math.random() * 14) + 3;
let heady = Math.floor(Math.random() * 14) + 3;
snake.head = new Cell(headx, heady, headColor);
 
//上右下左
let direction = [1, 2, 3, 4]
 
snake.dire = direction[Math.floor(Math.random() * 4)];
 
if(snake.dire == 1){
 snake.body.push(new Cell(snake.head.x, snake.head.y+1, bodyColor));
 snake.body.push(new Cell(snake.head.x, snake.head.y+2, bodyColor));
 snake.body.push(new Cell(snake.head.x, snake.head.y+3, bodyColor));
}
 
if(snake.dire == 2){
 snake.body.push(new Cell(snake.head.x-1, snake.head.y, bodyColor));
 snake.body.push(new Cell(snake.head.x-2, snake.head.y, bodyColor));
 snake.body.push(new Cell(snake.head.x-3, snake.head.y, bodyColor));
}
 
if(snake.dire == 3){
 snake.body.push(new Cell(snake.head.x, snake.head.y-1, bodyColor));
 snake.body.push(new Cell(snake.head.x, snake.head.y-2, bodyColor));
 snake.body.push(new Cell(snake.head.x, snake.head.y-3, bodyColor));
}
 
if(snake.dire == 4){
 snake.body.push(new Cell(snake.head.x+1, snake.head.y, bodyColor));
 snake.body.push(new Cell(snake.head.x+2, snake.head.y, bodyColor));
 snake.body.push(new Cell(snake.head.x+3, snake.head.y, bodyColor));
}
 
function game(){
 if(gamestaus == 'pause'){
 return;
 }
 if(gamestaus == 'gameover'){
 clearInterval(timer);
 alert('游戲結束');
 return;
 }
 initFood();
 let snakeHeadX = snake.head.x;
 let snakeHeadY = snake.head.y;
 let color = '';
 if(snake.dire == 1){
 let tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY-1));
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = new Cell(snakeHeadX, snakeHeadY - 1, headColor);
 }
 if(snake.dire == 2){
 let tempDiv = document.getElementById((snakeHeadX + 1) + 'div' + snakeHeadY);
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = new Cell(snakeHeadX + 1, snakeHeadY, headColor);
 }
 if(snake.dire == 3){
 let tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY+1));
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = new Cell(snakeHeadX, snakeHeadY + 1, headColor);
 }
 if(snake.dire == 4){
 let tempDiv = document.getElementById((snakeHeadX - 1) + 'div' + snakeHeadY);
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = new Cell(snakeHeadX - 1, snakeHeadY, headColor);
 }
 snake.body.unshift(new Cell(snakeHeadX, snakeHeadY, bodyColor));
 if(color && color == foodColor){
 hasFood = false;
 initFood();
 }else if(color && color == bodyColor){
 gamestaus = 'gameover';
 }else{
 let lastBody = snake.body.pop();
 new Cell(lastBody.x, lastBody.y, '');
 }
}
var timer = setInterval(game, 10 / speed * 100)
 
 
/**
 * 初始化食物
 */
function initFood(){
 while(!hasFood){
 let x = Math.floor(Math.random() * row);
 let y = Math.floor(Math.random() * row);
 let snakeBody = snake.body;
 let enable = true;
 if(snake.head.x == x && snake.head.y == y){
  enable = false;
 }
 for(sBody of snakeBody){
  if(sBody.x == x && sBody.y == y){
  enable = false;
  break;
  }
 }
 if(enable){
  new Cell(x, y, foodColor);
  hasFood = true;
 }
 }
}
 
document.onkeydown = function(e){
 if(e.keyCode == 38){
 //上
 if(snake.dire != 3 && snake.dire != 1){
  snake.dire = 1;
 }else if(snake.dire == 1){
  if(!hasAccelerate){
  clearInterval(timer);
  hasAccelerate = true;
  speed = speed * speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
  }
 }
 
 }
 
 if(e.keyCode == 39){
 //右
 if(snake.dire != 4 && snake.dire != 2){
  snake.dire = 2;
 }else if(snake.dire == 2){
  if(!hasAccelerate){
  clearInterval(timer);
  hasAccelerate = true;
  speed = speed * speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
  }
 }
 }
 
 if(e.keyCode == 40){
 //下
 if(snake.dire != 1 && snake.dire != 3){
  snake.dire = 3;
 }else if(snake.dire == 3){
  if(!hasAccelerate){
  clearInterval(timer);
  hasAccelerate = true;
  speed = speed * speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
  }
 }
 }
 
 if(e.keyCode == 37){
 //左
 if(snake.dire != 2 && snake.dire != 4){
  snake.dire = 4;
 }else if(snake.dire == 4){
  if(!hasAccelerate){
  clearInterval(timer);
  hasAccelerate = true;
  speed = speed * speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
  }
 }
 }
 //空格鍵暫停
 if(e.keyCode == 32){
 if(gamestaus == 'start'){
  gamestaus = 'pause';
 }else if(gamestaus == 'pause'){
  gamestaus = 'start';
 }
 }
}
 
document.onkeyup = function(e){
 if(e.keyCode == 38){
 //上
 if(snake.dire == 1 && hasAccelerate){
  clearInterval(timer);
  hasAccelerate = false;
  speed = speed / speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
 }
 
 }
 
 if(e.keyCode == 39){
 //右
  if(snake.dire == 2 && hasAccelerate){
  clearInterval(timer);
  hasAccelerate = false;
  speed = speed / speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
 }
 }
 
 if(e.keyCode == 40){
 //下
  if(snake.dire == 3 && hasAccelerate){
  clearInterval(timer);
  hasAccelerate = false;
  speed = speed / speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
 }
 }
 
 if(e.keyCode == 37){
 //左
 if(snake.dire == 4 && hasAccelerate){
  clearInterval(timer);
  hasAccelerate = false;
  speed = speed / speedUpMul;
  timer = setInterval(game, 10 / speed * 100)
 }
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。

原文鏈接：https://blog.csdn.net/weixin_42525191/article/details/114670004

延伸 · 閱讀

精彩推薦
  • js教程了不起的11個JavaScript代碼重構最佳實踐小結

    了不起的11個JavaScript代碼重構最佳實踐小結

    這篇文章主要介紹了了不起的11個JavaScript代碼重構最佳實踐小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需...

    pikapi3862021-12-29
  • js教程js實現隨機點名

    js實現隨機點名

    這篇文章主要為大家詳細介紹了js實現隨機點名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    搬磚大法10162022-01-04
  • js教程javascript類數組的深入理解

    javascript類數組的深入理解

    這篇文章主要給大家介紹了關于javascript類數組的深入理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋...

    ら淡然如雪11352022-02-15
  • js教程Jquery+javascript實現支付網頁數字鍵盤

    Jquery+javascript實現支付網頁數字鍵盤

    這篇文章主要為大家詳細介紹了Jquery+javascript實現支付網頁數字鍵盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一...

    юноша 25842021-12-15
  • js教程javascript實現拼圖游戲

    javascript實現拼圖游戲

    這篇文章主要為大家詳細介紹了javascript實現拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    過客塵煙4952022-01-12
  • js教程詳解微信小程序（Taro）手動埋點和自動埋點的實現

    詳解微信小程序（Taro）手動埋點和自動埋點的實現

    這篇文章主要介紹了詳解微信小程序（Taro）手動埋點和自動埋點的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價...

    燕行者3832022-01-25
  • js教程js canvas實現滑塊驗證

    js canvas實現滑塊驗證

    這篇文章主要為大家詳細介紹了js canvas實現滑塊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    熱情仔5432022-02-16
  • js教程微信小程序用戶授權獲取手機號（getPhoneNumber）

    微信小程序用戶授權獲取手機號（getPhoneNumber）

    這篇文章主要給大家介紹了關于微信小程序用戶授權獲取手機號的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學...

    chen_pan_pan8602022-02-16
主站蜘蛛池模板： 综合图区亚洲 | 久久久久国 | 欧美激情 在线播放 | 成人免费毛片明星色大师 | 蜜桃精品视频 | 狠很操 | 国产精品免费一区二区三区四区 | 精品久久久久久久久久久aⅴ | 中国大陆一级毛片 | 久久国产乱子伦精品 | 午夜视频在线观 | 亚洲骚综合 | 国产porn在线| 最近中文字幕一区二区 | 国产中出在线观看 | 黄色免费不卡视频 | 久久精品国产99国产精品亚洲 | 深夜毛片免费看 | 久久精品a一级国产免视看成人 | 中国一级毛片在线播放 | 国产精品视频成人 | 国产成人在线观看免费网站 | 久久99精品久久 | jizzjizzjizzjizz国产 | 精品亚洲免费 | 校花被肉干高h潮不断 | 今井夏帆av一区二区 | 欧洲色阁中文字幕 | 国产韩国精品一区二区三区久久 | 国产欧美日韩在线不卡第一页 | 久久综合九色综合久久久精品综合 | 亚洲欧美日韩久久精品第一区 | 午夜视| 亚洲影院在线播放 | 成码无人av片在线观看网站 | 黄a大片| 午夜视频在线观 | 一级α片免费看刺激高潮视频 | 国产69精品久久99不卡免费版 | 亚洲国产在| 黄网站在线播放视频免费观看 |