all game files are stored in new directory /js/games/

refactored the code so programming new games takes less steps

index.html

@@ -136,9 +136,9 @@
     <script src="js/menu.js"></script>
     <script src="js/customMenu.js"></script>
     <script src="js/map.js"></script>
-    <script src="js/circleOne.js"></script>
-    <script src="js/squareOne.js"></script>
-    <script src="js/squareTwo.js"></script>
+    <script src="js/games/circleOne.js"></script>
+    <script src="js/games/squareOne.js"></script>
+    <script src="js/games/squareTwo.js"></script>
     <script src="js/studentReport.js"></script> <!-- FOR MOODLE -->
     <script src="js/integrationFunctions.js"></script> <!-- FOR MOODLE -->
     <script src="js/gameMechanics.js"></script>
@@ -155,8 +155,6 @@
 
       const context = canvas.getContext("2d");
 
-      info.start();
-
       // CREATING GAME STATES
       game.state.add('boot', bootState);
       game.state.add('lang', langState);

js/customMenu.js

@@ -14,8 +14,8 @@ const customMenuState = {
   preload: function () {
 
     // LOADING MEDIA
-    game.load.sprite(url[gameTypeString].sprite);
-    game.load.image(url[gameTypeString].image);
+    game.load.sprite(url[gameType].sprite);
+    game.load.image(url[gameType].image);
 
   },
 
@@ -51,6 +51,7 @@ const customMenuState = {
         true, true,
         'menu', false);
 
+      const curGame = info.all[gameType];
       let x = 150;
       let y = 200 - 40;
       let width = 5;
@@ -106,7 +107,7 @@ const customMenuState = {
       this.menuIcons.push(infoIcon);
 
       let auxText;
-      if (gameTypeString == 'squareTwo') {
+      if (gameType == 'squareTwo') {
         auxText = game.lang.aux_rectangle;
         game.add.text(x + 5 * offsetW + 10, y + 102 + 24, auxText, textStyles.h4_blue_2);
       } else {
@@ -127,13 +128,13 @@ const customMenuState = {
 
       x = 150 + offsetW;
       y = baseY;
-      offsetH = this.getOffset(height, info[gameTypeString].gameMode.length);
+      offsetH = this.getOffset(height, curGame.gameMode.length);
 
-      for (let i = 0; i < info[gameTypeString].gameModeUrl.length; i++, y += offsetH) {
-        const icon = game.add.sprite(x, y, info[gameTypeString].gameModeUrl[i], 0, iconScale, 1);
+      for (let i = 0; i < curGame.gameModeUrl.length; i++, y += offsetH) {
+        const icon = game.add.sprite(x, y, curGame.gameModeUrl[i], 0, iconScale, 1);
         icon.anchor(0.5, 0.5);
 
-        icon.gameMode = info[gameTypeString].gameMode[i];
+        icon.gameMode = curGame.gameMode[i];
         icon.iconType = 'gameMode';
         if (i == 0) {
           gameMode = icon.gameMode;
@@ -147,29 +148,16 @@ const customMenuState = {
 
       x += 2 * offsetW;
       y = baseY;
-      offsetH = this.getOffset(height, info[gameTypeString].gameOperation.length);
+      offsetH = this.getOffset(height, curGame.gameOperation.length);
 
       let icon;
-      let aux = [];
-      aux['squareOne'] = [
-        ['operation_plus', 'Plus'],
-        ['operation_minus', 'Minus']
-      ];
-      aux['circleOne'] = [
-        ['operation_plus', 'Plus'],
-        ['operation_minus', 'Minus'],
-        ['operation_mixed', 'Mixed']
-      ];
-      aux['squareTwo'] = [
-        ['operation_equals', 'Equals'],
-      ];
 
       // Placing math operation icons
-      for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {
-        icon = game.add.sprite(x, y, aux[gameTypeString][i][0], 0, iconScale, 1);
+      for (let i = 0; i < curGame.gameOperation.length; i++, y += offsetH) {
+        icon = game.add.sprite(x, y, curGame.gameOperationUrl[i], 0, iconScale, 1);
         icon.anchor(0.5, 0.5);
 
-        icon.gameOperation = aux[gameTypeString][i][1];
+        icon.gameOperation = curGame.gameOperation[i];
         icon.iconType = 'gameOperation';
 
         if (i == 0) {
@@ -182,10 +170,10 @@ const customMenuState = {
 
       // --------------------------- DIFFICULTY ICONS
 
-      x = (gameTypeString == 'squareOne') ? 625 : 585;
+      x = (gameType == 'squareOne') ? 625 : 585;
       y = baseY - 25;
 
-      for (let i = 0; i < info[gameTypeString].gameDifficulty; i++) {
+      for (let i = 0; i < curGame.gameDifficulty; i++) {
         // Parameters
         const curX = x + (30 + 10) * i;
 
@@ -342,7 +330,7 @@ const customMenuState = {
   showInfoBox: function (icon) {
     self.infoBox.style.display = 'block';
 
-    const element = (icon.id == 'gameOperation') ? self.infoBoxContent[icon.id] : self.infoBoxContent[icon.id][gameTypeString];
+    const element = (icon.id == 'gameOperation') ? self.infoBoxContent[icon.id] : self.infoBoxContent[icon.id][gameType];
 
     let msg = '<h3>' + element.title + '</h3>'
       + '<p align=justify>' + element.body + '</p>'
@@ -379,7 +367,7 @@ const customMenuState = {
       case 'enter':
         if (debugMode) {
           console.log('------------------------------'+
-          '\nGame State: ' + gameTypeString +
+          '\nGame State: ' + gameType +
           '\nGame Mode: ' + gameMode + 
           '\n------------------------------');
         }

js/globals.js

@@ -51,21 +51,13 @@ const moodle = false;
  */
 let canvas;
 
-/**
- * Selected game.<br>
- * Can be the objects: squareOne, squareTwo or circleOne.
- * 
- * @type {object}
- */
-let gameType;
-
 /**
  * Name of the selected game.<br>
  * Can be: 'squareOne', 'squareTwo' or 'circleOne'.
  * 
  * @type {string}
  */
-let gameTypeString;
+let gameType;
 
 /**
  * Used for text and game information.<br>
@@ -162,73 +154,67 @@ const medSrc = 'assets/img/'; // Base directory for media
  */
 const info = {
 
-  squareOne: {
-    gameShape: 'square',
-    gameType: 'squareOne',
-    gameTypeUrl: 'game0',
-    gameMode: ['A', 'B'],
-    gameModeUrl: ['mode0', 'mode1'],
-    gameOperation: ['Plus', 'Minus'],
-    gameDifficulty: 3
-  },
+  all: {
+
+    squareOne: {
+      gameShape: 'square',
+      gameType: 'squareOne',
+      gameTypeUrl: 'game0',
+      gameMode: ['A', 'B'],
+      gameModeUrl: ['mode0', 'mode1'],
+      gameOperation: ['Plus', 'Minus'],
+      gameOperationUrl: ['operation_plus', 'operation_minus'],
+      gameDifficulty: 3
+    },
+
+    circleOne: {
+      gameShape: 'circle',
+      gameType: 'circleOne',
+      gameTypeUrl: 'game1',
+      gameMode: ['A', 'B'],
+      gameModeUrl: ['mode2', 'mode3'],
+      gameOperation: ['Plus', 'Minus', 'Mixed'],
+      gameOperationUrl: ['operation_plus', 'operation_minus', 'operation_mixed'],
+      gameDifficulty: 5
+    },
+
+    squareTwo: {
+      gameShape: 'square',
+      gameType: 'squareTwo',
+      gameTypeUrl: 'game2',
+      gameMode: ['A', 'B'],
+      gameModeUrl: ['mode4', 'mode5'],
+      gameOperation: ['Equals'],
+      gameOperationUrl: ['operation_equals'],
+      gameDifficulty: 5
+    },
 
-  circleOne: {
-    gameShape: 'circle',
-    gameType: 'circleOne',
-    gameTypeUrl: 'game1',
-    gameMode: ['A', 'B'],
-    gameModeUrl: ['mode2', 'mode3'],
-    gameOperation: ['Plus', 'Minus', 'Mixed'],
-    gameDifficulty: 5
   },
-
-  squareTwo: {
-    gameShape: 'square',
-    gameType: 'squareTwo',
-    gameTypeUrl: 'game2',
-    gameMode: ['A', 'B'],
-    gameModeUrl: ['mode4', 'mode5'],
-    gameOperation: ['Equals'],
-    gameDifficulty: 5
-  },
-
   gameShape: [],
   gameType: [],
   gameTypeUrl: [],
   gameMode: [],
   gameModeUrl: [],
   gameOperation: [],
+  gameOperationUrl: [],
   gameDifficulty: [],
 
-  // When game starts, update values
-  start: function () {
-    info.gameShape = [
-      info.squareOne.gameShape,
-      info.circleOne.gameShape,
-      info.squareTwo.gameShape
-    ];
-    info.gameType = [
-      info.squareOne.gameType,
-      info.circleOne.gameType,
-      info.squareTwo.gameType
-    ];
-    info.gameTypeUrl = [
-      info.squareOne.gameTypeUrl,
-      info.circleOne.gameTypeUrl,
-      info.squareTwo.gameTypeUrl
-    ];
-    info.gameDifficulty = [
-      info.squareOne.gameDifficulty,
-      info.circleOne.gameDifficulty,
-      info.squareTwo.gameDifficulty
-    ];
-    info.gameMode = info.squareOne.gameMode.concat(info.circleOne.gameMode, info.squareTwo.gameMode);
-    info.gameModeUrl = info.squareOne.gameModeUrl.concat(info.circleOne.gameModeUrl, info.squareTwo.gameModeUrl);
-    info.gameOperation = info.squareOne.gameOperation.concat(info.circleOne.gameOperation, info.squareTwo.gameOperation);
-  }
-
 };
 
+// Called once when the game starts
+(function () {
+  for (key in info.all) {
+    info.gameShape.push(info.all[key].gameShape);
+    info.gameType.push(info.all[key].gameType);
+    info.gameTypeUrl.push(info.all[key].gameTypeUrl);
+    info.gameMode.push(info.all[key].gameMode);
+    info.gameModeUrl.push(info.all[key].gameMode);
+    info.gameOperation.push(info.all[key].gameOperation);
+    info.gameOperationUrl.push(info.all[key].gameOperationUrl);
+    info.gameDifficulty.push(info.all[key].gameDifficulty);
+  }
+})()
+
 /**
  * Preset colors for graphic elements.
  * @type {object}
@@ -402,7 +388,7 @@ const url = {
   },
   squareOne: {
     image: [
-      // Scene
+      // Map buildings
       ['farm', medSrc + 'scene/farm.png'],
       ['garage', medSrc + 'scene/garage.png']
     ],
@@ -414,7 +400,7 @@ const url = {
   },
   squareTwo: {
     image: [
-      // Scene
+      // Map buildings
       ['house', medSrc + 'scene/house.png'],
       ['school', medSrc + 'scene/school.png']
     ],
@@ -427,7 +413,7 @@ const url = {
   },
   circleOne: {
     image: [
-      // Scene
+      // Map buildings
       ['house', medSrc + 'scene/house.png'],
       ['school', medSrc + 'scene/school.png'],
       // Game images
@@ -439,7 +425,7 @@ const url = {
       ['kid_run', medSrc + 'character/kid/run.png', 12]
     ],
     audio: []
-  }
+  },
 };
 
 /**

js/integrationFunctions.js

@@ -38,7 +38,7 @@ function getParameterByName(name) {
 function getAnswer() {
   let str = '';
   if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // Student - sending results
-    str += 'gameTypeString:' + gameTypeString
+    str += 'gameType:' + gameType
       + '\ngameShape:' + gameShape
       + '\ngameMode:' + gameMode
       + '\ngameOperation:' + gameOperation
@@ -60,7 +60,7 @@ function getAnswer() {
     moodleVar.hits = [0, 0, 0, 0];
     moodleVar.errors = [0, 0, 0, 0];
     moodleVar.time = [0, 0, 0, 0];
-    str += 'gameTypeString:' + gameTypeString
+    str += 'gameType:' + gameType
       + '\ngameShape:' + gameShape
       + '\ngameMode:' + gameMode
       + '\ngameOperation:' + gameOperation
@@ -203,14 +203,14 @@ const breakString = function (text) {
  * @param {object} info game information
  * @param {undefined|object} infoResults student answer (if there is any)
  */
-const updateGlobalVariables = function (info, infoResults) {
+const updateGlobalVariables = function (infoGame, infoResults) {
   // Update game variables to content received from game file
-  gameTypeString = info['gameTypeString'];
-  gameShape = info['gameShape'];
-  gameMode = info['gameMode'];
-  gameOperation = info['gameOperation'];
-  gameDifficulty = parseInt(info['gameDifficulty']);
-  fractionLabel = info['fractionLabel'];
+  gameType = infoGame['gameType'];
+  gameShape = infoGame['gameShape'];
+  gameMode = infoGame['gameMode'];
+  gameOperation = infoGame['gameOperation'];
+  gameDifficulty = parseInt(infoGame['gameDifficulty']);
+  fractionLabel = infoGame['fractionLabel'];
   // Update default values
   mapPosition = 0;
   mapMove = true;

js/map.js

@@ -50,7 +50,7 @@ const mapState = {
       y: [486, 422, 358, 294, 230, 166]
     };
 
-    if (gameTypeString == 'squareOne') {
+    if (gameType == 'squareOne') {
       // Garage
       game.add.image(this.points.x[0], this.points.y[0], 'garage', 0.4).anchor(0.5, 1);
       // Farm
@@ -103,7 +103,7 @@ const mapState = {
     }
 
     // Game Character 
-    if (gameTypeString == 'squareOne') {
+    if (gameType == 'squareOne') {
 
       if (gameOperation == 'Plus') {
         this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'tractor', 0, 0.5);
@@ -183,7 +183,7 @@ const mapState = {
 
     if (audioStatus) game.audio.beepSound.play();
 
-    if (mapPosition <= 4) game.state.start('' + gameTypeString);
+    if (mapPosition <= 4) game.state.start('' + gameType);
     else game.state.start('end');
 
   },
@@ -245,7 +245,7 @@ const endState = {
     game.add.image(360, 545, 'tree4', 0.7).anchor(0, 1);
 
     // Level character
-    switch (gameTypeString) {
+    switch (gameType) {
 
       case 'circleOne':
 

js/menu.js

@@ -54,7 +54,7 @@ const menuState = {
       for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {
 
         const icon = game.add.image(x, defaultHeight / 2 - 70, info.gameTypeUrl[i], 1);
-        icon.anchor(0.5, 0.5);
+        icon.anchor(0.5, 0.5); 
 
         icon.gameShape = info.gameShape[i];
         icon.gameType = info.gameType[i];
@@ -140,13 +140,8 @@ const menuState = {
       case 'infoIcon': self.showInfoBox(icon); break;
       case 'game':
         gameShape = icon.gameShape;
-        gameTypeString = icon.gameType;
-        switch (gameTypeString) {
-          case 'squareOne': gameType = squareOne; break;
-          case 'squareTwo': gameType = squareTwo; break;
-          case 'circleOne': gameType = circleOne; break;
-          default: console.error('Game error: the name of the game is not valid.');
-        }
+        gameType = icon.gameType;
+        if (!info.gameType.includes(gameType)) console.error('Game error: the name of the game is not valid.');
         self.menuIcons = self.lbl_game.name;
         game.state.start('customMenu');
         break;

js/preMenu.js

@@ -12,6 +12,7 @@ const bootState = {
    * Preloads media for current state
    */
   preload: function () {
+    // FOR MOODLE
     if (moodle) {
       loadLangState.firstTime = false;
       const moodleLang = iLMparameters.lang;

js/studentReport.js

@@ -32,11 +32,11 @@ const studentReport = {
 
     // Title
     game.add.text(defaultWidth / 2, 80, game.lang.results, textStyles.h1_green);
-    game.add.image(x - 40, y - 70, info[gameTypeString].gameTypeUrl, 0.8);
+    game.add.image(x - 40, y - 70, info.all[gameType].gameTypeUrl, 0.8);
 
     // Game info
     text = game.lang[gameShape].charAt(0).toUpperCase() + game.lang[gameShape].slice(1);
-    text = game.lang.game + ': ' + text + ((gameTypeString.slice(-3) == 'One') ? ' I' : ' II');
+    text = game.lang.game + ': ' + text + ((gameType.slice(-3) == 'One') ? ' I' : ' II');
     game.add.text(190, y - 50, text, textStyles.h4_brown).align = 'left';
     game.add.text(190, y - 25, game.lang.game_mode + ': ' + gameMode, textStyles.h4_brown).align = 'left';
     game.add.text(190, y, game.lang.operation + ': ' + gameOperation, textStyles.h4_brown).align = 'left';