Home Explore Help
Sign In
LInE
/
Ifractions-web
5
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

making canvas responsive in relation to the width of the panel

laira 3 years ago
parent
bc42cf7919
commit
f887327f7b
11 changed files with 110 additions and 88 deletions
Unified View Show Diff Stats
  1. 9 10
      index.html
  2. 10 8
      js/customMenu.js
  3. 17 2
      js/gameMechanics.js
  4. 8 8
      js/games/circleOne.js
  5. 7 7
      js/games/squareOne.js
  6. 10 10
      js/games/squareTwo.js
  7. 1 1
      js/globals.js
  8. 9 5
      js/map.js
  9. 12 10
      js/menu.js
  10. 18 18
      js/preMenu.js
  11. 9 9
      js/studentReport.js

+ 9 - 10
index.html
View File 

@@ -6,7 +6,7 @@
 
 <head>
 
 <head>
 
 
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="description" content="Educational game for teaching fractions" />
 
   <meta name="description" content="Educational game for teaching fractions" />
 
   <meta name="keywords" content="ifractions, fraction, game, private data" />
 
   <meta name="keywords" content="ifractions, fraction, game, private data" />
 
   <link rel="shortcut icon" href="assets/img/scene/flag.png">
 
   <link rel="shortcut icon" href="assets/img/scene/flag.png">
 
@@ -15,17 +15,14 @@
 
 
 
   <style>
 
   <style>
 
     #iFractions-canvas {
 
     #iFractions-canvas {
 
-      padding: 0 auto 0 auto;
 
-      margin-left: auto;
 
-      margin-right: auto;
 
-      display: block;
 
+      width: 100%;
 
     }
 
     }
 
 
 
     #textbox {
 
     #textbox {
 
       position: absolute;
 
       position: absolute;
 
       margin-left: auto;
 
       margin-left: auto;
 
       margin-right: auto;
 
       margin-right: auto;
 
-      top: 300px;
 
+      top: 360px;
 
       left: 0;
 
       left: 0;
 
       right: 0;
 
       right: 0;
 
       text-align: center;
 
       text-align: center;
 
@@ -88,7 +85,8 @@
 
       font-weight: bold;
 
       font-weight: bold;
 
     }
 
     }
 
 
 
-    .close:hover, .close:focus {
 
+    .close:hover,
 
+    .close:focus {
 
       color: #000;
 
       color: #000;
 
       text-decoration: none;
 
       text-decoration: none;
 
       cursor: pointer;
 
       cursor: pointer;
 
@@ -110,8 +108,9 @@
 
         <div id="textbox" onsubmit="return false">
 
         <div id="textbox" onsubmit="return false">
 
           <input type="text" id="textbox-content" value="" size="13" maxlength="36"> <!-- Textbox to get player name -->
 
           <input type="text" id="textbox-content" value="" size="13" maxlength="36"> <!-- Textbox to get player name -->
 
         </div>
 
         </div>
 
-               
-        <div id="myModal" class="modal">  <!-- Modal -->
 
+
 
+        <div id="myModal" class="modal">
 
+          <!-- Modal -->
 
           <div class="modal-content">
 
           <div class="modal-content">
 
             <span class="close">&times;</span>
 
             <span class="close">&times;</span>
 
             <div id='infobox-content'></div> <!-- Modal content -->
 
             <div id='infobox-content'></div> <!-- Modal content -->
 
@@ -134,7 +133,7 @@
 
     <script src="js/integrationFunctions.js"></script> <!-- FOR MOODLE -->
 
     <script src="js/integrationFunctions.js"></script> <!-- FOR MOODLE -->
 
     <script src="js/gameMechanics.js"></script>
 
     <script src="js/gameMechanics.js"></script>
 
     <script src="js/globals.js"></script>
 
     <script src="js/globals.js"></script>
 
-    
+
 
     <script>
 
     <script>
 
 
 
       const defaultWidth = 900; // Default width for the Canvas
 
       const defaultWidth = 900; // Default width for the Canvas

+ 10 - 8
js/customMenu.js
View File 

@@ -36,14 +36,14 @@ const customMenuState = {
 
       this.menuIcons = [];

       this.menuIcons = [];

 

 

       // Background color

       // Background color

-      game.add.geom.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.blueBckg, 1);

+      game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);

       // Floor

       // Floor

-      for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }

+      for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }

 

 

       // Overtitle : Selected game

       // Overtitle : Selected game

-      game.add.text(defaultWidth / 2, 40, game.lang.game.toUpperCase() + ": " + menuState.menuIcons, textStyles.h4_brown);

+      game.add.text(context.canvas.width / 2, 40, game.lang.game.toUpperCase() + ": " + menuState.menuIcons, textStyles.h4_brown);

       // Title : Customize the selected game

       // Title : Customize the selected game

-      game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);

+      game.add.text(context.canvas.width / 2, 80, game.lang.custom_game, textStyles.h1_green);

 

 

       // Loads navigation icons

       // Loads navigation icons

       navigationIcons.add(

       navigationIcons.add(

@@ -198,8 +198,8 @@ const customMenuState = {
 
       // FOR MOODLE

       // FOR MOODLE

       if (!moodle) {

       if (!moodle) {

 

 

-        x = defaultWidth - 100;

-        y = defaultHeight - 110;

+        x = context.canvas.width - 100;

+        y = context.canvas.height - 110;

 

 

         const enterIcon = game.add.image(x, y, 'bush');

         const enterIcon = game.add.image(x, y, 'bush');

         enterIcon.anchor(0.5, 0.5);

         enterIcon.anchor(0.5, 0.5);

@@ -398,7 +398,8 @@ const customMenuState = {
 
    * @param {object} mouseEvent contains the mouse click coordinates

    * @param {object} mouseEvent contains the mouse click coordinates

    */

    */

   onInputDown: function (mouseEvent) {

   onInputDown: function (mouseEvent) {

-    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;

+    const x = game.math.getMouse(mouseEvent).x;

+    const y = game.math.getMouse(mouseEvent).y;

     let overIcon;

     let overIcon;

 

 

     // Check if clicked on an icon

     // Check if clicked on an icon

@@ -440,7 +441,8 @@ const customMenuState = {
 
    * @param {object} mouseEvent contains the mouse move coordinates

    * @param {object} mouseEvent contains the mouse move coordinates

    */

    */

   onInputOver: function (mouseEvent) {

   onInputOver: function (mouseEvent) {

-    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;

+    const x = game.math.getMouse(mouseEvent).x;

+    const y = game.math.getMouse(mouseEvent).y;

     let overIcon;

     let overIcon;

 

 

     // Check if pointer is over an icon

     // Check if pointer is over an icon

+ 17 - 2
js/gameMechanics.js
View File 

@@ -75,8 +75,8 @@ const game = {
 
       if (self.preload) {
 
       if (self.preload) {
 
         game.render.clear(); // Clears render queue
 
         game.render.clear(); // Clears render queue
 
         // IF there's media to be loaded, creates progress bar
 
         // IF there's media to be loaded, creates progress bar
 
-        game.add.geom.rect(0, 0, defaultWidth, defaultHeight, colors.white, 0, colors.blueBckg, 1);
 
-        self.progressBar = game.add.geom.rect(defaultWidth / 2, defaultHeight / 2, 20, 20, undefined, 0, colors.white);
 
+        game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, colors.white, 0, colors.blueBckg, 1);
 
+        self.progressBar = game.add.geom.rect(context.canvas.width / 2, context.canvas.height / 2, 20, 20, undefined, 0, colors.white);
 
         self.progressBar.anchor(0.5, 0.5);
 
         self.progressBar.anchor(0.5, 0.5);
 
         // Calls state's preload() to load the state's media
 
         // Calls state's preload() to load the state's media
 
         self.preload();
 
         self.preload();
 
@@ -933,6 +933,21 @@ const game = {
 
       return y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
 
       return y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
 
         (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
         (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
     },
 
     },
 
+    /**
 
+     * Get mouse position coordinates
 
+     *  
+     * @param {object} mouseEvent 
+     * @returns {object} x and y mouse coordinates
 
+     */
 
+    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 
+      }
 
+    },
 
+
 
     /**
 
     /**
 
      * Converts a given time in seconds (number) to the format HH:MM:SS (string)
 
      * Converts a given time in seconds (number) to the format HH:MM:SS (string)
 
      * 
      *

+ 8 - 8
js/games/circleOne.js
View File 

@@ -71,7 +71,7 @@ const circleOne = {
 
     game.add.image(110, 85, 'cloud', 0.8);
 
     game.add.image(110, 85, 'cloud', 0.8);
 
 
 
     // Add floor of grass
 
     // Add floor of grass
 
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }
 
+    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
 
 
     // Road
 
     // Road
 
     this.road = game.add.image(47, 515, 'road', 1.01, 0.94);
 
     this.road = game.add.image(47, 515, 'road', 1.01, 0.94);
 
@@ -119,7 +119,7 @@ const circleOne = {
 
       direc: [],     // Can be : 1 or -1 : will be multiplied to values to easily change object direction when needed
 
       direc: [],     // Can be : 1 or -1 : will be multiplied to values to easily change object direction when needed
 
     };
 
     };
 
 
 
-    this.balloonPlace = defaultWidth / 2; // Balloon place
 
+    this.balloonPlace = context.canvas.width / 2; // Balloon place
 
 
 
     // Number of circles
 
     // Number of circles
 
     const max = (gameOperation == 'Mixed' || gameMode == 'B') ? 6 : mapPosition + 1;
 
     const max = (gameOperation == 'Mixed' || gameMode == 'B') ? 6 : mapPosition + 1;
 
@@ -363,13 +363,13 @@ const circleOne = {
 
         self.result = true; // Answer is correct
 
         self.result = true; // Answer is correct
 
         self.kid.curFrame = (self.kid.curFrame < 12) ? 24 : 25;
 
         self.kid.curFrame = (self.kid.curFrame < 12) ? 24 : 25;
 
         if (audioStatus) game.audio.okSound.play();
 
         if (audioStatus) game.audio.okSound.play();
 
-        game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
 
+        game.add.image(context.canvas.width / 2, context.canvas.height / 2, 'ok').anchor(0.5, 0.5);
 
         completedLevels++;
 
         completedLevels++;
 
         if (debugMode) console.log('Completed Levels: ' + completedLevels);
 
         if (debugMode) console.log('Completed Levels: ' + completedLevels);
 
       } else {
 
       } else {
 
         self.result = false; // Answer is incorrect
 
         self.result = false; // Answer is incorrect
 
         if (audioStatus) game.audio.errorSound.play();
 
         if (audioStatus) game.audio.errorSound.play();
 
-        game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
 
+        game.add.image(context.canvas.width / 2, context.canvas.height / 2, 'error').anchor(0.5, 0.5);
 
       }
 
       }
 
 
 
       self.postScore();
 
       self.postScore();
 
@@ -516,8 +516,8 @@ const circleOne = {
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    */
 
    */
 
   onInputDown: function (mouseEvent) {
 
   onInputDown: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
 
 
     // GAME MODE A : click road
 
     // GAME MODE A : click road
 
     if (gameMode == 'A') {
 
     if (gameMode == 'A') {
 
@@ -546,8 +546,8 @@ const circleOne = {
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    */
 
    */
 
   onInputOver: function (mouseEvent) {
 
   onInputOver: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
     let flag = false;
 
     let flag = false;
 
 
 
     // GAME MODE A : balloon follow mouse
 
     // GAME MODE A : balloon follow mouse

+ 7 - 7
js/games/squareOne.js
View File 

@@ -72,7 +72,7 @@ const squareOne = {
 
     game.add.image(110, 85, 'cloud', 0.8);
 
     game.add.image(110, 85, 'cloud', 0.8);
 
 
 
     // Add floor of grass
 
     // Add floor of grass
 
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }
 
+    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
 
 
     // Calls function that loads navigation icons
 
     // Calls function that loads navigation icons
 
 
 
@@ -253,14 +253,14 @@ const squareOne = {
 
         game.animation.play(self.tractor.animation[0]);
 
         game.animation.play(self.tractor.animation[0]);
 
 
 
         // Displays feedback image and sound 
         // Displays feedback image and sound 
-        game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
 
+        game.add.image(context.canvas.width / 2, context.canvas.height / 2, 'ok').anchor(0.5, 0.5);
 
         if (audioStatus) game.audio.okSound.play();
 
         if (audioStatus) game.audio.okSound.play();
 
 
 
         completedLevels++; // Increases number os finished levels
 
         completedLevels++; // Increases number os finished levels
 
         if (debugMode) console.log('Completed Levels: ' + completedLevels);
 
         if (debugMode) console.log('Completed Levels: ' + completedLevels);
 
       } else { // Incorrect answer
 
       } else { // Incorrect answer
 
         // Displays feedback image and sound
 
         // Displays feedback image and sound
 
-        game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
 
+        game.add.image(context.canvas.width / 2, context.canvas.height / 2, 'error').anchor(0.5, 0.5);
 
         if (audioStatus) game.audio.errorSound.play();
 
         if (audioStatus) game.audio.errorSound.play();
 
       }
 
       }
 
 
 
@@ -588,8 +588,8 @@ const squareOne = {
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    */
 
    */
 
   onInputDown: function (mouseEvent) {
 
   onInputDown: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
 
 
     if (gameMode == 'A') {
 
     if (gameMode == 'A') {
 
       self.floor.blocks.forEach(cur => {
 
       self.floor.blocks.forEach(cur => {
 
@@ -612,8 +612,8 @@ const squareOne = {
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    */
 
    */
 
   onInputOver: function (mouseEvent) {
 
   onInputOver: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
     let flagA = false;
 
     let flagA = false;
 
     let flagB = false;
 
     let flagB = false;

+ 10 - 10
js/games/squareTwo.js
View File 

@@ -74,7 +74,7 @@ const squareTwo = {
 
     game.add.image(110, 85, 'cloud', 0.8);
 
     game.add.image(110, 85, 'cloud', 0.8);
 
 
 
     // Add floor of grass
 
     // Add floor of grass
 
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }
 
+    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
 
 
     // Calls function that loads navigation icons
 
     // Calls function that loads navigation icons
 
 
 
@@ -92,7 +92,7 @@ const squareTwo = {
 
     }
 
     }
 
 
 
     // Add kid
 
     // Add kid
 
-    this.kidAnimation = game.add.sprite(100, defaultHeight - 128, 'kid_standing', 5, 0.8);
 
+    this.kidAnimation = game.add.sprite(100, context.canvas.height - 128, 'kid_standing', 5, 0.8);
 
     this.kidAnimation.anchor(0.5, 0.7);
 
     this.kidAnimation.anchor(0.5, 0.7);
 
 
 
     // Width and Height of A and B
 
     // Width and Height of A and B
 
@@ -209,8 +209,8 @@ const squareTwo = {
 
     this.B.fractions[2].alpha = 0;
 
     this.B.fractions[2].alpha = 0;
 
 
 
     // Invalid selection text
 
     // Invalid selection text
 
-    this.A.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 225, '', textStyles.h4_brown);
 
-    this.B.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 45, '', textStyles.h4_brown);
 
+    this.A.warningText = game.add.text(context.canvas.width / 2, context.canvas.height / 2 - 225, '', textStyles.h4_brown);
 
+    this.B.warningText = game.add.text(context.canvas.width / 2, context.canvas.height / 2 - 45, '', textStyles.h4_brown);
 
 
 
     game.timer.start(); // Set a timer for the current level (used in postScore)
 
     game.timer.start(); // Set a timer for the current level (used in postScore)
 
 
 
@@ -253,7 +253,7 @@ const squareTwo = {
 
         if (self.result) {
 
         if (self.result) {
 
           if (audioStatus) game.audio.okSound.play();
 
           if (audioStatus) game.audio.okSound.play();
 
 
 
-          game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
 
+          game.add.image(context.canvas.width / 2, context.canvas.height / 2, 'ok').anchor(0.5, 0.5);
 
           mapMove = true; // Allow character to move to next level in map state
 
           mapMove = true; // Allow character to move to next level in map state
 
           completedLevels++;
 
           completedLevels++;
 
 
 
@@ -262,7 +262,7 @@ const squareTwo = {
 
           // Fractions are not equivalent : INCORRECT
 
           // Fractions are not equivalent : INCORRECT
 
         } else {
 
         } else {
 
           if (audioStatus) game.audio.errorSound.play();
 
           if (audioStatus) game.audio.errorSound.play();
 
-          game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
 
+          game.add.image(context.canvas.width / 2, context.canvas.height / 2, 'error').anchor(0.5, 0.5);
 
           mapMove = false; // Doesnt allow character to move to next level in map state
 
           mapMove = false; // Doesnt allow character to move to next level in map state
 
         }
 
         }
 
 
 
@@ -390,8 +390,8 @@ const squareTwo = {
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    */
 
    */
 
   onInputDown: function (mouseEvent) {
 
   onInputDown: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
 
 
     // Click block in A
 
     // Click block in A
 
     self.A.blocks.forEach(cur => {
 
     self.A.blocks.forEach(cur => {
 
@@ -415,8 +415,8 @@ const squareTwo = {
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    */
 
    */
 
   onInputOver: function (mouseEvent) {
 
   onInputOver: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
     let flagA = false;
 
     let flagA = false;
 
     let flagB = false;
 
     let flagB = false;

+ 1 - 1
js/globals.js
View File 

@@ -444,7 +444,7 @@ const navigationIcons = {
 
   add: function (leftIcon0, leftIcon1, leftIcon2, rightIcon0, rightIcon1, state, help) {
 
   add: function (leftIcon0, leftIcon1, leftIcon2, rightIcon0, rightIcon1, state, help) {
 
 
 
     let left_x = 10;
 
     let left_x = 10;
 
-    let right_x = defaultWidth - 50 - 10;
 
+    let right_x = context.canvas.width - 50 - 10;
 
     this.iconsList = [];
 
     this.iconsList = [];
 
 
 
     // 'Descriptive labels' for the navigation icons
 
     // 'Descriptive labels' for the navigation icons

+ 9 - 5
js/map.js
View File 

@@ -14,7 +14,7 @@ const mapState = {
 
   create: function () {
 
   create: function () {
 
 
 
     // Background color
 
     // Background color
 
-    game.add.geom.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.blueBckg, 1);
 
+    game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);
 
 
 
     // Map
 
     // Map
 
     game.add.image(0, 40, 'bgmap');
 
     game.add.image(0, 40, 'bgmap');
 
@@ -194,7 +194,9 @@ const mapState = {
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    */
 
    */
 
   onInputDown: function (mouseEvent) {
 
   onInputDown: function (mouseEvent) {
 
-    navigationIcons.onInputDown(mouseEvent.offsetX, mouseEvent.offsetY);
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
+    navigationIcons.onInputDown(x, y);
 
   },
 
   },
 
 
 
   /**
 
   /**
 
@@ -203,7 +205,9 @@ const mapState = {
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    */
 
    */
 
   onInputOver: function (mouseEvent) {
 
   onInputOver: function (mouseEvent) {
 
-    navigationIcons.onInputOver(mouseEvent.offsetX, mouseEvent.offsetY);
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
+    navigationIcons.onInputOver(x, y);
 
   }
 
   }
 
 
 
 };
 
 };
 
@@ -223,7 +227,7 @@ const endState = {
 
     self.animate = true;
 
     self.animate = true;
 
 
 
     // Background color
 
     // Background color
 
-    game.add.geom.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.blueBckg, 1);
 
+    game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);
 
 
 
     // Background
 
     // Background
 
     game.add.image(0, 0, 'bgimage');
 
     game.add.image(0, 0, 'bgimage');
 
@@ -234,7 +238,7 @@ const endState = {
 
     game.add.image(110, 85, 'cloud', 0.8);
 
     game.add.image(110, 85, 'cloud', 0.8);
 
 
 
     // Floor
 
     // Floor
 
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }
 
+    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
 
 
     // Progress bar
 
     // Progress bar
 
     game.add.geom.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5); // Progress
 
     game.add.geom.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5); // Progress

+ 12 - 10
js/menu.js
View File 

@@ -25,16 +25,16 @@ const menuState = {
 
       if (moodle && iLMparameters.iLM_PARAM_SendAnswer == 'true') playerName = game.lang.professor;

       if (moodle && iLMparameters.iLM_PARAM_SendAnswer == 'true') playerName = game.lang.professor;

 

 

       // Background color

       // Background color

-      game.add.geom.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.blueBckg, 1);

+      game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, undefined, 0, colors.blueBckg, 1);

       // Floor

       // Floor

-      for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }

+      for (let i = 0; i < context.canvas.width / 100; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }

 

 

       // Overtitle: Welcome, <player name>!

       // Overtitle: Welcome, <player name>!

-      game.add.text(defaultWidth / 2, 40, game.lang.welcome + ', ' + playerName + '!', textStyles.h4_brown);

+      game.add.text(context.canvas.width / 2, 40, game.lang.welcome + ', ' + playerName + '!', textStyles.h4_brown);

       // Title : Select a game

       // Title : Select a game

-      game.add.text(defaultWidth / 2, 80, game.lang.menu_title, textStyles.h1_green);

+      game.add.text(context.canvas.width / 2, 80, game.lang.menu_title, textStyles.h1_green);

       // Subtitle : <game mode> 

       // Subtitle : <game mode> 

-      this.lbl_game = game.add.text(defaultWidth / 2, 110, '', textStyles.h2_blue_2);

+      this.lbl_game = game.add.text(context.canvas.width / 2, 110, '', textStyles.h2_blue_2);

 

 

       // Loads navigation icons

       // Loads navigation icons

       navigationIcons.add(

       navigationIcons.add(

@@ -49,11 +49,11 @@ const menuState = {
 
 

 

       // --------------------------- GAME ICONS 

       // --------------------------- GAME ICONS 

 

 

-      const offset = defaultWidth / (info.gameType.length + 1);

+      const offset = context.canvas.width / (info.gameType.length + 1);

 

 

       for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {

       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);

+        const icon = game.add.image(x, context.canvas.height / 2 - 70, info.gameTypeUrl[i], 1);

         icon.anchor(0.5, 0.5); 

         icon.anchor(0.5, 0.5); 

 

 

         icon.gameShape = info.gameShape[i];

         icon.gameShape = info.gameShape[i];

@@ -63,7 +63,7 @@ const menuState = {
 
         this.menuIcons.push(icon);

         this.menuIcons.push(icon);

 

 

         // "more information" button

         // "more information" button

-        infoIcon = game.add.image(x + 70, defaultHeight / 2 - 70 - 80, 'info', 0.6, 0.4);

+        infoIcon = game.add.image(x + 70, context.canvas.height / 2 - 70 - 80, 'info', 0.6, 0.4);

         infoIcon.anchor(0.5, 0.5);

         infoIcon.anchor(0.5, 0.5);

         infoIcon.iconType = 'infoIcon';

         infoIcon.iconType = 'infoIcon';

         infoIcon.id = icon.gameType;

         infoIcon.id = icon.gameType;

@@ -175,7 +175,8 @@ const menuState = {
 
    * @param {object} mouseEvent contains the mouse click coordinates

    * @param {object} mouseEvent contains the mouse click coordinates

    */

    */

   onInputDown: function (mouseEvent) {

   onInputDown: function (mouseEvent) {

-    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;

+    const x = game.math.getMouse(mouseEvent).x;

+    const y = game.math.getMouse(mouseEvent).y;

 

 

     // Check menu icons

     // Check menu icons

     for (let i in self.menuIcons) {

     for (let i in self.menuIcons) {

@@ -199,7 +200,8 @@ const menuState = {
 
    * @param {object} mouseEvent contains the mouse move coordinates

    * @param {object} mouseEvent contains the mouse move coordinates

    */

    */

   onInputOver: function (mouseEvent) {

   onInputOver: function (mouseEvent) {

-    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;

+    const x = game.math.getMouse(mouseEvent).x;

+    const y = game.math.getMouse(mouseEvent).y;

     let overIcon;

     let overIcon;

 

 

     // Check menu icons

     // Check menu icons

+ 18 - 18
js/preMenu.js
View File 

@@ -60,7 +60,7 @@ const langState = {
 
    */
 
    */
 
   create: function () {
 
   create: function () {
 
     // Background color
 
     // Background color
 
-    game.add.geom.rect(0, 0, defaultWidth, defaultHeight, colors.white, 0, colors.blueBckg, 1);
 
+    game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, colors.white, 0, colors.blueBckg, 1);
 
 
 
     // Parameters for the elements on the screen
 
     // Parameters for the elements on the screen
 
     this.listOfFlags = [];
 
     this.listOfFlags = [];
 
@@ -76,10 +76,10 @@ const langState = {
 
     // Create elements on screen  
     // Create elements on screen  
     for (let i in this.langs.flag) {
 
     for (let i in this.langs.flag) {
 
       // Add text for language names
 
       // Add text for language names
 
-      game.add.text(defaultWidth / 2 + this.langs.x[i], defaultHeight / 2 + this.langs.y[i], this.langs.text[i], textStyles.h2_green).align = 'right';
 
+      game.add.text(context.canvas.width / 2 + this.langs.x[i], context.canvas.height / 2 + this.langs.y[i], this.langs.text[i], textStyles.h2_green).align = 'right';
 
 
 
       // Add icons for flags
 
       // Add icons for flags
 
-      const flag = game.add.image(defaultWidth / 2 + this.langs.x[i] + 100, defaultHeight / 2 + this.langs.y[i], this.langs.flag[i]);
 
+      const flag = game.add.image(context.canvas.width / 2 + this.langs.x[i] + 100, context.canvas.height / 2 + this.langs.y[i], this.langs.flag[i]);
 
       flag.anchor(0.5, 0.5);
 
       flag.anchor(0.5, 0.5);
 
 
 
       this.listOfFlags.push(flag);
 
       this.listOfFlags.push(flag);
 
@@ -107,9 +107,9 @@ const langState = {
 
  * @param {object} mouseEvent contains the mouse click coordinates
 
  * @param {object} mouseEvent contains the mouse click coordinates
 
  */
 
  */
 
   onInputDown: function (mouseEvent) {
 
   onInputDown: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
-
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
+   
     self.listOfFlags.forEach(cur => {
 
     self.listOfFlags.forEach(cur => {
 
       if (game.math.isOverIcon(x, y, cur)) {
 
       if (game.math.isOverIcon(x, y, cur)) {
 
         for (let i in self.langs.flag) {
 
         for (let i in self.langs.flag) {
 
@@ -128,10 +128,10 @@ const langState = {
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    */
 
    */
 
   onInputOver: function (mouseEvent) {
 
   onInputOver: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
     let flag = false;
 
     let flag = false;
 
-
 
+    
     self.listOfFlags.forEach(cur => {
 
     self.listOfFlags.forEach(cur => {
 
       if (game.math.isOverIcon(x, y, cur)) {
 
       if (game.math.isOverIcon(x, y, cur)) {
 
         flag = true;
 
         flag = true;
 
@@ -192,19 +192,19 @@ const nameState = {
 
   create: function () {
 
   create: function () {
 
 
 
     // Background color
 
     // Background color
 
-    game.add.geom.rect(0, 0, defaultWidth, defaultHeight, colors.white, 0, colors.blueBckg, 1);
 
+    game.add.geom.rect(0, 0, context.canvas.width, context.canvas.height, colors.white, 0, colors.blueBckg, 1);
 
 
 
     // Set title and warning text
 
     // Set title and warning text
 
 
 
-    game.add.text(defaultWidth / 2, defaultHeight / 2 - 100, game.lang.insert_name, textStyles.h1_green);
 
+    game.add.text(context.canvas.width / 2, context.canvas.height / 2 - 100, game.lang.insert_name, textStyles.h1_green);
 
 
 
-    this.warningEmptyName = game.add.text(defaultWidth / 2, defaultHeight / 2 - 70, '', textStyles.h4_brown);
 
+    this.warningEmptyName = game.add.text(context.canvas.width / 2, context.canvas.height / 2 - 70, '', textStyles.h4_brown);
 
 
 
     // Set 'ok' button that gets player's information
 
     // Set 'ok' button that gets player's information
 
-    this.okBtn = game.add.geom.rect(defaultWidth / 2 - 84, defaultHeight / 2 + 70, 168, 60, undefined, 0, colors.gray, 0.6);
 
+    this.okBtn = game.add.geom.rect(context.canvas.width / 2 - 84, context.canvas.height / 2 + 70, 168, 60, undefined, 0, colors.gray, 0.6);
 
 
 
     // Set button Text
 
     // Set button Text
 
-    game.add.text(defaultWidth / 2 + 1, defaultHeight / 2 + 112, game.lang.ready, textStyles.h1_white);
 
+    game.add.text(context.canvas.width / 2 + 1, context.canvas.height / 2 + 112, game.lang.ready, textStyles.h1_white);
 
 
 
     // Makes text field visible
 
     // Makes text field visible
 
     document.getElementById('textbox').style.visibility = 'visible';
 
     document.getElementById('textbox').style.visibility = 'visible';
 
@@ -262,8 +262,8 @@ const nameState = {
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    * @param {object} mouseEvent contains the mouse click coordinates
 
    */
 
    */
 
   onInputDown: function (mouseEvent) {
 
   onInputDown: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
     const cur = self.okBtn;
 
     const cur = self.okBtn;
 
 
 
     if (game.math.isOverIcon(x, y, cur)) {
 
     if (game.math.isOverIcon(x, y, cur)) {
 
@@ -280,8 +280,8 @@ const nameState = {
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    * @param {object} mouseEvent contains the mouse move coordinates
 
    */
 
    */
 
   onInputOver: function (mouseEvent) {
 
   onInputOver: function (mouseEvent) {
 
-    const x = mouseEvent.offsetX;
 
-    const y = mouseEvent.offsetY;
 
+    const x = game.math.getMouse(mouseEvent).x;
 
+    const y = game.math.getMouse(mouseEvent).y;
 
     const cur = self.okBtn;
 
     const cur = self.okBtn;
 
 
 
     if (game.math.isOverIcon(x, y, cur)) {
 
     if (game.math.isOverIcon(x, y, cur)) {

+ 9 - 9
js/studentReport.js
View File 

@@ -19,19 +19,19 @@ const studentReport = {
 
    */
 
    */
 
   create: function () {
 
   create: function () {
 
 
 
-    const offsetW = defaultWidth / 4;
 
+    const offsetW = context.canvas.width / 4;
 
     let x = offsetW / 2;
 
     let x = offsetW / 2;
 
-    let y = defaultHeight / 2 - 50;
 
+    let y = context.canvas.height / 2 - 50;
 
 
 
     // Background
 
     // Background
 
-    game.add.geom.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.blueBckg, 1);
 
+    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(300, 100, 'cloud');
 
     game.add.image(660, 80, 'cloud');
 
     game.add.image(660, 80, 'cloud');
 
     game.add.image(110, 85, 'cloud', 0.8);
 
     game.add.image(110, 85, 'cloud', 0.8);
 
-    for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }
 
+    for (let i = 0; i < 9; i++) { game.add.image(i * 100, context.canvas.height - 100, 'floor'); }
 
 
 
     // Title
 
     // Title
 
-    game.add.text(defaultWidth / 2, 80, game.lang.results, textStyles.h1_green);
 
+    game.add.text(context.canvas.width / 2, 80, game.lang.results, textStyles.h1_green);
 
     game.add.image(x - 40, y - 70, info.all[gameType].gameTypeUrl, 0.8);
 
     game.add.image(x - 40, y - 70, info.all[gameType].gameTypeUrl, 0.8);
 
 
 
     // Game info
 
     // Game info
 
@@ -43,17 +43,17 @@ const studentReport = {
 
     game.add.text(190, y + 25, game.lang.difficulty + ': ' + gameDifficulty, textStyles.h4_brown).align = 'left';
 
     game.add.text(190, y + 25, game.lang.difficulty + ': ' + gameDifficulty, textStyles.h4_brown).align = 'left';
 
 
 
     // Student info
 
     // Student info
 
-    y = defaultHeight - 200;
 
+    y = context.canvas.height - 200;
 
     for (let i = 0; i < 4; i++, x += offsetW) {
 
     for (let i = 0; i < 4; i++, x += offsetW) {
 
       // If level wasnt completed, show broken sign
 
       // If level wasnt completed, show broken sign
 
       if (moodleVar.hits[i] == 0 && moodleVar.errors[i] == 0) {
 
       if (moodleVar.hits[i] == 0 && moodleVar.errors[i] == 0) {
 
-        const sign = game.add.image(x, defaultHeight - 100, 'broken_sign', 0.7);
 
+        const sign = game.add.image(x, context.canvas.height - 100, 'broken_sign', 0.7);
 
         sign.anchor(0.5, 0.5);
 
         sign.anchor(0.5, 0.5);
 
       } else {
 
       } else {
 
         // If level was completed shows sign with level number and student report
 
         // If level was completed shows sign with level number and student report
 
-        const sign = game.add.image(x, defaultHeight - 100, 'sign', 0.7);
 
+        const sign = game.add.image(x, context.canvas.height - 100, 'sign', 0.7);
 
         sign.anchor(0.5, 0.5);
 
         sign.anchor(0.5, 0.5);
 
-        game.add.text(x, defaultHeight - 100, '' + (i + 1), textStyles.h2_white);
 
+        game.add.text(x, context.canvas.height - 100, '' + (i + 1), textStyles.h2_white);
 
 
 
         game.add.geom.rect(x - 55, y - 40, 5, 135, undefined, 0, colors.blueMenuLine);
 
         game.add.geom.rect(x - 55, y - 40, 5, 135, undefined, 0, colors.blueMenuLine);
 
         game.add.text(x - 40, y - 25, game.lang.time + ': ' + game.math.convertTime(moodleVar.time[i]), textStyles.h4_brown).align = 'left';
 
         game.add.text(x - 40, y - 25, game.lang.time + ': ' + game.math.convertTime(moodleVar.time[i]), textStyles.h4_brown).align = 'left';