“This is the 14th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Antecedents to review

• In the previous two articles, we implemented some of the logic associated with the map class and the food class
• Today we are going to implement snakesSnakeThe snake is the main character of the game, so its properties and methods are relatively complex

Realize the snakes

• The main functions of snakes are snake movement, eating food, turning
• As always, let’s start by examining the snake code

class Snake {
    constructor() {
      this.data = [
        { x: 6.y: 4.color: '#94dd94' },
        { x: 5.y: 4.color: 'white' },
        { x: 4.y: 4.color: 'white' },
        { x: 3.y: 4.color: 'white' },
        { x: 2.y: 4.color: 'white'},];this.direction = 'right';
      
      // Save the last data to be added to the end of the snake when eating food to make it longer
      this.lastData = {};
    }

    moveFn() {
      // The index of the last element
      let i = this.data.length - 1;

      // Save the last data to be added to the end of the snake when eating food to make it longer
      this.lastData = {
        x: this.data[i].x,
        y: this.data[i].y,
        color: this.data[i].color,
      };

      // The snake's body starts from the snake's tail, and every move moves the snake's grid from behind to the snake's grid in front
      for (i; i > 0; i--) {
        this.data[i].x = this.data[i - 1].x;
        this.data[i].y = this.data[i - 1].y;
      }

      // The snake's head moves according to direction
      switch (this.direction) {
        case 'left':
          this.data[0].x--;
          break;
        case 'right':
          this.data[0].x++;
          break;
        case 'top':
          this.data[0].y--;
          break;
        case 'bottom':
          this.data[0].y++;
          break;

        default:
          break; }}turnFn(direction) {
      let vertical = ['top'.'bottom'];
      let horizontal = ['left'.'right'];

      if (horizontal.includes(this.direction) && horizontal.includes(direction)) {
        return false;
      } else if (vertical.includes(this.direction) && vertical.includes(direction)) {
        return false;
      }

      this.direction = direction;
      return true;
    }

    eatFn() {
      this.data.push(this.lastData); }}Copy the code

• As shown in the code above, we need to initialize a snake’s position data and its initial direction of movement

• It also initializes a lastData, which holds the coordinate information for the last element of the snake’s body

  • Why do we do that? Let’s leave that for a moment

• MoveFn is the function responsible for controlling the snake’s movement logic

  • Every time we move we need to store the coordinates of the last element of the snake’s body
  • The essence of snake movement can be divided into snake body movement and snake head movement
  • With each step the snake takes, for each element of the snake’s body, the element behind the snake moves to the place of the element in front
  • So to move the snake, just walk through each snake element and assign the coordinates of the preceding snake element to the following snake element
  • So how do you move the snake’s head?
  • And it’s very simple, the head of the snake, it’s moving one space in the direction of the snake
  • And move forward one space, corresponding to is up, down, left and right four directions, is the corresponding abscissa or ordinate, plus or minus 1, the specific code can be seen abovemoveFnThe implementation of the

• TurnFn is the function that controls the logic of turning the snake’s head

  • This is easy to implement, just update the direction value
  • But there’s a boundary condition that needs to be determined
  • The current direction of movement of the snake cannot be the same or opposite to the direction of change, that is, the direction of change must be perpendicular to the original direction
  • To indicate whether the turn was successful, we can return a Boolean value at the end of the function

• EatFn is a function that implements the logic of the snake eating food

  • This explains the lastData problem
  • When a snake eats a meal, its body length should grow by one cell
  • Because every time it moves, the snake moves one cell forward
  • So when a snake eats food, it adds an element to its tail
  • Only the last element of the snake is recorded before the snake moves, and this data is added to the end of the snake data after the snake moves a cell

summary

• At this point the snake implementation is complete
• In order not to affect the reading experience, I will divide the implementation process of this demo into four articles, and the next one will realize the control class of the main process of the game

The last

• That’s all for today’s sharing. Please leave your comments in the comments section
• If you think the article is good, I hope you don’t begrudge praise, everyone’s encouragement is the biggest power I share 🥰