Book Image

Instant HTML5 2D Platformer

By : Aidan Temple
Book Image

Instant HTML5 2D Platformer

By: Aidan Temple

Overview of this book

Game development has traditionally only been accessible to those with experience in computer science and access to the best or most expensive development tools. However, with the advent of technologies such as HTML5 and the ability to self-publish, web-based games such as those on Facebook and smartphones are becoming more attractive to develop than ever before. Through the use of open technologies such as HTML5, anyone with even a basic understanding of games development can begin to develop video games in their spare time and publish them to the Web or as an application for mobile devices. Instant HTML5 2D Platformer is a practical, hands-on guide that provides you with a number of clear, step-by-step, task-based exercises, which are used to discuss game development and put into practice development techniques through the use of HTML5 and JavaScript. This book looks at the creation of a 2D platform-based game using the HTML5 canvas element. Instant HTML5 2D Platformer introduces you to HTML5 canvas through a number of exercises, which show what the canvas is capable of. The book contains a number of clear, practical, hands-on tasks that incrementally build on the concepts of game creation and result in a 2D HTML5 platform-based game. By undertaking the tasks within this book, you will learn how to develop your own 2D HTML5 game framework that you can use in the creation of your own video games, not just the game developed within this book. Alongside this framework you will learn how to develop and understand 2D animation, game logic, and how to handle user input devices.
Table of Contents (7 chapters)

Creating a graphical user interface (Must know)


Finally, no game would be complete without a user interface to display the player's score and health. In order to do this we will need to adjust the game frameworks draw method to allow text to be drawn to the canvas as well as introduction a number of variables which monitor and update the player's score and health.

How to do it...

  1. To begin with, we will introduce two new variables that hold the player's score and health at the top of the Main object.

    var score = 0;
    var health = 100;
  2. Next, we will draw the user interface elements to the screen, these elements are used to represent the player's score and health. Inside of the object manager 's Draw function place the following code before the drawImage function call:

    this.context.font = "30px Arial";
    this.context.fillText("Score: " + score, 15, 50);
    this.context.fillText("Health: " + health, 625, 50);
  3. Inside of the Enemy object's Update function, we will decrement the player's health each time they collide with an enemy. To do this update the collision detection check with the following:

    if(this.BoundingBox().Intersects(player.BoundingBox())) {
    this.DisposeEnemy();
    health -= 14;
    }
  4. We will also need to increase the player's score each time they collect a pickup. Therefore in order to do this we will need to update the collision detection check within the Pickup object with the following:

    if(this.BoundingBox().Intersects(player.BoundingBox())) {
      this.DisposePickup();
      effect.play();
      score++;
    }
  5. Once you have completed these final steps, your game should look something similar to the following screenshot:

How it works...

We begin by creating two variables that are responsible for holding the player's score and their health.

The values of these variables are then drawn to the canvas through the use of string concatenation and the HTML5's fillText function that outputs text, with no effects applied to it, to the canvas.

Both of the score and health values are updated inside of either the Enemy or Pickup Update functions. The score value is incremented by one each time the player collides with a collectible object. Similarly the health value is decremented each time the player collides with an enemy object. Each of these values is updated in real time and the player's results are reflected on the canvas.

Finally, we perform a check to see if the player has collided with a pickup, that is, a berry, and if they have we play our sound effect and increment the score.