js实现贪吃蛇_js 贪吃蛇

实现方法_1

1实现效果

2 实现步骤

html部分忽略，布局写的太辣眼了

2.1 移动场地

用的表格td，利用双层for循环加上字符串的拼接，最终利用innnerHTML将布局显示

for (let i = 0; i < height; i++) {
            str += '<tr>';
            for (let j = 0; j < width; j++) {
                if (i == 0) {
                    str += '<td>' + j + '</td>';
                } else if (j == 0) {
                    str += '<td>' + i + '</td>';
                } else {
                    str += '<td></td>';
                }
            }
            str += '</tr>';
        }
        document.querySelector('table').innerHTML = str;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 游戏难度

更改定时器的时间（简单）

let difficulty = document.querySelector("#difficulty");
        difficulty.onchange = function () {
            if (!isPlay) {
                time = difficulty.value;
                clearInterval(timeId);
                difficulty.preventDefault();
            }

        }
1
2
3
4
5
6
7
8
9

2.3 造蛇和食物

利用一维数组存放蛇，但是因为需要确定蛇头和蛇身的位置需要横纵坐标，所以存放的是键值对形式的数据 {key_x: x_value , key_y: y_value}; ,如何显示蛇呢，道理和js实现动漫拼图1.0版中initEvent函数哪里说的的原理一样。snake一维数组记录的蛇身位置，移动场地是有n个tds组成的，通过snake记录的横纵坐标计算出对应的tds[index]中的index值（index=行×width+列），然后将这个td更换背景，来显示蛇。同理显示食物也是如此。

// 初始化蛇
        function initSnake() {
            let snake = [];
            snake[0] = getRandom();
            let x = snake[0].x;
            let y = snake[0].y;
            snake[1] = {
                x: x - 1,
                y: y
            };
            snake[2] = {
                x: x - 2,
                y: y
            };
            return snake;
        }
 //显示画面
        function show(snake, food) {
            // 1 清除所有蛇和食物
            tds.forEach(function (item) {
                item.style.backgroundColor = '';
            });
            // 2 显示蛇
            snake.forEach(function (item, id) {
                let i = parseInt(item.x);
                let j = parseInt(item.y);
                console.log(i, j);
                let tdId = j * width + i;
                console.log(tdId);
                if (id == 0) {
                    tds[tdId].style.backgroundColor = 'blue';
                } else {
                    tds[tdId].style.backgroundColor = 'green';
                }
            });
            // 3 显示食物 
            let tdFoodId = food.y * width + food.x;
            tds[tdFoodId].style.backgroundColor = 'red';
        }
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

2.4 蛇的移动

监听键盘的按键按下事件

通过按对应的wasd上左下右，来更改d的值，表示蛇头的移动方向，调用自己写的move函数，实现对应的行向或列向的加加减减实现上下移动，在配合上定时器，便实现了蛇的移动，但这是仅限于单个块的移动（蛇头），那其他块（蛇身）怎么正确随蛇身移动呢？（需要注意越界问题）

这里方法就很巧妙了，我们存放蛇用的是一维数组，而且一维数组有两个方法
pop：移除数组的尾部元素，并返回该值。
unshift：在数组头部添加新的元素。
思路：这里我们先不去考虑越界的情况，假设蛇头的下一个位置都是合法的。
首先，通过我们的按键事件，获得我们预使蛇头向那个方向移动，然后计算出新的蛇头，利用unshift将新蛇头加入snake数组，在利用pop移除最后面的一个（前面加一个，右面移除一个，这样就实现了蛇的移动，我们可以很容易想到整体一条直线的时候确实可以，那要是拐弯呢？也是可以的）

蛇在吃食物时，食物的位置肯定和新蛇头是重合，吃过食物之后蛇的长度应该加一，此时呢就只需要调用unshift函数，加入新蛇头就行了，不用移除后一个，在随机一个食物位置即可。

 // 4.1 蛇的移动方向
        document.addEventListener("keydown", direction);

        function direction(event) {
            if (event.keyCode == 65 && d != "RIGHT") {
                d = "LEFT";
            } else if (event.keyCode == 87 && d != "DOWN") {
                d = "UP";
            } else if (event.keyCode == 68 && d != "LEFT") {
                d = "RIGHT";
            } else if (event.keyCode == 83 && d != "UP") {
                d = "DOWN";
            } else if (event.keyCode == 32) {
                // 暂停
                suspendGame();
            } else if (event.keyCode == 82) {
                // 重新开始
                restartGame();
            } else if (event.keyCode == 66 && !isPlay) {
                // 开始
                startGame();
            }
        }
        // 4.2 蛇的移动
        function move(snake) {
            let snakeX = snake[0].x;
            let snakeY = snake[0].y;
            let isEat = false;
            if (d == "LEFT") snakeX -= speed;
            if (d == "UP") snakeY -= speed;
            if (d == "RIGHT") snakeX += speed;
            if (d == "DOWN") snakeY += speed;
            if (snakeX == food.x && snakeY == food.y) {
                isEat = true;
                let tdId = food.y * width + food.x;
                tds[tdId].style.backgroundColor = 'lightgray';
                score += 5;
                scoreSpan.innerHTML = score;
                food = getFood(snake);
            }
            let newHead = {
                x: snakeX,
                y: snakeY
            };
            // 检测是否越界，或者自己碰到自己
            if (snakeX < 0 || snakeX >= width || snakeY < 0 || snakeY >= height || collision(newHead, snake)) {
                endGame();
            } else {
                // 没有吃到，移除最后一个，在头部加一个，蛇长不变
                // 吃到，if不成立，蛇长不减，蛇头加一，整体变长一
                if (!isEat) {
                    snake.pop();
                }
                snake.unshift(newHead);
                console.log("newHead=" + newHead.x + "," + newHead.y);
            } 
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

越界问题
就是构造蛇头的时候，当前的蛇头如果已经处在上下左右某个边界了，肯定是不能在朝这个蛇头方向在移动了（这时候构造出来的新的蛇头的横纵坐标，肯定是不合法的，这里用的一维数组感觉不明显，下面的实现方法2，利用二维数组存储蛇时，这种情况，直接会索引越界报错的），而且根据游戏规则，出现越界问题时，也就是游戏结束之时（所谓的撞墙了）。所以呢，我们在产生新的蛇头坐标时，先去检查是否合法，确保不越界了，再去unshift加入数组首部，不然直接结束游戏；还有一种结束游戏，就是新的蛇头的位置，是在蛇的身体某个位置，就是自己碰自己，也直接结束游戏。

2.5 产生食物的随机位置

食物的随机位置不能在蛇身上

 // 产生随机数字(游戏开始时蛇的随机位置和食物的随机位置)
        function getRandom() {
            // 蛇头的产生范围限定在（2-44）
            let ran_x = parseInt(Math.random() * (width - 4)) + 2;
            let ran_y = parseInt(Math.random() * height);
            return {
                x: ran_x,
                y: ran_y
            };
        }
        // 检查食物随机产生的位置是否在蛇的身体上
        function getFood(snake) {
            while (true) {
                let food = getRandom();
                let flag = true;
                for (let i = 0; i < snake.length; i++) {
                    let item = snake[i];
                    if (item.x == food.x && item.y == food.y) {
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    return food;
                }
            }
        }

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

其他就是一些繁琐的获取元素，添加事件，测试逻辑，该bug了

3 全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        table {
            border-collapse: collapse;
        }

        .body {
            display: flex;
            height: 600px;
            background-color: lightblue;
        }

        td {
            border: 1px solid black;
            width: 15px;
            height: 15px;
            margin-left: 4px;
            font-size: 10px;
        }

        .print {
            flex: 70%;
            background-color: aliceblue;
            border: 1px solid red;
            width: 800px;
        }

        .content {
            margin: 0 auto;
            margin-top: 30px;
            width: 800px;
            background-color: lightgray;
        }

        .option {
            margin-top: 40px;
            flex: 20%;
        }

        .text1 {
            text-align: center;
        }

        button {
            margin-top: 10px;
            margin-bottom: 10px;
            width: 100px;
            height: 40px;
            background-color: orange;
            border: none;
            border-radius: 20px;
        }

        button:hover {
            background-color: yellow;
        }

        .snake,
        .snake1 {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: blue;

        }

        .snake1 {
            background-color: green;
        }

        .food {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: red;
        }

        .text2 {
            display: inline-block;
            width: 170px;
            font-size: 14px;
            width: 120px;
        }

        .bt {
            padding-left: 30px;
            box-sizing: border-box;
        }

        .score {
            text-align: center;
        }

        .score_span {
            display: block;
            margin-top: 5px;
            color: red;
            font-size: 30px;
        }

        select {
            margin-top: 10px;
            margin-bottom: 10px;
            width: 100px;
            height: 40px;
            background-color: lightcoral;
            border: none;
            text-align: center;
            border-radius: 20px;
        }
        .move span{
            width: 20px;
            height: 20px;
            display: inline-block;
            border: 1px solid #000;
            color: black;
            background-color: white;
            box-shadow: 2px 2px  #000;
        }
       
        .w{
            margin-bottom: 2px;
            margin-right: 14%;
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="print">
            <div class="content">
                <table>

                </table>
            </div>
        </div>
        <div class="option">
            <div class="text1">
                蛇：<span class="snake"></span><span class="snake1"></span><span class="snake1"></span>
                &nbsp;&nbsp;&nbsp;食物：<span class="food"></span>
            </div>
            <div class="bt">
                <span class="text2">按B键开始/继续：</span><button>开始游戏</button>
            </div>
            <div class="bt">
                <span class="text2">按空格键暂停：</span> <button>暂停游戏</button>
            </div>
            <div class="bt">
                <span class="text2">按R键重开：</span> <button>重新开始</button>
            </div>
            <div class="bt">
                <span class="text2">游戏难度：</span>
                <select id="difficulty">
                    <option value="500">简单</option>
                    <option value="300">一般</option>
                    <option value="100">困难</option>
                    <option value="50">噩梦</option>
                </select>
                <p style="color: red;">选择好难度后，按开始游戏（或B键）</p>
            </div>

            <div class="score">
                游戏得分
                <span class="score_span">0</span>
                <div class="move">
                    移动：
                    <span class="w">W</span>
                    <div>
                        <span class="A">A</span>
                        <span class="S">S</span>
                        <span class="D">D</span>
                    </div>
                </div>
                <p style="font-size: small;">
                    说明：在游戏过程中更换游戏难度无效。<br>
                    若要更换难度：<br>
                    可在开始游戏前选择好难度<br>
                    或者暂停游戏选好难度后，再点击开始<br>
                    或者点击重新开始，然后选择难度后，再点击开始

                </p>
            </div>
        </div>
    </div>
    <script>
        // 1 初始化场景
        let str = '';
        let width = 45;
        let height = 30;
        let isPlay = false;
        // 获取分数
        let score = 0;
        let scoreSpan = document.querySelector('.score_span');
        // 蛇的移动速度(定时器的时间)
        let timeId = 0;
        let time = 300;
        const speed = 1;
        let d = "RIGHT";
        for (let i = 0; i < height; i++) {
            str += '<tr>';
            for (let j = 0; j < width; j++) {
                if (i == 0) {
                    str += '<td>' + j + '</td>';
                } else if (j == 0) {
                    str += '<td>' + i + '</td>';
                } else {
                    str += '<td></td>';
                }
            }
            str += '</tr>';
        }
        document.querySelector('table').innerHTML = str;
        let difficulty = document.querySelector("#difficulty");
        difficulty.onchange = function () {
            if (!isPlay) {
                time = difficulty.value;
                clearInterval(timeId);
                difficulty.preventDefault();
            }

        }
        // 2 初始化蛇
        let snake = initSnake();
        // 3 初始化食物,食物产生的随机位置不要在蛇身上
        let food = getFood(snake);
        // 获取按钮
        let bt = document.querySelectorAll('button');
        // 获取所有td
        let tds = document.querySelectorAll('td');
        bt[0].onclick = startGame;
        bt[1].onclick = suspendGame;
        bt[2].onclick = restartGame;
        // 初始化
        show(snake, food);
        // 4 蛇的移动
        // 4.1 蛇的移动方向
        document.addEventListener("keydown", direction);

        function direction(event) {
            if (event.keyCode == 65 && d != "RIGHT") {
                d = "LEFT";
            } else if (event.keyCode == 87 && d != "DOWN") {
                d = "UP";
            } else if (event.keyCode == 68 && d != "LEFT") {
                d = "RIGHT";
            } else if (event.keyCode == 83 && d != "UP") {
                d = "DOWN";
            } else if (event.keyCode == 32) {
                // 暂停
                suspendGame();
            } else if (event.keyCode == 82) {
                // 重新开始
                restartGame();
            } else if (event.keyCode == 66 && !isPlay) {
                // 开始
                startGame();
            }
        }

        // 4.2 蛇的移动
        function move(snake) {
            let snakeX = snake[0].x;
            let snakeY = snake[0].y;
            let isEat = false;
            if (d == "LEFT") snakeX -= speed;
            if (d == "UP") snakeY -= speed;
            if (d == "RIGHT") snakeX += speed;
            if (d == "DOWN") snakeY += speed;
            if (snakeX == food.x && snakeY == food.y) {
                isEat = true;
                let tdId = food.y * width + food.x;
                tds[tdId].style.backgroundColor = 'lightgray';
                score += 5;
                scoreSpan.innerHTML = score;
                food = getFood(snake);
            }
            let newHead = {
                x: snakeX,
                y: snakeY
            };
            // 检测是否越界，或者自己碰到自己
            if (snakeX < 0 || snakeX >= width || snakeY < 0 || snakeY >= height || collision(newHead, snake)) {
                endGame();
            } else {
                // 没有吃到，移除最后一个，在头部加一个，蛇长不变
                // 吃到，if不成立，蛇长不减，蛇头加一，整体变长一
                if (!isEat) {
                    snake.pop();
                }
                snake.unshift(newHead);
                console.log("newHead=" + newHead.x + "," + newHead.y);
            }


        }
        //显示画面
        function show(snake, food) {
            // 1 清除所有蛇和食物
            tds.forEach(function (item) {
                item.style.backgroundColor = '';
            });
            // 2 显示蛇
            snake.forEach(function (item, id) {
                let i = parseInt(item.x);
                let j = parseInt(item.y);
                console.log(i, j);
                let tdId = j * width + i;
                console.log(tdId);
                if (id == 0) {
                    tds[tdId].style.backgroundColor = 'blue';
                } else {
                    tds[tdId].style.backgroundColor = 'green';
                }
            });
            // 3 显示食物 
            let tdFoodId = food.y * width + food.x;
            tds[tdFoodId].style.backgroundColor = 'red';
        }
        // TODO 功能按钮的实现
        // 开始游戏
        function startGame() {
            // clearInterval(timeId);
            isPlay = true;
            time = difficulty.value;
            timeId = setInterval(() => {
                move(snake);
                show(snake, food);
            }, time)
        }
        // 游戏结束
        function endGame() {
            clearInterval(timeId);
            isPlay = false;
            alert("游戏结束");
        }
        // 暂停游戏
        function suspendGame() {
            if (isPlay) {
                clearInterval(timeId);
                isPlay = false;
                alert("游戏暂停");
            }
        }

        // 重新开始
        function restartGame() {
            // 关闭之前的定时器
            clearInterval(timeId);
            score = 0;
            scoreSpan.innerHTML = score;
            snake = initSnake();
            timeId = 0;
            time = 300;
            d = 'RIGHT';
            isPlay = false;
            food = getFood(snake);
            show(snake, food);
        }
        // 产生随机数字(游戏开始时蛇的随机位置和食物的随机位置)
        function getRandom() {
            // 蛇头的产生范围限定在（2-44）
            let ran_x = parseInt(Math.random() * (width - 4)) + 2;
            let ran_y = parseInt(Math.random() * height);
            return {
                x: ran_x,
                y: ran_y
            };
        }
        // 检查食物随机产生的位置是否在蛇的身体上
        function getFood(snake) {
            while (true) {
                let food = getRandom();
                let flag = true;
                for (let i = 0; i < snake.length; i++) {
                    let item = snake[i];
                    if (item.x == food.x && item.y == food.y) {
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    return food;
                }
            }
        }
        // 初始化蛇
        function initSnake() {
            let snake = [];
            snake[0] = getRandom();
            let x = snake[0].x;
            let y = snake[0].y;
            snake[1] = {
                x: x - 1,
                y: y
            };
            snake[2] = {
                x: x - 2,
                y: y
            };
            return snake;
        }
        // 检查是否碰到自己
        function collision(head, array) {
            for (let i = 0; i < array.length; i++) {
                if (head.x == array[i].x && head.y == array[i].y) {
                    return true;
                }
            }
            return false;
        }
    </script>
</body>

</html>
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420

实现方法_2

完全不同的想法，很考验逻辑思维哟，做好准备

1 实现效果

没有做很好的美化，只是实现功能

2实现想法

2.1 蛇的存储和显示

这里蛇的存储是借助了二维数组，利用二维数组的行列情况来记录位置，达到方式一中的直接在一维数组中记录{x,y}的效果；然后在二维数组里面全部初始化为undefined（其他的<0的值也行，主要是一种初始化标记），为甚小于0呢？因为这里我们给会在后面给二维数组里面赋值（0代表食物，1到n代表蛇，1是蛇头，后面紧邻的2,3，4，…n是蛇身）

显示的时候，就是普通的遍历二维数组获取里面的值，做不同的处理，更换背景色。

    function show() {
            snake.forEach((subArr, i) => {
                subArr.forEach((s, j) => {
                    let index = i * width + j;
                    if (s == undefined) {//未定义的就是普通的td
                        tds[index].style.backgroundColor = '';
                    } else if (s == 0) {//食物
                        tds[index].style.backgroundColor = 'red';
                    } else {
                        if (s == 1) {//蛇头
                            tds[index].style.backgroundColor = 'black';
                        } else {//蛇身
                            tds[index].style.backgroundColor = 'green';
                        }
                    }
                })
            })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.2 蛇的移动(重难点)

与上面的完全不同，上面有点取巧了，这里的考验思维了哟！

不用多说，首先肯定是去监听键盘，获取移动方向，根据不同的方向，构造出新的蛇头位置。这里构造出的新的蛇头和上面一样也要考虑越界情况（同上面）。下面我们默认新蛇头都是合法的，那么如何实现移动呢？交换

我们把新的蛇头称作目标点，把当前的蛇头称为原始点，用两个变量nextX和nextY来记录新的蛇头的横纵坐标，用x0和y0来记录当前蛇头的坐标，我们就是通过有限次数（蛇长度）的交换记录蛇的二维数组的snake[x0][y0] 和snake[nextX][nextY]里面的值，来实现蛇的移动的，当然并没这么简单（我们之前说了蛇头处存的值是1，蛇身上存的值是2-n，这还没用到的呢！）

先来个简单的示例：（右移，图中标错了）

通过上述我们可以知道，我们用的nextX和nextY的值和x0和y0的值，肯定是动态变化的，如何变？
显然：第一步的移动中（蛇头的移动）nextX和nextY的值记录的就是新蛇头的位置坐标，在后面的过程中，nextX和nextY的值就是前一次交换过程中原始块的值（比如，蛇头前移一下，原始蛇头的位置，就是下一个原始块的目标位【用目标块记录】）。

整体在一条线上时，我们都好理解。
那么问题来了？ 要是蛇身盘踞呢？还有就是我们通过for循环控制交换实现蛇的移动，我们每次循环多少次呢？
先说简单的，交换多少次，我们定义一个变量用来记录蛇长，for循环的次数就是当前蛇的长度（蛇头蛇身都要和目标块交换）。
再来说这个最不好想的，就是蛇的转向和盘踞移动，这里就用到了我们前面给蛇身上的标号，看下图详解。

（右移，图中标错了）

找寻标号，我们只需要找寻上一个原始块所处位置的下左右四个方位的即可。
当然找的时候也要注意到越界的情况：

上下越界：
我们定义的snake是一维数组，在初始化时，动态的给他添加行（里面放一维的数组），在再一维里面放undefined，这样构成的二维数组，这样当我们上下找寻标号的时候，就可能出现arr[i][j] 中i的索引值的越界情况，这个时候找寻的arr[i]是undefined，我们在去找arr[i][j]，就是去找undefined中的j位置的值，肯定是语法错误的，会报错，这时我们就需要对这种情况做处理。
左右越界：
这种情况是，我们找的i索引肯定是不会出现越界的，但是j可能会越界。但是呢，这时就算越界了，我们arr[i][j]的结果最多就是得到一个undefined，然而这并没什么大的影响，所以这里我们就不处理了。

// 根据方向做不同的操作
                let nextX, nextY;
                if (direction == 37) {
                    // 左
                    nextX = snakeHeadX;
                    nextY = snakeHeadY - 1;
                } else if (direction == 38) {
                    // 上
                    nextX = snakeHeadX - 1;
                    nextY = snakeHeadY;
                } else if (direction == 39) {
                    // 右
                    nextX = snakeHeadX;
                    nextY = snakeHeadY + 1;
                } else if (direction == 40) {
                    // 下
                    nextX = snakeHeadX + 1;
                    nextY = snakeHeadY;
                }
                // 判断游戏结束
                if (nextX >= height || nextX < 0 || nextY >= width || nextY < 0 || snake[nextX][nextY] > 0) {
                    clearInterval(timeId);
                    alert("游戏结束");
                    return;
                }
                // 原点记录每一个蛇身小格的前一个
                let x0 = snakeHeadX;
                let y0 = snakeHeadY;
                // 记录新的蛇头
                snakeHeadX = nextX;
                snakeHeadY = nextY;
                for (let i = 1; i <= snakeLength; i++) {
                    let temp = snake[x0][y0];
                    snake[x0][y0] = snake[nextX][nextY];
                    snake[nextX][nextY] = temp;
                    // 蛇身交换后，原点记录的蛇身小格的前一个，就是蛇身下个小格要前移的目标
                    nextX = x0;
                    nextY = y0;
                    // 查找上下左右四个方位，看snake二维数组中的值，是不是上面刚交换的下一个值（在蛇身上放的数值1,2,3...）
                    // 向上找
                    if ((nextX - 1) > -1 && snake[nextX - 1][nextY] == i + 1) {
                        x0--;
                    }
                    // 向下找
                    if ((nextX + 1) < height && snake[nextX + 1][nextY] == i + 1) {
                        x0++;
                    }
                    // 向左找
                    if (snake[nextX][nextY - 1] == i + 1) {
                        y0--;
                    }
                    // 向右找
                    if (snake[nextX][nextY + 1] == i + 1) {
                        y0++;
                    }
                }
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

2.3 吃食物

这里不同于上面的方法一。同样，当新蛇头的位置与食物的位置重合时(食物身上的值为0)，说明吃到食物，我们将记录蛇长的变量+1，同时在完成最后一次交换后x0和y0的值，就是之前蛇的尾部的位置，我们将这个位置在二维数组中做上标号（上边提到的2-n的标号），这也就是新的蛇尾，然后在随机一个食物位置即可。

当然这里随机食物，和之前的想法一样，不能随机到蛇身上，而我们给存放蛇的二维数组做了初始化，除了蛇之外都是undefined，当随机的位置是undefined时，就说明不在蛇身上。

if (snake[x0][y0] == 0) {
	snake[x0][y0] = snakeLength + 1;
    snakeLength++;
    randomFood();
}
1
2
3
4
5

其他的就没什么了，就是绑定事件，测试调整逻辑

3 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        td {
            border: 1px solid #000;
            width: 20px;
            height: 20px;
            font-size: 13px;
        }


        .div1 {
            background-color: lightblue;
            height: 30px;
            padding-top: 5px;
            padding-left: 30px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="div1">
        <button id="start">开始游戏</button>
        <button id="stop">暂停游戏</button>
        难度等级
        <select id="select">
            <option value="500">简单</option>
            <option value="300">一般</option>
            <option value="100">困难</option>
            <option value="40">噩梦</option>
        </select>
        场地大小
        <select id="size">
            <option value="15">15x15</option>
            <option value="29">29x29</option>
            <option value="35">35x29</option>
            <option value="50">50x29</option>
            <option value="60">60x29</option>
        </select>
    </div>
    <div class="div2">
        <table>

        </table>
    </div>
    <script>
        let tableContent = '';
        let width;
        let height = 29;
        let snake = [];
        let timeId = 0;
        let time = 500;
        let table = document.querySelector('table');
        let snakeLength;
        let direction;
        let tds;
        let snakeHeadX;
        let snakeHeadY;
        let isStop = false;
        let isPlay = false;
        let select = document.querySelector('#select');
        select.onchange = function () {
            time = this.value;
        }
        let sizeSelect = document.querySelector('#size');
        sizeSelect.onchange = function () {
            width = this.value;
        }

        window.onkeyup = function (e) {
            // 左37 上38 右39 下40
            if (e.keyCode >= 37 && e.keyCode <= 40) {
                if (((direction == 37 || direction == 39) && (e.keyCode == 38 || e.keyCode == 40)) ||
                    ((direction == 38 || direction == 40) && (e.keyCode == 37 || e.keyCode == 39))) {
                    direction = e.keyCode;
                }
            }
        }
        let startBtn = document.querySelector('#start');
        startBtn.onclick = function () {
            clearInterval(timeId);
            tableContent = '';
            snake = [];
            snakeLength = 2;
            direction = 39;
            initTable();
            startGame();
            randomFood();
            if (!isPlay) {
                startBtn.innerHTML = '重新开始';
            } else {

                startBtn.innerHTML = '开始游戏';
            }
            isPlay = !isPlay;
        }
        let stopBtn = document.querySelector('#stop');
        stopBtn.onclick = function () {
            if (!isStop) {
                clearInterval(timeId);
                stopBtn.innerHTML = '继续游戏';
            } else {
                startGame();
                stopBtn.innerHTML = '暂停游戏';
            }
            isStop = !isStop;
        }

        function initTable() {
            width = sizeSelect.value;
            if(width==15) {
                height=15;
            }else{
                height=29;
            }
            time = select.value;
            for (let i = 0; i < height; i++) {
                tableContent += '<tr>';
                snake[i] = [];
                for (let j = 0; j < width; j++) {
                    if (i == 0) {
                        tableContent += '<td>' + j + '</td>';
                    } else if (j == 0) {
                        tableContent += '<td>' + i + '</td>';
                    } else {
                        tableContent += '<td></td>';
                    }
                    snake[i][j] = undefined;
                }
                tableContent += '</tr>';
            }
            table.innerHTML = tableContent;
            snakeHeadX = parseInt(height/2);
            snakeHeadY = parseInt(width/2);
            snake[snakeHeadX][snakeHeadY] = 1;
            snake[snakeHeadX][snakeHeadY - 1] = 2;
            tds = document.querySelectorAll('td');
        }

        function show() {
            snake.forEach((subArr, i) => {
                subArr.forEach((s, j) => {
                    let index = i * width + j;
                    if (s == undefined) {
                        tds[index].style.backgroundColor = '';
                    } else if (s == 0) {
                        tds[index].style.backgroundColor = 'red';
                    } else {
                        if (s == 1) {
                            tds[index].style.backgroundColor = 'black';
                        } else {
                            tds[index].style.backgroundColor = 'green';
                        }
                    }
                })
            })
        }

        function startGame() {
            timeId = setInterval(() => {
                // 根据方向做不同的操作
                let nextX, nextY;
                if (direction == 37) {
                    // 左
                    nextX = snakeHeadX;
                    nextY = snakeHeadY - 1;
                } else if (direction == 38) {
                    // 上
                    nextX = snakeHeadX - 1;
                    nextY = snakeHeadY;
                } else if (direction == 39) {
                    // 右
                    nextX = snakeHeadX;
                    nextY = snakeHeadY + 1;
                } else if (direction == 40) {
                    // 下
                    nextX = snakeHeadX + 1;
                    nextY = snakeHeadY;
                }
                // 判断游戏结束
                if (nextX >= height || nextX < 0 || nextY >= width || nextY < 0 || snake[nextX][nextY] > 0) {
                    clearInterval(timeId);
                    alert("游戏结束");
                    return;
                }
                // 原点记录每一个蛇身小格的前一个
                let x0 = snakeHeadX;
                let y0 = snakeHeadY;
                // 记录新的蛇头
                snakeHeadX = nextX;
                snakeHeadY = nextY;
                for (let i = 1; i <= snakeLength; i++) {
                    let temp = snake[x0][y0];
                    snake[x0][y0] = snake[nextX][nextY];
                    snake[nextX][nextY] = temp;
                    // 蛇身交换后，原点记录的蛇身小格的前一个，就是蛇身下个小格要前移的目标
                    nextX = x0;
                    nextY = y0;
                    // 查找上下左右四个方位，看snake二维数组中的值，是不是上面刚交换的下一个值（在蛇身上放的数值1,2,3...）
                    // 向上找
                    if ((nextX - 1) > -1 && snake[nextX - 1][nextY] == i + 1) {
                        x0--;
                    }
                    // 向下找
                    if ((nextX + 1) < height && snake[nextX + 1][nextY] == i + 1) {
                        x0++;
                    }
                    // 向左找
                    if (snake[nextX][nextY - 1] == i + 1) {
                        y0--;
                    }
                    // 向右找
                    if (snake[nextX][nextY + 1] == i + 1) {
                        y0++;
                    }
                }

                if (snake[x0][y0] == 0) {
                    snake[x0][y0] = snakeLength + 1;
                    snakeLength++;
                    randomFood();
                }
                //显示蛇和食物
                show();
            }, time)
        }

        function randomFood() {
            while (true) {
                let x = Math.floor(Math.random() * height);
                let y = Math.floor(Math.random() * width);
                console.log(x, y);
                if (snake[x][y] == undefined) {
                    snake[x][y] = 0;
                    break;
                }
            }
        }
    </script>
</body>

</html>
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