Vertical Dodge Game

This is a very simple game involving dodging planets and collecting glowing stars. There is a two layer parallax repeating starfield in the background. This uses sprites and the RenderKit to create the hardware accelerated rendering of the game-play. This is all wrapped up into a component. This is really designed to be a singleton and made fullscreen, there are global variables in the code which mean putting multiple instances on the same page will result in them sharing a lot of the same behavior.

Here is the file with the JavaScript and the sprite and atlas you need to add to your Umajin project vertical_dodge.zip.  If you would like to change the images in the sprite-sheet, they are in the space_textures.zip file.  This file includes the individual images, the atlas file and a project file for CodeAndWeb’s TexturePacker, a very handy tool for making sprite-sheets.

We are not going to include all of the code in this article, grab all the code from the zip file at the top of the example.

We are going to describe the two main function that you might want to modify. The first is the init function. This is what creates all of the sub components for the game. The first is the renderkit. This is the primary component and holds all of our background sprites, planet sprite and the ship sprite. Then we create a text component to hold the score.

Next we actually create all the sprites inside the renderkit and finally bind events to the down, move and up events – AND importantly the tick event. You need to be careful using the tick event as it fires every frame. This is great for animation, but you need to make sure you don’t do things which will be slow or your component will make your application laggy or unresponsive.

Here is the drawing event called every tick. This is where the main work is done. First the position is used to determine an offset for the stars in the background (the parallax effect). Then the main ship position is updated and defaults are setup for the first frame.

Then the background layers are moved, the ship is moved and the falling things are all updated.

While looping through the falling things we check to see if they have hit the top or tail of our spaceship and crash raising the game over event. If the item we hit is a star however – we gets points instead. Finally we check if any falling items are off the bottom and we restart them at the top with a new speed and position.