in the process of fixing bugs, refactoring and commenting the code | isolated 'difficulty' and 'end' states due to repetitive code (code still need some cleaning)

index.html

@@ -12,10 +12,13 @@
 
 	<script type="text/javascript" src="js/preMenu.js"></script>
 	<script type="text/javascript" src="js/menu.js"></script>
+	<script type="text/javascript" src="js/difficulty.js"></script>
 	<script type="text/javascript" src="js/map.js"></script>
 	<script type="text/javascript" src="js/circleOne.js"></script>
 	<script type="text/javascript" src="js/squareOne.js"></script>
 	<script type="text/javascript" src="js/squareTwo.js"></script>
+	<script type="text/javascript" src="js/end.js"></script>
+
 	<script type="text/javascript" src="js/boot.js"></script>
 
 	<style>

js/boot.js

@@ -1,4 +1,3 @@
-
 /*
     let loadAssets = {
 		preload: function(){},
@@ -12,7 +11,7 @@
 				let passedLevels;
 
 				//premenu
-				let errorEmptyName;
+let errorEmptyName;
 
 				//map
 				let kid, tractor;
@@ -49,8 +48,8 @@
 				let xA, yA, xB, yB, blockW, blockH;
 
 	// INFO
-	let username; //player name
-	let lang; //language
+let username; //player name
+let lang; //game language
 
 	// IMAGES
 	let beepSound, okSound, errorSound; //sounds
@@ -74,8 +73,10 @@
 		'fractions-game'
 	);
 	
-    const hip = "143.107.45.11"; //Host ip
+	const hip = "143.107.45.11"; //Host ip
 	
+let gameStateString;
+
     // Game One : kid and truck
 
     let levelPosition = 0; //Map position
@@ -99,55 +100,99 @@
 
     game.state.add('map', mapState); // map.js
 
-    game.state.add('menuCircleOne', menuCircleOne); // circleOne.js
-    game.state.add('gameCircleOne', gameCircleOne); // circleOne.js
-    game.state.add('endCircleOne', endCircleOne); // circleOne.js
+	game.state.add('difficulty', difficultyState); // difficulty.js
 
-    game.state.add('menuSquareOne', menuSquareOne); // squareOne.js
+    game.state.add('gameCircleOne', gameCircleOne); // circleOne.js
     game.state.add('gameSquareOne', gameSquareOne); // squareOne.js
-    game.state.add('endSquareOne', endSquareOne); // squareOne.js
-
-    game.state.add('menuSquareTwo', menuSquareTwo); // squareTwo.js
     game.state.add('gameSquareTwo', gameSquareTwo); // squareTwo.js
-    game.state.add('endSquareTwo', endSquareTwo); // squareTwo.js
+
+	game.state.add('end', endState); // end.js
 
     let loadAssets = {
 
     	preload: function(){
 
-    		//auxiliar directory
+    		// Auxiliar string that holds the base directory
 	        const imgsrc = 'assets/img/';
 
-	        //Progress bar image
-	        game.load.image('progressBar', imgsrc+'pgbar.png');
-
-	        //flags
+	        // Progress bar
+			game.load.image('progressBar', imgsrc+'pgbar.png');
+		
+	        // Flags
 	        game.load.image('flag_BR', 	imgsrc+'flag/BRAZ.jpg');
 	        game.load.image('flag_PE', 	imgsrc+'flag/PERU.jpg');
 	        game.load.image('flag_US', 	imgsrc+'flag/UNST.jpg');
 	        game.load.image('flag_FR', 	imgsrc+'flag/FRAN.jpg');
-	        game.load.image('flag_IT', 	imgsrc+'flag/ITAL.png');
-
-	        //scenario
+			game.load.image('flag_IT', 	imgsrc+'flag/ITAL.png');
+			
+	        // Scenario
 	        game.load.image('bgimage', 	imgsrc+'bg.jpg');
 	        game.load.image('bgmap', 	imgsrc+'bg_map.png');
 	        game.load.image('cloud', 	imgsrc+'cloud.png');
 	        game.load.image('floor',	imgsrc+'floor.png');
-	        game.load.image('road', 	imgsrc+'road.png');
+			game.load.image('road', 	imgsrc+'road.png');
+			game.load.image('birch', 	imgsrc+'birch.png');
+	        game.load.image('flag', 	imgsrc+'flag.png');
+	        game.load.image('house', 	imgsrc+'house.png');
+	        game.load.image('place_a', 	imgsrc+'place_a.png');
+	        game.load.image('place_b', 	imgsrc+'place_b.png');
+	        game.load.image('garage', 	imgsrc+'garage.png');
+	        game.load.image('farm', 	imgsrc+'farm.png');
+	        game.load.image('rock', 	imgsrc+'rock.png');
+	        game.load.image('school', 	imgsrc+'school.png');
+	        game.load.image('sign',		imgsrc+'sign.png');
+	        game.load.image('tree1', 	imgsrc+'tree.png');
+	        game.load.image('tree2', 	imgsrc+'tree2.png');
+	        game.load.image('tree3', 	imgsrc+'tree3.png');
+	        game.load.image('tree4', 	imgsrc+'tree4.png');
 
-	        //game phases buttons list
-	        this.levelSpriteList = [];
+			// Menu icons on the top of the page
+	        game.load.image('back', 	imgsrc+'menu/back.png');
+	        game.load.image('home', 	imgsrc+'menu/home.png');
+	        game.load.image('info', 	imgsrc+'menu/info.png');
+	        game.load.image('world', 	imgsrc+'menu/language.png');
+	        game.load.image('list', 	imgsrc+'menu/menu.png');
+	        game.load.image('help', 	imgsrc+'menu/help.png');
+	        game.load.image('pgbar', 	imgsrc+'menu/progressBar.png');
+	        game.load.image('block', 	imgsrc+'menu/block.png');
+			game.load.spritesheet('audio',	imgsrc+'menu/audio_48x48.png',48,48,2);
 
+	        // Mathematical operators
+	        game.load.image('add',		imgsrc+'operator/add.png');
+	        game.load.image('subtract', imgsrc+'operator/subtract.png');
+	        game.load.image('separator',imgsrc+'operator/separator.png');
+	        game.load.image('equal', 	imgsrc+'operator/equal.png');
+	        
+	        // Feedback icons
+	        game.load.image('h_arrow', 	imgsrc+'help/arrow.png');
+	        game.load.image('h_double', imgsrc+'help/double.png');
+	        game.load.image('h_error', 	imgsrc+'help/error.png');
+	        game.load.image('h_ok', 	imgsrc+'help/ok.png');
+	        game.load.image('down', 	imgsrc+'help/down.png');        
+	        game.load.image('pointer', 	imgsrc+'help/pointer.png');
+	        
+	        // Game sprites        
+	        game.load.spritesheet('kid_run',	imgsrc+'kid/run.png', 82, 178, 12);
+	        game.load.spritesheet('kid_walk', 	imgsrc+'kid/walk.png', 78, 175, 26);
+	        game.load.spritesheet('kid_lost', 	imgsrc+'kid/lost.png', 72, 170, 6);
+	        game.load.spritesheet('tractor', 	imgsrc+'tractor/frame.png', 201, 144, 10);
+	        game.load.image('tractor_green',	imgsrc+'tractor/frame-0.png');
+	        game.load.image('tractor_red', 		imgsrc+'tractor/frame-5.png');
+	        game.load.image('balloon', 			imgsrc+'airballoon_upper.png');
+	        game.load.image('balloon_basket', 	imgsrc+'airballoon_base.png');
 	        
-	        let levelSpriteSource = [
+	        // Sound effects
+	        game.load.audio('sound_ok', ['assets/fx/ok.ogg', 'assets/fx/ok.mp3']);
+	        game.load.audio('sound_error', ['assets/fx/error.ogg', 'assets/fx/error.mp3']);
+	        game.load.audio('sound_beep', ['assets/fx/beep.ogg', 'assets/fx/beep.mp3']);
+
+	        const levelSpriteSource = [
 	        	'1-left-subs.png', 	//square I
 	        	'2-left-subs.png', 	//square II
 	        	'3-left-subs.png',	//circle I
 	        	'4-left-subs.png',	//circle II
 	        	'5.png'				//square III
 	        ];
-			
-			
 	        if(debugMode){
 	        	levelSpriteSource.push(
 		        	'5.png',
@@ -161,23 +206,22 @@
 		        	'5.png'
 				);
 	    	}
-			
+						
+			//game phases buttons list
+			this.levelSpriteList = [];
 
 	        for(let i=0; i<levelSpriteSource.length; i++){
 	        	this.levelSpriteList[i] = 'game'+i;
 	        	game.load.image(this.levelSpriteList[i], 	imgsrc+'game/'+levelSpriteSource[i]);
 	        }
 			
-			
 			this.levelShapeList = [
 				'Square', 
 				'Square', 
 				'Circle', 
 				'Circle', 
 				'Square',
-			];
-			
-			
+			];	
 			if(debugMode){
 				this.levelShapeList.push(
 					'Square', 
@@ -198,9 +242,7 @@
         		1, 
         		2, 
         		3
-        	];
-        	
-	       	
+        	];	       	
 	       	if(debugMode){
 	       		this.levelTypeList.push(
 	        		3, 
@@ -214,72 +256,25 @@
 	        		3
 				);
 	        }
-	       	
-
-	        //header menu buttons
-	        game.load.image('back', 	imgsrc+'menu/back.png');
-	        game.load.image('home', 	imgsrc+'menu/home.png');
-	        game.load.image('info', 	imgsrc+'menu/info.png');
-	        game.load.image('world', 	imgsrc+'menu/language.png');
-	        game.load.image('list', 	imgsrc+'menu/menu.png');
-	        game.load.image('help', 	imgsrc+'menu/help.png');
-	        game.load.image('pgbar', 	imgsrc+'menu/progressBar.png');
-	        game.load.image('block', 	imgsrc+'menu/block.png');
-			game.load.spritesheet('audio',	imgsrc+'menu/audio_48x48.png',48,48,2);
-
-	        //operators
-	        game.load.image('add',		imgsrc+'operator/add.png');
-	        game.load.image('subtract', imgsrc+'operator/subtract.png');
-	        game.load.image('separator',imgsrc+'operator/separator.png');
-	        game.load.image('equal', 	imgsrc+'operator/equal.png');
-	        
-	        //feedback
-	        game.load.image('h_arrow', 	imgsrc+'help/arrow.png');
-	        game.load.image('h_double', imgsrc+'help/double.png');
-	        game.load.image('h_error', 	imgsrc+'help/error.png');
-	        game.load.image('h_ok', 	imgsrc+'help/ok.png');
-	        game.load.image('down', 	imgsrc+'help/down.png');        
-	        game.load.image('pointer', 	imgsrc+'help/pointer.png');
 	        
-	        // Loading assets based on language        
-	        game.load.spritesheet('kid_run',	imgsrc+'kid/run.png', 82, 178, 12);
-	        game.load.spritesheet('kid_walk', 	imgsrc+'kid/walk.png', 78, 175, 26);
-	        game.load.spritesheet('kid_lost', 	imgsrc+'kid/lost.png', 72, 170, 6);
-	        game.load.spritesheet('tractor', 	imgsrc+'tractor/frame.png', 201, 144, 10);
-	        
-	        game.load.image('tractor_green',	imgsrc+'tractor/frame-0.png');
-	        game.load.image('tractor_red', 		imgsrc+'tractor/frame-5.png');
-	        
-	        game.load.image('balloon', 			imgsrc+'airballoon_upper.png');
-	        game.load.image('balloon_basket', 	imgsrc+'airballoon_base.png');
-	        game.load.image('birch', 			imgsrc+'birch.png');
-	        game.load.image('flag', 	imgsrc+'flag.png');
-	        game.load.image('house', 	imgsrc+'house.png');
-	        game.load.image('place_a', 	imgsrc+'place_a.png');
-	        game.load.image('place_b', 	imgsrc+'place_b.png');
-	        game.load.image('garage', 	imgsrc+'garage.png');
-	        game.load.image('farm', 	imgsrc+'farm.png');
-	        game.load.image('rock', 	imgsrc+'rock.png');
-	        game.load.image('school', 	imgsrc+'school.png');
-	        game.load.image('sign',		imgsrc+'sign.png');
-	        game.load.image('tree1', 	imgsrc+'tree.png');
-	        game.load.image('tree2', 	imgsrc+'tree2.png');
-	        game.load.image('tree3', 	imgsrc+'tree3.png');
-	        game.load.image('tree4', 	imgsrc+'tree4.png');
-	        
-	        // Loadind Sound Effects
-	        game.load.audio('sound_ok', ['assets/fx/ok.ogg', 'assets/fx/ok.mp3']);
-	        game.load.audio('sound_error', ['assets/fx/error.ogg', 'assets/fx/error.mp3']);
-	        game.load.audio('sound_beep', ['assets/fx/beep.ogg', 'assets/fx/beep.mp3']);
-
     	},
 
     	create: function(){
+
+			// Centers phaser canvas in its containing div
 			game.scaleMode = Phaser.ScaleManager.SHOW_ALL;
 			game.scale.pageAlignHorizontally = true;
 			game.scale.pageAlignVertically = true;
 			
+			// Enable phaser Arcade Physics system
 			game.physics.startSystem(Phaser.Physics.ARCADE);
+
+			//loading game sounds
+			beepSound = game.add.audio('sound_beep');   // game sound
+	        okSound = game.add.audio('sound_ok');       // correct answer sound
+	        errorSound = game.add.audio('sound_error'); // wrong answer sound
+
+			// Calls first screen seen by the player
 		    game.state.start('language');
     	
     	}
@@ -288,5 +283,5 @@
 
     game.state.add('loadAssets', loadAssets); // boot.js
 
-	// We finished loading everything and the first state is called
+	// Calls the first game state in charge of loading all the assets needed for the game
 	game.state.start('loadAssets');

js/circleOne.js

@@ -1,10 +1,4 @@
-
 /*
-    let menuCircleOne = {
-        create: function(){},
-        ---------------------------- end of phaser functions
-        func_loadMap: function(){}
-    };
 
     let gameCircleOne = {
         create: function(){},
@@ -21,210 +15,10 @@
             //func_getRndDivisor: function(){}
     };
 
-    let endCircleOne = {
-        create: function(){},
-        update: function(){},
-        ---------------------------- end of phaser functions
-        func_verPrincipal: function(){},
-    };
 */
 
 // Kid and Circle states, games 1 and 2
 
-/****************************** MENU ****************************/
-
-let menuCircleOne = {
-    
-    create: function() {
-                
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,true,
-                                    false,true,false,
-                                    true,false,
-                                    false,false);        
-        
-        // Title
-        const style = { font: '28px Arial', fill: '#00804d'};
-        let title = game.add.text(game.world.centerX, 40, lang.game_menu_title, style);
-        title.anchor.setTo(0.5, 0.5);
-                
-        //SETTING DIFFICULTY LEVELS
-
-        let maxHeight = 120; //Max height of a stair
-        let stairHeight = 29; //height growth of a stair
-        let stairWidth = 85; //Width of a stair
-        let startStair = 240;
-        let startSymbol = 150;
-        let startCircle = (startSymbol/2)+startStair+stairWidth*5;
-        
-         //First stairs, plus, 5 levels, blue circle
-
-        let blueCircle = game.add.graphics(startCircle, 195);
-            blueCircle.anchor.setTo(0.5,0.5);
-            blueCircle.lineStyle(2, 0x31314e);
-            blueCircle.beginFill(0xefeff5);
-            blueCircle.drawCircle(0, 0, 60);
-            blueCircle.endFill();
-
-        let plusArrowIcon = game.add.sprite(startSymbol+40, 195, 'h_arrow'); 
-            plusArrowIcon.scale.setTo(0.35);
-            plusArrowIcon.alpha = 0.8;
-            plusArrowIcon.anchor.setTo(0.5,0.5);
-
-        let plusKidIcon = game.add.sprite(startSymbol, 195, 'kid_walk'); 
-            plusKidIcon.scale.setTo(0.6);
-            plusKidIcon.alpha = 0.8;
-            plusKidIcon.anchor.setTo(0.5,0.5);
-        
-        let stairsPlus = [];
-
-        for(let i=1;i<=5;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 135+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsPlus[i] = game.add.graphics(0, 0);
-            stairsPlus[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsPlus[i].beginFill(0x99b3ff);
-            stairsPlus[i].drawRect(x1, y1, x2, y2);
-            stairsPlus[i].endFill();
-            
-            //event
-            stairsPlus[i].inputEnabled = true;
-            stairsPlus[i].input.useHandCursor = true;
-            stairsPlus[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'Plus' });
-            stairsPlus[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsPlus[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        }
-        
-        //Second stairs, minus, 5 levels, red circle
-
-        let redCircle = game.add.graphics(startCircle, 350);
-            redCircle.anchor.setTo(0.5,0.5);
-            redCircle.lineStyle(2, 0xb30000);
-            redCircle.beginFill(0xefeff5);
-            redCircle.drawCircle(0, 0, 60);
-            redCircle.endFill();
-
-        let minusArrowIcon = game.add.sprite(startSymbol, 350, 'h_arrow');
-            minusArrowIcon.scale.setTo(-0.35, 0.35);
-            minusArrowIcon.alpha = 0.8;
-            minusArrowIcon.anchor.setTo(0.5,0.5);
-
-        let minusKidIcon = game.add.sprite(startSymbol+40, 350, 'kid_walk');
-            minusKidIcon.scale.setTo(-0.6, 0.6);
-            minusKidIcon.alpha = 0.8;
-            minusKidIcon.anchor.setTo(0.5,0.5);
-
-        let stairsMinus = [];
-
-        for(let i=1;i<=5;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 285+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsMinus[i] = game.add.graphics(0, 0);
-            stairsMinus[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsMinus[i].beginFill(0xff6666);
-            stairsMinus[i].drawRect(x1, y1, x2, y2);
-            stairsMinus[i].endFill();
-            
-            //event
-            stairsMinus[i].inputEnabled = true;
-            stairsMinus[i].input.useHandCursor = true;
-            stairsMinus[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'Minus' });
-            stairsMinus[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsMinus[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        } 
-        
-        //Thrid stairs, mixed, 5 levels, two circles
-
-        let blueCircle2 = game.add.graphics(startCircle-30, 500);
-            blueCircle2.anchor.setTo(0.5,0.5);
-            blueCircle2.lineStyle(2, 0x31314e);
-            blueCircle2.beginFill(0xefeff5);
-            blueCircle2.drawCircle(0, 0, 60);
-            blueCircle2.endFill();
-        
-        let redCircle2 = game.add.graphics(startCircle+40, 500);
-            redCircle2.anchor.setTo(0.5,0.5);
-            redCircle2.lineStyle(2, 0xb30000);
-            redCircle2.beginFill(0xefeff5);
-            redCircle2.drawCircle(0, 0, 60);
-            redCircle2.endFill();
-        
-        let doubleArrowIcon = game.add.sprite(startSymbol, 500, 'h_double'); 
-            doubleArrowIcon.scale.setTo(0.5);
-            doubleArrowIcon.anchor.setTo(0.5,0.5);
-            doubleArrowIcon.alpha = 0.8;
-        
-        let stairsMixed = [];
-
-        for(let i=1;i<=5;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 435+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsMixed[i] = game.add.graphics(0, 0);
-            stairsMixed[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsMixed[i].beginFill(0xb366ff);
-            stairsMixed[i].drawRect(x1, y1, x2, y2);
-            stairsMixed[i].endFill();
-            
-            //event
-            stairsMixed[i].inputEnabled = true;
-            stairsMixed[i].input.useHandCursor = true;
-            stairsMixed[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'Mixed' });
-            stairsMixed[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsMixed[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        } 
-
-    },
-        
-    //MapLoading function
-    func_loadMap: function(){
-
-        if(audioStatus){
-            this.beep.play();
-        }
-
-        levelPosition = 0; //Map position
-        levelMove = true; //Move no next point
-        levelDifficulty  = this.difficulty; //Number of difficulty (1 to 5)
-        levelOperator = this.operator; //Operator of game
-        passedLevels = 0; //reset the game progress when entering a new level
-
-        game.state.start('map');
-
-    }
-    
-};
-
-/****************************** GAME ****************************/
-
 let gameCircleOne = {
 
     create: function() {
@@ -236,14 +30,14 @@ let gameCircleOne = {
         timer.start();
         detail="";
 
-        // Background
+        // Sets background image
         game.add.image(0, 0, 'bgimage');
 
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,true,
+        // Calls function that loads navigation icons
+        iconSettings["func_addButtons"](true,true,
                                     true,true,true,
                                     true,false,
-                                    "menuCircleOne", this.func_viewHelp);
+                                    'difficulty', this.func_viewHelp);
         
         //Clouds
         game.add.image(300, 100, 'cloud');
@@ -755,9 +549,9 @@ let gameCircleOne = {
         if(!clicked){
             let pointer;
             if(levelType=='A'){
-                let pointer = game.add.image(endPosition, 490, 'pointer');
+                pointer = game.add.image(endPosition, 490, 'pointer');
             }else{
-                let pointer = game.add.image(blocks.children[endIndex-1].x, blocks.children[endIndex-1].y-blockSize/2, 'pointer');
+                pointer = game.add.image(blocks.children[endIndex-1].x, blocks.children[endIndex-1].y-blockSize/2, 'pointer');
             }
             pointer.anchor.setTo(0.5, 0);
             pointer.alpha = 0.7;
@@ -778,87 +572,4 @@ let gameCircleOne = {
 
     }
     
-};
-
-/****************************** END ****************************/
-
-let endCircleOne = {
-    
-    create: function() {  
-        
-        // Background
-        game.add.image(0, 0, 'bgimage');
-                
-        //Clouds
-        game.add.image(300, 100, 'cloud');
-        game.add.image(660, 80, 'cloud');
-        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-        
-        // Styles for labels
-        let stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        let styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        let styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
-        //Floor
-        for(let i=0;i<9;i++){
-            game.add.image(i*100, 501, 'floor');
-        }
-        
-        // Progress bar
-        for(let p=1;p<=5;p++){
-            let block = game.add.image(660+(p-1)*30, 10, 'block');
-            block.scale.setTo(2, 1); //Scaling to double width
-        }
-        game.add.text(820, 10, '100%', styleMenu);
-        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, styleMenu).anchor.setTo(1,0);
-        game.add.image(660, 10, 'pgbar');
-        
-        //School and trees
-        game.add.sprite(600, 222 , 'school').scale.setTo(0.7);
-        game.add.sprite(30, 280 , 'tree4');
-        game.add.sprite(360, 250 , 'tree2');
-        
-        //kid
-        this.kid = game.add.sprite(0, -152 , 'kid_run');
-        this.kid.anchor.setTo(0.5,0.5);
-        this.kid.scale.setTo(0.7);
-        let walk = this.kid.animations.add('walk', [0,1,2,3,4,5,6,7,8,9,10,11]);
-        
-        //globo
-        this.balloon = game.add.sprite(0, -260, 'balloon');
-        this.balloon.anchor.setTo(0.5,0.5);
-        this.basket = game.add.sprite(0, -150, 'balloon_basket');
-        this.basket.anchor.setTo(0.5,0.5);
-    
-    },
-
-    update: function() {   
-
-        if(this.kid.y>=460){
-            this.kid.animations.play('walk', 6, true);
-            if(this.kid.x<=700){
-                this.kid.x += 2;
-            }else{
-                if(levelMenu){
-	            	passedLevels = 0;
-                    game.state.start('menu');
-                }else{
-                    this.kid.animations.stop();
-                }
-            }
-        }else{
-            this.balloon.y += 2;
-            this.basket.y += 2;
-            this.kid.y +=2;
-            this.balloon.x += 1;
-            this.basket.x += 1;
-            this.kid.x +=1;
-        }
-
-    },
-    
-    func_verPrincipal: function(){
-        game.state.start('welcome');
-    },
-   
-};
+};

js/difficulty.js

@@ -0,0 +1,258 @@
+/*
+    let difficultyState = {
+		create: function(){},
+		func_loadMap: function()
+        ---------------------------- end of phaser functions
+	};
+*/
+
+let difficultyState = {
+
+    create: function() {
+
+        // Calls function that loads navigation icons
+        iconSettings["func_addButtons"](true,true,
+                                    false,true,false,
+                                    true,false,
+                                    false,false);
+    
+        // Title
+        const style = { font: '28px Arial', fill: '#00804d'};
+        const title = game.add.text(game.world.centerX, 40, lang.game_menu_title, style);
+        title.anchor.setTo(0.5, 0.5);
+
+        //SETTING DIFFICULTY LEVELS
+
+        const maxHeight = 120; //Max height of a stair        
+        let stairHeight; //height growth of a stair
+        let stairWidth; //Width of a stair
+        let startStair;
+        let startSymbol;
+        let startGeometricFigure; // @@ transformar em so uma variavel
+        
+        switch(gameStateString){
+            case "gameSquareOne":
+                stairHeight = 40;
+                stairWidth = 100;
+                startStair = 320;
+                startSymbol = 180;
+                startGeometricFigure = (startSymbol/2)+startStair+stairWidth*3;
+            break;
+            case "gameSquareTwo":
+                stairHeight = 29;
+                startStair = 240; 
+                startSymbol = 150;
+
+                stairWidth = 80;
+                startGeometricFigure = (startSymbol/2)+startStair+stairWidth*5;
+            break;
+            case "gameCircleOne":
+                stairHeight = 29;
+                startStair = 240; 
+                startSymbol = 150;
+
+                stairWidth = 85;
+                startGeometricFigure = (startSymbol/2)+startStair+stairWidth*5;
+            break;
+            default:
+                console.log("Error! game state name not found!");
+        }
+
+        //@@ usar phaser groups ou objetos??
+        let geometricFigure = [];
+        let levelThemeIcons = [];
+        let arrowIcons = [];
+        
+        let stairs = [];
+
+        const aux = {
+            maxSublevel: null,
+            maxDifficulty: null,
+            color: ['0x99b3ff', '0xff6666', '0xb366ff'], // blue, red, purple
+
+            operator_1: ['Plus', 'Minus', 'Mixed'],
+            operator_2: ['A', 'B', 'C'],
+            base_y1_1: [135, 285, 435],
+            base_y1_2: [100, 270, 440],
+            get operator() {
+                if (gameStateString == 'gameSquareTwo') return this.operator_2;
+                else return this.operator_1;
+            },
+            get base_y1() {
+                if (gameStateString == 'gameSquareTwo') return this.base_y1_2;
+                else return this.base_y1_1;
+            }  
+        }
+
+        switch(gameStateString){
+            
+            case "gameSquareOne":
+
+                aux.maxSublevel = 2;
+                aux.maxDifficulty = 3;
+
+                // Blue square
+                geometricFigure[0] = game.add.graphics(startGeometricFigure, 175);
+                geometricFigure[0].anchor.setTo(0.5,0.5);
+                geometricFigure[0].lineStyle(2, 0x31314e);
+                geometricFigure[0].beginFill(0xefeff5);
+                geometricFigure[0].drawRect(0, 0, 80, 40);
+                geometricFigure[0].endFill();
+                // Red square
+                geometricFigure[1] = game.add.graphics(startGeometricFigure, 330);
+                geometricFigure[1].anchor.setTo(0.5,0.5);
+                geometricFigure[1].lineStyle(2, 0xb30000);
+                geometricFigure[1].beginFill(0xefeff5);
+                geometricFigure[1].drawRect(0, 0, 80, 40);
+                geometricFigure[1].endFill();
+
+                // Green tractor
+                levelThemeIcons[0] = game.add.sprite(startSymbol+30, 215, 'tractor_green');
+                levelThemeIcons[0].scale.setTo(0.5);
+                levelThemeIcons[0].alpha = 0.9;
+                levelThemeIcons[0].anchor.setTo(0.5,0.5);
+                // Red tractor
+                levelThemeIcons[1] = game.add.sprite(startSymbol+70, 370, 'tractor_red');
+                levelThemeIcons[1].scale.setTo(0.5);
+                levelThemeIcons[1].alpha = 0.9;
+                levelThemeIcons[1].anchor.setTo(0.5,0.5);
+                
+                // Plus Arrow
+                arrowIcons[0] = game.add.sprite(startSymbol+100, 215, 'h_arrow');
+                arrowIcons[0].scale.setTo(0.3);
+                arrowIcons[0].alpha = 0.9;
+                arrowIcons[0].anchor.setTo(0.5,0.5);
+                // Minus Arrow
+                arrowIcons[1] = game.add.sprite(startSymbol, 370, 'h_arrow');
+                arrowIcons[1].scale.setTo(0.3);
+                arrowIcons[1].alpha = 0.9;
+                arrowIcons[1].scale.x *= -1;
+                arrowIcons[1].anchor.setTo(0.5,0.5);
+
+            break;
+
+            case "gameCircleOne":
+
+                aux.maxSublevel = 3;
+                aux.maxDifficulty = 5;
+
+                // Blue Circle
+                geometricFigure[0] = game.add.graphics(startGeometricFigure, 195);
+                geometricFigure[0].anchor.setTo(0.5,0.5);
+                geometricFigure[0].lineStyle(2, 0x31314e);
+                geometricFigure[0].beginFill(0xefeff5);
+                geometricFigure[0].drawCircle(0, 0, 60);
+                geometricFigure[0].endFill();
+                // Red Circle
+                geometricFigure[1] = game.add.graphics(startGeometricFigure, 350);
+                geometricFigure[1].anchor.setTo(0.5,0.5);
+                geometricFigure[1].lineStyle(2, 0xb30000);
+                geometricFigure[1].beginFill(0xefeff5);
+                geometricFigure[1].drawCircle(0, 0, 60);
+                geometricFigure[1].endFill();
+                // Both blue and red circles
+                geometricFigure[2] = game.add.graphics(startGeometricFigure-30, 500);
+                geometricFigure[2].anchor.setTo(0.5,0.5);
+                geometricFigure[2].lineStyle(2, 0x31314e);
+                geometricFigure[2].beginFill(0xefeff5);
+                geometricFigure[2].drawCircle(0, 0, 60);
+                geometricFigure[2].endFill();
+                geometricFigure[3] = game.add.graphics(startGeometricFigure+40, 500);
+                geometricFigure[3].anchor.setTo(0.5,0.5);
+                geometricFigure[3].lineStyle(2, 0xb30000);
+                geometricFigure[3].beginFill(0xefeff5);
+                geometricFigure[3].drawCircle(0, 0, 60);
+                geometricFigure[3].endFill();
+
+                // Kid plus
+                levelThemeIcons[0] = game.add.sprite(startSymbol, 195, 'kid_walk'); 
+                levelThemeIcons[0].scale.setTo(0.6);
+                levelThemeIcons[0].alpha = 0.8;
+                levelThemeIcons[0].anchor.setTo(0.5,0.5);
+                // Kid minus
+                levelThemeIcons[1] = game.add.sprite(startSymbol+40, 350, 'kid_walk');
+                levelThemeIcons[1].scale.setTo(-0.6, 0.6);
+                levelThemeIcons[1].alpha = 0.8;
+                levelThemeIcons[1].anchor.setTo(0.5,0.5);
+
+                // Plus arrow
+                arrowIcons[0] = game.add.sprite(startSymbol+40, 195, 'h_arrow'); 
+                arrowIcons[0].scale.setTo(0.35);
+                arrowIcons[0].alpha = 0.8;
+                arrowIcons[0].anchor.setTo(0.5,0.5);
+                // Minus arrow
+                arrowIcons[1] = game.add.sprite(startSymbol, 350, 'h_arrow');
+                arrowIcons[1].scale.setTo(-0.35, 0.35);
+                arrowIcons[1].alpha = 0.8;
+                arrowIcons[1].anchor.setTo(0.5,0.5);
+                // Both plus and minus arrows
+                arrowIcons[2] = game.add.sprite(startSymbol, 500, 'h_double'); 
+                arrowIcons[2].scale.setTo(0.5);
+                arrowIcons[2].anchor.setTo(0.5,0.5);
+                arrowIcons[2].alpha = 0.8;
+
+            break;
+
+            case "gameSquareTwo":
+
+                aux.maxSublevel = 3;
+                aux.maxDifficulty = 5;
+
+                levelThemeIcons[0] = game.add.sprite(startSymbol, 300, 'equal');
+                //levelThemeIcons[0].frame = 0;
+                levelThemeIcons[0].scale.setTo(0.7);
+                levelThemeIcons[0].anchor.setTo(0.5,0.5);
+
+            break;
+
+            default:
+                console.log("Error: couldn't finish loading difficulty screen");
+        }
+
+        // Pacing difficulty 'stairs'
+        for(let sublevel=0; sublevel<aux.maxSublevel; sublevel++){
+            for(let difficulty=1; difficulty<=aux.maxDifficulty; difficulty++){
+                // Position
+                let x1 = startStair+(stairWidth*(difficulty-1));
+                let y1 = aux.base_y1[sublevel]+maxHeight-difficulty*stairHeight;
+                let x2 = stairWidth;//x1 + 40;
+                let y2 = stairHeight*difficulty;//y1 + 24;
+                // Graphics
+                stairs[difficulty] = game.add.graphics(0, 0);
+                stairs[difficulty].lineStyle(1, 0xFFFFFF, 1);
+                stairs[difficulty].beginFill(aux.color[sublevel]);
+                stairs[difficulty].drawRect(x1, y1, x2, y2);
+                stairs[difficulty].endFill();
+                // Events
+                stairs[difficulty].inputEnabled = true;
+                stairs[difficulty].input.useHandCursor = true;
+                stairs[difficulty].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: difficulty, operator: aux.operator[sublevel]});
+                stairs[difficulty].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
+                stairs[difficulty].events.onInputOut.add(function (item) { item.alpha=1; }, this);
+                // Labels
+                let xl = x1+stairWidth/2; //x label
+                let yl = y1+(stairHeight*difficulty)/2; //y label
+                let label = game.add.text(xl, yl, difficulty, { font: '25px Arial', fill: '#ffffff', align: 'center' });
+                    label.anchor.setTo(0.5, 0.4);
+            }
+        }
+
+    },
+
+    // Calls map state
+    func_loadMap: function(){
+
+        if(audioStatus){
+            this.beep.play();
+        }
+
+        levelPosition = 0; //Map position
+        levelMove = true; //Move no next point
+        levelDifficulty  = this.difficulty; //Number of difficulty (1 to 5)
+        levelOperator = this.operator; //Type of game
+        passedLevels = 0; //reset the game progress when entering a new level
+
+        game.state.start('map');
+
+    },
+};

js/end.js

@@ -0,0 +1,111 @@
+/*
+
+    let endState = {
+        create: function(){},
+        update: function(){},
+        ---------------------------- end of phaser functions
+    };
+
+*/
+
+endState = {
+
+    create: function(){
+
+        // Background
+        game.add.image(0, 0, 'bgimage');
+        
+        //Clouds
+        game.add.image(300, 100, 'cloud');
+        game.add.image(660, 80, 'cloud');
+        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
+        
+        // Styles for labels
+        let style = { font: '30px Arial', fill: '#000000', align: 'center'};
+        
+        //Floor
+        for(let i=0;i<9;i++){
+            game.add.image(i*100, 501, 'floor');
+        }
+        
+        // Progress bar
+        for(let p=1;p<=5;p++){
+            let block = game.add.image(660+(p-1)*30, 10, 'block');
+            block.scale.setTo(2, 1); //Scaling to double width
+        }
+        game.add.text(820, 10, '100%', style);
+        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, style).anchor.setTo(1,0);
+        game.add.image(660, 10, 'pgbar');
+        
+        //School and trees
+        game.add.sprite(600, 222 , 'school').scale.setTo(0.7);
+        game.add.sprite(30, 280 , 'tree4');
+        game.add.sprite(360, 250 , 'tree2');
+        
+        if(gameStateString == 'gameCircleOne'){
+            //kid
+            this.kid = game.add.sprite(0, -152 , 'kid_run');
+
+            this.kid.anchor.setTo(0.5,0.5);
+            this.kid.scale.setTo(0.7);
+            this.kid.animations.add('walk', [0,1,2,3,4,5,6,7,8,9,10,11]);
+            //globo
+            this.balloon = game.add.sprite(0, -260, 'balloon');
+            this.balloon.anchor.setTo(0.5,0.5);
+            this.basket = game.add.sprite(0, -150, 'balloon_basket');
+            this.basket.anchor.setTo(0.5,0.5);
+        }else{
+            //kid
+            this.kid = game.add.sprite(0, 460 , 'kid_run');
+            
+            this.kid.anchor.setTo(0.5,0.5);
+            this.kid.scale.setTo(0.7);
+            this.kid.animations.add('walk', [0,1,2,3,4,5,6,7,8,9,10,11]);
+
+            this.kid.animations.play('walk', 6, true);
+        }
+
+    },
+
+    update: function(){
+
+        if(gameStateString == 'gameCircleOne'){
+            
+            if(this.kid.y>=460){
+                this.kid.animations.play('walk', 6, true);
+                if(this.kid.x<=700){
+                    this.kid.x += 2;
+                }else{
+                    if(levelMenu){
+                        passedLevels = 0;
+                        game.state.start('menu');
+                    }else{
+                        this.kid.animations.stop();
+                    }
+                }
+            }else{
+                this.balloon.y += 2;
+                this.basket.y += 2;
+                this.kid.y +=2;
+                this.balloon.x += 1;
+                this.basket.x += 1;
+                this.kid.x +=1;
+            }
+
+        }else{    
+                    
+            if(this.kid.x <= 700){
+                this.kid.x += 2;
+            }else{
+                if(levelMenu){
+                    passedLevels = 0;
+                    game.state.start('menu');
+                }else{
+                    this.kid.animations.stop();
+                }
+            }
+        }
+
+    },
+
+}

js/map.js

@@ -1,4 +1,3 @@
-
 /*
     let mapState = {
         create: function(){},
@@ -11,25 +10,15 @@
 let mapState = {
 
     create: function() {
-
-        if(levelType=="C"){
-            this.gameStateString = "game"+levelShape+"Two";
-            this.endStateString = "end"+levelShape+"Two";
-            this.menuStateString = "menu"+levelShape+"Two";
-        }else{
-            this.gameStateString = "game"+levelShape+"One";
-            this.endStateString = "end"+levelShape+"One";
-            this.menuStateString = "menu"+levelShape+"One";
-        }
         
         // Background
         game.add.image(0, 40, 'bgmap');
         
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,false,
+        // Calls function that loads navigation icons
+        iconSettings["func_addButtons"](true,false,
                                     true,true,false,
                                     false,false,
-                                    this.menuStateString,false);
+                                    'difficulty',false);
         
         // Styles for labels
         const stylePlace = { font: '26px Arial', fill: '#ffffff', align: 'center'};
@@ -54,7 +43,7 @@ let mapState = {
             'y': [ 486, 422, 358, 294, 230, 166 ]
         };
         
-        if(this.gameStateString=="gameSquareOne"){
+        if(gameStateString=="gameSquareOne"){
         	//Garage
 	        let garage = game.add.image(this.points.x[0], this.points.y[0], 'garage');
 	        garage.scale.setTo(0.4);
@@ -129,7 +118,7 @@ let mapState = {
             }
         }
 
-        if(this.gameStateString=="gameSquareOne"){
+        if(gameStateString=="gameSquareOne"){
 	    	this.character = game.add.sprite(this.points.x[levelPosition], this.points.y[levelPosition], 'tractor');
 
 	        let walk = this.character.animations.add('walk',[0,1,2,3,4]);
@@ -158,15 +147,15 @@ let mapState = {
         if(this.count<=this.wait) return;
         
         // If movement is stopped or position is 6 (final), load game
-    	if(this.gameStateString=="gameSquareOne"){
+    	if(gameStateString=="gameSquareOne"){
 		    if(levelPosition==8){
 	            levelMove = false;
 	        }
-		}else if(this.gameStateString=="gameCircleOne"){
+		}else if(gameStateString=="gameCircleOne"){
 			if(levelPosition==6){
 	            levelMove = false;
 	        }
-		}else if(this.gameStateString=="gameSquareTwo"){
+		}else if(gameStateString=="gameSquareTwo"){
 			if(levelPosition==5){
 	            levelMove = false;
 	        }
@@ -202,9 +191,9 @@ let mapState = {
         }
 
         if(levelPosition<5){
-        	game.state.start(this.gameStateString);
+        	game.state.start(gameStateString);
         }else{
-        	game.state.start(this.endStateString);
+        	game.state.start('end');
     	}
 
     }

js/menu.js

@@ -1,4 +1,3 @@
-
 /*
     let menuState = {
         create: function(){},
@@ -34,7 +33,7 @@ let menuState = {
 
         // CAMERA
         this.game.world.setBounds(0, 0, this.game.world.width + this.extraWidth, this.game.world.height);
-     	  
+
         // Floor
         for(let i=0;i<this.game.world.width/100;i++){
             game.add.image(i*100, 501, 'floor');
@@ -57,8 +56,8 @@ let menuState = {
 
         // BUTTONS
 
-        // Navigation buttons
-		buttonSettings["func_addButtons"](false,true,
+        // Calls function that loads navigation icons
+		iconSettings["func_addButtons"](false,true,
     	                             false,false,false,
                                      true,true,
                                      false,false);
@@ -72,7 +71,7 @@ let menuState = {
 			menuObjList[i].anchor.setTo(0.5, 0.5);
 	        menuObjList[i].inputEnabled = true;
 	        menuObjList[i].input.useHandCursor = true;
-	        menuObjList[i].events.onInputDown.add(this.func_loadGame,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape: loadAssets.levelShapeList[i], label : true, game: this.game, extraWidth: this.extraWidth});
+            menuObjList[i].events.onInputDown.add(this.func_loadGame,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape: loadAssets.levelShapeList[i], label : true, game: this.game, extraWidth: this.extraWidth});
 	        menuObjList[i].events.onInputOver.add(this.func_showTitle,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape : loadAssets.levelShapeList[i], label : true, menu: menuObjList[i], lbl_game: this.lbl_game});
 	        menuObjList[i].events.onInputOut.add(this.func_clearTitle, {menu: menuObjList[i], lbl_game: this.lbl_game});
 			if((i+1)%2==1){
@@ -81,7 +80,7 @@ let menuState = {
 				y=-70; 
 				x+=235;
 			}
-		}
+        }
 
         // TURNING MOUSE INPUT CAPTURE ON TO MANAGE PAGE SCROLL
         this.input.mouse.capture = true;
@@ -105,7 +104,7 @@ let menuState = {
             this.lbl_game.x = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
             this.player_info.x = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
 
-            buttonSettings["changeRightButtonX"]((defaultWidth) + this.camera.x);
+            iconSettings["changeRightButtonX"]((defaultWidth) + this.camera.x);
         }
 
     },
@@ -137,41 +136,20 @@ let menuState = {
         levelShape = this.shape;
         levelLabel = this.label;
 
-        if(this.shape=="Square"){
-            
-            if(this.levelType==1 || this.levelType==2){
-                
-                if(this.levelType==1){
-                    levelType = "A";
-                }else if(this.levelType==2){
-                    levelType = "B";
-                }
-
-                if(debugMode) console.log("Square One");
-                game.state.start('menuSquareOne');                
-            
-            }else if(this.levelType==3){
-                
-                levelType = "C";
-                
-                if(debugMode) console.log("Square Two, "+levelType);
-                game.state.start('menuSquareTwo')
-            
-            }
-
-        }else if(this.shape=="Circle"){
-        
-            if (this.levelType==1){
-                levelType = "A";
-            }else if (this.levelType==2){
-                levelType = "B";
-            }
-            
-            if(debugMode) console.log("Circle One");
-            game.state.start('menuCircleOne');
-        
+        if     (this.levelType==1) levelType = "A";
+        else if(this.levelType==2) levelType = "B";
+        else if(this.levelType==3) levelType = "C";
+
+        if(levelType=="C"){
+            gameStateString = "game"+levelShape+"Two";
+            if(debugMode) console.log(levelShape+" Two, "+levelType);
+        }else{
+            gameStateString = "game"+levelShape+"One";
+            if(debugMode) console.log(levelShape+" One, "+levelType);
         }
 
+        // Calls level difficulty screen
+        game.state.start('difficulty');
     },
 
     func_showTitle: function(){

js/preMenu.js

@@ -1,4 +1,3 @@
-
 /*
     let langState = {
         create: function(){},
@@ -16,122 +15,114 @@
         create: function(){},
         ------------------------------------------------ end of phaser functions
         func_checkEmptyName: function(){}
-        func_savename: function(){} //calls menu.js -> menuState
+        func_saveName: function(){} //calls menu.js -> menuState
     };
 
-    let buttonSettings = {
+    let iconSettings = {
         func_addButtons: function(_,_,_,_,_,_,_,_,_){},
         loadState: function(){}
     };
 */
 
-// "choose language" screen
-
+// Language screen: the player can choose a preferred language for the game text to be displayed
 let langState = {
 
     create: function() {
 
+        //
         if(this.game.world.width != defaultWidth) this.game.world.setBounds(0, 0, defaultWidth, this.game.world.height);
 
-        // AUX
-
         const style = { font: '28px Arial', fill: '#00804d', align: 'center' };
 
-        // AUDIO
-
-        beepSound = game.add.audio('sound_beep');   // game sound
-        okSound = game.add.audio('sound_ok');       // correct answer sound
-        errorSound = game.add.audio('sound_error'); // wrong answer sound
-
-        // BACKGROUND
-
         game.stage.backgroundColor = '#cce5ff';
         
-        // LANGUAGES
-
-        let flagObjList = [];
-        const langNameList= ['FRAÇÕES  ', 'FRAZIONI  ',   'FRACTIONS  ',  'FRACCIONES  ', 'FRACTIONS  '   ];
-        const flagList    = ['flag_BR',   'flag_IT',      'flag_US',      'flag_PE',      'flag_FR'       ];
-        const langList    = ['pt_BR',     'it_IT',        'en_US',        'es_PE',        'fr_FR'         ];
-        const x1List = [-220, -220, -220,  200, 200];
-        const x2List = [-120, -120, -120,  300, 300];
-        const yList  = [-180,    0,  180, -100, 100];
-        
-        for(let i=0; i<langList.length; i++){
-            let titleList = game.add.text(this.game.world.centerX + x1List[i], this.game.world.centerY + yList[i], langNameList[i], style);
-            titleList.anchor.setTo(1, 0.5);
+        // Preparing and setting language screen elements
+
+        const langs = {
+            list: [],
+            text: ['FRAÇÕES  ', 'FRAZIONI  ',   'FRACTIONS  ',  'FRACCIONES  ', 'FRACTIONS  '],
+            flag: ['flag_BR',   'flag_IT',      'flag_US',      'flag_PE',      'flag_FR'    ],
+            lang: ['pt_BR',     'it_IT',        'en_US',        'es_PE',        'fr_FR'      ],
+            x_text: [-220, -220, -220,  200, 200],
+            x_flag: [-120, -120, -120,  300, 300],
+            y:      [-180,    0,  180, -100, 100]
+        }
 
-            flagObjList[i] = game.add.sprite(this.game.world.centerX + x2List[i], this.game.world.centerY + yList[i], flagList[i]);       
-            flagObjList[i].anchor.setTo(0.5, 0.5);
-            flagObjList[i].inputEnabled = true;
-            flagObjList[i].input.useHandCursor = true;
-            flagObjList[i].events.onInputDown.add(this.func_setLang,{ lang: langList[i] });
-            flagObjList[i].events.onInputOver.add(function(){ this.flagObj.scale.setTo(1.05) },{ flagObj: flagObjList[i] });
-            flagObjList[i].events.onInputOut.add( function(){ this.flagObj.scale.setTo(1)    },{ flagObj: flagObjList[i] });
+        for(let i=0; i<langs.lang.length; i++){
+            // Add text for language names
+            const titleList = game.add.text(this.game.world.centerX + langs.x_text[i], this.game.world.centerY + langs.y[i], langs.text[i], style);
+            titleList.anchor.setTo(1, 0.5);
+            // Add images for flags
+            langs.list[i] = game.add.sprite(this.game.world.centerX + langs.x_flag[i], this.game.world.centerY + langs.y[i], langs.flag[i]);       
+            langs.list[i].anchor.setTo(0.5, 0.5);
+            // Set event listener for the flags
+            langs.list[i].inputEnabled = true;
+            langs.list[i].input.useHandCursor = true;
+            langs.list[i].events.onInputDown.add(this.func_setLang,{ langs_lang: langs.lang[i] });
+            langs.list[i].events.onInputOver.add(function(){ this.langs_list.scale.setTo(1.05) },{ langs_list: langs.list[i] });
+            langs.list[i].events.onInputOut.add( function(){ this.langs_list.scale.setTo(1)    },{ langs_list: langs.list[i] });
         }
 
-        
     },
     
+    // Calls loading screen 
     func_setLang: function(){
-        // set language
-        lang = this.lang;
-        // start resource loading
+        // Temporarily sets value of global 'lang' to chosen language
+        lang = this.langs_lang;
+        // Calls loading screen
         game.state.start('load');
     
     }
 
 };
 
-// "loading" screen and load json dictionary
+// Loading screen: shows loading bar while loads json dictionary
 let loadState = {
     
     preload: function() {
-        
-        // Displaying the progress bar
+
         let progressBar = game.add.sprite(game.world.centerX, game.world.centerY, 'progressBar');
         progressBar.anchor.setTo(0.5, 0.5);
         game.load.setPreloadSprite(progressBar);
-        
-        // Loading dictionary
+
+        // Loads jason dictionary, setting the game language chosen by the player
         game.load.json('dictionary', 'assets/languages/'+lang+'.json');
         
     },
 
     create: function() {  
 
-        // gets selected language from json
+        // Set value of global 'lang' to json's dictionary 
         lang = game.cache.getJSON('dictionary');
         
-        if(firstTime==true){ // select language screen - first time opening ifractions
+        // Set screens flow
+        if(firstTime==true){ // first time opening ifractions goes from 'language' to 'name' screen then 'menu'
           firstTime = false;
-          game.state.start('name'); // go to select name screen, then menu
-        }else{               // changing language during the game
-          game.state.start('menu'); // go to menu
+          game.state.start('name'); 
+        }else{               // changing language during the game skips 'name' screen
+          game.state.start('menu');
         }
     
     }
 
 };
 
-// "username" screen
+// Name screen: Asks for player's name 
 let nameState = {
 
     create: function() {
                     
-        // AUX
-
         const style = { font: '30px Arial', fill: '#00804d', align: 'center' };
         
-        // title
+        // Set title and error text
 
-        let title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, style);
+        const title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, style);
         title.anchor.setTo(0.5);
         
         errorEmptyName = game.add.text(this.game.world.centerX, this.game.world.centerY - 70, "", {font: '18px Arial', fill: '#330000', align: 'center'});
         errorEmptyName.anchor.setTo(0.5);
 
-        // "READY" button
+        // Set button that gets player's information
         
         let btn = game.add.graphics(this.game.world.centerX - 84, this.game.world.centerY + 70);
         btn.lineStyle(1, 0x293d3d);
@@ -145,14 +136,17 @@ let nameState = {
         btn.events.onInputDown.add(this.func_checkEmptyName);
         btn.events.onInputOver.add(function(){ btn.alpha=0.4 });
         btn.events.onInputOut.add(function(){ btn.alpha=0.5 });
-        
-        let ready = game.add.text(this.game.world.centerX + 1, this.game.world.centerY + 102, lang.ready, { font: '34px Arial', fill: '#f0f5f5', align: 'center' });
+
+        // Set button Text
+        const ready = game.add.text(this.game.world.centerX + 1, this.game.world.centerY + 102, lang.ready, { font: '34px Arial', fill: '#f0f5f5', align: 'center' });
         ready.anchor.setTo(0.5);      
 
+        // Makes text field visible
         document.getElementById("text-field-div").style.visibility = "visible";
+        
+        // Accepts "enter" as button click
         document.getElementById("name_id").addEventListener('keypress', function(e){
             let keycode = e.keycode ? e.keycode : e.which; 
-            //se apertar enter vai para ready, assim como o botão
             if(keycode == 13){
                 nameState["func_checkEmptyName"]();
             }     
@@ -162,135 +156,124 @@ let nameState = {
          
     func_checkEmptyName: function() {
 
+        // If text field is NOT empty will call function that saves the player's name
         if(document.getElementById("name_id").value!=""){
-            nameState["func_savename"]();
             errorEmptyName.setText("");
+            nameState["func_saveName"]();
         }else{
-            errorEmptyName.setText(lang.empty_name);
+            errorEmptyName.setText(lang.empty_name); // Displays error message
         }
 
     },
-              
-    func_savename: function() {
+
+    // Calls menu screen
+    func_saveName: function() {
         
-        // saves the typed name on username variable
+        // Saves player's input in global variable 'username'
         username = document.getElementById("name_id").value;
         if(debugMode) console.log("user is " + username);        
 
+        // Hides and clears text field
         document.getElementById("text-field-div").style.visibility = "hidden";
-
-        //clears the text field again
         document.getElementById("name_id").value = "";
 
-        if(audioStatus){
-            beepSound.play();
-        }
+        if(audioStatus) beepSound.play();
 
+        // Calls menu state
         game.state.start('menu');
         
     }
 
 };
 
-let buttonSettings = {
-
-    m_info_left: null,
+let iconSettings = {
 
-    m_back: null, 
-    m_list: null,
-    m_help: null,
-
-    m_info_right: null, 
-
-    m_audio: null,
-    m_world: null, 
-
-    xEsq: null,
-    xDir: null,
-
-    func_addButtons: function(left, right, b0Esq, b1Esq, b2Esq, b0Dir, b1Dir, phase, helpBtn){
+    // Add navigation icons on the top of the page based the entered parameters
+    func_addButtons: function(left_side, right_side, left_btn0, left_btn1, left_btn2, right_btn0, right_btn1, level, helpBtn){
         
-        this.xDir = defaultWidth - 50 - 10;
-        this.xEsq = 10;
+        this.left_x = 10;
+        this.right_x = defaultWidth - 50 - 10;
 
-        if(left == true){
-            this.m_info_left = game.add.text(this.xEsq, 53, "", { font: "20px Arial", fill: "#330000", align: "center" });
+        // Labels for the navigation icons
+
+        if(left_side){
+            this.left_text = game.add.text(this.left_x, 53, "", 
+                { font: "20px Arial", fill: "#330000", align: "center" });
         }
 
-        if(right == true){
-            this.m_info_right = game.add.text(this.xDir+50, 53, "", { font: "20px Arial", fill: "#330000", align: "right" });
-            this.m_info_right.anchor.setTo(1,0.02);
+        if(right_side){
+            this.right_text = game.add.text(this.right_x+50, 53, "", 
+                { font: "20px Arial", fill: "#330000", align: "right" });
+            this.right_text.anchor.setTo(1,0.02);
         }
 
-        // left buttons
-        if(b0Esq == true){
-            // Return to diffculty
-            this.m_back = game.add.sprite(this.xEsq, 10, 'back'); 
-            this.m_back.inputEnabled = true;
-            this.m_back.input.useHandCursor = true;
-            this.m_back.events.onInputDown.add(this.loadState, {state: phase, beep: beepSound});
-            this.m_back.events.onInputOver.add(function(){ this.m_info_left.text = lang.menu_back},{m_info_left: this.m_info_left});
-            this.m_back.events.onInputOut.add(function(){ this.m_info_left.text = ""},{m_info_left: this.m_info_left});
+        // Buttons on the left side of the page
+
+        if(left_btn0){ // Return to select difficulty screen
+            this.icon_back = game.add.sprite(this.left_x, 10, 'back'); 
+            this.icon_back.inputEnabled = true;
+            this.icon_back.input.useHandCursor = true;
+            this.icon_back.events.onInputDown.add(this.loadState, {state: level, beep: beepSound});
+            this.icon_back.events.onInputOver.add(function(){ this.left_text.text = lang.menu_back},{left_text: this.left_text});
+            this.icon_back.events.onInputOut.add(function(){ this.left_text.text = ""},{left_text: this.left_text});
             
-            this.xEsq+=50;
+            this.left_x+=50;
         }
 
-        if(b1Esq == true){
-            // Return to menu button
-            this.m_list = game.add.sprite(this.xEsq, 10, 'list'); 
-            this.m_list.inputEnabled = true;
-            this.m_list.input.useHandCursor = true;
-            this.m_list.events.onInputDown.add(this.loadState, {state: "menu", beep: beepSound});
-            this.m_list.events.onInputOver.add(function(){ this.m_info_left.text = lang.menu_list},{m_info_left: this.m_info_left});
-            this.m_list.events.onInputOut.add(function(){ this.m_info_left.text = ""},{m_info_left: this.m_info_left});
+        if(left_btn1){ // Return to main menu screen
+            this.icon_list = game.add.sprite(this.left_x, 10, 'list'); 
+            this.icon_list.inputEnabled = true;
+            this.icon_list.input.useHandCursor = true;
+            this.icon_list.events.onInputDown.add(this.loadState, {state: "menu", beep: beepSound});
+            this.icon_list.events.onInputOver.add(function(){ this.left_text.text = lang.menu_list},{left_text: this.left_text});
+            this.icon_list.events.onInputOut.add(function(){ this.left_text.text = ""},{left_text: this.left_text});
             
-            this.xEsq+=50;
+            this.left_x+=50;
         }
 
-        if(b2Esq == true){
-            // Help button
-            this.m_help = game.add.sprite(this.xEsq, 10, 'help');
-            this.m_help.inputEnabled = true;
-            this.m_help.input.useHandCursor = true;
-            this.m_help.events.onInputDown.add(helpBtn, {beep: beepSound});
-            this.m_help.events.onInputOver.add(function(){ this.m_info_left.text = lang.menu_help},{m_info_left: this.m_info_left});
-            this.m_help.events.onInputOut.add(function(){ this.m_info_left.text = ""},{m_info_left: this.m_info_left});
+        if(left_btn2){ // In some levels, shows solution to the game
+            this.icon_help = game.add.sprite(this.left_x, 10, 'help');
+            this.icon_help.inputEnabled = true;
+            this.icon_help.input.useHandCursor = true;
+            this.icon_help.events.onInputDown.add(helpBtn, {beep: beepSound});
+            this.icon_help.events.onInputOver.add(function(){ this.left_text.text = lang.menu_help},{left_text: this.left_text});
+            this.icon_help.events.onInputOut.add(function(){ this.left_text.text = ""},{left_text: this.left_text});
             
-            this.xEsq+=50;
+            this.left_x+=50;
         }
 
-        // rightButtons
-        if(b0Dir == true){
-            this.m_audio = game.add.sprite(this.xDir, 10, 'audio');
-            audioStatus ? this.m_audio.frame = 0 : this.m_audio.frame = 1;
-            this.m_audio.inputEnabled = true;
-            this.m_audio.input.useHandCursor = true;
-            this.m_audio.events.onInputDown.add(function(){ if(audioStatus){ audioStatus=false; this.m_audio.frame = 1; }else{ audioStatus=true; this.m_audio.frame = 0; }},{m_audio: this.m_audio});
-            this.m_audio.events.onInputOver.add(function(){ this.m_info_right.text = lang.audio },{m_info_right: this.m_info_right});
-            this.m_audio.events.onInputOut.add(function(){ this.m_info_right.text = "" },{m_info_right: this.m_info_right});
-
-            this.xDir-=50;
+        // Buttons on the right side of the page
+
+        if(right_btn0){ // Turns game audio on/off
+            this.icon_audio = game.add.sprite(this.right_x, 10, 'audio');
+            audioStatus ? this.icon_audio.frame = 0 : this.icon_audio.frame = 1;
+            this.icon_audio.inputEnabled = true;
+            this.icon_audio.input.useHandCursor = true;
+            this.icon_audio.events.onInputDown.add(function(){ if(audioStatus){ audioStatus=false; this.icon_audio.frame = 1; }else{ audioStatus=true; this.icon_audio.frame = 0; }},{icon_audio: this.icon_audio});
+            this.icon_audio.events.onInputOver.add(function(){ this.right_text.text = lang.audio },{right_text: this.right_text});
+            this.icon_audio.events.onInputOut.add(function(){ this.right_text.text = "" },{right_text: this.right_text});
+
+            this.right_x-=50;
         }
 
-        if(b1Dir == true){
-            // Return to language button
-            this.m_world = game.add.sprite(this.xDir, 10, 'world'); 
-            this.m_world.inputEnabled = true;
-            this.m_world.input.useHandCursor = true;
-            this.m_world.events.onInputDown.add(this.loadState, {state: "language", beep: beepSound});
-            this.m_world.events.onInputOver.add(function(){ this.m_info_right.text = lang.menu_world },{m_info_right : this.m_info_right});
-            this.m_world.events.onInputOut.add(function(){ this.m_info_right.text = "" },{m_info_right: this.m_info_right});
+        if(right_btn1){ // Return to select language screen
+            this.icon_world = game.add.sprite(this.right_x, 10, 'world'); 
+            this.icon_world.inputEnabled = true;
+            this.icon_world.input.useHandCursor = true;
+            this.icon_world.events.onInputDown.add(this.loadState, {state: "language", beep: beepSound});
+            this.icon_world.events.onInputOver.add(function(){ this.right_text.text = lang.menu_world },{right_text : this.right_text});
+            this.icon_world.events.onInputOut.add(function(){ this.right_text.text = "" },{right_text: this.right_text});
                   
-            this.xDir-=50;
+            this.right_x-=50;
         }
 
     },
 
     changeRightButtonX: function(newWidth){
-        this.m_info_right.x = newWidth - 10;
-        this.m_audio.x = newWidth - 50 - 10;
-        if(debugMode) console.log(this.m_audio.x+" "+newWidth);
-        this.m_world.x = newWidth - 50 - 50 - 10;
+        this.right_text.x = newWidth - 10;
+        this.icon_audio.x = newWidth - 50 - 10;
+        if(debugMode) console.log(this.icon_audio.x+" "+newWidth);
+        this.icon_world.x = newWidth - 50 - 50 - 10;
     },
 
 

js/squareOne.js

@@ -1,10 +1,4 @@
-
 /*
-    let menuSquareOne = {
-        create: function(){},
-        ---------------------------- end of phaser functions
-        func_loadMap: function(){}
-    };
 
     let gameSquareOne = {
         create: function(){},
@@ -21,164 +15,10 @@
             //func_getRndDivisor: function(){}
     };
 
-    let endSquareOne = {
-        create: function(){},
-        update: function(){},
-        ---------------------------- end of phaser functions
-        func_verPrincipal: function(){},
-    };
 */
 
 // Tractor and Square states
 
-/****************************** MENU ****************************/
-
-let menuSquareOne = {
-	
-    create: function() {
-          
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,true,
-                                    false,true,false,
-                                    true,false,
-                                    false,false);
-        
-        // Title
-        let style = { font: '28px Arial', fill: '#00804d'};
-        let title = game.add.text(game.world.centerX, 40, lang.game_menu_title, style);
-        title.anchor.setTo(0.5, 0.5);
-        
-        //SETTING DIFFICULTY LEVELS
-
-        let maxHeight = 120; //Max height of a stair
-        let stairHeight = 40; //height growth of a stair
-        let stairWidth = 100; //Width of a stair
-        let startStair = 320;
-        let startSymbol = 180; 
-        let startSquare = (startSymbol/2)+startStair+stairWidth*3;
-        
-        //First stairs, plus, 3 levels, blue square
-
-        let blueSquare = game.add.graphics(startSquare, 175);
-            blueSquare.anchor.setTo(0.5,0.5);
-            blueSquare.lineStyle(2, 0x31314e);
-            blueSquare.beginFill(0xefeff5);
-            blueSquare.drawRect(0, 0, 80, 40);
-            blueSquare.endFill();
-        
-        let plusTractorIcon = game.add.sprite(startSymbol+30, 215, 'tractor_green');
-            //plus_tractor.frame = 0;
-            plusTractorIcon.scale.setTo(0.5);
-            plusTractorIcon.alpha = 0.9;
-            plusTractorIcon.anchor.setTo(0.5,0.5);
-        
-        let plusArrowIcon = game.add.sprite(startSymbol+100, 215, 'h_arrow');
-            plusArrowIcon.scale.setTo(0.3);
-            plusArrowIcon.alpha = 0.9;
-            plusArrowIcon.anchor.setTo(0.5,0.5);
-        
-        let stairsPlus = [];
-
-        for(let i=1;i<=3;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 135+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsPlus[i] = game.add.graphics(0, 0);
-            stairsPlus[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsPlus[i].beginFill(0x99b3ff);
-            stairsPlus[i].drawRect(x1, y1, x2, y2);
-            stairsPlus[i].endFill();
-            
-            //event
-            stairsPlus[i].inputEnabled = true;
-            stairsPlus[i].input.useHandCursor = true;
-            stairsPlus[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'Plus' });
-            stairsPlus[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsPlus[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        }
-        
-        //Second stairs, minus, 3 levels, red Square
-
-        let redSquare = game.add.graphics(startSquare, 330);
-            redSquare.anchor.setTo(0.5,0.5);
-            redSquare.lineStyle(2, 0xb30000);
-            redSquare.beginFill(0xefeff5);
-            redSquare.drawRect(0, 0, 80, 40);
-            redSquare.endFill();
-
-        let minusTractorIcon = game.add.sprite(startSymbol+70, 370, 'tractor_red');
-            //minusTractorIcon.frame = 5;
-            minusTractorIcon.scale.setTo(0.5);
-            minusTractorIcon.alpha = 0.9;
-            minusTractorIcon.anchor.setTo(0.5,0.5);
-        
-        let minusArrowIcon = game.add.sprite(startSymbol, 370, 'h_arrow');
-            minusArrowIcon.scale.setTo(0.3);
-            minusArrowIcon.alpha = 0.9;
-            minusArrowIcon.scale.x *= -1;
-            minusArrowIcon.anchor.setTo(0.5,0.5);
-        
-        let stairsMinus = [];
-
-        for(let i=1;i<=3;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 285+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsMinus[i] = game.add.graphics(0, 0);
-            stairsMinus[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsMinus[i].beginFill(0xff6666);
-            stairsMinus[i].drawRect(x1, y1, x2, y2);
-            stairsMinus[i].endFill();
-            
-            //event
-            stairsMinus[i].inputEnabled = true;
-            stairsMinus[i].input.useHandCursor = true;
-            stairsMinus[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'Minus' });
-            stairsMinus[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsMinus[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        } 
-
-    },
-        
-    //MapLoading function
-    func_loadMap: function(){
-        
-        if(audioStatus){
-            this.beep.play();
-        }
-        
-        levelPosition = 0; //Map position
-        levelMove = true; //Move no next point
-        levelDifficulty  = this.difficulty; //Number of difficulty (1 to 3)
-        levelOperator = this.operator; //Operator of game
-        passedLevels = 0; //reset the game progress when entering a new level
-        
-        game.state.start('map');
-
-    }
-    
-};
-
-/****************************** GAME ****************************/
-
 let gameSquareOne = {
 
     create: function() {  
@@ -193,42 +33,44 @@ let gameSquareOne = {
         // Background
         game.add.image(0, 0, 'bgimage');
         
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,true,
+        // Calls function that loads navigation icons
+        iconSettings["func_addButtons"](true,true,
                                     true,true,true,
                                     true,false,
-                                    "menuSquareOne", this.func_viewHelp);
+                                    'difficulty', this.func_viewHelp);
 
-        //Clouds
+        // Clouds
         game.add.image(300, 100, 'cloud');
         game.add.image(660, 80, 'cloud');
         game.add.image(110, 85, 'cloud').scale.setTo(0.8);
                 
-        // Styles for labels
-        let stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        let styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        let styleFraction = { font: '15px Arial', fill: '#000080', align: 'center'};
-        let styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
+        // Font styles for labels
+        const stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
+        const styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
+        const styleFraction = { font: '15px Arial', fill: '#000080', align: 'center'};
         
-        //Floor and road
-        let startX = 170; //Initial tractor and place position
+        //Initial tractor and place position
+        let startX = 170;
         if(levelOperator=='Minus') startX = 730;
-        startX = startX; //Workaround for initial position inside update
-        let blockWidth = 80; //Width of blocks and floor spaces
-        let blockHeight = 40; //Height of blocks and floor spaces
+        startX = startX;    //Workaround for initial position inside update
+        
+        // Width and height of blocks and 'floor gaps'
+        const blockWidth = 80; 
+        const blockHeight = 40;
+        // Floor gaps
         for(let i=0;i<9;i++){
             game.add.image(i*100, 501, 'floor');
         }
                 
         //Control variables
-        clicked = false; //Floor blocks or apilled blocks clicked
+        clicked = false;    //Floor blocks or apilled blocks clicked
         hideLabels = false; //Labels of blocks
-        animate = false; //Start move animation
-        checkCollide = false; //Check if tractor fon't any block left or floor hole
-        result = false; //Game is correct
-        move = false; //Continue tractor animation
-        moveCounter = 0; //Move counter
-        moveEnd = 140; //Move end counter
+        animate = false;    //Start move animation
+        checkCollide = false;   //Check if tractor fon't any block left or floor hole
+        result = false;     //Game is correct
+        move = false;       //Continue tractor animation
+        moveCounter = 0;    //Move counter
+        moveEnd = 140;      //Move end counter
                 
         //tractor
         let tractorAlign = -80;
@@ -242,10 +84,11 @@ let gameSquareOne = {
         if(levelOperator=='Minus'){
             tractor.scale.x *= -1;
         }
-        
+
         //generator
+
         //Blocks and fractions
-        if(debugMode) console.log("pos " +levelPosition);
+        if(debugMode) console.log("pos " +levelPosition); // position in the game map
         
         maxBlocks = levelPosition+4; //Maximum blocks
         if(levelType=='B' || levelOperator=='Mixed') maxBlocks = 10;
@@ -803,9 +646,10 @@ let gameSquareOne = {
         if(!clicked){
             let pointer;
             if(levelType=='A'){
-                let pointer = game.add.image(endPosition, 490, 'pointer');
+                pointer = game.add.image(endPosition, 490, 'pointer');
             }else{
-                let pointer = game.add.image(blocks.children[endIndex-1].x, blocks.children[endIndex-1].y-blockSize/2, 'pointer');
+                console.log("hey! ---> " + blocks.children[endIndex-1]);
+                pointer = game.add.image(blocks.children[endIndex-1].x, blocks.children[endIndex-1].y-blockSize/2, 'pointer');
             }
             pointer.anchor.setTo(0.5, 0);
             pointer.alpha = 0.7;
@@ -813,73 +657,4 @@ let gameSquareOne = {
 
     }
     
-};
-
-/****************************** END ****************************/
-
-let endSquareOne = {
-
-    create: function() {  
-
-        // Background
-        game.add.image(0, 0, 'bgimage');
-        
-        //Clouds
-        game.add.image(300, 100, 'cloud');
-        game.add.image(660, 80, 'cloud');
-        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-        
-        // Styles for labels
-        let stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        let styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        let styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
-        //Floor
-        for(let i=0;i<9;i++){
-            game.add.image(i*100, 501, 'floor');
-        }
-        
-        // Progress bar
-        for(let p=0;p<5;p++){
-            let block = game.add.image(660+p*30, 10, 'block');
-            block.scale.setTo(2, 1); //Scaling to double width
-        }
-        game.add.text(820, 10, '100%', styleMenu);
-        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, styleMenu).anchor.setTo(1,0);
-        game.add.image(660, 10, 'pgbar');
-        
-        //Farm and trees
-        game.add.sprite(650, 260 , 'farm').scale.setTo(1.1);
-        game.add.sprite(30, 280 , 'tree4');
-        game.add.sprite(360, 250 , 'tree2');
-        
-        //tractor
-        this.tractor = game.add.sprite(0, 490 , 'tractor');
-        this.tractor.anchor.setTo(0.5,0.5);
-        this.tractor.scale.setTo(0.8);
-            
-        this.tractor.animations.add('right',[0,1,2,3,4]);
-        this.tractor.animations.play('right', 5, true);
-        
-    },
-
-    update: function() {
-
-        if(this.tractor.x<=700){
-            this.tractor.x += 2;
-        }else{
-            if(levelMenu){
-            	passedLevels = 0;
-                game.state.start('menu');
-            }else{
-                this.tractor.animations.stop();
-            }
-        }
-
-    },
-    
-    func_verPrincipal: function(){
-        game.state.start('welcome');
-    },
-
-};
+};

js/squareTwo.js

@@ -1,11 +1,5 @@
 /*
 
-    let menuSquareTwo = {
-        create: function(){},
-        ---------------------------- end of phaser functions
-        func_loadMap: function(){}
-    };
-
     let gameSquareTwo = {
         create: function(){},
         update: function(){},
@@ -21,165 +15,11 @@
         func_getRndDivisor: function(){}
             
     };
-
-    let endSquareTwo = {
-        create: function(){},
-        update: function(){},
-        ---------------------------- end of phaser functions
-        func_verPrincipal: function(){},
-    };
         
 */
 
 // Fractions Comparison Square states
 
-/****************************** MENU ****************************/
-
-let menuSquareTwo = {
-
-    create: function() {
-          
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,true,
-                                    false,true,false,
-                                    true,false,
-                                    false,false);
-        
-        // Setting title
-        let style = { font: '28px Arial', fill: '#00804d'};
-        let title = game.add.text(game.world.centerX, 40, lang.game_menu_title, style);
-        title.anchor.setTo(0.5, 0.5);
-        
-        //SETTING DIFFICULTY LEVELS
-
-        let maxHeight = 120;  //Max height of a stair
-        let stairHeight = 29; //height growth of a stair
-        let stairWidth = 80;  //Width of a stair
-        let startStair = 240;
-        let startSymbol = 150;
-        let startSquare = (startSymbol/2)+startStair+stairWidth*5;
-        
-        let equalsIcon = game.add.sprite(startSymbol, 300, 'equal');
-            equalsIcon.frame = 0;
-            equalsIcon.scale.setTo(0.7);
-            equalsIcon.anchor.setTo(0.5,0.5);
-            
-        //First stairs, More divisions to less divisions 1, 5 levels
-
-        let stairsMoreToLess1 = [];
-
-        for(let i=1;i<=5;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 100+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsMoreToLess1[i] = game.add.graphics(0, 0);
-            stairsMoreToLess1[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsMoreToLess1[i].beginFill(0x99b3ff);
-            stairsMoreToLess1[i].drawRect(x1, y1, x2, y2);
-            stairsMoreToLess1[i].endFill();
-            
-            //event
-            stairsMoreToLess1[i].inputEnabled = true;
-            stairsMoreToLess1[i].input.useHandCursor = true;
-            stairsMoreToLess1[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'A' });
-            stairsMoreToLess1[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsMoreToLess1[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        }
-
-        //Second stairs, More divisions to less divisions 2, 5 levels
-
-        let stairsMoreToLess2 = [];
-
-        for(let i=1;i<=5;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 270+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsMoreToLess2[i] = game.add.graphics(0, 0);
-            stairsMoreToLess2[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsMoreToLess2[i].beginFill(0xff6666);
-            stairsMoreToLess2[i].drawRect(x1, y1, x2, y2);
-            stairsMoreToLess2[i].endFill();
-            
-            //event
-            stairsMoreToLess2[i].inputEnabled = true;
-            stairsMoreToLess2[i].input.useHandCursor = true;
-            stairsMoreToLess2[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'B' });
-            stairsMoreToLess2[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsMoreToLess2[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        } 
-        
-        //Third stairs, Less divisions to more divisions, 5 levels
-
-        let stairsLessToMore = [];
-
-        for(let i=1;i<=5;i++){
-            //stair
-            let x1 = startStair+(stairWidth*(i-1));
-            let y1 = 440+maxHeight-i*stairHeight;
-            let x2 = stairWidth;//x1 + 40;
-            let y2 = stairHeight*i;//y1 + 24;
-            
-            stairsLessToMore[i] = game.add.graphics(0, 0);
-            stairsLessToMore[i].lineStyle(1, 0xFFFFFF, 1);
-            stairsLessToMore[i].beginFill(0xb366ff);
-            stairsLessToMore[i].drawRect(x1, y1, x2, y2);
-            stairsLessToMore[i].endFill();
-            
-            //event
-            stairsLessToMore[i].inputEnabled = true;
-            stairsLessToMore[i].input.useHandCursor = true;
-            stairsLessToMore[i].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: i, operator: 'C' });
-            stairsLessToMore[i].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
-            stairsLessToMore[i].events.onInputOut.add(function (item) { item.alpha=1; }, this);
-            
-            //label
-            let xl = x1+stairWidth/2; //x label
-            let yl = y1+(stairHeight*i)/2; //y label
-            let label = game.add.text(xl, yl, i, { font: '25px Arial', fill: '#ffffff', align: 'center' });
-                label.anchor.setTo(0.5, 0.4);
-        } 
-
-    },
-        
-    //MapLoading function
-    func_loadMap: function(){
-
-        if(audioStatus){
-            this.beep.play();
-        }
-
-        levelPosition = 0; //Map position
-        levelMove = true; //Move no next point
-        levelDifficulty  = this.difficulty; //Number of difficulty (1 to 5)
-        leveloperator = this.operator; //Type of game
-        passedLevels = 0; //reset the game progress when entering a new level
-
-        game.state.start('map');
-
-    },
-    
-};
-
-/****************************** GAME ****************************/
-
 let gameSquareTwo = {
 
     create: function() {  
@@ -195,11 +35,11 @@ let gameSquareTwo = {
         // Background
         game.add.image(0, 0, 'bgimage');
         
-        // Navigation buttons
-        buttonSettings["func_addButtons"](true,true,
+        // Calls function that loads navigation icons
+        iconSettings["func_addButtons"](true,true,
                                     true,true,false,
                                     true,false,
-                                    "menuSquareTwo", false);
+                                    'difficulty', false);
 
         //Clouds
         game.add.image(300, 100, 'cloud');
@@ -670,72 +510,4 @@ let gameSquareTwo = {
 
     },
     
-};
-
-/****************************** END ****************************/
-
-let endSquareTwo = {
-
-    create: function() {  
-
-        // Background
-        game.add.image(0, 0, 'bgimage');
-                
-        //Clouds
-        game.add.image(300, 100, 'cloud');
-        game.add.image(660, 80, 'cloud');
-        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-        
-        // Styles for labels
-        let stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        let styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        let styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
-        //Floor
-        for(let i=0;i<9;i++){
-            game.add.image(i*100, 501, 'floor');
-        }
-        
-        // Progress bar
-        for(let p=1;p<=5;p++){
-            let block = game.add.image(660+(p-1)*30, 10, 'block');
-            block.scale.setTo(2, 1); //Scaling to double width
-        }
-        game.add.text(820, 10, '100%', styleMenu);
-        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, styleMenu).anchor.setTo(1,0);
-        game.add.image(660, 10, 'pgbar');
-        
-        //School and trees
-        game.add.sprite(600, 222 , 'school').scale.setTo(0.7);
-        game.add.sprite(30, 280 , 'tree4');
-        game.add.sprite(360, 250 , 'tree2');
-        
-        //kid
-        this.kid = game.add.sprite(0, 460 , 'kid_run');
-        this.kid.anchor.setTo(0.5,0.5);
-        this.kid.scale.setTo(0.7);
-        this.kid.animations.add('walk', [0,1,2,3,4,5,6,7,8,9,10,11]);
-        this.kid.animations.play('walk', 6, true);
-
-    },
-
-    update: function() {
-
-        if(this.kid.x<=700){
-            this.kid.x += 2;
-        }else{
-            if(levelMenu){            	
-            	passedLevels = 0;
-                game.state.start('menu');
-            }else{
-                this.kid.animations.stop();
-            }
-        }
-
-    },
-    
-    func_verPrincipal: function(){
-        game.state.start('welcome');
-    },
-          
-};
+};