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 : 6188  
 
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

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

Flattening arrays in JavaScript

When we are handling arrays that are arrays or have multiple dimensions it can be very useful to know how to flatten arrays in JavaScript. That is to say, to…

How to populate an array with random numbers in JavaScript

Some of you might think that what we explained in the article on how to populate an array with numbers, apart from the didactic part, would not have much applicability…

How to populate an array with numbers in JavaScript

Populate an array with numbers in JavaScript The first step is to initialise the array. So today we are going to see a simple way to do it and see how…

Top Javascript Libraries and Frameworks Part 2

What are JavaScript frameworks?   JavaScript frameworks are application frameworks that allow developers to manipulate code to meet their particular needs. Web application development is like building a house. You have the option…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

Top JavaScript libraries and frameworks part 1

JavaScript libraries and frameworks make it easy to develop websites and applications with a wide variety of features and functionality, all with dynamic, flexible and engaging features. According to a 2020…

Looping through a matrix with JavaScript

We were already talking about how to multiply arrays in JavaScript and we realised that we had not explained something as simple as traversing an array with Javascript. So we…

How to multiply matrices in JavaScript

It may seem strange to want to know how to multiply matrices in JavaScript. But we will see some examples where it is useful to know how to perform this…

JavaScript Formatting Date Tips

Something that seems simple as the treatment of dates can become complex if we don't take into account how to treat them when presenting them to the user. That is…

How to make a multilingual website without redirect

Today, we're going to talk about how to implement a simple language selector on the basic static website, without the need of any backend or database calls or redirection to…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

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