Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you how to use JavaScript to write a gluttonous Snake Mini Game related knowledge points, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

Let's write down the dom structure first.

Among them, content is the big box of the whole layout, snake is the snake, and the box in it is his body. in order to distinguish the head, we add a head name to the first box, and then we add css.

.box {width: 60px; height: 60px; background-color: red; position:absolute; left: 0; top: 0; line-height: 60px;} .head {background-color: yellowgreen;}

We set the width and height of each section of the snake to 60 pixels and give it a location, because without positioning, it is impossible to get him out of the document stream (floating on the page), and his coordinates cannot be determined later by left and top.

Okay, so we get a cute little snake (but the goose doesn't see where it's cute). What? You ask me where his head is, it's very simple, after the element is positioned, the later element will cover the previous element, so it's just that the head and body overlap and you can't see it.

Then we have to get the snake moving, right? so how do we get him moving? The principle is very simple, we can set a timer, every time to let him move, and how to make him move, just set a value, so that every move on the + = 60, and then by judging whether to move up and down or left and right, to assign values to the left and top of the element. When we write the logic into code, we have the following code

Var boxs = document.querySelectorAll (".box"); var snake_x = 0; var snake_y = 0; var turn = "right"; setInterval (function () {snakeMove ();}, 100) function snakeMove () {switch (turn) {case "right": snake_x + = 60; case "left": snake_x-= 60; case "top": snake_y-= 60 Case "bottom": snake_y + = 60 politics break;} for (var I = boxs.length-1; I > 0; I--) {boxs [I] .style.left = boxs [I-1] .style.left; boxs.style.top = boxs [I-1] .style.top;} boxs.style.left = snake_x + "px" Boxes [I] .style.top = snake_y + "px";} _ document.onkeydown = function (evt) {var e = evt | | event; var keyCode = e.keyCode | | e.which.switch (keyCode) {case 37: turn = "left"; break; case 38: turn = "top"; break; case 39: turn = "right"; break; case 40: turn = "bottom"; break;}}

In the above code, we set the coordinates of x and y of the initial position of the snake to 0, and go to the right by default, and change his direction by typing the up key on the keyboard. Among them, the difficulty is

For (var I = boxs.length-1; I > 0; I--) {boxs [I] .style.left = boxs [I-1] .style.left; boxs.style.top = boxs [I-1] .style.top;} boxs [I] .style.left = snake_x + "px"; boxs [I] .style.top = snake_y + "px"

This piece of code, the purpose of this piece of code is to let the following elements follow the previous one, that is, to move each piece of the snake's body with the previous one, and then finally set the head to the current values of snake_x and snake_y, thus forming the first block (head) coordinate as

The value of snake_x,snake_y changes in real time. The second block is the value before the first block, and the third block is the value before the second block. By analogy, you get the effect of the body following the head.

But when you type in the code, you will find that the little snake is so naughty that it will go forward indefinitely when it reaches the boundary. This will not work. You can't let the snake get away, so you have to add a boundary to the little snake.

Var snake_x_max = document.documentElement.clientWidth; var snake_y_max = document.documentElement.clientHeight;if (snake_x > snake_x_max) {snake_x = 0;} if (snake_x

Snake_y_max) {snake_y = 0;} if (snake_y < 0) {snake_y = snake_y_max;}

Here we set the maximum values of x and y to the width and height of the current window, and then judge through the if statement. If the current coordinates are greater than the maximum value, we will return the current coordinates to 0. If it is less than 0 (that is, running to the left boundary), we will set the current coordinates to the maximum value, so that we can get a boundary.

You think that's it? Nonono, how can a snake without food be called a gluttonous snake? it has no soul. Let's start making food (don't let the snake starve).

And then add him a css.

# food {width: 60px; height: 60px; position: absolute; background: greenyellow;}

Then bind the element and set its left and top values to random numbers in the range, so that the random position can be generated.

Var fd=document.getElementById ("food"); fd.style.left=Math.random () * snake_x_max+ "px"; fd.style.top=Math.random () * snake_y_max+ "px"

Okay, so we get a randomly generated food.

But our little snake doesn't seem to be interested in food, and he won't eat it after passing by, so we have to add a collision test to him. The logic of collision detection is very simple. We only need to subtract the left value of the food from the left value of the head.

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.