HTML5 Ping Pong Game Tutorial


In this tutorial we are going to create a complete working game example, albeit a very simple Ping Pong game. The aims of this tutorial are very simple:

  • Show you how to handle user input
  • Show you how to use a main loop (Scene OnTick)
  • Show you how to detect collisions
  • Show you how to use script to interact with the scene and resources

Creating the playing field

We are going to create a playing field that consists of two bats and a ball. The basic aim of the game is for you to knock the oncoming ball back towards the computer AI player and try to knock the ball past him. Lets take a look at how the play field is laid out in Booty5:

Booty5 ping pong game

Booty5 ping pong game

 

  1. Download the tutorial resources from here and unzip them to a folder somewhere
  2. Lets begin by creating a new project in Booty5 and dragging the supplied resources onto the Booty5 world tree to create the resources that are needed for this tutorial
  3. Drag and drop two bat brushes onto the scene to create 2 bats
  4. Select the top bat and change its angle to 180 degrees
  5. Drag the ball brush onto centre of the canvas to create a ball at the centre
  6. Select the ball actor and change its Velocity property to 50,300

Initialising the game

We want to set up some things when our scene is first created, we will only be setting them up once. To do this we add an action to the scenes OnCreate event handler. To do this:

  1. Select the scene in the world tree
  2. Scroll down to the events section and locate the event handler called OnCreate
  3. Click in OnCreate box and enter “CreateGame(this);”, this assigns a small piece if script to be called when the scene is first created. Note that the “this” parameter refers to the scene that is being created

If you take a look at the script file common.js in the world tree you will see the following:

The above script function is the one that will be called when the scene is created.

Updating the game

Most games use what’s called a main loop or tick function. This is basically some kind of functionality that is called every time the game needs to update (most modern devices update at around 60 times per second or more, otherwise known as the frame rate). In order to update our game logic we need to tap into this update mechanism and insert our game logic. To do this:

  1. Select the scene in the world tree
  2. Scroll down to the events section and locate the event handler called OnTick
  3. Click in OnTick box and enter “UpdateGame(this);”, this assigns a small piece of script to be called each time the scene is updated. Note that the “this” parameter refers to the scene that is being created

The scenes OnTick event is raised every time the game needs to update itself, we tap into this mechanism by responding to the OnTick event calling our own script function UpdateGame()

If you take a look at the UpdateGame() script function in common.js you will see that this is the place where our logic resides. This logic does the following:

  • Tracks the players finger and moves player1 to the players finger position
  • Keeps the ball within the scenes boundaries and resets it if it gets by a player
  • Controls the player2 AI opponent bat
  • Checks and handles collision between the bats and ball, playing a sound effect when a collision occurs

Lets take a look at the code for this function:

Now hit Test to run the game, congratulations you just created your first Ping Pong game.

You can view the finished project for this tutorial here.

You can download the complete finished projects from here.

Related topics:

 

3,590 total views, 3 views today