How to Create a 2D Snake Game in Flutter

In this video, you will be changing the positions stored in the positions list. This will be done with the following considerations in mind.

1. If positions list has no items, we add a new position to the list. We have already achieved this in the last episode.
2. If positions list has one or more than one positions stored. we change them such that positions[index] becomes the positions[index+1], positions[index-1] becomes the position at positions[index] and so on. This will create a sense of motion.
3. Finally, create a new position for the 0th index based on the current direction of movement. As of now, this is defined by the direction variable and is set to Direction.right at the top of the file. You can change that if you want.

Let’s begin.

To transform the positions in the positions list, we need to loop over and move the items. In the draw method, let’s add a for-loop to do this.

void draw() async {
  ...
  
  // Add this
  for (int i = positions.length - 1; i > 0; i--) {
    positions[i] = positions[i - 1];
  }
}

With this code, assuming that the positions list contains 3 positions, the position stored at index 1 will be saved at index 2, position saved at index 0 will be saved at index 1. We are doing this backwards so we do not lose any items during this process. Once this loop ends, the positions at index 0 and 1 become the same and we are ready to create a new position value for index 0.

As of now, the positions list only contains one position but we will soon extend it to contain more than one positions to create a long snake.

Next, we need to create a new position, based on the current direction of the Snake’s movement and add it at 0th index in the positions list.

Right after the code that we just added to the draw method, let’s add the following line of code.

positions[0] = getNextPosition(positions[0]);

We still need to implement the getNextPosition method. So, let’s get to that.

Here’s the signature of the method.

Offset getNextPosition(Offset position) {}

As you can see, the method takes a position which is an object of type Offset and returns a similar object. Let’s try to understand the working of this function with an example. Consider that the input position contains (4, 5) which represents the snake’s head’s current position in a simplified manner. We need to calculate the next position of the snake’s head based on the direction of movement.

Assuming that the snake moves one unit distance at a time, and the current direction is left, the next position would be (3, 5) which basically means that the x-coordinate value is reduced by 1 and y-coordindate value stays the same. Similarly, if the direction is right, the next value would be (5, 5). You get the point.

Now, let’s write this logic inside the function.

Add the following code to the body of getNextPosition.

Offset getNextPosition(Offset position) {
    Offset nextPosition;

    if (direction == Direction.right) {
      nextPosition = Offset(position.dx + step, position.dy);
    } else if (direction == Direction.left) {
      nextPosition = Offset(position.dx - step, position.dy);
    } else if (direction == Direction.up) {
      nextPosition = Offset(position.dx, position.dy - step);
    } else if (direction == Direction.down) {
      nextPosition = Offset(position.dx, position.dy + step);
    }

    return nextPosition;
  }

In the above code, we are creating a new position. The x and y values of the new position are calculated using the input position and the current direction of movement. Finally, we return the new position.

Now that we have everything in place. Let’s try this out.

Save all the files and restart the application.

You should see a piece rendered on the screen. Now hot-reload the application. Make sure to do not restart the applicaiton. When you hot-reload, the piece should move one step to the right. If you repeat the action, the piece will move again.

The piece moves to the right because the current direction is Direction.right by default. You can try changing this value to a different direction and the piece will move in that direction.

As of now, to see the snake’s movements, you have to hot-reload. Later, we will write code to do this as well which will drive the animation in the game.

For now, let’s move on to having multiple pieces on the screen and actually render a snake.