changed canvas resolution from 900x600 to 1920x1080

preliminary adaptation of the position of assets on screen

index.html

@@ -22,7 +22,7 @@
       position: absolute;
       margin-left: auto;
       margin-right: auto;
-      top: 360px;
+      top: 330px;
       left: 0;
       right: 0;
       text-align: center;
@@ -34,7 +34,7 @@
       padding: 15px 40px;
       box-sizing: border-box;
       border: 3px solid #ccc;
-      font-size: 44px;
+      font-size: 24px;
       font-family: Arial;
       color: #000;
       text-align: center;
@@ -104,14 +104,14 @@
       <div class="panel-body">
 
         <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
-        
+
         <div id="textbox" onsubmit="return false">
           <input type="text" id="textbox-content" value="" size="13" maxlength="36"> <!-- Textbox to get player name -->
         </div>
 
         <div id="myModal" class="modal">
           <!-- Modal -->
-          <div class="modal-content">
+          <div class=" modal-content">
             <span class="close">&times;</span>
             <div id='infobox-content'></div> <!-- Modal content -->
           </div>
@@ -136,8 +136,8 @@
 
     <script>
 
-      const defaultWidth = 900; // Default width for the Canvas
-      const defaultHeight = 600; // Default height for the Canvas
+      const defaultWidth = 1920; // Default width for the Canvas
+      const defaultHeight = 1080; // Default height for the Canvas
 
       const context = document.getElementById("iFractions-canvas").getContext("2d");
       context.canvas.width = defaultWidth;

js/customMenu.js

@@ -31,10 +31,6 @@ const customMenuState = {
 
     } else {
 
-      const iconScale = 0.7;
-      const baseY = 270 - 40;
-      this.menuIcons = [];
-
       // Background color
       game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);
       // Floor
@@ -51,18 +47,23 @@ const customMenuState = {
         true, true,
         'menu', false);
 
+      let infoIcon;
+      const iconScale = 0.7;
       const curGame = info.all[gameType];
-      let x = 150;
-      let y = 200 - 40;
-      let width = 5;
-      let height = 280 + 80;
-      let offsetW = 600 / 6;
-      let offsetH, infoIcon;
+      this.menuIcons = [];
+
+      let x = gameFrame().x;
+      let y = gameFrame().y;
+
+      let offsetW = game.math.getOffset(gameFrame().width, 5);
+      let offsetH = game.math.getOffset(gameFrame().height, curGame.gameMode.length);
+
+      const line_thickness = 5;
 
       // Label 'Game Modes'
-      game.add.text(x + offsetW - 12, y, game.lang.game_modes, textStyles.h2_blue_2);
+      game.add.text(x + offsetW, y, game.lang.game_modes, textStyles.h2_blue_2);
 
-      infoIcon = game.add.image(x + 2 * offsetW - 30, y - 40, 'info', 0.5, 0.4);
+      infoIcon = game.add.image(x + 2 * offsetW - 30, y - 20, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameMode';
@@ -71,7 +72,7 @@ const customMenuState = {
       // Label 'Operations'
       game.add.text(x + 3 * offsetW, y, game.lang.operations, textStyles.h2_blue_2);
 
-      infoIcon = game.add.image(x + 4 * offsetW - 30, y - 40, 'info', 0.5, 0.4);
+      infoIcon = game.add.image(x + 4 * offsetW - 30, y - 20, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameOperation';
@@ -80,55 +81,54 @@ const customMenuState = {
       // Label 'Difficulties'
       game.add.text(x + 5 * offsetW, y, game.lang.difficulties, textStyles.h2_blue_2);
 
-      infoIcon = game.add.image(x + 6 * offsetW - 30, y - 40, 'info', 0.5, 0.4);
+      infoIcon = game.add.image(x + 6 * offsetW - 30, y - 20, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameDifficulty';
       this.menuIcons.push(infoIcon);
 
       // Horizontal line
-      game.add.geom.rect(x - 25, y + 10, 600 + 50, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
+      game.add.geom.rect(x - 25, y + 10, gameFrame().width, line_thickness, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
       // Vertical lines
-      game.add.geom.rect(x + 2 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
-      game.add.geom.rect(x + 4 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
+      game.add.geom.rect(x + 2 * offsetW, y - 25, line_thickness, gameFrame().height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
+      game.add.geom.rect(x + 4 * offsetW, y - 25, line_thickness, gameFrame().height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
 
       // --------------------------- TURN ON/OFF FRACTION LABELS / RECTANGLE GUIDE
 
       // Horizontal line
-      game.add.geom.rect(x + 4 * offsetW, y + 136, 200 + 25, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
-
-      // Label 'Show Fractions / Auxiliar rectangles'
-      game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
+      game.add.geom.rect(x + 4 * offsetW, y + offsetH, gameFrame().width / 3 - 4 * line_thickness, line_thickness, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
 
-      infoIcon = game.add.image(x + 6 * offsetW + 20, y + 102, 'info', 0.5, 0.4);
+      infoIcon = game.add.image(x + 6 * offsetW - 30, y + offsetH - 20, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameMisc';
       this.menuIcons.push(infoIcon);
 
+      // Label 'Show Fractions / Auxiliar rectangles'
+      game.add.text(x + 5 * offsetW, y + offsetH - 48, game.lang.show, textStyles.h4_blue_2);
+
       let auxText;
       if (gameType == 'squareTwo') {
         auxText = game.lang.aux_rectangle;
-        game.add.text(x + 5 * offsetW + 10, y + 102 + 24, auxText, textStyles.h4_blue_2);
+        game.add.text(x + 5 * offsetW + 10, y + offsetH - 24, auxText, textStyles.h4_blue_2);
       } else {
         auxText = game.lang.title;
-        game.add.text(x + 5 * offsetW, y + 102 + 24, auxText, textStyles.h2_blue_2);
+        game.add.text(x + 5 * offsetW, y + offsetH - 24, auxText, textStyles.h2_blue_2);
       }
 
       // Selection box
       y += 40;
       const frame = (fractionLabel) ? 1 : 0;
 
-      const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.11);
+      const selectionBox = game.add.sprite(x + 5 * offsetW, y + offsetH, 'select', frame, 0.11);
       selectionBox.anchor(0.5, 0.5);
       selectionBox.iconType = 'selectionBox';
       this.menuIcons.push(selectionBox);
 
       // --------------------------- GAME MODE ICONS
 
-      x = 150 + offsetW;
-      y = baseY;
-      offsetH = this.getOffset(height, curGame.gameMode.length);
+      x = gameFrame().x + offsetW;
+      y = gameFrame().y + offsetH / 2;
 
       for (let i = 0; i < curGame.gameModeUrl.length; i++, y += offsetH) {
         const icon = game.add.sprite(x, y, curGame.gameModeUrl[i], 0, iconScale, 1);
@@ -147,8 +147,8 @@ const customMenuState = {
       // --------------------------- GAME OPERATION ICONS
 
       x += 2 * offsetW;
-      y = baseY;
-      offsetH = this.getOffset(height, curGame.gameOperation.length);
+      y = gameFrame().y + offsetH / 2;
+      offsetH = game.math.getOffset(gameFrame().height, curGame.gameOperation.length);
 
       let icon;
 
@@ -169,9 +169,12 @@ const customMenuState = {
       }
 
       // --------------------------- DIFFICULTY ICONS
+      x = gameFrame().x - 50 + 5 * offsetW
+
+      offsetH = game.math.getOffset(gameFrame().height, curGame.gameMode.length);
+      y = gameFrame().y + offsetH / 3;
 
-      x = (gameType == 'squareOne') ? 625 : 585;
-      y = baseY - 25;
+      if (gameType != 'squareOne') x -= 40;
 
       for (let i = 0; i < curGame.gameDifficulty; i++) {
         // Parameters
@@ -366,10 +369,10 @@ const customMenuState = {
         break;
       case 'enter':
         if (debugMode) {
-          console.log('------------------------------'+
-          '\nGame State: ' + gameType +
-          '\nGame Mode: ' + gameMode + 
-          '\n------------------------------');
+          console.log('------------------------------' +
+            '\nGame State: ' + gameType +
+            '\nGame Mode: ' + gameMode +
+            '\n------------------------------');
         }
         mapPosition = 0;  // Map position
         mapMove = true; // Move no next point
@@ -380,18 +383,6 @@ const customMenuState = {
 
   },
 
-  /**
-   * Calculate spacing for icons on the menu screen
-   * 
-   * @param {number} width width of the available part of the screen
-   * @param {number} numberOfIcons number or icons to be put on the screen
-   * 
-   * @returns {number} correct spacing between icons
-   */
-  getOffset: function (width, numberOfIcons) {
-    return width / (numberOfIcons + 1);
-  },
-
   /**
    * Called by mouse click event
    * 

js/gameMechanics.js

@@ -942,12 +942,22 @@ const game = {
     getMouse: function (mouseEvent) {
       const c = context.canvas.getBoundingClientRect()
       const canvas_scale = context.canvas.width / parseFloat(c.width);
-      return { 
-        x: (mouseEvent.clientX - c.left) * canvas_scale, 
-        y: (mouseEvent.clientY - c.top) * canvas_scale 
+      return {
+        x: (mouseEvent.clientX - c.left) * canvas_scale,
+        y: (mouseEvent.clientY - c.top) * canvas_scale
       }
     },
-
+    /**
+     * Calculate spacing for icons on the menu screen
+     * 
+     * @param {number} width width of the desirable part of the screen
+     * @param {number} numberOfIcons number or icons to be put on the screen
+     * 
+     * @returns {number} correct spacing between icons
+     */
+    getOffset: function (width, numberOfIcons) {
+      return width / (numberOfIcons + 1);
+    },
     /**
      * Converts a given time in seconds (number) to the format HH:MM:SS (string)
      * 

js/games/circleOne.js

@@ -58,33 +58,34 @@ const circleOne = {
 
     let hasBaseDifficulty = false; // Will validate that level isnt too easy (has at least one '1/difficulty' fraction)
 
+    const startY =  context.canvas.height - 75;
     const startX = (gameOperation == 'Minus') ? 66 + 5 * 156 : 66;  // Initial 'x' coordinate for the kid and the baloon
     this.correctX = startX; // Ending position, accumulative
 
     // BACKGROUND
 
     // Add background image
-    game.add.image(0, 0, 'bgimage');
+    game.add.image(0, 0, 'bgimage', 2.2);
     // Add clouds
-    game.add.image(300, 100, 'cloud');
-    game.add.image(660, 80, 'cloud');
-    game.add.image(110, 85, 'cloud', 0.8);
+    game.add.image(640, 100, 'cloud');
+    game.add.image(1280, 80, 'cloud');
+    game.add.image(300, 85, 'cloud', 0.8);
 
     // Add floor of grass
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
+    for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
     // Road
-    this.road = game.add.image(47, 515, 'road', 1.01, 0.94);
+    this.road = game.add.image(47, startY - 11, 'road', 1.01, 0.94);
 
     // Road points
     const distanceBetweenPoints = 156; // Distance between road points
 
     for (let i = 0; i <= 5; i++) {
-      game.add.image(66 + i * distanceBetweenPoints, 526, 'place_off', 0.3).anchor(0.5, 0.5);
-      game.add.text(66 + i * distanceBetweenPoints, 560, i, textStyles.h2_blue);
+      game.add.image(66 + i * distanceBetweenPoints, startY, 'place_off', 0.3).anchor(0.5, 0.5);
+      game.add.text(66 + i * distanceBetweenPoints, startY + 34, i, textStyles.h2_blue);
     }
 
-    this.trace = game.add.geom.rect(startX - 1, 526, 1, 1, undefined, 1);
+    this.trace = game.add.geom.rect(startX - 1, startY, 1, 1, undefined, 1);
     this.trace.alpha = 0;
 
     // Calls function that loads navigation icons
@@ -173,7 +174,7 @@ const circleOne = {
       let circle, label = [];
 
       if (divisor == 1) {
-        circle = game.add.geom.circle(startX, 490 - i * this.circles.diameter, this.circles.diameter,
+        circle = game.add.geom.circle(startX, startY - 36 - i * this.circles.diameter, this.circles.diameter,
           lineColor, 2, colors.white, 1);
 
         circle.anticlockwise = anticlockwise;
@@ -181,7 +182,7 @@ const circleOne = {
         this.circles.angle.push(360);
 
         if (fractionLabel) {
-          label[0] = game.add.text(x, 490 - i * this.circles.diameter, divisor, textStyles.h2_blue);
+          label[0] = game.add.text(x, startY - 36 - i * this.circles.diameter, divisor, textStyles.h2_blue);
           this.circles.label.push(label);
         }
       } else {
@@ -189,16 +190,16 @@ const circleOne = {
 
         if (direction == 'Right') degree = 360 - degree; // Anticlockwise equivalent
 
-        circle = game.add.geom.arc(startX, 490 - i * this.circles.diameter, this.circles.diameter,
+        circle = game.add.geom.arc(startX, startY - 36 - i * this.circles.diameter, this.circles.diameter,
           0, game.math.degreeToRad(degree), anticlockwise,
           lineColor, 2, colors.white, 1);
 
         this.circles.angle.push(degree);
 
         if (fractionLabel) {
-          label[0] = game.add.text(x, 480 - i * this.circles.diameter + 32, divisor, textStyles.h4_blue);
-          label[1] = game.add.text(x, 488 - i * this.circles.diameter, '1', textStyles.h4_blue);
-          label[2] = game.add.text(x, 488 - i * this.circles.diameter, '___', textStyles.h4_blue);
+          label[0] = game.add.text(x, startY - 46 - i * this.circles.diameter + 32, divisor, textStyles.h4_blue);
+          label[1] = game.add.text(x, startY - 38 - i * this.circles.diameter, '1', textStyles.h4_blue);
+          label[2] = game.add.text(x, startY - 38 - i * this.circles.diameter, '___', textStyles.h4_blue);
           this.circles.label.push(label);
         }
       }
@@ -246,7 +247,7 @@ const circleOne = {
     this.availableAnimations['Right'] = ['Right', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 4];
     this.availableAnimations['Left'] = ['Left', [23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12], 4];
 
-    this.kid = game.add.sprite(startX, 495 - this.circles.all.length * this.circles.diameter, 'kid_walk', 0, 0.8);
+    this.kid = game.add.sprite(startX, startY - 31 - this.circles.all.length * this.circles.diameter, 'kid_walk', 0, 0.8);
     this.kid.anchor(0.5, 0.8);
     if (gameOperation == 'Minus') {
       this.kid.animation = this.availableAnimations['Left'];
@@ -256,11 +257,11 @@ const circleOne = {
     }
 
     // BALLOON
-    this.balloon = game.add.image(this.balloonPlace, 350, 'balloon', 1, 0.5);
+    this.balloon = game.add.image(this.balloonPlace, startY - 176, 'balloon', 1, 0.5);
     this.balloon.alpha = 0.5;
     this.balloon.anchor(0.5, 0.5);
 
-    this.basket = game.add.image(this.balloonPlace, 472, 'balloon_basket');
+    this.basket = game.add.image(this.balloonPlace, startY - 54, 'balloon_basket');
     this.basket.anchor(0.5, 0.5);
 
     // Help pointer

js/games/squareOne.js

@@ -60,19 +60,20 @@ const squareOne = {
     this.defaultBlockHeight = 40;  // Base block height
 
     this.startX = (gameOperation == 'Minus') ? 730 : 170; // Initial 'x' coordinate for the tractor and stacked blocks
+    this.startY = context.canvas.height - 157;
 
     // BACKGROUND
 
     // Add background image
-    game.add.image(0, 0, 'bgimage');
+    game.add.image(0, 0, 'bgimage', 2.2);
 
     // Add clouds
-    game.add.image(300, 100, 'cloud');
-    game.add.image(660, 80, 'cloud');
-    game.add.image(110, 85, 'cloud', 0.8);
+    game.add.image(640, 100, 'cloud');
+    game.add.image(1280, 80, 'cloud');
+    game.add.image(300, 85, 'cloud', 0.8);
 
     // Add floor of grass
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
+    for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
     // Calls function that loads navigation icons
 
@@ -92,7 +93,7 @@ const squareOne = {
     }
 
     // TRACTOR 
-    this.tractor = game.add.sprite(this.startX, 445, 'tractor', 0, 0.8);
+    this.tractor = game.add.sprite(this.startX, this.startY, 'tractor', 0, 0.8);
 
     if (gameOperation == 'Plus') {
       this.tractor.anchor(1, 0.5);
@@ -142,7 +143,7 @@ const squareOne = {
     // SELECTION ARROW
 
     if (gameMode == 'A') {
-      this.arrow = game.add.image(this.startX + this.defaultBlockWidth * this.direc_level, 480, 'arrow_down');
+      this.arrow = game.add.image(this.startX + this.defaultBlockWidth * this.direc_level, this.startY + 35, 'arrow_down');
       this.arrow.anchor(0.5, 0.5);
       this.arrow.alpha = 0.5;
     }
@@ -429,7 +430,7 @@ const squareOne = {
       const lineSize = 2;
       const block = game.add.geom.rect(
         self.startX,
-        462 - i * (self.defaultBlockHeight - lineSize),
+        self.startY + 17 - i * (self.defaultBlockHeight - lineSize),
         curBlockWidth - lineSize,
         self.defaultBlockHeight - lineSize,
         lineColor,
@@ -455,11 +456,11 @@ const squareOne = {
         const label = [];
 
         if (divisor == 1) {
-          label[0] = game.add.text(x, 488 - i * y, divisor, textStyles.h2_blue);
+          label[0] = game.add.text(x, self.startY + 43 - i * y, divisor, textStyles.h2_blue);
         } else {
-          label[0] = game.add.text(x, 479 - i * y + 16, divisor, textStyles.p_blue);
-          label[1] = game.add.text(x, 479 - i * y, '1', textStyles.p_blue);
-          label[2] = game.add.text(x, 479 - i * y, '_', textStyles.p_blue);
+          label[0] = game.add.text(x, self.startY + 34 - i * y + 16, divisor, textStyles.p_blue);
+          label[1] = game.add.text(x, self.startY + 34 - i * y, '1', textStyles.p_blue);
+          label[2] = game.add.text(x, self.startY + 39 - i * y, '_', textStyles.p_blue);
         }
         // Add current label to group of labels
         self.stck.labels.push(label);
@@ -531,7 +532,7 @@ const squareOne = {
       const lineSize = 0.9;
       const block = game.add.geom.rect(
         x,
-        462 + self.defaultBlockHeight - lineSize,
+        self.startY + 17 + self.defaultBlockHeight - lineSize,
         blockWidth - lineSize,
         self.defaultBlockHeight - lineSize,
         colors.blueBckg,
@@ -557,7 +558,7 @@ const squareOne = {
     // Creates labels on the floor to display the numbers
     for (let i = 1; i < 10; i++) {
       const x = self.startX + (i * self.defaultBlockWidth * self.direc_level);
-      game.add.text(x, 462 + self.defaultBlockHeight + 58, i - 1, textStyles.h2_blue);
+      game.add.text(x, self.startY + self.defaultBlockHeight + 78, i - 1, textStyles.h2_blue);
     }
   },
 

js/games/squareTwo.js

@@ -67,14 +67,14 @@ const squareTwo = {
 
     // BACKGROUND AND KID
     // Add background image
-    game.add.image(0, 0, 'bgimage');
+    game.add.image(0, 0, 'bgimage', 2.2);
     // Add clouds
-    game.add.image(300, 100, 'cloud');
-    game.add.image(660, 80, 'cloud');
-    game.add.image(110, 85, 'cloud', 0.8);
+    game.add.image(640, 100, 'cloud');
+    game.add.image(1280, 80, 'cloud');
+    game.add.image(300, 85, 'cloud', 0.8);
 
     // Add floor of grass
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
+    for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
     // Calls function that loads navigation icons
 
@@ -102,17 +102,17 @@ const squareTwo = {
     // Coordinates for A and B
     let xA, xB, yA, yB;
     if (gameMode != 'B') { // More subdivisions on B
-      xA = 230;
-      yA = 90;
+      xA = context.canvas.width / 2 - this.figureWidth/2;
+      yA = gameFrame().y;
       xB = xA;
       yB = yA + 3 * figureHeight + 30;
     } else { // More subdivisions on A
-      xB = 230;
-      yB = 90;
+      xB = context.canvas.width / 2 - this.figureWidth/2;
+      yB = gameFrame().y;
       xA = xB;
       yA = yB + 3 * figureHeight + 30;
     }
-
+    
     // Possible points for A
     const points = [2, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20];
 

js/globals.js

@@ -594,9 +594,9 @@ const sendToDB = function (extraData) {
     const url = iLMparameters.iLM_PARAM_ServerToGetAnswerURL;
     const grade = '' + getEvaluation();
     const report = getAnswer();
-    const data = 'return_get_answer=1'+
-    '&iLM_PARAM_ActivityEvaluation='+encodeURIComponent(grade)+
-    '&iLM_PARAM_ArchiveContent='+encodeURIComponent(report);
+    const data = 'return_get_answer=1' +
+      '&iLM_PARAM_ActivityEvaluation=' + encodeURIComponent(grade) +
+      '&iLM_PARAM_ArchiveContent=' + encodeURIComponent(report);
 
     const init = { method: 'POST', body: data, headers: { 'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8' } };
 
@@ -639,4 +639,22 @@ const sendToDB = function (extraData) {
       });
   }
 
-};
+};
+
+let gameFrame = function () {
+  let x = y = 200;
+  let width = context.canvas.width - 2 * x;
+  let height = context.canvas.height - 2 * y;
+  let rect = function () { game.add.geom.rect(x, y, width, height, colors.red, 2) }
+  let point = function (offsetW, offsetH) {
+    for (let i = 0, y1 = y; i < 4; i++) {
+      x1 = x;
+      for (let j = 0; j < 7; j++) {
+        game.add.geom.rect(x1, y1, 20, 20, undefined, 0, colors.red, 1);
+        x1 += offsetW;
+      }
+      y1 += offsetH;
+    }
+  }
+  return { x, y, width, height, rect, point}
+}

js/map.js

@@ -16,9 +16,6 @@ const mapState = {
     // Background color
     game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);
 
-    // Map
-    game.add.image(0, 40, 'bgmap');
-
     // Calls function that loads navigation icons
 
     // FOR MOODLE
@@ -34,22 +31,40 @@ const mapState = {
         'customMenu', false);
     }
 
+    this.points = {
+      x: [90, 204, 318, 432, 546, 660],
+      y: [486, 422, 358, 294, 230, 166]
+    };
+    const rocks = {
+      x: [156, 275, 276, 441, 452, 590, 712],
+      y: [309, 543, 259, 156, 419, 136, 316],
+      type: [1, 1, 2, 1, 2, 2, 2]
+    };
+    const trees = {
+      x: [105, 214, 354, 364, 570, 600, 740, 779],
+      y: [341, 219, 180, 520, 550, 392, 488, 286],
+      type: [2, 4, 3, 4, 1, 2, 4, 4]
+    };
+    const offsetH = gameFrame().y;
+    const offsetW = gameFrame().x * 2.5;
+    for (let i = 0, cur = this.points; i < cur.x.length; i++) { cur.x[i] += offsetW; cur.y[i] += offsetH; }
+    for (let i = 0, cur = rocks; i < cur.x.length; i++) { cur.x[i] += offsetW; cur.y[i] += offsetH; }
+    for (let i = 0, cur = trees; i < cur.x.length; i++) { cur.x[i] += offsetW; cur.y[i] += offsetH; }
+    
+    // Map
+    game.add.image(offsetW, offsetH + 40, 'bgmap');
+
     // Progress bar
     const percentText = completedLevels * 25;
 
-    if (completedLevels >= 4) game.add.geom.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5);
-    else game.add.geom.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.yellow, 0.9);
+    if (completedLevels >= 4) game.add.geom.rect(context.canvas.width - 240, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5);
+    else game.add.geom.rect(context.canvas.width - 240, 10, completedLevels * 37.5, 35, undefined, 0, colors.yellow, 0.9);
 
-    game.add.geom.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1); // Box
-    game.add.text(820, 38, percentText + '%', textStyles.h2_blue).align = 'left';
-    game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue).align = 'right';
+    game.add.geom.rect(context.canvas.width - 240 + 1, 11, 149, 34, colors.blue, 3, undefined, 1); // Box
+    game.add.text(context.canvas.width - 240 + 160, 38, percentText + '%', textStyles.h2_blue).align = 'left';
+    game.add.text(context.canvas.width - 240 - 10, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue).align = 'right';
 
     // Map positions
-    this.points = {
-      x: [90, 204, 318, 432, 546, 660],
-      y: [486, 422, 358, 294, 230, 166]
-    };
-
     if (gameType == 'squareOne') {
       // Garage
       game.add.image(this.points.x[0], this.points.y[0], 'garage', 0.4).anchor(0.5, 1);
@@ -63,12 +78,6 @@ const mapState = {
     }
 
     // Rocks and bushes
-    const rocks = {
-      x: [156, 275, 276, 441, 452, 590, 712],
-      y: [309, 543, 259, 156, 419, 136, 316],
-      type: [1, 1, 2, 1, 2, 2, 2]
-    };
-
     for (let i in rocks.type) {
       if (rocks.type[i] == 1) {
         game.add.image(rocks.x[i], rocks.y[i], 'rock', 0.32).anchor(0.5, 0.95);
@@ -78,12 +87,6 @@ const mapState = {
     }
 
     // Trees
-    const trees = {
-      x: [105, 214, 354, 364, 570, 600, 740, 779],
-      y: [341, 219, 180, 520, 550, 392, 488, 286],
-      type: [2, 4, 3, 4, 1, 2, 4, 4]
-    };
-
     for (let i in trees.type) {
       game.add.image(trees.x[i], trees.y[i], 'tree' + trees.type[i], 0.6).anchor(0.5, 0.95);
     }
@@ -134,7 +137,7 @@ const mapState = {
     const yB = this.points.y[mapPosition + 1];
     self.speedX = (xB - xA) / speed;
     self.speedY = (yA - yB) / speed;
-
+    
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
 
@@ -230,15 +233,15 @@ const endState = {
     game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);
 
     // Background
-    game.add.image(0, 0, 'bgimage');
+    game.add.image(0, 0, 'bgimage', 2.2);
 
     // Clouds
-    game.add.image(300, 100, 'cloud');
-    game.add.image(660, 80, 'cloud');
-    game.add.image(110, 85, 'cloud', 0.8);
+    game.add.image(640, 100, 'cloud');
+    game.add.image(1280, 80, 'cloud');
+    game.add.image(300, 85, 'cloud', 0.8);
 
     // Floor
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
+    for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
     // Progress bar
     game.add.geom.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5); // Progress
@@ -356,7 +359,7 @@ const endState = {
           game.state.start('menu');
         } else {
           // FOR MOODLE
-          parent.location.reload(true);          
+          parent.location.reload(true);
         }
 
       }

js/menu.js

@@ -49,7 +49,7 @@ const menuState = {
 
       // --------------------------- GAME ICONS 
 
-      const offset = context.canvas.width / (info.gameType.length + 1);
+      const offset = game.math.getOffset(context.canvas.width, info.gameType.length);
 
       for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {
 

js/studentReport.js

@@ -25,10 +25,10 @@ const studentReport = {
 
     // Background
     game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);
-    game.add.image(300, 100, 'cloud');
-    game.add.image(660, 80, 'cloud');
-    game.add.image(110, 85, 'cloud', 0.8);
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
+    game.add.image(640, 100, 'cloud');
+    game.add.image(1280, 80, 'cloud');
+    game.add.image(300, 85, 'cloud', 0.8);
+    for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
     // Title
     game.add.text(context.canvas.width / 2, 80, game.lang.results, textStyles.h1_green);