Home Blog technologiczny Creating game for android using JavaScript #1 | How to start
Mobile Front-end

Creating game for android using JavaScript #1 | How to start

Józef Kała
06.04.2017

Few years ago, when Android had taken lead of the mobile market, I had decided to create game and become a millionaire as a “thousands” of mobile game developers.

How to become a millionaire

Few years ago, when Android had taken lead of the mobile market, I had decided to create game and become a millionaire as a “thousands” of mobile game developers. Unfortunately I was not fully succeed. I’m not a millionaire but I have to say that my work has paid off. I had approximately one million users (pride and fame), gain a lot experience, which is so important on developers market and also earned  some money (which of course was my primal instinct and greed).

How to start? Idea!

One of the most important experience gained from my journey through the android world, was knowledge, that amount of time invested to the project, was totally disproportionate to achieved results. It doesn’t matter how many sleepless night have you spend making your perfect, ideal and beautiful game. It doesn’t matter what you are thinking about your project. So what matters? If your customers think same as you.

Guided experience I can say that the simplest ideas are the best ideas. My ideas were not as successful as I wanted, and I don’t have new one so let’s steal it. There is so many clones on android store, so why not another one?

FlappyBird! It’s so simple! Small bird flying through the endless sky tries to avoid of  standing pipes; of courses with our little help. Brilliant!

What technology and why JavaScript?

Why Javascript? Because of simplicity! I want to show how easy it is, to create something interesting just in pure JavaScript language and how powerful it can be. Also using new ECMAScript 6 syntax, our code can be clean and simple. Additionally our application will be multiplatform which will help us to spread and promote our work.

THE Game

Canvas


            HTML5 <canvas> element creates a fixed-size drawing surface. This surface exposes one or more rendering context, which are used to create and manipulate its content. Because our game will be two dimensional, we will focus on 2d context. Let’s  start with simple index.html page with canvas element.]

<!DOCTYPE html>
<html>
    <head>
         <title>Flappy Bird</title>
    </head>
    <body>
         <canvas id="canvas"></canvas>
         <script> … </script>
    </body>
</html>

This is our base. Between <script> tags, we should add all JavaScript code that we’ll create.

Now we are ready to create the main Game class in Game.js file. I decided that this class will receive config argument with configurable basic game options. One of the first mandatory thing is to set up canvas width and height. Of course it is possible to do it within canvas tag using attributes, but it is better to have those values in config object. Those values will be used by us to properly display various objects, so do it in class constructor. Canvas element is HTML element so we can get it from document using document.getElementById(’canvas’).

All graphics will be rendered via canvas context, which is delivered by canvas.getContext(’2d’) method.

class Game {
    constructor(config) {
        this.canvas = document.getElementById('canvas'),
        this.canvas.width = config.width;
        this.canvas.height = config.height;
        this.ctx = this.canvas.getContext('2d');
        ...
    }	 
     ...
 }

Game Loop (render)

Most important part of our app is game loop. This method will render graphics and update state of application.

render () {
      let now = Date.now(),
          delta = now - this.lastUpdate;
      this.lastUpdate = now;

      this.update(delta);
      this.draw();

      requestAnimationFrame(this.render.bind(this));
 }

requestAnimationFrame is relatively new Api that is recommended for implementing interactive applications in browser. It asks the browser to call our rendering method when browser is available and ensure that content is not rendering when page is in the background. It also aims for 60 FPS callback rate but unfortunately doesn’t guarantee it, so we have to keep track of how much time passed since the last render. It is necessary because it will help us to ensure that the game elements will move with the same speed independently from the real FPS rate.  Render method calls two other method update and draw.

In draw method, based on the various states of app we can decided what should be currently displayed on the screen. If application is opened, we will show menu. When game is started we will display game content. Game is over? We have to show dialog with information about gained score.

Update method will calculate and set up objects positions, switch animation frames and calculate object collisions. There the delta parameter (how much time passed since the last render) will be useful to make proportional object ‘movement’ by calculating its positions.

To be continued…

Poznaj mageek of j‑labs i daj się zadziwić, jak może wyglądać praca z j‑People!

Skontaktuj się z nami