Use the front-end native JS, Snake games

For a long time, it really is a long long not to write, because recently a little busy. But even busy, also wrote two small games, one of which is this, greedy snake.

is a small practiced hand, this is a little too simple, just the first time to write this small game, or sporadic spent 35 days, the following is the small game GIF small animation, relatively simple, compared to the other online to write to practiced hand the snake works, this in the Yan value or function, are still good, rattling.

Here's a look at the features:

1. Space controls start and pause.
2. The direction key controls the direction of movement.
3. Q key to speed up, and then press once to restore the normal speed (in the acceleration state, press or arrow keys, or eat a small white food, speed automatically return to normal).

This time I studied GitHub, a foreign site used to manage the code version, but it doesn't need FQ, it's a function that can be used to display the site, for example, I put the snake in GitHub, you can click on the link in the back to access, that is, you can play directly: Click here to open the snake

Want to describe the technical points ... Found a bit small forget, but a difficult point still remember, when the body of the snake is longer, easy and oneself to live, will even become a piece, look very inconvenient, so I added this gap in the middle, as shown, for adding before and after the effect of adding:

The addition of this gap is still more troublesome, my idea is, to make up a snake body of each Li element, set a 1px border background color border, and then each li behind a width of 2px, height and Li and other high span label, background color and Li Same, and then through the CSS set good Position, just can fill up the snake body between two normal connected Li small block, that 2px Gap, why is 2px it? Because the previous Li and the next Li, each has a 1px border.

The source code is also placed below, lest later when I changed the GitHub configuration, the above link can not be used.

<! DOCTYPE html>
　　
Use the front-end native JS, Snake games