In this tutorial, we will create a simplified version of Pong for 1 player to play using a micro:bit.
The challenge is to create the game considering that the micro:bit screen consists of a 2D grid of 25 LEDs (5 by 5 grid).
As opposed to the real game of Pong, we will only use one paddle, located at the bottom of the screen. The player will control the paddle using the A button (to move the paddle to the left) and the B button (to move the paddle to the right).
A sprite will be used to represent the ball which will be bouncing against the top, left and right edges of the screen and against the paddle. If the use fails to catch the ball, the ball will reach the bottom edge of the screen which will trigger a game over message.
To implement this game you will need to use the micro:bit website to create the code using the JavaScript Block Editor.
Step 1: Initialising the game
First we will initialise the main sprites:
The main sprites are:
- The ball sprite will start on the top row (y = 0) at a random x position (between 0 and 4). The ball will also be given a direction using two variables: directionX and directionY. The following diagram represents the 6 different directions of the ball sprite on the 2D grid.
When we first initialise the ball and position it at the top of the screen, we also set a direction where the ball is aiming downwards (direction 4, 5 or 6 from the diagram above). - The paddle consists of 2 sprites, paddleA and paddleB, as a sprite only consists of 1 LED, we used two sprites next to each other to create a wider paddle (as wide as 2 LEDs). The paddle is located on the bottom row (y = 4) and can be moved horizontally by pressing the left and right buttons of the micro:bit using the following code:
- The ball should bounce against the left, top, and right edges of the screen. Each bounce will affect its direction.
- The ball should bounce against the paddle. Once again, a bounce will affect the direction of the ball.
- If the ball reaches the bottom edge of the screen, a game over message should be displayed.
Step 2: Bouncing ball algorithm
The most complex part of the game is to control the movement of the ball sprite. Every 500ms, the ball moves in the direction set by the (directionX,directionY) vector. Based on its new position the code provided below detects different possible scenarios:
The code is now complete. You can recreate the game and then customise it further by adding a scoring system, or by making the ball move faster (using a shorter delay/pause) every time the ball hits the paddle.
LMC Simulator
Logic Gates Circuits
Network Designer
Flowchart Studio
Online Python IDE
