Levels

2. Levels

The game is organized in levels. Each level has a theme and based on this, it has a set of elements that fill the game board, a set of crystals that one can create with the elements, a background and a welcome screen. Also, it has a target score and a limited number of moves to achieve it.

##2.1 Adding a new level

2.1.1 Create a LvlX.js file in the js/Levels/ directory

The file must have the next structure:

AtomicCrush.LvlX = function() {
};

AtomicCrush.LvlX.prototype = {
    preload: function() {
        this.game.numMoves;
        this.game.targetScore;
        this.game.numLevel;
        this.game.activeLevel;
        this.game.nextLevel;
        this.game.backGround;
        this.game.welcomeImg;

        elemNames = [];
        powerNames = [];
        powerA = [];
        powerB = [];
        powerC = [];
        powerD = [];
        level.preload();
    },
    create: function() {
        level.create();
    },
    update: function() {
        level.update();
    }
};

2.1.2 Initialize the variables

• numMoves: limit of moves to complete the level.
• targetScore: score to reach to win the level
• activeLevel : key that identify the level like a game state (see Add level to the game states)
• nextLevel : key that identify the next level like a game state
• backGround : key that identify the backGround image (see Adding a new background)
• welcomeImg : key that identify the welcome image (see Adding a new welcome image)
• elemNames : set of keys of the images of the elements in the level (see Adding new Elements)
• powerNames : set of keys of the images of the crystals that can be created in the level (see Adding new Crystals)
• PowerA : set of keys of the images of the crystals that can activate the powerA (see Logic of the power)
• PowerB : set of keys of the images of the crystals that can activate the powerB (see Logic of the power)
• PowerC : set of keys of the images of the crystals that can activate the powerC (see Logic of the power)
• PowerD : set of keys of the images of the crystals that can activate the powerD (see Logic of the power)

2.1.2 Add level to the game states

The file index.html has all the game states. Include the file created for the new level in the index.html header:

<script type="text/javascript" src="js/Levels/LvlX.js"></script>

Add the next line to the script in the body, to add the level to the game states:

game.state.add('lvlX', AtomicCrush.LvlX);

The first parameter is the key that identify the state.

Note: Make sure that the nextLevel variable in the last level points to the level created.

2.2 Adding a new background

Add the new background picture to the assets/backgrounds directory, after that, in the preload function of the js/Preloader.js file, add a new line (Preferably in the \\Levels Section) like the next line:

this.game.load.image('backgroundLvlX', 'assets/backgrounds/backgroundLvlX.png');

The first parameter is the key that identify the picture and the second, the route of the picture.

2.3 Adding a new welcome image

Add the new welcome image to the \assets\panels\xx directory. Where xx is the folder of the language (en, fr...). After that, in the preload function of the js/Preloader.js file, add a new line (Preferably in the \\Levels Section) like the next line:

this.game.load.image('welcomeLvlX', AtomicCrush.language.welcomeLvlX);

The first parameter is the key that identify the picture and the second, the variable in the language object who has the route of the picture. (See Languages for more information)

2.4 Adding new elements

Add the new element picture to the assets/sprites directory, after that, in the preload function of the js/Preloader.js file, add a new line (Preferably in the \\Game Panel Section) like the next line:

this.game.load.image(NA, 'assets/sprites/Na.png');

We recommend create global variables in the file js/variables.js for each element name to use in the preloader file and in the levels files..

var NA = "NA";

2.5 Adding new Crystals

2.5.1 Add the picture

Add the new crystal picture to the assets/sprites directory, after that, in the preload function of the js/Preloader.js file, add a new line (Preferably in the \\Game Panel Section) like the next line:

this.game.load.image(SALT, 'assets/sprites/salt_crystal.png');

We recommend create global variables in the file js/variables.js for each element name to use in the preloader file and in the levels files..

var SALT= "Salt";

2.5.2 Set the structure

For create a crystal it's necessary to arrange the elements in a particular way. This arrangement is setted in the files/crystals.txt file. Here an example:

Salt
NACLNA
CLNACL
NACLNA

The crystal's name and the elements names must be equals to the corresponding global variables.

2.5.3 Logic of the power

Program the logic of your power in the gamePanel.js file, to do so you can inspire you with the powers that are already programmed (PowerA, PowerB, PowerC and PowerD).