Advertisement

Create a Simple Space Shooter Game in HTML5 With EaselJS

by
This post is part of a series called Shoot-'Em-Up.
An Introduction to FlashPunk: Creating a Spaceship Shoot-'Em-Up
Build a Stage3D Shoot-'Em-Up: Sprite Test

Last year, I showed you how to create a shoot-'em-up game with Flash and AS3. With HTML5's rise in popularity (and capabilities), let's take a look at how to do the same with HTML5, JavaScript, and EaselJS.


Final Result Preview

Let's take a look at the final result we will be working towards:



Click to play the demo.


Step 1: Brief Overview

Using pre-made sprites we will code an entertaining Space Shooter game in HTML5 using the EaselJS library.

The player will be able to control a spaceship and shoot multiple enemies while traveling in space.


Step 2: Interface

A simple and futuristic interface will be used, this involves bitmaps and more. I've used a great sprite library in the demo of this tutorial, these are part of the free Sinistar Clone Graphics.

The interface resources required for this tutorial can be found in the attached download.


Step 3: Get EaselJS

The EaselJS library will be used to build our game, make sure you read the Getting Started tutorial if you're new to this library.

You can download EaselJS from its official website.


Step 4: HTML Structure

Let's prepare our HTML document, it is a simple HTML structure to begin writing our app. Save this as Shooter.html.


Step 5: Hide Mobile Hightlight

Let's add a little bit of CSS too, this line will remove the default highlight when you tap on an element using a mobile browser; without this, the mobile experience would decrease drastically.


Step 6: JavaScript Libraries

The following code adds the necessary JavaScript libraries required for our app to work.

Main.js is the file we will use to store all our own functions for the game. Create it now and save it in the same folder as Shooter.html. You'll also need to download the EaselJS libraries listed.


Step 7: Call Main Function

In the next lines we call our main function; this is the function that will start our application, it'll be created later in our JavaScript code.


Step 8: Canvas Element

The Canvas is added in this line. We assign an ID to reference it later and also set its width and height.


Step 9: Starting the JavaScript

Let's begin our game creation!

Open your preferred JavaScript editor (any text editor will work, but you won't have syntax highlighting) and prepare to write your awesome game. Open the Main.js file you created earlier.


Step 10: Define Canvas

We'll start by defining all the graphic and logic variables.

The next variables represent the HTML canvas element and the stage that will be linked to it. (The stage variable will behave in a similar way to the stage in an AS3 Flash project.)


Step 11: Background

The next variables store the background images. Two tiled images are used to create an infinitely scrolling background.


Step 12: Ship

This is the Ship that will be used as the player character or hero.


Step 13: Enemy

Multiple enemies will be on the stage; they will use this as the source graphic.


Step 14: Boss

A boss will be present in the game, bigger and with more health than the other enemies. These variables are used to instantiate it.


Step 15: Lives

The "life" icon. Three lives are given at the start, and you lose one when hit by an enemy.


Step 16: Bullets

This is your weapon: fire bullets at the enemies to kill them. This variable stores the source image.


Step 17: Alert Graphics

Two alerts are used in the game, one for when you win and one for when you lose. We'll see how to determine a win or a loss later in this tutorial.


Step 16: Variables

These are the variables we'll use, read the comments in the code to know more about them. Some of their names are self-explanatory and so have no comments.


Step 17: Sounds

We'll use sound effects to enhance the feeling of the game. You can find the sounds used in this example on Soungle.com using the keywords space, explosion and laser.


Step 18: Main Function

The Main() function will be the first to execute when the web page is loaded, because it is referred to in the onload attribute of the HTML document (see Step 7).

It calls the necessary functions to start the game. We'll create those functions in the next steps - everything from Step 19 to Step 23 should go inside this function.


Step 19: Link Canvas

This code gets the HTML canvas ID and links it to the EaselJS Stage class. This will make the stage variable behave like the stage class in AS3.


Step 20: Enable Mouse Events

Mouse Events are disabled by default in EaselJS to improve performance; as we need those in the game we add the following line.


Step 21: Load Sounds

We'll use SoundJS to add sounds to our game. SoundJS's addBatch method uses an array of three parameters for each call:

  • name: The instance name you want the sound to have - this will be used to play the sound later.
  • src: The URL of the sound file.
  • instances: The number of instances that can be played at the same time.

Step 22: Load Graphics

This code is used to preload the graphics with the help of a function that we'll write later. It points each Image object that we created before to the source PNG file in our document folder. A name is given to detect which image is loaded, and lastly the function that handles the loaded images is called.


Step 23: Set Ticker

The Ticker class provides a centralized "tick", broadcast at a set interval. We can use its tick() function to run certain code at a regular frequency.

The following code sets the frame rate to 30 and defines the stage as the listener for the ticks.

The TweenJS class will listen to this tick to perform the animations.


Step 24: Preload Function

Every time a graphic is loaded this function will run. It will assign each image to a bitmap object and check that all the elements are loaded before proceeding to call addGameView.


Step 25: Add Game View

When all the graphics are loaded the addGameView function is called. This function will add the ship, lives counter, score, and backgrounds to the stage.


Step 26: Move Ship

The player's ship will be mouse controlled, and we use this function to handle that:

e.stageX refers to the mouse's x-coordinate, and this function is called whenever the mouse moved.


Step 27: Shoot

Our ship will be able to shoot bullets to destroy and protect itself from enemies. This function will run every time the user clicks the stage and will place a bullet in front of the ship that will be later moved by the update() function. It also plays a shooting sound.


Step 28: Add Enemy Function

It wouldn't be a shooter without something to shoot. Here, a setInterval() is used to create an enemy every 1000 milliseconds (you can change that value in the next step) which is later moved by the update() function.


Step 29: Start Game

These lines will add the necessary listeners to the stage and timer; this includes mouse events, timed events (via setInterval) and Ticker events that will update the game every frame.


Step 30: Move Background

The background is moved every frame to simulate space travel; when the lower background sprite reaches the stage limit it is moved back to the top, creating an infinite loop.


Step 31: Move Bullets

The next lines of code check whether there are bullets in stage; if so, the bullets are moved upwards.


Step 32: Remove Offstage Bullets

Let's add some lines to detect the bullet position, and use this to destroy a bullet when it is no longer visible.


Step 33: Show Boss

We'll add a big bad boss to the game. When the user reaches a certain score, the boss will appear:


Step 34: Move Enemies

The enemies, like the bullets, are also moved every frame. This code finds all the enemies in the stage using the enemies container, and moves them each 5px downwards.


Step 35: Remove Off-Stage Enemies

We also check the enemies' positions to destroy them when no longer visible.


Step 36: Bullet - Enemy Collision

The bullets in the container are tested for collision with the enemies; when this happens, both are removed from the stage, a sound is played and the score is updated.


Step 37: Bullet - Boss Collision

The following code handles the boss collisions, it uses the same method used in the bullet-enemy collision loop. Here we use the bossHealth variable to determine when the boss is defeated.


Step 38: Ship - Enemy Collision

Here we check whether an enemy collides with the player's ship; if it does, a sound is played, a life is removed, and the ship is animated.


Step 39: Check for Win or Lose

The player wins when the boss loses all its health and loses if all their own lives are lost. The next lines detect those situations and call an alert function using the correct parameter.


Step 40: Alert

The Alert shows the player information about the status of the game; it is shown when a game event is reached. It removes the game listeners and shows the appropiate message.


Step 41: Test



Save your work (if you haven't) and open the HTML file in the browser to see your HTML5 game working!


Conclusion

You've learned how to create a Space Shooter game with all its basic features, try to expand it using what you already know. A good start would be making the enemies or boss shoot back at the player.

I hope you liked this tutorial, thank you for reading!

Advertisement