Developing a JavaScript video game: Part 1

Developing a JavaScript video game: Part 1
by Janeth Kent Date: 17-02-2019 javascript video game course tutorial


The ecosystem of JavaScript is pretty huge. But today we decided to try something new: a videogame.

It is usually good to have requirements in place to select the right tool for the job (or the most glittering tool for the job) before evaluating any technology choice.

Not surprisingly, JavaScript has a lot of libraries and game engines to choose from, HTML5 game engines and this Github Wiki offers some options.

After some research, in particular reading Reddit threads and looking at the websites of the most popular frameworks, we take these 5 game frameworks into account:

  1. Phaser  A fast, fun and free open source HTML5 game framework, looks like it has many features, ooh Opal support.
  2. Pixi.js 2D webGL renderer with canvas fallback, its fast?!
  3. Create.js A suite of JavaScript libraries and tools designed for working with HTML5, not just games.
  4. Crafty.js A flexible framework for Javascript games, looks small maybe simple too.
  5. gameQuery Javascript game engine for jQuery, looks unmaintained and has a nice SteetFighter demo (unplayable) but hey, it’s jQuery.

We decided to write a tutorial about the game technology that we like to use, and so it's here. In this story, with PixiJS, a really simple and cool Javascript library, we'll start making a little shoot'em up game.

What we are going to do is make a spacecraft capable of moving and shooting, enemy waves and a beautiful animated background with moving clouds. The background will be focused on the first part (this story).

Are you ready?

Phase 1

Then let's start by setting up our project: well we've uploaded an already set code structure so we all work with the same base.

Download here the starter project

We'll need a local server to run the game: If you work with Windows or MAMP for macOS, I invite you to download WAMP, it's free and easy to use.

In index.html, we are importing the javascript files in the header:

<script src="../src/lib/pixi.min.js"></script>
<script src="../src/main.js"></script>

For every file we make, we have to do the same. The initialization of Pixi (based on the WebGL rendering engine), follows:

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

We're telling the game to cover the entire browser window for this tutorial, so if you try now you'll get a black background.

The main.js file is where the whole game begins. It's like a manager with the game's first-run function and the loop where we can tell the game what to do on each frame. When the game starts, what we want is a blue sky background, so let's update the init function:

function init()  
     {      
      renderer.backgroundColor = 0x22A7F0;                  
      renderer.render(stage);      
      loop();  
     }

Pixi uses the hex color format, so you have to write your preceding 0x color code. Let's save your browser and see the final result!

Add a few more movements : clouds

Let's add some floating clouds.

First of all, in the src folder (which will create and move the clouds), let's add a new CloudManager class file:

class CloudManager  
{      
      constructor()      
      {      
      }      
      update()      
      {      
      }  
}

Don’t forget to add it in the index.html file as we did for main.js:

The constructor is the gateway where we can add the spawning function for our clouds. Basically, what we want is a a a method that can create a cloud every X seconds.

window.setInterval(function()  
{  
}  
, 1000);

This code, inserted in the constructor, will call every 1000 milliseconds (= 1 second) what is inside the moustache brackets.

Now let's add cloud graphics to the assets folder, and because it's better we have two different images: (the clouds in our case are white with a transparent background, you can find it on https://www.freepik.com)

We have to load the images before the game starts, so add them in the Pixi.loader.add function:

PIXI.loader.add([      
  "assets/cloud_1.png",      
  "assets/cloud_2.png"  
]).load(init);

Okay, we can now display the clouds in the CloudManager setInterval method:

window.setInterval(function()
{
    const sprite = (Math.random() > 0.5 ? "cloud_1" : "cloud_2");
    this.cloud = new PIXI.Sprite(PIXI.loader.resources["assets/" + sprite + ".png"].texture);
    this.cloud.anchor.set(0.5, 0.5);
    this.cloud.position.set(renderer.width * 1.2, renderer.height * Math.random());
    stage.addChild(this.cloud);
}
, 1000);

We practically did:

  • First, we calculate a random number between 0 and 1, and either it is less than 0.5 so we store the first cloud/sprite in a constant or it is the second cloud/sprite.
  • Then, with the image in the previous line, we create a new sprite object.
  • This sprite's origin will be its top left corner, so we're setting its anchor point in the middle.
  • We have to display the cloud beyond the right edge of the screen, so that it moves through the screen to the left: Renderer.width * 1.2 is the left edge + the width of the screen + 20% of its width. We can be sure we don't see it spawn. Renderer.height * Math.random) (is between 0 and the height of the window for the y position. The vertical position of the cloud will therefore be located between the top and bottom of the screen.
  • Finally, we addChild this cloud to the stage.

Nothing should appear if you run this code now, and it's purposeful because they have to pop out of sight. So we have to try and move them. The update function is where it should be done. But we need to store the clouds in an array for iteration and positioning.

Let's make a new array in the constructor of CloudManager:

this.cloudsList = [];

And let's push the clouds inside after the stage.addChild function:

this.cloudsList.push(this.cloud);

And now....it works!

Wait, something really should frustrate us: Where are all the clouds going? If we don't remove them after they leave the screen, they will continue to exist and some performance problems can occur. For each one that deletes them when their horizontal position is slightly lower than the left border of the screen (so we can't see them popping out):

if (element.position.x < -renderer.width * 0.3) {
    element.destroy();
    array.splice(0, 1);
}

What about a random change in the size of the cloud? Add this to the creation block for the cloud:

let minScale = 0.2;
let maxScale = 1.2;
let scale = Math.random() * (maxScale - minScale) + minScale;
this.cloud.scale.set(scale, scale);

And now...all you have to do is wait for the second part of the tutorial...:-)

Read the second part.

 

 

Background vector created by photoroyalty - www.freepik.com

 

 
by Janeth Kent Date: 17-02-2019 javascript video game course tutorial hits : 6945  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

Difference between arrow and normal functions in JavaScript

In this tutorial we are going to see how arrow functions differ from normal JavaScript functions. We will also see when you should use one and when you should use…

JavaScript Arrow functions: What they are and how to use them

In this article we are going to see what they are and how to use JavaScript Arrow Functions, a new feature introduced with the ES6 standard (ECMAScript 6). What are Arrow…

How to insert an element into an array with JavaScript

In this brief tutorial you will learn how to insert one or more elements into an array with JavaScript. For this we will use the splice function. The splice function will not…

What is the difference between primitives types and objects in JavaScript?

In this short tutorial we are going to look at the differences between primitive types and objects in JavaScript. To start with, we're going to look at what primitive types…

How to get DOM elements with JavaScript

When you access any element of the DOM, it is usual to save it in a variable. This is something that at first might seem very simple, but if you…

How to reverse an array in JavaScript

In this tutorial we are going to see how you can change the order of the elements of an array so that they are inverted. You could use a loop…

How synchronize the scroll of two divs with JavaScript

In case you have two divs of different sizes you may sometimes want to scroll both at the same time but at different speeds depending on their size. For example,…

How to use the codePointAt method in JavaScript

The JavaScript codePointAt method has more or less the same function as the charCodeAt method, used to get the 16-bit Unicode representation of the character at a certain position in…

How to check if a value is a number in JavaScript

In this short tutorial we are going to look at the various methods that exist to find out if a value is a number in JavaScript.   1. Using the isNaN() function   One…

How to use the charCodeAt method in JavaScript

The charCodeAt method is accepted by strings in JavaScript, returning the 16-bit Unicode code of the character at the position we pass as a parameter to the method. The charCodeAt method…

How to use the charAt method in JavaScript

The charAt method is accepted by strings in JavaScript, returning the position of the character passed as a parameter within the string. If the string contains multiple occurrences of the character…

Strings in JavaScript: What they are and how to use them

In this tutorial we are going to explain what strings are and how they are used in JavaScript. The tutorial is intended for people who are learning to program in…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration