/****************************** * This file holds game states. ******************************/ /** [GAME STATE] * * ..squareOne... = gameType * ..../...\..... * ...A.....B.... = gameMode * .....\./...... * ......|....... * ...../.\...... * .Plus...Minus. = gameOperation * .....\./...... * ......|....... * ....1,2,3..... = gameDifficulty * * Character : tractor * Theme : farm * Concept : Player associates 'blocks carried by the tractor' and 'floor spaces to be filled by them' * Represent fractions as : blocks/rectangles * * Game modes can be : * * A : Player can select # of 'floor blocks' (hole in the ground) * Selects size of hole to be made in the ground (to fill with the blocks in front of the truck) * B : Player can select # of 'stacked blocks' (in front of the truck) * Selects number of blocks in front of the truck (to fill the hole on the ground) * * Operations can be : * * Plus : addition of fractions * Represented by : tractor going to the right (floor positions 0..8) * Minus : subtraction of fractions * Represented by: tractor going to the left (floor positions 8..0) * * @namespace */ const squareOne = { /** * Main code */ create: function () { // CONTROL VARIABLES this.checkAnswer = false; // When true allows game to run 'check answer' code in update this.animate = false; // When true allows game to run 'tractor animation' code in update (turns animation of the moving tractor ON/OFF) this.animateEnding = false; // When true allows game to run 'tractor ending animation' code in update (turns 'ending' animation of the moving tractor ON/OFF) this.hasClicked = false; // Checks if player 'clicked' on a block this.result = false; // Checks player 'answer' this.count = 0; // An 'x' position counter used in the tractor animation this.divisorsList = ''; // Hold the divisors for each fraction on stacked blocks (created for postScore()) this.direc_level = (gameOperation == 'Minus') ? -1 : 1; // Will be multiplied to values to easily change tractor direction when needed this.animationSpeed = 2 * this.direc_level; // X distance in which the tractor moves in each iteration of the animation // GAME VARIABLES this.defaultBlockWidth = 80; // Base block width this.defaultBlockHeight = 40; // Base block height this.startX = (gameOperation == 'Minus') ? 730 : 170; // Initial 'x' coordinate for the tractor and stacked blocks // BACKGROUND // Add background image game.add.image(0, 0, 'bgimage'); // Add clouds game.add.image(300, 100, 'cloud'); game.add.image(660, 80, 'cloud'); game.add.image(110, 85, 'cloud', 0.8); // Add floor of grass for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); } // Calls function that loads navigation icons // FOR MOODLE if (moodle) { navigationIcons.add( false, false, false, // Left icons true, false, // Right icons false, false ); } else { navigationIcons.add( true, true, true, // Left icons true, false, // Right icons 'customMenu', this.viewHelp ); } // TRACTOR this.tractor = game.add.sprite(this.startX, 445, 'tractor', 0, 0.8); if (gameOperation == 'Plus') { this.tractor.anchor(1, 0.5); this.tractor.animation = ['move', [0, 1, 2, 3, 4], 4]; } else { this.tractor.anchor(0, 0.5); this.tractor.animation = ['move', [5, 6, 7, 8, 9], 4]; this.tractor.curFrame = 5; } // STACKED BLOCKS variables this.stck = { blocks: [], // Group of 'stacked' block objects labels: [], // Group of fraction labels on the side of 'stacked' blocks index: undefined, // (gameMode 'B') index of 'stacked' block selected by player // Control variables for animation curIndex: 0, // (needs to be 0) curBlockEnd: undefined, // Correct values correctIndex: undefined, // (gameMode 'B') index of the CORRECT 'stacked' block }; // FLOOR BLOCKS variables this.floor = { blocks: [], // Group of 'floor' block objects index: undefined, // (gameMode 'A') index of 'floor' block selected by player // Control variables for animation curIndex: -1, // (needs to be -1) // Correct values correctIndex: undefined, // (gameMode 'A') index of the CORRECT 'floor' block correctX: undefined, // 'x' coordinate of CORRECT 'floor' block correctXA: undefined, // Temporary variable correctXB: undefined, // Temporary variable }; // CREATING STACKED BLOCKS this.restart = this.createStckBlocks(); // CREATING FLOOR BLOCKS this.createFloorBlocks(); // SELECTION ARROW if (gameMode == 'A') { this.arrow = game.add.image(this.startX + this.defaultBlockWidth * this.direc_level, 480, 'arrow_down'); this.arrow.anchor(0.5, 0.5); this.arrow.alpha = 0.5; } // Help pointer this.help = game.add.image(0, 0, 'help_pointer', 0.5); this.help.anchor(0.5, 0); this.help.alpha = 0; if (!this.restart) { game.timer.start(); // Set a timer for the current level (used in postScore()) game.event.add('click', this.onInputDown); game.event.add('mousemove', this.onInputOver); } }, /** * Game loop */ update: function () { // AFTER PLAYER SELECTION // Starts tractor moving animation if (self.animate) { const stck = self.stck; const floor = self.floor; // MANAGE HORIZONTAL MOVEMENT // Move 'tractor' self.tractor.x += self.animationSpeed; // Move 'stacked blocks' for (let i in stck.blocks) { stck.blocks[i].x += self.animationSpeed; } // MANAGE BLOCKS AND FLOOR GAPS // If block is 1/n (not 1/1) there's an extra block space to go through before the start of next block const restOfCurBlock = (self.defaultBlockWidth - stck.blocks[stck.curIndex].width) * self.direc_level; // Check if block falls if ((gameOperation == 'Plus' && stck.blocks[0].x >= (stck.curBlockEnd + restOfCurBlock)) || (gameOperation == 'Minus' && stck.blocks[0].x <= (stck.curBlockEnd + restOfCurBlock))) { let lowerBlock = true; const curEnd = stck.blocks[0].x + stck.blocks[stck.curIndex].width * self.direc_level; // If current index is (A) last stacked index (correct index - fixed) // If current index is (B) selected stacked index if (stck.curIndex == stck.index) { // floor.index : (A) selected floor index // floor.index : (B) last floor index (correct index - fixed) const selectedEnd = floor.blocks[floor.index].x + floor.blocks[0].width * self.direc_level; // (A) last stacked block (fixed) doesnt fit selected gap AKA NOT ENOUGH FLOOR BLOCKS (DOESNT CHECK TOO MANY) // (B) selected stacked index doesnt fit last floor gap (fixed) AKA TOO MANY STACKED BLOCKS (DOESNT CHECK NOT ENOUGH) if ((gameOperation == 'Plus' && curEnd > selectedEnd) || (gameOperation == 'Minus' && curEnd < selectedEnd)) { lowerBlock = false; } } else { // Update to next block end stck.curBlockEnd += stck.blocks[stck.curIndex + 1].width * self.direc_level; } // Fill floor gap if (lowerBlock) { // Until (A) selected floor index // Until (B) last floor index (correct index - fixed) // Updates floor index to be equivalent to stacked index (and change alpha so floor appears to be filled) for (let i = 0; i <= floor.index; i++) { if ((gameOperation == 'Plus' && floor.blocks[i].x < curEnd) || (gameOperation == 'Minus' && floor.blocks[i].x > curEnd)) { floor.blocks[i].alpha = 0.2; floor.curIndex = i; } } // Lower stck.blocks[stck.curIndex].alpha = 0; stck.blocks.forEach(cur => { cur.y += self.defaultBlockHeight - 2; }); // Lower stacked blocks } stck.curIndex++; } // WHEN REACHED END POSITION if (stck.curIndex > stck.index || floor.curIndex == floor.index) { self.animate = false; self.checkAnswer = true; } } // When animation ends check answer if (self.checkAnswer) { game.timer.stop(); game.animation.stop(self.tractor.animation[0]); if (gameMode == 'A') { self.result = self.floor.index == self.floor.correctIndex; } else { self.result = self.stck.index == self.stck.correctIndex; } // Give feedback to player and turns on sprite animation if (self.result) { // Correct answer game.animation.play(self.tractor.animation[0]); // Displays feedback image and sound game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5); if (audioStatus) game.audio.okSound.play(); completedLevels++; // Increases number os finished levels if (debugMode) console.log('Completed Levels: ' + completedLevels); } else { // Incorrect answer // Displays feedback image and sound game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5); if (audioStatus) game.audio.errorSound.play(); } self.postScore(); // AFTER CHECK ANSWER self.checkAnswer = false; self.animateEnding = true; } // Starts 'ending' tractor moving animation if (self.animateEnding) { // ANIMATE ENDING self.count++; // If CORRECT ANSWER runs final tractor animation (else tractor desn't move, just wait) if (self.result) self.tractor.x += self.animationSpeed; // WHEN REACHED END POSITION calls map state if (self.count >= 140) { // If CORRECT ANSWER, player goes to next level in map if (self.result) mapMove = true; else mapMove = false; game.state.start('map'); } } game.render.all(); }, /** * Function called by self.onInputOver() when cursor is over a valid rectangle * * @param {object} cur rectangle the cursor is over */ overSquare: function (cur) { if (!self.hasClicked) { document.body.style.cursor = 'pointer'; // On gameMode A if (gameMode == 'A') { for (let i in self.floor.blocks) { self.floor.blocks[i].alpha = (i <= cur.index) ? 1 : 0.5; } // Saves the index of the selected 'floor' block self.floor.index = cur.index; // On gameMode B } else { for (let i in self.stck.blocks) { self.stck.blocks[i].alpha = (i <= cur.index) ? 0.5 : 0.2; } // Saves the index of the selected 'stack' block self.stck.index = cur.index; } } }, /** * Function called by self.onInputOver() when cursos is out of a valid rectangle */ outSquare: function () { if (!self.hasClicked) { document.body.style.cursor = 'auto'; // On game mode A if (gameMode == 'A') { for (let i in self.floor.blocks) { self.floor.blocks[i].alpha = 0.5; // Back to normal } self.floor.index = -1; // On game mode B } else { for (let i in self.stck.blocks) { self.stck.blocks[i].alpha = 0.5; // Back to normal } self.stck.index = -1; } } }, /** * Function called by self.onInputDown() when player clicks on a valid rectangle. */ clickSquare: function () { if (!self.hasClicked && !self.animateEnding) { document.body.style.cursor = 'auto'; // On gameMode A if (gameMode == 'A') { // Turns selection arrow completely visible self.arrow.alpha = 1; // Make the unselected blocks invisible (look like there's only the ground) for (let i in self.floor.blocks) { // (SELECTION : self.FLOOR.index) if (i > self.floor.index) self.floor.blocks[i].alpha = 0; // Make unselected 'floor' blocks invisible } // (FIXED : self.STCK.index) save the 'stacked' blocks index self.stck.index = self.stck.blocks.length - 1; // On gameMode B } else { for (let i in self.stck.blocks) { // (FIXED : self.STCK.index) if (i > self.stck.index) self.stck.blocks[i].alpha = 0; // Make unselected 'stacked' blocks invisible } // (SELECTION : self.FLOOR.index) save the 'floor' blocks index to compare to the stacked index in update self.floor.index = self.floor.blocks.length - 1; // Save the updated total stacked blocks to compare in update self.stck.blocks.length = self.stck.index + 1; } // Play beep sound if (audioStatus) game.audio.beepSound.play(); // Hide labels if (fractionLabel) { self.stck.labels.forEach(cur => { cur.forEach(cur => { cur.alpha = 0; }); }); } // Hide solution pointer if (self.help != undefined) self.help.alpha = 0; // Turn tractir animation on game.animation.play(self.tractor.animation[0]); self.hasClicked = true; self.animate = true; } }, /** * Create stacked blocks for the level in create() * * @returns {boolean} */ createStckBlocks: function () { let hasBaseDifficulty = false; // Will be true after next for loop if level has at least one '1/difficulty' fraction (if false, restart) const max = (gameMode == 'B') ? 10 : mapPosition + 4; // Maximum number of stacked blocks for the level const total = game.math.randomInRange(mapPosition + 2, max); // Current number of stacked blocks for the level self.floor.correctXA = self.startX + self.defaultBlockWidth * self.direc_level; for (let i = 0; i < total; i++) { // For each stacked block let divisor = game.math.randomInRange(1, gameDifficulty); // Set divisor for fraction if (divisor == gameDifficulty) hasBaseDifficulty = true; if (divisor == 3) divisor = 4; // Make sure valid divisors are 1, 2 and 4 (not 3) self.divisorsList += divisor + ','; // List of divisors (for postScore()) const curBlockWidth = self.defaultBlockWidth / divisor; // Current width is a fraction of the default self.floor.correctXA += curBlockWidth * self.direc_level; // Create stacked block (close to tractor) const lineColor = (gameOperation == 'Minus') ? colors.red : colors.darkBlue; const lineSize = 2; const block = game.add.geom.rect( self.startX, 462 - i * (self.defaultBlockHeight - lineSize), curBlockWidth - lineSize, self.defaultBlockHeight - lineSize, lineColor, lineSize, colors.white, 1); const anchor = (gameOperation == 'Minus') ? 1 : 0; block.anchor(anchor, 0); // If game is type B, adding events to stacked blocks if (gameMode == 'B') { block.alpha = 0.5; block.index = i; } self.stck.blocks.push(block); // If 'show fractions' is turned on, create labels that display the fractions on the side of each block if (fractionLabel) { const x = self.startX + (curBlockWidth + 15) * self.direc_level; const y = self.defaultBlockHeight - lineSize; const label = []; if (divisor == 1) { label[0] = game.add.text(x, 488 - 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); } // Add current label to group of labels self.stck.labels.push(label); } } // Will be used as a counter in update, adding in the width of each stacked block to check if the end matches the floor selected position self.stck.curBlockEnd = self.startX + self.stck.blocks[0].width * self.direc_level; let restart = false; // Check for errors (level too easy for its difficulty or end position out of bounds) if (!hasBaseDifficulty || (gameOperation == 'Plus' && (self.floor.correctXA < (self.startX + self.defaultBlockWidth) || self.floor.correctXA > (self.startX + 8 * self.defaultBlockWidth))) || (gameOperation == 'Minus' && (self.floor.correctXA < (self.startX - (8 * self.defaultBlockWidth)) || self.floor.correctXA > (self.startX - self.defaultBlockWidth))) ) { restart = true; // If any error is found restart the level } if (debugMode) console.log('Stacked blocks: ' + total + ' (min: ' + (mapPosition + 2) + ', max: ' + max + ')'); return restart; }, /** * Create floor blocks for the level in create() */ createFloorBlocks: function () { // For each floor block const divisor = (gameDifficulty == 3) ? 4 : gameDifficulty; // Make sure valid divisors are 1, 2 and 4 (not 3) let total = 8 * divisor; // Number of floor blocks const blockWidth = self.defaultBlockWidth / divisor; // Width of each floor block // If game is type B, selectiong a random floor x position if (gameMode == 'B') { self.stck.correctIndex = game.math.randomInRange(0, (self.stck.blocks.length - 1)); // Correct stacked index self.floor.correctXB = self.startX + self.defaultBlockWidth * self.direc_level; for (let i = 0; i <= self.stck.correctIndex; i++) { self.floor.correctXB += self.stck.blocks[i].width * self.direc_level; // Equivalent x position on the floor } } let flag = true; for (let i = 0; i < total; i++) { // For each floor block // 'x' coordinate for floor block const x = self.startX + (self.defaultBlockWidth + i * blockWidth) * self.direc_level; if (flag && gameMode == 'A') { if ((gameOperation == 'Plus' && x >= self.floor.correctXA) || (gameOperation == 'Minus' && x <= self.floor.correctXA)) { self.floor.correctIndex = i - 1; // Set index of correct floor block flag = false; } } if (gameMode == 'B') { if ((gameOperation == 'Plus' && x >= self.floor.correctXB) || (gameOperation == 'Minus' && x <= self.floor.correctXB)) { total = i; break; } } // Create floor block const lineSize = 0.9; const block = game.add.geom.rect( x, 462 + self.defaultBlockHeight - lineSize, blockWidth - lineSize, self.defaultBlockHeight - lineSize, colors.blueBckg, lineSize, colors.blueBckgInsideLevel, 1); const anchor = (gameOperation == 'Minus') ? 1 : 0; block.anchor(anchor, 0); // If game is type A, adding events to floor blocks if (gameMode == 'A') { block.alpha = 0.5; block.index = i; } // Add current label to group of labels self.floor.blocks.push(block); } if (gameMode == 'A') self.floor.correctX = self.floor.correctXA; else if (gameMode == 'B') self.floor.correctX = self.floor.correctXB; // 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); } }, /** * Display correct answer */ viewHelp: function () { if (!self.hasClicked) { // On gameMode A if (gameMode == 'A') { const aux = self.floor.blocks[0]; self.help.x = self.floor.correctX - aux.width / 2 * self.direc_level; self.help.y = 501; // On gameMode B } else { const aux = self.stck.blocks[self.stck.correctIndex]; self.help.x = aux.x + aux.width / 2 * self.direc_level; self.help.y = aux.y; } self.help.alpha = 0.7; } }, /** * Called by mouse click event * * @param {object} mouseEvent contains the mouse click coordinates */ onInputDown: function (mouseEvent) { const x = mouseEvent.offsetX; const y = mouseEvent.offsetY; if (gameMode == 'A') { self.floor.blocks.forEach(cur => { if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur); }); } else { self.stck.blocks.forEach(cur => { if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur); }); } navigationIcons.onInputDown(x, y); game.render.all(); }, /** * Called by mouse move event * * @param {object} mouseEvent contains the mouse move coordinates */ onInputOver: function (mouseEvent) { const x = mouseEvent.offsetX; const y = mouseEvent.offsetY; let flagA = false; let flagB = false; if (gameMode == 'A') { // Make arrow follow mouse if (!self.hasClicked && !self.animateEnding) { if (game.math.distanceToPointer(self.arrow.x, x, self.arrow.y, y) > 8) { self.arrow.x = (x < 250) ? 250 : x; // Limits the arrow left position to 250 } } self.floor.blocks.forEach(cur => { if (game.math.isOverIcon(x, y, cur)) { flagA = true; self.overSquare(cur); } }); if (!flagA) self.outSquare('A'); } if (gameMode == 'B') { self.stck.blocks.forEach(cur => { if (game.math.isOverIcon(x, y, cur)) { flagB = true; self.overSquare(cur); } }); if (!flagB) self.outSquare('B'); } navigationIcons.onInputOver(x, y); game.render.all(); }, /** * Saves players data after level ends - to be sent to database
* * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server) * * @see /php/save.php */ postScore: function () { // Creates string that is going to be sent to db const data = '&line_game=' + gameShape + '&line_mode=' + gameMode + '&line_oper=' + gameOperation + '&line_leve=' + gameDifficulty + '&line_posi=' + mapPosition + '&line_resu=' + self.result + '&line_time=' + game.timer.elapsed + '&line_deta=' + 'numBlocks:' + self.stck.blocks.length + ', valBlocks: ' + self.divisorsList // Ends in ',' + ' blockIndex: ' + self.stck.index + ', floorIndex: ' + self.floor.index; // FOR MOODLE sendToDB(data); } };