grammar check | in the process of changing the main menu screen to expand as more levels are added | *ON/OFF labels* options were removed from the main menu screen and are to be added to the, now, difficulty screen | in the process of making the code easier to change in the future

assets/languages/pt_BR.json

@@ -4,7 +4,7 @@
     "menu_title":"SELECIONE UM JOGO",
     "difficulty": "Dificuldade",
     "level": "Nível",
-    "game_menu_title": "SELECINAR OPERAÇÃO E DIFICULDADE",
+    "game_menu_title": "SELECIONAR OPERAÇÃO E DIFICULDADE",
     "good_job": "Bom trabalho!",
     "retry": "Tente novamente!",
     "menu_world" : "SELECIONAR IDIOMA",

js/boot.js

@@ -2,6 +2,9 @@
 
 				var passedLevels;
 
+				//premenu
+				var errorEmptyName;
+
 				//map
 				var kid, tractor;
 
@@ -46,15 +49,18 @@
     var timer, totalTime;
 
     // variaveis globais
-    var audioStatus = true; // turns game audio on/off
+    var audioStatus = false; // turns game audio on/off
     var firstTime = true; //if player has just oppened the game
-    var debugMode = true; //turns console messages for developers on/off (changeable only by code)
+    var debugMode = false; //turns console messages for developers on/off (changeable only by code)
 
+    // game dimentions
+    var defaultWidth = 900;
+    var defaultHeight = 600;
 
     // Initialize the game
     var game = new Phaser.Game(
-        900, 
-        600, 
+        defaultWidth, 
+        defaultHeight, 
         Phaser.CANVAS,
         'fractions-game'
     );
@@ -99,10 +105,14 @@
     game.state.add('endSquareTwo', endSquareTwo); // squareTwo.js
 
     var loadAssets = {
+    		
+    	levelSpriteList: null,
+    	levelShapeList: null,
+    	levelTypeList: null,
 
     	preload: function(){
-    
-    		//directory auxiliar
+
+    		//auxiliar directory
 	        var imgsrc = 'assets/img/';
 
 	        //Progress bar image
@@ -121,18 +131,106 @@
 	        game.load.image('cloud', 	imgsrc+'cloud.png');
 	        game.load.image('floor',	imgsrc+'floor.png');
 	        game.load.image('road', 	imgsrc+'road.png');
-	        
+
 	        //game phases buttons list
-	        game.load.image('game1s', 	imgsrc+'game/1-left-subs.png');
-	        game.load.image('game2s', 	imgsrc+'game/1-right-nosubs.png');
-	        game.load.image('game3s', 	imgsrc+'game/2-left-subs.png');
-	        game.load.image('game4s', 	imgsrc+'game/2-right-nosubs.png');
-	        game.load.image('game1c', 	imgsrc+'game/3-left-subs.png');
-	        game.load.image('game2c', 	imgsrc+'game/3-right-nosubs.png');
-	        game.load.image('game3c', 	imgsrc+'game/4-left-subs.png');
-	        game.load.image('game4c', 	imgsrc+'game/4-right-nosubs.png');
-	        game.load.image('game5s', 	imgsrc+'game/5.png');
+	        this.levelSpriteList = [];
+
 	        
+	        var 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 = [
+		        	'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
+
+		        	'5.png',
+		        	'5.png',
+		        	'5.png',
+		        	'5.png',
+
+		        	'5.png',
+		        	'5.png',
+		        	'5.png',
+		        	'5.png'
+	        	];
+	    	}
+			
+
+	        for(var 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 = [
+					'Square', 
+					'Square', 
+					'Circle', 
+					'Circle', 
+					'Square',
+
+					'Square', 
+					'Square', 
+					'Square', 
+					'Square',
+
+					'Square', 
+					'Square', 
+					'Square', 
+					'Square'
+				];
+			}
+			
+        	this.levelTypeList  = [
+        		1, 
+        		2, 
+        		1, 
+        		2, 
+        		3
+        	];
+        	
+	       	
+	       	if(debugMode){
+	       		this.levelTypeList  = [
+	        		1, 
+	        		2, 
+	        		1, 
+	        		2, 
+	        		3,
+
+	        		3, 
+	        		3, 
+	        		3, 
+	        		3,
+
+	        		3, 
+	        		3, 
+	        		3, 
+	        		3
+	        	];
+	        }
+	       	
+
 	        //header menu buttons
 	        game.load.image('back', 	imgsrc+'menu/back.png');
 	        game.load.image('home', 	imgsrc+'menu/home.png');

js/circleOne.js

@@ -38,10 +38,10 @@ var menuCircleOne = {
     create: function() {
                 
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,1,
-                                    0,1,0,
-                                    1,0,
-                                    0,0);        
+        buttonSettings["func_addButtons"](true,true,
+                                    false,true,false,
+                                    true,false,
+                                    false,false);        
         
         // Title
         var style = { font: '28px Arial', fill: '#00804d'};
@@ -240,9 +240,9 @@ var gameCircleOne = {
         game.add.image(0, 0, 'bgimage');
 
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,1,
-                                    1,1,1,
-                                    1,0,
+        buttonSettings["func_addButtons"](true,true,
+                                    true,true,true,
+                                    true,false,
                                     "menuCircleOne", this.func_viewHelp);
         
         //Clouds

js/map.js

@@ -26,10 +26,10 @@ var mapState = {
         game.add.image(0, 40, 'bgmap');
         
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,0,
-                                    1,1,0,
-                                    0,0,
-                                    this.menuStateString,0);
+        buttonSettings["func_addButtons"](true,false,
+                                    true,true,false,
+                                    false,false,
+                                    this.menuStateString,false);
         
         // Styles for labels
         var stylePlace = { font: '26px Arial', fill: '#ffffff', align: 'center'};

js/menu.js

@@ -11,126 +11,125 @@
 
 var menuState = {
 
+    inputStartPosition: null,
+    inputEndPosition: null,
+    
+    isCameraMoving: false,
+
+    extraWidth: null,
+
+    title: null,
+    lbl_game: null,
+    player_info: null,
+
     // creating game menu screen assets
     create: function() {
         
-     	// BACKGROUND
+        if(loadAssets.levelSpriteList.length > 8){
+            var aux = loadAssets.levelSpriteList.length-8;
+            this.extraWidth = (aux%2==0) ? (aux/2)*235 : ((aux+1)/2)*235;
+        }else{
+            this.extraWidth = 0;
+        }
+
+        // CAMERA
+        this.game.world.setBounds(0, 0, this.game.world.width + this.extraWidth, this.game.world.height);
      	  
         // Floor
-        for(var i=0;i<9;i++){
+        for(var i=0;i<this.game.world.width/100;i++){
             game.add.image(i*100, 501, 'floor');
         }
-
         // LABELS
 
         // Player name
-        var player_info = game.add.text(this.game.world.centerX, 40, lang.welcome + ", " + username + "!", { font: "20px Arial", fill: "#330000", align: "center" });        
-        player_info.anchor.setTo(0.5,0.5);
+        this.player_info = game.add.text(this.game.world.centerX - this.extraWidth/2, 40, lang.welcome + ", " + username + "!", { font: "20px Arial", fill: "#330000", align: "center" });        
+        this.player_info.anchor.setTo(0.5,0.5);
 
         // Title : Select a game
         var style = { font: "32px Arial", fill: "#00804d", align: "center" };
-        var title = game.add.text(this.game.world.centerX, 80, lang.menu_title, style);
-        title.anchor.setTo(0.5,0.5);
+        this.title = game.add.text(this.game.world.centerX - this.extraWidth/2, 80, lang.menu_title, style);
+        this.title.anchor.setTo(0.5,0.5);
 
         // Subtitle : Game mode 
         var style_game = { font: "27px Arial", fill: "#003cb3", align: "center" };
-        var lbl_game = game.add.text(this.game.world.centerX, 110, "", style_game);
-        lbl_game.anchor.setTo(0.5,0.5);
+        this.lbl_game = game.add.text(this.game.world.centerX - this.extraWidth/2, 110, "", style_game);
+        this.lbl_game.anchor.setTo(0.5,0.5);
 
         // BUTTONS
 
         // Navigation buttons
-		buttonSettings["func_addButtons"](0,1,
-    	                             0,0,0,
-                                     1,1,
-                                     0,0);
+		buttonSettings["func_addButtons"](false,true,
+    	                             false,false,false,
+                                     true,true,
+                                     false,false);
         
         // Game buttons
+		var x = -350;
+		var y = -70;
+        var menuObjList = [];
+		for(var i=0; i<loadAssets.levelSpriteList.length; i++){
+			menuObjList[i] = game.add.sprite(defaultWidth/2 + x, this.game.world.centerY + y, 'game'+i);
+			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.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){
+				y=90;
+			}else{
+				y=-70; 
+				x+=235;
+			}
+		}
+
+        // TURNING MOUSE INPUT CAPTURE ON TO MANAGE PAGE SCROLL
+        this.input.mouse.capture = true;
+
+    },
+
+    update: function(){
         
-        menu1 = game.add.sprite(this.game.world.centerX - 350, this.game.world.centerY - 70, 'game1s');
-        menu2 = game.add.sprite(this.game.world.centerX - 200, this.game.world.centerY - 70, 'game2s');
-        menu3 = game.add.sprite(this.game.world.centerX - 350, this.game.world.centerY + 90, 'game3s');
-        menu4 = game.add.sprite(this.game.world.centerX - 200, this.game.world.centerY + 90, 'game4s');
-        
-        menu5 = game.add.sprite(this.game.world.centerX + 10,  this.game.world.centerY - 70, 'game1c');
-        menu6 = game.add.sprite(this.game.world.centerX + 160, this.game.world.centerY - 70, 'game2c');
-        menu7 = game.add.sprite(this.game.world.centerX + 10,  this.game.world.centerY + 90, 'game3c');
-        menu8 = game.add.sprite(this.game.world.centerX + 160, this.game.world.centerY + 90, 'game4c');
 
-        menu9 = game.add.sprite(this.game.world.centerX + 350, this.game.world.centerY - 70, 'game5s');
+        if(this.input.activePointer.leftButton.isUp){
+            this.inputUp();
+        }
 
-        // ACTIONS
+        if(this.input.activePointer.leftButton.isDown){
+            this.inputDown();
+        }
 
-        // Game Button actions
-        
-        menu1.anchor.setTo(0.5, 0.5);
-        menu1.inputEnabled = true;
-        menu1.input.useHandCursor = true;
-        menu1.events.onInputDown.add(this.func_loadGame,{levelType:1, beep: beepSound, shape : "Square", label : true});
-        menu1.events.onInputOver.add(this.func_showTitle,{levelType:1, beep: beepSound, shape : "Square", label : true, menu: menu1, lbl_game: lbl_game});
-        menu1.events.onInputOut.add(this.func_clearTitle, {menu: menu1, lbl_game: lbl_game});
-        
-        menu2.anchor.setTo(0.5, 0.5);
-        menu2.inputEnabled = true;
-        menu2.input.useHandCursor = true;
-        menu2.events.onInputDown.add(this.func_loadGame,{levelType:1, beep: beepSound, shape : "Square", label : false});
-        menu2.events.onInputOver.add(this.func_showTitle,{levelType:1, beep: beepSound, shape : "Square", label : false, menu: menu2, lbl_game: lbl_game});
-        menu2.events.onInputOut.add(this.func_clearTitle, {menu: menu2, lbl_game: lbl_game});
-        
-        menu3.anchor.setTo(0.5, 0.5);
-        menu3.inputEnabled = true;
-        menu3.input.useHandCursor = true;
-        menu3.events.onInputDown.add(this.func_loadGame,{levelType:2, beep: beepSound, shape : "Square", label : true});
-        menu3.events.onInputOver.add(this.func_showTitle,{levelType:2, beep: beepSound, shape : "Square", label : true, menu: menu3, lbl_game: lbl_game});
-        menu3.events.onInputOut.add(this.func_clearTitle, {menu: menu3, lbl_game: lbl_game});
-        
-        menu4.anchor.setTo(0.5, 0.5);
-        menu4.inputEnabled = true;
-        menu4.input.useHandCursor = true;
-        menu4.events.onInputDown.add(this.func_loadGame,{levelType:2, beep: beepSound, shape : "Square", label : false});
-        menu4.events.onInputOver.add(this.func_showTitle,{levelType:2, beep: beepSound, shape : "Square", label : false, menu: menu4, lbl_game: lbl_game});
-        menu4.events.onInputOut.add(this.func_clearTitle, {menu: menu4, lbl_game: lbl_game});
-        
-        menu5.anchor.setTo(0.5, 0.5);
-        menu5.inputEnabled = true;
-        menu5.input.useHandCursor = true;
-        menu5.events.onInputDown.add(this.func_loadGame,{levelType:1, beep: beepSound, shape : "Circle", label : true});
-        menu5.events.onInputOver.add(this.func_showTitle,{levelType:1, beep: beepSound, shape : "Circle", label : true, menu: menu5, lbl_game: lbl_game});
-        menu5.events.onInputOut.add(this.func_clearTitle, {menu: menu5, lbl_game: lbl_game});
-        
-        menu6.anchor.setTo(0.5, 0.5);
-        menu6.inputEnabled = true;
-        menu6.input.useHandCursor = true;
-        menu6.events.onInputDown.add(this.func_loadGame,{levelType:1, beep: beepSound, shape : "Circle", label : false});
-        menu6.events.onInputOver.add(this.func_showTitle,{levelType:1, beep: beepSound, shape : "Circle", label : false, menu: menu6, lbl_game: lbl_game});
-        menu6.events.onInputOut.add(this.func_clearTitle, {menu: menu6, lbl_game: lbl_game});
-        
-        menu7.anchor.setTo(0.5, 0.5);
-        menu7.inputEnabled = true;
-        menu7.input.useHandCursor = true;
-        menu7.events.onInputDown.add(this.func_loadGame,{levelType:2, beep: beepSound, shape : "Circle", label : true});
-        menu7.events.onInputOver.add(this.func_showTitle,{levelType:2, beep: beepSound, shape : "Circle", label : true, menu: menu7, lbl_game: lbl_game});
-        menu7.events.onInputOut.add(this.func_clearTitle, {menu: menu7, lbl_game: lbl_game});
-        
-        menu8.anchor.setTo(0.5, 0.5);
-        menu8.inputEnabled = true;
-        menu8.input.useHandCursor = true;
-        menu8.events.onInputDown.add(this.func_loadGame,{levelType:2, beep: beepSound, shape : "Circle", label : false});
-        menu8.events.onInputOver.add(this.func_showTitle,{levelType:2, beep: beepSound, shape : "Circle", label : false, menu: menu8, lbl_game: lbl_game});
-        menu8.events.onInputOut.add(this.func_clearTitle, {menu: menu8, lbl_game: lbl_game});
-
-        menu9.anchor.setTo(0.5, 0.5);
-        menu9.inputEnabled = true;
-        menu9.input.useHandCursor = true;
-        menu9.events.onInputDown.add(this.func_loadGame,{levelType:3, beep: beepSound, shape : "Square", label : true});
-        menu9.events.onInputOver.add(this.func_showTitle,{levelType:3, beep: beepSound, shape : "Square", label : true, menu: menu9, lbl_game: lbl_game});
-        menu9.events.onInputOut.add(this.func_clearTitle, {menu: menu9, lbl_game: lbl_game});
+        if(this.isCameraMoving){
+            this.camera.x += (this.inputStartPosition.x - this.input.activePointer.x)/50;
+            this.title.x = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
+            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);
+        }
 
     },
     
+    inputDown: function(){
+        if(!this.isCameraMoving){
+            this.inputStartPosition = new Phaser.Point(this.input.activePointer.x, this.input.activePointer.y);
+        } 
+
+        this.isCameraMoving = true;
+
+    },
+
+    inputUp: function(){
+        this.isCameraMoving = false;
+    },
+
     //calls the selected game menu screen
     func_loadGame: function(){
 
+        if(debugMode) console.log("antes: "+this.game.world.width);
+        this.game.world.setBounds(0, 0, defaultWidth, this.game.world.height);
+        if(debugMode) console.log("depois: "+this.game.world.width);
+
         if(audioStatus){
             this.beep.play();
         }
@@ -197,17 +196,10 @@ var menuState = {
         }
         
         if(type!=""){
-          //circ/quad       A/B/C
+          //circ/quad       I/II/III
             title  += " " + type;
         }
-        
-        if(this.label){
-          //-    sem/com                  legendas
-            title += " - " + lang.with_name + " " + lang.label_name;
-        }else{
-            title += " - " + lang.without_name + " " + lang.label_name;
-        }
-        
+
         this.lbl_game.text = title;
 
         this.menu.scale.setTo(1.05);

js/preMenu.js

@@ -31,91 +31,52 @@ var langState = {
 
     create: function() {
 
-    	// AUX
+        if(this.game.world.width != defaultWidth) this.game.world.setBounds(0, 0, defaultWidth, this.game.world.height);
+
+        // AUX
 
         var style = { font: '28px Arial', fill: '#00804d', align: 'center' };
 
-		//AUDIO
+        // AUDIO
 
-        beepSound = game.add.audio('sound_beep');	// game sound
-        okSound = game.add.audio('sound_ok'); 		// correct answer sound
+        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
+        // BACKGROUND
 
         game.stage.backgroundColor = '#cce5ff';
         
         // LANGUAGES
 
-        //pt_BR
-        var titlePT = game.add.text(this.game.world.centerX - 220, this.game.world.centerY - 180, 'FRAÇÕES  ', style);
-        titlePT.anchor.setTo(1, 0.5);
-
-        var flagPT = game.add.sprite(this.game.world.centerX - 120, this.game.world.centerY - 180, 'flag_BR');       
-        flagPT.anchor.setTo(0.5, 0.5);
-        flagPT.inputEnabled = true;
-        flagPT.input.useHandCursor = true;
-        flagPT.events.onInputDown.add(this.func_setLang,{lang:'pt_BR'});
-        flagPT.events.onInputOver.add(function(){ flagPT.scale.setTo(1.05) });
-        flagPT.events.onInputOut.add(function(){ flagPT.scale.setTo(1) });
-
-        //it IT
-		var titleIT = game.add.text(this.game.world.centerX - 220, this.game.world.centerY, 'FRAZIONI  ', style);
-        titleIT.anchor.setTo(1, 0.5);
-        
-        var flagIT = game.add.sprite(this.game.world.centerX - 120, this.game.world.centerY, 'flag_IT');       
-        flagIT.anchor.setTo(0.5, 0.5);
-        flagIT.inputEnabled = true;
-        flagIT.input.useHandCursor = true;
-        flagIT.events.onInputDown.add(this.func_setLang,{lang:'it_IT'});
-        flagIT.events.onInputOver.add(function(){ flagIT.scale.setTo(1.05) });
-        flagIT.events.onInputOut.add(function(){ flagIT.scale.setTo(1) });
-
-        //en_US
-        var titleEN = game.add.text(this.game.world.centerX - 220, this.game.world.centerY + 180, 'FRACTIONS  ', style);
-        titleEN.anchor.setTo(1, 0.5);
+        var flagObjList = [];
+        var langNameList= ['FRAÇÕES  ', 'FRAZIONI  ',   'FRACTIONS  ',  'FRACCIONES  ', 'FRACTIONS  '   ];
+        var flagList    = ['flag_BR',   'flag_IT',      'flag_US',      'flag_PE',      'flag_FR'       ];
+        var langList    = ['pt_BR',     'it_IT',        'en_US',        'es_PE',        'fr_FR'         ];
+        var x1List = [-220, -220, -220,  200, 200];
+        var x2List = [-120, -120, -120,  300, 300];
+        var yList  = [-180,    0,  180, -100, 100];
         
-        var flagEN = game.add.sprite(this.game.world.centerX - 120, this.game.world.centerY + 180, 'flag_US');       
-        flagEN.anchor.setTo(0.5, 0.5);
-        flagEN.inputEnabled = true;
-        flagEN.input.useHandCursor = true;
-        flagEN.events.onInputDown.add(this.func_setLang,{lang:'en_US'});
-        flagEN.events.onInputOver.add(function(){ flagEN.scale.setTo(1.05) });
-        flagEN.events.onInputOut.add(function(){ flagEN.scale.setTo(1) });
-
-		//es_PE
-        var titleES = game.add.text(this.game.world.centerX + 200, this.game.world.centerY - 100, 'FRACCIONES  ', style);
-        titleES.anchor.setTo(1, 0.5);
-        
-        var flagES = game.add.sprite(this.game.world.centerX + 300, this.game.world.centerY - 100, 'flag_PE');       
-        flagES.anchor.setTo(0.5, 0.5);
-        flagES.inputEnabled = true;
-        flagES.input.useHandCursor = true;
-        flagES.events.onInputDown.add(this.func_setLang,{lang:'es_PE'});
-        flagES.events.onInputOver.add(function(){ flagES.scale.setTo(1.05) });
-        flagES.events.onInputOut.add(function(){ flagES.scale.setTo(1) });
-
-        //fr_FR
-        var titleFR = game.add.text(this.game.world.centerX + 200, this.game.world.centerY + 100, 'FRACTIONS  ', style);
-        titleFR.anchor.setTo(1, 0.5);
-        
-        var flagFR = game.add.sprite(this.game.world.centerX + 300, this.game.world.centerY + 100, 'flag_FR');       
-        flagFR.anchor.setTo(0.5, 0.5);
-        flagFR.inputEnabled = true;
-        flagFR.input.useHandCursor = true;
-        flagFR.events.onInputDown.add(this.func_setLang,{lang:'fr_FR'});
-        flagFR.events.onInputOver.add(function(){ flagFR.scale.setTo(1.05) });
-        flagFR.events.onInputOut.add(function(){ flagFR.scale.setTo(1) });
+        for(var i=0; i<langList.length; i++){
+            var 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);
+
+            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] });
+        }
 
         
-        
     },
     
     func_setLang: function(){
-
-        //set language
+        // set language
         lang = this.lang;
-        //start resource loading
+        // start resource loading
         game.state.start('load');
     
     }
@@ -145,7 +106,7 @@ var loadState = {
         if(firstTime==true){ // select language screen - first time opening ifractions
           firstTime = false;
           game.state.start('name'); // go to select name screen, then menu
-        }else{			     // changing language during the game
+        }else{               // changing language during the game
           game.state.start('menu'); // go to menu
         }
     
@@ -164,13 +125,15 @@ var nameState = {
         var styleName = { font: '44px Arial', fill: '#000000', align: 'center' };
         
         // title
+
         var title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, style);
         title.anchor.setTo(0.5);
         
-		var errorEmptyName = game.add.text(this.game.world.centerX, this.game.world.centerY - 70, "", {font: '18px Arial', fill: '#330000', align: 'center'});
+        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
+        
         var btn = game.add.graphics(this.game.world.centerX - 84, this.game.world.centerY + 70);
         btn.lineStyle(1, 0x293d3d);
         btn.beginFill(0x3d5c5c);
@@ -180,7 +143,7 @@ var nameState = {
 
         btn.inputEnabled = true;
         btn.input.useHandCursor = true;
-		btn.events.onInputDown.add(this.func_checkEmptyName,{errorEmptyName: errorEmptyName});
+        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 });
         
@@ -201,10 +164,10 @@ var nameState = {
     func_checkEmptyName: function() {
 
         if(document.getElementById("name_id").value!=""){
-          	nameState["func_savename"]();
-			this.errorEmptyName.setText("");
+            nameState["func_savename"]();
+            errorEmptyName.setText("");
         }else{
-			this.errorEmptyName.setText(lang.empty_name);
+            errorEmptyName.setText(lang.empty_name);
         }
 
     },
@@ -213,16 +176,16 @@ var nameState = {
         
         // saves the typed name on username variable
         username = document.getElementById("name_id").value;
-        if(debugMode) console.log("user is" + username);        
+        if(debugMode) console.log("user is " + username);        
 
         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();
+        }
 
         game.state.start('menu');
         
@@ -232,86 +195,106 @@ var nameState = {
 
 var buttonSettings = {
 
+    m_info_left: null,
+
+    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){
         
-        var m_info_right, m_info_left;
-        var m_world, m_menu, m_back, m_help, m_audio;
-        var xEsq = 10;
-        var xDir = (game.world.width - 50 - 10);
-        
-        if(left == 1){
-            m_info_left = game.add.text(xEsq, 53, "", { font: "20px Arial", fill: "#330000", align: "center" });
+        this.xDir = defaultWidth - 50 - 10;
+        this.xEsq = 10;
+
+        if(left == true){
+            this.m_info_left = game.add.text(this.xEsq, 53, "", { font: "20px Arial", fill: "#330000", align: "center" });
         }
 
-        if(right == 1){
-            m_info_right = game.add.text(xDir+50, 53, "", { font: "20px Arial", fill: "#330000", align: "right" });
-            m_info_right.anchor.setTo(1,0.02);
+        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);
         }
 
-        //left buttons
-        if(b0Esq == 1){
+        // left buttons
+        if(b0Esq == true){
             // Return to diffculty
-            m_back = game.add.sprite(xEsq, 10, 'back'); 
-            m_back.inputEnabled = true;
-            m_back.input.useHandCursor = true;
-            m_back.events.onInputDown.add(this.loadState, {state: phase, beep: beepSound});
-            m_back.events.onInputOver.add(function(){ m_info_left.text = lang.menu_back});
-            m_back.events.onInputOut.add(function(){ m_info_left.text = ""});
+            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});
             
-            xEsq+=50;
+            this.xEsq+=50;
         }
 
-        if(b1Esq == 1){
+        if(b1Esq == true){
             // Return to menu button
-            m_list = game.add.sprite(xEsq, 10, 'list'); 
-            m_list.inputEnabled = true;
-            m_list.input.useHandCursor = true;
-            m_list.events.onInputDown.add(this.loadState, {state: "menu", beep: beepSound});
-            m_list.events.onInputOver.add(function(){ m_info_left.text = lang.menu_list});
-            m_list.events.onInputOut.add(function(){ m_info_left.text = ""});
+            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});
             
-            xEsq+=50;
+            this.xEsq+=50;
         }
 
-        if(b2Esq == 1){
+        if(b2Esq == true){
             // Help button
-            m_help = game.add.sprite(xEsq, 10, 'help');
-            m_help.inputEnabled = true;
-            m_help.input.useHandCursor = true;
-            m_help.events.onInputDown.add(helpBtn, {beep: beepSound});
-            m_help.events.onInputOver.add(function(){ m_info_left.text = lang.menu_help});
-            m_help.events.onInputOut.add(function(){ m_info_left.text = ""});
+            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});
             
-            xEsq+=50;
+            this.xEsq+=50;
         }
 
-        //rightButtons
-        if(b0Dir == 1){
-            m_audio = game.add.sprite(xDir, 10, 'audio');
-            audioStatus ? m_audio.frame = 0 : m_audio.frame = 1;
-            m_audio.inputEnabled = true;
-            m_audio.input.useHandCursor = true;
-            m_audio.events.onInputDown.add(function(){ if(audioStatus){ audioStatus=false; m_audio.frame = 1; }else{ audioStatus=true; m_audio.frame = 0; }});
-            m_audio.events.onInputOver.add(function(){ m_info_right.text = lang.audio });
-            m_audio.events.onInputOut.add(function(){ m_info_right.text = "" });
-
-            xDir-=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;
         }
 
-        if(b1Dir == 1){
+        if(b1Dir == true){
             // Return to language button
-            m_world = game.add.sprite(xDir, 10, 'world'); 
-            m_world.inputEnabled = true;
-            m_world.input.useHandCursor = true;
-            m_world.events.onInputDown.add(this.loadState, {state: "language", beep: beepSound});
-            m_world.events.onInputOver.add(function(){ m_info_right.text = lang.menu_world });
-            m_world.events.onInputOut.add(function(){ m_info_right.text = "" });
+            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});
                   
-            xDir-=50;
+            this.xDir-=50;
         }
 
     },
 
+    changeRightButtonX: function(newWidth){
+        this.m_info_right.x = newWidth - 10;
+        this.m_audio.x = newWidth - 50 - 10;
+        console.log(this.m_audio.x+" "+newWidth);
+        this.m_world.x = newWidth - 50 - 50 - 10;
+    },
+
+
     loadState: function(){
 
         if(audioStatus){

js/squareOne.js

@@ -38,10 +38,10 @@ var menuSquareOne = {
     create: function() {
           
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,1,
-                                    0,1,0,
-                                    1,0,
-                                    0,0);
+        buttonSettings["func_addButtons"](true,true,
+                                    false,true,false,
+                                    true,false,
+                                    false,false);
         
         // Title
         var style = { font: '28px Arial', fill: '#00804d'};
@@ -194,9 +194,9 @@ var gameSquareOne = {
         game.add.image(0, 0, 'bgimage');
         
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,1,
-                                    1,1,1,
-                                    1,0,
+        buttonSettings["func_addButtons"](true,true,
+                                    true,true,true,
+                                    true,false,
                                     "menuSquareOne", this.func_viewHelp);
 
         //Clouds

js/squareTwo.js

@@ -40,10 +40,10 @@ var menuSquareTwo = {
     create: function() {
           
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,1,
-                                    0,1,0,
-                                    1,0,
-                                    0,0);
+        buttonSettings["func_addButtons"](true,true,
+                                    false,true,false,
+                                    true,false,
+                                    false,false);
         
         // Setting title
         var style = { font: '28px Arial', fill: '#00804d'};
@@ -196,10 +196,10 @@ var gameSquareTwo = {
         game.add.image(0, 0, 'bgimage');
         
         // Navigation buttons
-        buttonSettings["func_addButtons"](1,1,
-                                    1,1,0,
-                                    1,0,
-                                    "menuSquareTwo", 0);
+        buttonSettings["func_addButtons"](true,true,
+                                    true,true,false,
+                                    true,false,
+                                    "menuSquareTwo", false);
 
         //Clouds
         game.add.image(300, 100, 'cloud');