Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use JavaScript to achieve gluttonous Snake Mini Game. I think it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Overview of the implementation of gluttonous Snake Mini Game by JavaScript

This program implements the following functions:

The basic functions of gluttonous snakes

Statistical score

Start and pause

Select difficulty level

Set keyboard shortcuts

5.1 Direction switching can also be achieved through ijkl,wsad

5.2 pause by "P", "C" means start or continue, and "R" means restart

Realization process

The initial implementation principle is actually a great god of the reference csdn, he uses the JavaScript20 line to achieve the basic function of the gluttonous snake, the valuable thing is that there is no bug, the link here

To realize the gluttonous snake, there are probably the following steps:

Draw a moving area of a snake

Draw a snake

Draw food

Make the snake move.

Set the rules of the game

Set the difficulty level

Set up start and pause

Set the follow-up operation at the end of the game

Realize the human-computer interaction page

Note: the following process explanation section only describes part of the principle and implementation. It is recommended that while looking at the final complete code, look at the following explanation, it is easier to understand the principle and implementation of each part.

Draw the active area of the snake

First of all, we draw the active area of the snake, and we use canvas of JavaScript to draw.

We use a 400 × 400400\ times 400400 × 400 area as the snake's active area.

At the same time, set a boundary line through CSS

# canvas {border: 1px solid # 0000000; / * set borders * /} draw snakes and food

The effect is as follows:

We need to think about the data structure of the snake before drawing the snake, and here we take the simplest queue to represent the snake.

The head of the team indicates the position of snakehead, and the tail of the team indicates the position of snaketail.

We divide the previously drawn 400x400400\ times 400400x400 area into 400 squares of 20 × 20\ times 20 × 20, and use these squares to form a snake, then the range of values for the location of the snake is 0,399.

For example:

Var snake= [42,41,40]

The above code indicates that the location of the snake is 42 and 41, where the snake head is 42 and the snake tail is 40.

For food, we can use a variable food to store the location of the food. The value range of the food is 0: 399, and the snake part is not included. Because the food needs to be randomly generated in the game, the random function is implemented as follows:

/ generate a random integer of min~max, which is used to randomly generate the position of food function random (min, max) {const num = Math.floor (Math.random () * (max-min)) + min; return num;}

When the food is eaten by the snake, the food needs to be refreshed. Since the food cannot appear in the position of the snake, we use a while loop and jump out of the loop when the position of the food is not in the snake's array.

While (snake.indexOf ((food = random (0400) > = 0); / / refresh the food and note that the food should not be inside the snake

We're going to draw it through canvas.

First get the canvas component in js

Const canvas = document.getElementById ("canvas"); const ctx = canvas.getContext ("2d")

Then write the drawing function to draw the square, and when drawing the box, we should pay attention to the 1px as the border, that is, the side length of the square we drew is 18, what we actually fill is 18 × 1818\ times 1818 × 18, and the calculation of the x and y coordinates of the box (the upper left corner of the box) also needs to be added with 1px.

Note: the origin coordinate of canvas is in the upper left corner, the positive direction of x axis to the right, and the positive direction of y axis down.

/ / it is used to draw the square represented by the snake or food. Seat is the square position, and the value is 0: 399. Color is the color function draw (seat, color) {ctx.fillStyle = color. / / the four parameters of the fill color / / fillRect represent the x-coordinate, y-coordinate, length and width of the square to be drawn, respectively. For beauty, 1px is reserved for the frame ctx.fillRect ((seat% 20) * 20 + 1, Math.floor (seat / 20) * 20 + 1,18,18);} make the snake move.

If we want to make the snake move, we must first specify the direction of the snake's movement. We use a variable direction to indicate the direction of the snake's movement. The range of values is {1-mai-lue-20}, 1 means right,-1 means left, 20 means down,-20 means up. When moving, you only need to add the position of the snakehead to direction to indicate the position of the new snakehead, so we can represent the movement of the snake.

So how to get the snake moving? for each movement of the snake, we need to complete the following basic operations:

Turn the next position of the snake movement into a new snake head.

Add the next location to the snake queue

Draw the next square as light blue

Turn an old snake head into a snake body.

Draw the old snakehead as light gray

Delete the old snake tail

Eject the old snake tail from the snake queue

Draw the old snake tail position as white

When the snake eats the food (the next position of the snake is the location of the food), it is necessary to update the location of the food and draw the new food as yellow. At this time, there is no need to delete the old snake tail, which can increase the length of the snake after eating.

We need to write a function to do the above, and to call this function constantly to refresh the page, that is, what we call dynamic effects.

N = snake [0] + direction; / / find new snakehead coordinates snake.unshift (n); / add new snakehead draw (n, "# 1a8dcc"); / / draw new snakehead as light blue draw (snake [1], "# cececc"); / / turn the original snakehead (light blue) into snakehead (light gray) if (n = = food) {while ((food = random (0,400)) > = 0) / / refresh the food, note that the food should not be inside the snake draw (food, "Yellow"); / / draw the food} else {draw (snake.pop (), "White"); / / draw the original snake tail as white}

Next, we need to control the movement of the snake through the keyboard.

We need to get the key value of the keyboard, and then use a listening function to listen to the operation pressed by the keyboard. Here, we use the up and down keys (also expand the WSAD key and IJKL key to control the up and down direction), and set a variable n to indicate the direction of the next step.

/ / used to bind keyboard events up and down, left and right arrow keys, representing the upper and lower left and right directions _ document.onkeydown = function (event) {const keycode = event.keyCode; if (keycode 0 | | n

< 0 || n >

399 | | (direction = = 1 & & n% 20 = = 0) | (direction = =-1 & & n% 20 = = 19) {game_over ();}

Next, we implement the score statistics. For the calculation of the score, we only need to set a variable score to count the score, and then add one to each food we eat, and then update the score information to the appropriate location on the web page.

Score = score + 1 * scorescorecal.innerText = "current score:" + score; / / Update score set difficulty level

We set up a checkbox on the web page to set the difficulty level

Difficulty level: simple, intermediate and difficult

The effect is as follows:

So how do we set the function of difficulty level in the background?

We take the time interval of calling the function of snake motion to replace the difficulty. The smaller the time interval, the greater the difficulty. We are divided into three levels: simple, intermediate and difficult.

We create a time interval variable time_internal, then use a function to get the value of the radio box, and assign the time interval of the corresponding pattern to time_internal

/ / the speed of the snake is represented by the refresh interval. The longer the refresh interval, the slower the speed of the snake. Const simply_mode = 200 per Const middle_mode = 100 per Const hard_mode = 50 per time_internal time_internal = simply_mode; / / refresh interval is used to adjust the speed of the snake. The default is simple mode / / synchronization difficulty level function syncMode () {var mode_value = "; for (var I = 0; I).

< mode_item.length; i++) { if (mode_item[i].checked) { mode_value = mode_item[i].value; } } switch (mode_value) { case "simply": time_internal = simply_mode; break; case "middle": time_internal = middle_mode; break; case "hard": time_internal = hard_mode; break; }} 最后只需要在蛇每次移动前调用一次上述函数syncMode()就可以实现难度切换，至于蛇的速度的具体调节且看下面如何讲解 设置开始与暂停 如何实现蛇的移动动态效果，如何暂停，如何继续，速度如何调节，这就涉及到JavaScript的动画的部分了，建议看下《JavaScript高级程序设计（第4版）》第18章的部分，讲的很详细。 在最初的"20行JavaScript实现贪吃蛇"中并没有实现开始与暂停，其实现动态效果的方法为设置一个立即执行函数!function() {}();，然后在该函数中使用setTimeout(arguments.callee, 150);，每隔0.15秒调用此函数，从而实现了网页的不断刷新，也就是所谓的动态效果。 后来，我通过web课程老师的案例（弹球游戏）中了解到requestAnimationFrame方法可以实现动画效果，于是我便百度查询，最后在翻书《JavaScript高级程序设计（第4版）》第18章动画与Canvas图形中得到启发-如何实现开始与取消，如何自定义时间间隔（实现难度调节，蛇的速度） 书中给出的开始动画与取消动画的方法如下： 注：为了便于理解，自己修改过原方法 var requestID; // 用于标记请求ID与取消动画function updateProgress() { // do something... requestID = requestAnimationFrame(updateProgress); // 调用后在函数中反复调用该函数} id = requestAnimationFrame(updateProgress); // 第一次调用（即开始动画）cancelAnimationFrame(requestID); // 取消动画 书中讲述道： requestAnimationFrame()已经解决了浏览器不知道 JavaScript 动画何时开始的问题， 以及最佳间隔是多少的问题。······ 传给 requestAnimationFrame()的函数实际上可以接收一个参数，此参数是一个 DOMHighResTimeStamp 的实例（比如 performance.now()返回的值），表示下次重绘的时间。这一点非常重要： requestAnimationFrame()实际上把重绘任务安排在了未来一个已知的时间点上，而且通过这个参数 告诉了开发者。基于这个参数，就可以更好地决定如何调优动画了。 requestAnimationFrame()返回一个请求 ID，可以用于通过另一个 方法 cancelAnimationFrame()来取消重绘任务 书中同样给出了如何控制时间间隔的方法： 书中讲述道： 配合使用一个计时器来限制重绘操作执行的频率。这样，计时器可以限制实际的操作执行间隔，而 requestAnimationFrame 控制在浏览器的哪个渲染周期中执行。下面的例子可以将回调限制为不超过 50 毫秒执行一次 具体方法如下： let enabled = true; function expensiveOperation() { console.log('Invoked at', Date.now()); } window.addEventListener('scroll', () =>

{if (enabled) {enabled = false; requestAnimationFrame (expensiveOperation); setTimeout (() = > enabled = true, 50);}})

Inspired by the above method, here we can set up a control function to control the function that calls the snake movement at regular intervals, as follows:

/ / controls the refresh frequency of the game. Refresh function game_control () {if (enabled) {enabled = false; requestAnimationFrame (run_game); setTimeout (() = > enabled = true, time_internal);} run_id = requestAnimationFrame (game_control);} / start or continue the game function run_game () {syncMode () / / synchronization difficulty level n = snake [0] + direction; / / find a new snakehead coordinate snake.unshift (n); / / add a new snakehead / / determine whether the snakehead bumped into itself or exceeded the boundary if (snake.indexOf (n, 1) > 0 | | n

< 0 || n >

399 | (direction = = 1 & & n% 20 = = 0) | (direction = =-1 & & n% 20 = = 19) {game_over ();} draw (n, "# 1a8dcc"); / / draw the new snakehead as light blue draw (snake [1], "# cececc") / / change the original snake head (light blue) into snake body (light gray) if (n = = food) {score = score + 1; score_cal.innerText = "current score:" + score; / / update score while (snake.indexOf ((food = random (0400)) > = 0) / / refresh the food, note that the food should not be inside the snake draw (food, "Yellow"); / / draw the food} else {draw (snake.pop (), "White"); / / draw the original snake tail as white} / / setTimeout (arguments.callee, time_internal); / / the previous scheme cannot achieve suspension and continuation of the game}

As for the pause, you only need to call cancelAnimationFrame (run_id) at a specific location; it's fine.

Set the follow-up operation at the end of the game

What I want is a "pop-up window" at the end of the game to show the final score and whether to do it again.

The effect is as follows:

First of all, we realize the pop-up window of the web page. through the research, we find that the pop-up window of JavaScript can be realized by the method of alert (), but the direct pop-up window on the web page does not feel very beautiful and affects the experience, so I thought about it for a moment, we can use a p tag to realize the pseudo pop-up window, set its display property to block when it needs to be displayed, and set its display property to none when it is not needed, which is similar to the layer concept in Photoshop. In this way, we can normally set its display property to none and set its display property to block when game over is triggered, as shown below:

Game over! Your final score is: 0. one more cancellation.

The CSS section is as follows:

# game_over {display: none; / * set the game over window is not visible * / position: fixed; top: 190px; left: 65px; width: 280px; height: 160px; background-color: aliceblue; border-radius: 5px; border: 1px solid # 000; / * set the border * /} # once_again {position: relative; left: 20px;} # cancel {position: relative; left: 50px;}

Next, we need to implement the follow-up operations of game over: pause the animation, display the score, and display the "pop-up window"

Function game_over () {cancelAnimationFrame (run_id); game_over_score.innerText = "your final score is: + score +" score "; game_over_p.style.display =" block ";} implement the human-computer interaction page

The next part is the part to improve the user experience, specifically implementing the following functions / operations

Game description

Human-computer interaction button: start / continue, pause, restart

Shortcut key

Because the time is too slow to pause by moving the mouse to the pause button during the game, it may cause the game to stop, so the shortcut keys of start / resume (C), pause (P) and restart (R) should be set.

The keys of some computer keyboards are relatively small, so it is not convenient to operate. You can add WSAD or IJKL extensions to control the left and right directions.

The effect is as follows:

As for the code for writing the interface, you can see the complete code at the end of the article. Here we will briefly explain the binding button click event and the binding shortcut key.

Let's first take a look at the bind button click event, click start / continue, just call requestAnimationFrame (game_control); click pause, just call cancelAnimationFrame (run_id)

/ / bind start button click event start_btn.onclick = function () {run_id = requestAnimationFrame (game_control);}; / / bind pause button click event pause_btn.onclick = function () {cancelAnimationFrame (run_id);}

If you click "start over", you need to pause the animation, then delete the snakes and food on the screen, initialize all settings, and then call requestAnimationFrame (game_control). Start the game.

Note: you need to initialize the score and difficulty level during initialization. Explain why the first food is set to the next position of the snakehead, because in this way the snake will automatically eat a food first, and then you can start and continue the operation through the "start / continue" button. At the same time, the food drawing in the run_game () function ensures that the first food is drawn smoothly after the snake has eaten the food. In this case, score needs to be initialized to-1.

/ / used to initialize game parameters function init_game () {snake = [41,40]; direction = 1; food = 42; score =-1; time_internal = simply_mode; enabled = true; score_cal.innerText = "current score: 0"; / / update score mode_item [0] .score = true / / reset difficulty level is simple} / / bind restart button Click the event restart_btn.onclick = function () {cancelAnimationFrame (run_id); / / draw the original food and snake squares as white for (var I = 0; I

< snake.length; i++){ draw(snake[i], "White"); } draw(food, "White"); // 初始化游戏各项参数 init_game(); run_id = requestAnimationFrame(game_control); }; 接下来，我们绑定game over中的两个按键"再来一把"和"取消" "再来一把"只需要完成"重新开始"里面的事件即可，"取消"只需要完成"重新开始"点击操作中除了开始游戏的部分，即除了run_id = requestAnimationFrame(game_control); 这两个按钮都需要设置"弹窗"的display属性为none 具体实现如下： // 绑定游戏结束时的取消按钮点击事件cancel_btn.onclick = function () { for(var i = 0; i < snake.length; i++){ draw(snake[i], "White"); } draw(food, "White"); init_game(); game_over_p.style.display = "none";}// 绑定游戏结束时的再来一把按钮点击事件once_again_btn.onclick = function () { for(var i = 0; i < snake.length; i++){ draw(snake[i], "White"); } draw(food, "White"); init_game(); game_over_p.style.display = "none"; run_id = requestAnimationFrame(game_control);} 最后，我们来讲解下如何设置快捷键，快捷键只需要用JavaScript模拟点击对应的按钮即可，实现如下： // 同时绑定R 重启，P 暂停，C 继续_document.onkeydown = function (event) { const keycode = event.keyCode; if(keycode == 82){ // R 重启 restart_btn.onclick(); } else if(keycode == 80){ // P 暂停 pause_btn.onclick(); } else if(keycode == 67){ // C 继续 start_btn.onclick(); } };问题、调试与解决 注： 此部分为本人在实现过程中出现的bug、调试过程以及解决方法，感兴趣的可以看看，不感兴趣的也可以跳过此部分，直接看文末的完整代码 问题1：点击暂停和开始，游戏正常开始，按P也可以实现暂停，按C则画面出现蛇所在的方格乱跳，无法正常开始，但是按C的操作中只模拟了"开始 / 继续"按钮的点击？ 效果如下： 调试过程：因为蛇头的位置是由direction控制的，故想到设置断点，同时监测这个变量的值的变化，发现这个值在按完P和C时被更新成很大的数，进而去找direction在哪里被更新，发现点击P或C后还需要执行下面这一行代码，而实际上是不需要的 direction = snake[1] - snake[0] == n ? direction : n; // 若方向与原方向相反，则方向不变 解决方法：只需要执行完对应的模拟鼠标点击相应按钮事件之后就直接return就可以了 原代码与修改后的代码如下： _document.onkeydown = function (event) { const keycode = event.keyCode; if(keycode == 82){ // R 重启 restart_btn.onclick(); return; // 后来加上的 } else if(keycode == 80){ // P 暂停 pause_btn.onclick(); return; // 后来加上的 } else if(keycode == 67){ // C 继续 start_btn.onclick(); return; // 后来加上的 } else if (keycode 399 || (direction == 1 && n % 20 == 0) || (direction == -1 && n % 20 == 19) ) { game_over(); } draw(n, "#1a8dcc"); // 绘制新蛇头为浅蓝色 draw(snake[1], "#cececc"); // 将原来的蛇头（浅蓝色）变成蛇身（浅灰色） if (n == food) { score = score + 1; score_cal.innerText = "目前得分: " + score; // 更新得分 while (snake.indexOf((food = random(0, 400))) >

= 0); / / refresh the food and note that the food should not be inside the snake draw (food, "Yellow"); / / draw the food} else {draw (snake.pop (), "White") / / draw the original snake tail as white} / / setTimeout (arguments.callee, time_internal) / / the previous scheme failed to pause and continue the game} / / to control the refresh frequency of the game, refreshing function game_control () {if (enabled) {enabled = false every time_internal interval. RequestAnimationFrame (run_game); setTimeout (() = > enabled = true, time_internal);} run_id = requestAnimationFrame (game_control) } / / bind start button Click the event start_btn.onclick = function () {run_id = requestAnimationFrame (game_control);} / / bind pause button click event pause_btn.onclick = function () {cancelAnimationFrame (run_id);}; / / bind restart button click event restart_btn.onclick = function () {cancelAnimationFrame (run_id) / draw the original food and snake cubes as white for (var I = 0; I < snake.length; iTunes +) {draw (snake [I], "White");} draw (food, "White") / / initialize the game parameters init_game (); run_id = requestAnimationFrame (game_control);} / / bind the cancel button at the end of the game and click the event cancel_btn.onclick = function () {for (var I = 0; I < snake.length; iTunes +) {draw (snake [I], "White") } draw (food, "White"); init_game (); game_over_p.style.display = "none" } / / bind another button at the end of the game. Click event once_again_btn.onclick = function () {for (var I = 0; I < snake.length; iTunes +) {draw (snake [I], "White") } draw (food, "White"); init_game (); game_over_p.style.display = "none"; run_id = requestAnimationFrame (game_control) } this is the end of the article on "how to use JavaScript to achieve gluttonous Snake Mini Game". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.