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

Today, the editor will share with you how to achieve 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.

Design thought

Before we start writing code, let's imagine the implementation of the game as a whole:

The object needed

First of all, since it is gluttonous snake, then the game must involve two objects, one is the object of the snake, the other is the object of food. The food object must have an attribute that is the coordinate point of the food, and the snake object has an attribute that is an array that stores all the coordinate points of the snake's body.

How to move

In addition, the overall situation requires a timer to periodically move the snake's body. Because the snake's body is curved in a variety of different shapes, we only deal with the head and tail of the snake, add a new head according to the direction of movement, and then wipe off the tail, which looks like the snake is crawling forward.

Direction control

Because the snake has a direction to move, we also need to define a direction object globally, with values represented by the upper and lower sides of the object. At the same time, we also need to define a direction attribute in the properties of the snake object, which is used to represent the current direction in which the snake is moving.

Collision detection

In the process of the snake crawling forward, it will encounter three different situations, which require different judgments and tests. The first case is that when you eat the food, you need to add the coordinate points of the food to the snake's array; the second case is to touch your own body, and the third case is to touch the boundary, both of which lead to the end of the game; if not for the above three cases, the snake can move normally.

Start programming

Now that the overall idea is in place, let's start writing code.

Set up a curtain

First of all, the whole game needs a scene of building activities, and we use a table layout as the background of the whole game.

# pannel table {border-collapse:collapse;} # pannel td {width: 10px; height: 10px; border: 1px solid # 000;} # pannel td.food {background: green;} # pannel td.body {background: # f60;} 10'10 20'20 30: 30 speed-slow speed-normal speed-fast start

Pannel is our curtain, in which we use td tags to draw "pixels". We use two styles to represent different objects. Body represents the style of the snake's body and .food represents the style of food.

Var settings = {/ / pannel panel length pannelSize: 10, / / Snake moving speed speed: 500, / / Snake worker thread workThread: null,}; function setPannel (size) {var content = []; content.push (''); for (let iTunes I)

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.