How To Use Developer Tools On HTML Games

Hello to everyone who is studying development and is interested in HTML-based games! Modern computing technology allows you to create cool computer games that have always been and will be popular. While playing such games, many people plunge into a fictional world and lose touch with reality. The development of the Internet and browser technologies has made it possible to create games using different developer tools.

In this article which is called ‘How to Use Developer Tools on HTML Games’, you will find out about developing stylish, trendy, and youthful HTML5 applications using the new Phaser framework.

It describes the process of installing the library and creating the classic game Pong. The choice of the genre, plot, and style of the game is quite an interesting task, and the success of the game may depend on the solution to these issues. In addition, the choice of technology on the basis of which the product will be created also brings its own nuances. The purpose of this article is to show you the basics of this interesting process using the Phaser framework. Read on and discover!

Phaser framework

Phaser is a mobile and desktop HTML5 game development engine based on the PIXI.js library. It supports Canvas and WebGL rendering, animated sprites, particles, audio, multiple input methods, and object physics. The sources are available both for viewing and for free modification.

It was created by Richard Davey, known for his active participation in the community of programmers using the Flixel framework. Richard does not hide that he was inspired by Flixel, so some of the things in Phaser will be familiar to experienced flashers. The first version of the new engine was released on September 13, 2013, this year, then not only the active development of the library was carried out, but also the writing of documentation.

How to setup local webserver

The first thing to start with is installing the library and the local webserver. To run and test applications, you need to install a local webserver. All examples from the library kit use PHP, so the server needs an appropriate one. For macOS, you can use MAMP, for Windows, Denwer or any other equivalent will do. After installing the webserver, you need to download the latest version of Phaser.

I recommend downloading the dev branch, as this version contains a number of very useful changes compared to the main one, including more documentation. To make sure everything is configured correctly, you can run the small Hello Phaser sample application. Create a hello phaser folder in the site’s directory of your web server and copy the three files from the Docs / Hello Phaser folder there. After that, launch your favorite browser and open the URL with the copied files, if all is going well, you will see the cute Phaser logo spinning.

The first important stage is already over, so you can move on to the development of the game itself.

The first step is to prepare the necessary files. Create a phaser-pong folder for it on your web server and copy the phaser.js file from the build folder with the framework sources there. Also create an assets folder in it, where you will store all the resources related to the game, and an index.html file (in fact, this is where your game will be). Copy the ball, paddle, and background images to the assets folder.

The main thing is to make sure that you load the right pictures into the game with the correct names and the correct sizes. Also, do not choose too large images, with their rendering problems may arise. Therefore, before using the photo, reduce its size to, say, 480×640 (the resolution of your game), and everything will be fine. As a result, the phaser-pong folder will contain assets, phaser.js, index.php. And there should be three pictures in the assets folder.

Finally, all the preparatory steps have been completed, and the actual development begins. Open index.html and paste the following code there:

<script src="phaser.js"></script>
<script type="text/javascript">
       var game = new Phaser.Game(480, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update });
       function preload() {
              game.load.image('bet', 'assets/bet.png');
              game.load.image('ball', 'assets/ball.png');
              game.load.image('background', 'assets/starfield.jpg');
      }
     function create() {
            game.add.tileSprite(0, 0, 480, 640, 'background');
     }

     function update () {
     }
</script>

Open the address of the new game in the browser and you will see its window with the drawn background. How to explain the actions of the written code? First, we import the library. Then we create an object of type Game, setting the resolution of our application, in this case, 480 pixels wide and 640 pixels high. Phaser.AUTO means that the render type will be selected automatically. You can specify Canvas or WebGL if you want. The fourth parameter sets the parent DOM object for the game, we do not specify it. The fifth parameter lists the main functions of the game. preload() contains the code to load resources, create() initializes the game, and update() contains the commands executed when the application is updated. On the desktop, update() is called about 60 times per second. It is this function that will contain the main game logic. In the create() function, we add a static sprite with the background of our game. The sprite fills the space specified in the first four parameters to tile sprite.

Now let’s move on to the most interesting thing – let’s fill our game with logic. After declaring the variable game and before the preload() function, we will declare objects with the player’s and computer’s rackets, a ball, and also indicate the speed of their movement:

var playerBet;
var computerBet;
var ball;

var computerBetSpeed = 190;
var ballSpeed = 300;

To create rackets, you need to write the createBet (x, y) function. Let’s add two calls to this function to create(), right after the background is created. The rackets will be added to the game after the background image, so we will see them on the screen:

playerBet = createBet(game.world.centerX, 600);
computerBet = createBet(game.world.centerX, 20);
Let's create a ballo in the same way by adding the following code immediately after calls to the createBet() function in create():
ball = game.add.sprite(game.world.centerX, game.world.centerY, 'ball');
ball.anchor.setTo(0.5, 0.5);
ball.body.collideWorldBounds = true;
ball.body.bounce.setTo(1, 1);

As a result, we will see that in our game there are two rackets and a ball, but still motionless. The picture turned out to be pretty, but I think we should revive it a little. It is necessary to add a variable responsible for the state of the ball and a function that will launch it. The function checks that the ball has not yet started, and in this case sets its velocity using the velocity field. We will hang up the function call by clicking the mouse button by writing the following line in create (). Now clicking with the mouse launches the ball, and it bounces off the boundaries of the game. After that, you need to edit the update() function to add movement to the paddles. The player’s paddle follows the mouse pointer, the computer’s paddle follows the ball. For the player’s paddle, we also added a limit on the maximum and minimum value of the x coordinate so that it does not try to jump out of the playing field. The whole point of the game is to bounce the ball with rackets, so you need to organize a check for collisions between the ball and the rackets. Fortunately, Phaser already has the corresponding functionality, so we just need to use it. To do this, write the following three lines at the end of the update():

game.physics.collide (ball, playerBet, ballHitsBet, null, this);
game.physics.collide (ball, computerBet, ballHitsBet, null, this);

The collide method checks the collision of two objects (the first two parameters) and calls the function specified in the third to perform any action on the colliding sprites. Upon collision, the ball changes its direction of motion depending on which part of the racket hits. It remains only to add a check for a conceded goal. If someone missed it, we put the ball in its original position in the center of the field. Congratulations, you made a game! You can open your browser, enjoy your fantastic and modern game, enjoy life and freshly acquired programming skills.

Conclusion

Obviously, the game still lacks a lot, at least scoring and determining the winners. But it seems to me that the things shown are enough for an introduction to development with Phaser. This technology supports many other cool features that you will learn as you work with it. Of course, like any other technology, Phaser also has some disadvantages. It is not very suitable for developing native mobile games, but it is great for cross-platform development. Thanks for reading the article ‘‘How To Use HTML Developer Tools On HTML Games’. Hope it was useful and interesting for you!