I've created a demo for this section that may be accessed here. In this section, I will explain how I created different parts of the game.
Subsections
01 Controls Screen
02 Background and Counters
03 The Player
04 Collectibles and Obstacles
Instead of the usual “START” image that shows up, I simply replaced the file start.png
with my own image, displayed below in Figure 10.01.
nineleap.enchant.js
plugin takes the image start.png
from the local directory and centers it on the screen. For more on plugins, refer to the Plugins Section.
The background is a black image, standard white stars, and colored shooting stars.
The black image is just a black rectangle with the height and width of the stage as its dimensions. It was created and loaded on the screen first.
The standard white stars were first created as a Star
class which takes in an x-position
and y-position
as parameters. The method initStars()
is called once the game is initialized, which then adds 100 stars to the scene at randomly chosen positions using the stage width and height as the range. The Star
sprite moves left or right based on the player’s input in order to give the illusion that the player is moving through space. If a star moves past the left side of the screen, it’s automatically moved to the right side of the screen and vice versa.
A shooting star is added to the scene once every 30 frames using the bigParticle
class. First, the colored sprite is chosen from either red, blue, or green. Once a color is chosen, a bigParticle
is instantiated with an x-position
, y-position
, and the chosen color as parameters. The bigParticle sprite moves from right to left in a sin wave and adds a Twinkling
sprite every 3 frames. The Twinkling
sprite lowers its opacity until it’s no longer visible, upon which it is removed from the scene. Once the bigParticle
sprite has moved past the left side of the screen, it is also removed from the scene.
The score, health, and fuel counters were created using Labels. Each label’s number is determined by the game score, player health, and player fuel respectively. Once the player’s health reaches 2, the player health counter’s color is set to red. If the player fuel is below 100, the player’s health counter’s color is set to red and a sound alerts the player. Whenever the player collects a gem, the fuel counter is set to green for a few frames.
The background music is a file called bgm.ogg
that was added to the preloader. As soon as the game is initialized, the play()
method is called on the game asset bgm.ogg
and starts it playing in the background.
You can read more about Sprites, Labels, and Sound in their respective sections: Sprites, Labels, Sound.
The player was created as a Player
class, which is added once the game begins. Aside from the standard attributes, the Player
class also has health
and fuel
attributes. Player health decreases every time its ouch()
method is called, which occurs when the player collides with a satellite, laser, or asteroid. Player fuel decreases whenever the player moves around on the screen or fires a laser. The Player class moves around based on game.input
which it receives from the arrow keys. The spacebar was bound to game.input.A
using game.keybind()
.
When the spacebar is pressed, a Projectile
is added to the scene. The projectile moves from left to right, and is removed from the scene with it collides with an obstacle or goes past the right side of the screen.
You can read more about player input in its section: Player Input.
The gems are added once every thirty frames using the Gem
class. Upon collision with the player, a gem adds 50 points to the game score, 50 units of fuel
to the player’s fuel
attribute, and removes itself from the scene. If a gem goes past the left side of the screen before its collected, it is simply removed from the scene.
The satellite is added once every 45 frames using the Satellite
class. Using a method called inrange()
, the Satellite
class checks if the player’s y-value
is within 5 units of its firing range. If this condition is true, the Satellite
class adds a projectile using the BadLaser
class. If either the Satellite
or the BadLaser
collides with the player sprite, it is removed from the scene and the player sprite’s ouch()
method is called.
The asteroid is added once every 60 frames using the BigRock
class. If the BigRock
is destroyed by lasers fired by the player or collides with the player, it adds 3 gems to the scene before removing itself.
If the Satellite
or BigRock
go past the left side of the scene before being destroyed, they are simply removed from the scene.
You can read more about collisions in its section: Collisions.
The completed game is displayed below in Figure 10.01.