Apple-Eating Snake in MakeCode Arcade

 

The apple-eating snake is a well-known game that has been implemented on many different platforms. Two years ago, we built it using Scratch 2.0. In  MakeCode Arcade, it was even easier to build. Screenshots from the Arcade simulator, which runs in a browser, are shown below.

Apple_eating Snake on iPhone Double

How to Play the Apple-Eating Snake Game

The game starts with a short snake and 1-3 apples randomly placed on the screen (left screenshot). The player moves the snake up, down, left or right with the pointers. Each time the snake’s head (green) intersects an apple, the score is upped by one and the snake’s body grows longer.. The game ends with the snake head either hits a wall or hits the snakes body. The right screenshot above shows the game at 37 points with a much longer snake.  Game nuisances include:

    1. The snake head cannot move backward because that would intersect the snake body. The snake head can be alongside the body, but cannot intersect it.
    2. In the Arcade simulator if the player touches the area between two pointers (e.g., the left and up), the snake moves diagonally. If done by accident, the snake head may hit the wall or the snake’s body unexpectedly and end the game.

In addition to the Arcade simulator, which runs in a browser, an Arcade game can also be run on several devices. In the photo below, the Meowbit is running the Apple-Eating Snake game. The last section of the post will explain how to download a MakeCode Arcade game to a Meowbit.

 

The Code

Game Initialization

The code below initializes the game by setting the background color, setting sprites of which the snake is composed to 8 pixels, calling functions to create the snake head and body, creating the apples and setting the score to 0.

on start code

The function creating the snake’s head creates a square green image to be used in creating the sprite. The last block requires the snake head to stay on the screen. If the head goes off the screen, the game will end.

creak snake head

Creating the snake’s body is a little more complicated because a snake has only one head but may have many links (sprites) in its body. The links in the snake are stored in a list that is an array of sprites of type snake_body_sprite. A function is called within a loop to build a snake of 4 sprites, each positioned below the preceding. Of course, the first body sprite is positioned just below the snake head.

The function make_body_sprite takes two arguments that are the x and y positions of the sprite to be created. Because the initial snake is to be positioned vertically, the x position is always the same as the snake head, while the y position varies.

create snake body

The function create_random_apples generates one or two apples keeping the total number less than or equal to 3. Each apple is placed at a random position on the screen.

create random apples

Move Snake with Up, Down, Left and Right Buttons

The buttons move the snake. Each button

  1. moves the snake head in the direction indicated by the button,
  2. places a body sprite where the head was and
  3. removes a sprite from the end of the snake.

Because steps 1 and 2 are the same for each of the four directions, the function below embodies the two steps. Rather than destroy one sprite and create another, the tail end sprite is moved to the prior head position. The moved sprite must be both physically moved on the screen and also moved in body sprite list  to reflect its new position.

move body sprite.PNG

The function for each direction, calls the function above, then moves the head in the appropriate direction. Each direction has two button events: one for when the button is pressed and released quickly and the other for when the button is held down. The same action is performed in each case. When the button is held down, the direction function (e.g., move_up) may be called many times.

pointer buttons

Score by Eating an Apple

The code below is triggered when the snake head overlaps with an apple. In this code segment, then score is incremented, the apple sprite is destroyed, the apple count is decremented, the snake is lengthened by one sprite and more apples are created.

The challenge in lengthening the snake was to place the new sprite at the end of the snake. But, which direction from the current last sprite? The answer depends on the positions of the last two sprites. The new end sprite extends the line between the prior two sprites. In the code below, the variables dx and dy are the change in x and y coordinates. This calculation is done instead of numerous if blocks that would go something like:

If the last block is below the next to the last block, place the new block below the last block. If the last block is left of the next to the last block, place the new block to the left of the last block. And so on.

score

End Game

The game ends when the snake head intersects the border (wall) or the snake body. The event below ends the game when the head intersects the body. The function create_snake_head specifies that the game ends when the head intersects the wall.

end game if hit wall

Download and Run Code

Run this game by clicking on the URL below.

https://makecode.com/_bdkguYHP4iEC

This will open a browser as shown below. Have fun playing the game.

snake in browser

To see the code, click the Show Code button on the screen above. It is  near the top left after the game title. This will open the browser window below.

code in browser

Using the browser window above, one can download and run the code in the normal MakeCode Arcade environment. In the browser window above Just click on the little icon to the left in the red border just below the game title. This will open the browser window below.

snake in makecode with sim

From the browser window above, the game can be saved to a hard drive by clicking the disk icon to the right of the game name (Apple Eating Snake).

The purple Download button is for downloading the game to another device, such as the Kittenbot Meowbit, which is shown in the screenshot below connected by USB to a laptop. This photo was taken just after the game Apple-Eating Snake was downloaded to the Meowbit.

Meowbit-connected-to-computer-USB.jpg

When the Meowbit is connected by USB to a computer running MakeCode Arcade in a browser window, pressing the Download button will display the option to save to the Meowbit, which appears as a hard drive (similar to a phone) in the Windows File Explorer window (left).

 

The  Meowbit display should be as shown on the right (ready to download). The ready to download display will be shown on the Meowbit when it is connected by USB to a computer and powered on. When the download is complete, the screen will show the game. At this point, the Meowbit can be powered off and disconnected from the computer. It can be connected to a battery, then when powered back on, the game will be displayed.