[Tutorial] HTML5 Game Development with Cocos2d-JS - Firefox OS


In this post we will create a simple HTML5 game for Firefox OS, Web and mobile devices using Cocos2D-JS.

I’ll show you the basic of sprites, sound and touch events.

At the end of this post, you will be able to start with HTML5 game development.

I - About the game

We are going to create a simple game, called Slide and Survive. You can download it here for Android , download here for Firefox OS, or play in this page.

In this game, you just need to move the green square, avoiding contact with the red ones. The objective is to stay as longer as possible without any contact.

Get updates Follow @aron-bordin
Star it: Star
Contribute: Fork
Download: Download

II - Creating the project

If you don’t have Cocos2d-js downloaded, take a look in this documentation. 

In this post you will see how to download and configure Cocos, enable autocompletion, and cocos-console. After it, create a new Cocos2d-html5 project, with the command:

cocos new SlideAndSurvive -l js

This command will create a HTML5 project, called SlideAndSurvive inside the folder SlideAndSurvive. Go to my github page and download the game source, go to the res folder to get the assets. Now, we are able to start the development.

III - Configuring the assets and the main file

Cocos help us to use all resource files easily.

To create a map of all resource files, open the src/resource.js.

You can delete the auto-generated. In this file, we will create two vars:

  • res: An object to store all file locations and virtual names;
  • g_resources: A list to store our resources.

So, first create a object called res with the path and name for each resource file.

In this game, we are using four, a green square, a red square, a sound and a font. Create like this one:

var res = {
  Square_png : 'res/bloco.png',
  Enemy_png : 'res/inimigo.png',
  TitleFont: 'res/fonts/Marker Felt.ttf',
  Music: 'res/fundo.mp3'

Now create a list to store all resource files:

var g_resources = [

With this list, will be easier to find our game resources in the development.

Now open your main.js, and replace with the following code:

cc.game.onStart = function(){
  cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
  //load resources
  cc.LoaderScene.preload(g_resources, function () {
    cc.director.runScene(new GameScene());//run the GameScene
    }, this);

This code will create a view with the resolution 800x450, but don’t worry, Cocos is perfect, and independent of the size of your screen, it will be automatically resized, and you can code to any resolution use this values.

For example, if this game run on a 320x240 screen, the Cocos will understand that this screen has 800x450, so if you set the player to the position 750x400, it will work perfectly!!

The second command allow the view to auto resize with the browser. And after load the resources, we will create a new scene, the GameScene. You will code all the GameScene in the following topic. So, let’s go!!

IV - Game Scene

This code is in the file src/app.js. First, to make it easier, replace this file with the following code:

var Objs = { //global objects
  EnemiesDirection: [],
  Enemies: [],
  Square: null,
  Title: null,
  gameTime: null,
  gameTimeInfo: null,
  gameTimeTotal: null,
  gameBestInfo: null,
  gameBestValue: null,
  gameInfo1: null,
  gameInfo2: null,
  soundInfo: null

var timePlayed = 0; //game time
var isAlive = false; //is the game is running

function moveSquare(destination){ //move the green square to destination

function gameStart(){//game start, hide texts

function gameOver(){//game over, check score

var GameLayer = cc.Layer.extend({//main scene
  ctor:function () {

  update: function(dt){//update callback, run every frame

  checkCollision: function(){

  onTouchBegan: function(touch, event){//touchbegan callback

  onTouchMoved: function(touch, event){//touchmoved callback

  addTexts: function(){//add the texts to the screen

  SoundClicked: function(){

  addSquares: function(){//add the squares to the scene

  generateDirection: function(){//generate a random direction

var GameScene = cc.Scene.extend({//create the scene and start the game
  onEnter:function () {
    var layer = new GameLayer();

This code has all functions declaration, and some public functions and public variables. Now, let’s code the game! The first functions is ctor. It’s the constructor of our scene.


ctor:function () {
    // 1. super init first

    var eventListener = cc.EventListener.create({//event listener
        event: cc.EventListener.TOUCH_ONE_BY_ONE, //one click
        swallowTouches: true, //is onTouch return true, stop event propagation
        onTouchBegan: this.onTouchBegan, //callbacks
        onTouchMoved: this.onTouchMoved});

    this.addSquares();//add enemies square
    this.addTexts(); //add texts

    cc.eventManager.addListener(eventListener, Objs.Square);//start the event listener

    for(var i = 0; i < 4; i++)
        Objs.EnemiesDirection[i] = this.generateDirection();//generate a random movement direction

    this.scheduleUpdate();//runs update() every frame



    addSquares: function(){//add the squares to the scene
        Objs.Square = cc.Sprite.create(res.Square_png);


        var En = Objs.Enemies;
        for(var i = 0; i < 4; i++) {
            En[i] = cc.Sprite.create(res.Enemy_png);
        En[0].setPosition(cc.p(100, 100));

        En[1].setPosition(cc.p(700, 100));

        En[2].setPosition(cc.p(700, 350));

        En[3].setPosition(cc.p(100, 350));

        Objs.Enemies = En;



addTexts: function(){//add the texts to the screen
    var bestTime = localStorage.getItem("bestTime");//load the best time from localStorage
    Objs.Title = cc.LabelTTF.create("Slide & Survive", res.TitleFont, 40);
    Objs.Title.setPosition(cc.p(400, 350));

    Objs.gameTime = cc.LabelTTF.create("0.000", res.TitleFont, 20);
    Objs.gameTime.setPosition(cc.p(50, 10));

    Objs.gameTimeInfo = cc.LabelTTF.create("Time: ", res.TitleFont, 26);
    Objs.gameTimeInfo.setPosition(cc.p(200, 225));

    Objs.gameTimeTotal = cc.LabelTTF.create("0.000", res.TitleFont, 26);
    Objs.gameTimeTotal.setPosition(cc.p(300, 225));

    Objs.gameBestInfo = cc.LabelTTF.create("Best time: ", res.TitleFont, 26);
    Objs.gameBestInfo.setPosition(cc.p(540, 225));

    //check if there is a bestTime, if not set the default as 0
    Objs.gameBestValue = cc.LabelTTF.create(bestTime ? parseFloat(bestTime).toFixed(3) : "0.000", res.TitleFont, 26);
    Objs.gameBestValue.setPosition(cc.p(650, 225));

    Objs.gameInfo1 = cc.LabelTTF.create("Move the green square avoiding contact with the red ones!",
        res.TitleFont, 20);
    Objs.gameInfo1.setPosition(cc.p(400, 310));

    Objs.gameInfo2 = cc.LabelTTF.create("Are you able to do it???",
        res.TitleFont, 20);
    Objs.gameInfo2.setPosition(cc.p(440, 290));

    var useSound = localStorage.getItem("Sound");
    if(useSound == 1) {
        cc.audioEngine.playMusic(res.Music, true);
    } else {
        if(useSound != 0) {
            localStorage.setItem("Sound", 1);
            useSound = 1;
    Objs.soundInfo = cc.MenuItemFont.create(useSound == 1 ? "Disable sound" : "Enable Sound", this.SoundClicked, this);

    var Menu = cc.Menu.create(Objs.soundInfo);
    Menu.setPosition(680, 20);


Now, the generateDirection() function will generate a director to each enemy block. Each block will have a random direction.


generateDirection: function(){//generate a random direction
    var i = Math.floor((Math.random() * 3));
    var v = 7;
    switch (i){
        case 0:
            return cc.p(v, v);
        case 1:
            return cc.p(-v, v);
        case 2:
            return cc.p(-v, -v);
        case 3:
            return cc.p(v, -v);
    return cc.p(0, 0);

The update() function will be called each frame, so we can put the game logic here.


    update: function(dt){//update callback, run every frame
        if(!isAlive)//if is not running, stop
        timePlayed += dt; //add dt to game time
        Objs.gameTime.setString(timePlayed.toFixed(3));//update game time label

        var size = cc.director.getWinSize();//get win size

        for(var i = 0; i < 4; i++){//move the enemies
            var pos = Objs.Enemies[i].getPosition();

            if((pos.x <= 0) || (pos.x >= size.width))//the enemy position will be relative with his direction rect
                Objs.EnemiesDirection[i] = cc.p(Objs.EnemiesDirection[i].x * -1, Objs.EnemiesDirection[i].y)
            if((pos.y <= 0) || (pos.y >= size.height))
                Objs.EnemiesDirection[i] = cc.p(Objs.EnemiesDirection[i].x, Objs.EnemiesDirection[i].y * -1)
            Objs.Enemies[i].setPosition(cc.pAdd(Objs.EnemiesDirection[i], pos));

        this.checkCollision();//check collisionss


The checkCollision() will test if the hero touched an enemy.


checkCollision: function(){
    //create a rect to represent our green square
    var rectHero = cc.rect(Objs.Square.getPositionX() - Objs.Square.getContentSize().width/2*Objs.Square.getScaleX(),
            Objs.Square.getPositionY() - Objs.Square.getContentSize().height/2*Objs.Square.getScaleY(),

    for(var i =0; i < 4; i++){
        //create a rect for each enemy
        var rectEnemy = cc.rect(Objs.Enemies[i].getPositionX() - Objs.Enemies[i].getContentSize().width/2*Objs.Enemies[i].getScaleX(),
                Objs.Enemies[i].getPositionY() - Objs.Enemies[i].getContentSize().height/2*Objs.Enemies[i].getScaleY(),
        if(cc.rectIntersectsRect(rectHero, rectEnemy)) {//check collision
            gameOver();//if ok, gameover

The SoundClicked() clicked function will be the callback of the menu enable/disable sound.


SoundClicked: function(){
    var enabled = localStorage.getItem("Sound");
    if(enabled == 1){
        localStorage.setItem("Sound", 0);
        Objs.soundInfo.setString("Enable sound");
    } else {
        cc.audioEngine.playMusic(res.Music, true);
        localStorage.setItem("Sound", 1);
        Objs.soundInfo.setString("Disable sound");


Now we have the onTouch events:


onTouchBegan: function(touch, event){//touchbegan callback

    var target = event.getCurrentTarget();
    var PosInScreen = target.convertToNodeSpace(touch.getLocation());
    var Size = target.getContentSize();
    var rect = cc.rect(0, 0, Size.width, Size.height);

    if(cc.rectContainsPoint(rect, PosInScreen)){ //check if i'm clicking in the green square
            case 1:
                if(!isAlive){//if the game is not running
                    gameStart();//start it
                    moveSquare(cc.p(400, 225));//make sure to start the game at the center of the screen
                return true;
    return false;

onTouchMoved: function(touch, event){//touchmoved callback
    var target = event.getCurrentTarget();
    var PosInScreen = target.convertToNodeSpace(touch.getLocation());
    var Size = target.getContentSize();
    var rect = cc.rect(0, 0, Size.width, Size.height);
    if(!isAlive)//if is not running, go away

    if(cc.rectContainsPoint(rect, PosInScreen)){//check if clicked in the green square
            case 1:
                moveSquare(touch._point);//move the square
                return true;
    return false;


Before finish it, we have 3 global functions. The first of them, moveSquare():


function moveSquare(destination){ //move the green square to destination
    var size = cc.director.getWinSize();
    if((destination.x > 0 ) && (destination.x < size.width)) //check if square is inside the screen
        if((destination.y > 0) && (destination.y < size.height))
            Objs.Square.setPosition(destination); //if ok, move it


function gameStart(){//game start, hide texts
    isAlive = true;
    timePlayed = 0;

And to finish our game, and our tutorial, the gameOver().


function gameOver(){//game over, check score
    isAlive = false;


    Objs.Square.setPosition(cc.p(400, 225));//move enemies to default location
    Objs.Enemies[0].setPosition(cc.p(100, 100));
    Objs.Enemies[1].setPosition(cc.p(700, 100));
    Objs.Enemies[2].setPosition(cc.p(700, 350));
    Objs.Enemies[3].setPosition(cc.p(100, 350));

    var bestTime = parseFloat(Objs.gameBestValue.getString()); //get best time
    if(timePlayed > bestTime){ //check the game time
        localStorage.setItem("bestTime", timePlayed); //if is a new best time, save it
        Objs.gameBestValue.setString(timePlayed.toFixed(3)); //and show it

Ok, our game is complete!! If you need, get the full source here.

V - Let’s publish it!

This game will be compatible with Firefox OS.

This post is too big, so I think that is better to divide the building process in another post. You can check it here.

So, that’s all. If you have any problem/suggestion, just comment here.

Thx for reading!

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Android Material Icon Library

### Welcome!In this post, I'll show you how to use [Material Icon Library](https://github.com/code-mc/material-icon-lib).This is a really...… Continue reading