/****************************** * This file holds game states. ******************************/ /** [MAP STATE] Screen that shows the 4 generated levels in a map (and the level where the player is currently in). * * @namespace */ const mapState = { /** * Main code */ create: function () { const x0 = 306; const y0 = 161; this.waitUserAction = false; this.scene = { rocks: { x: [x0 + 172, x0 + 604, x0 + 353], y: [y0 + 319, y0 + 88, y0 + 667, ,], }, bushes: { x: [x0 + 344, x0 + 822, x0 + 1006, x0 + 613], y: [y0 + 224, y0 + 43, y0 + 310, y0 + 464], }, trees: { x: [ x0 + 26, x0 + 776, x0 + 401, x0 + 1006, x0 + 204, x0 + 1065, x0 + 435, x0 + 728, ], y: [ y0 + 174, y0 + 250, y0 - 67, y0 + 417, y0 + 16, y0 + 116, y0 + 435, y0 + 511, ], type: [2, 2, 3, 4, 4, 4, 4, 1], }, roadPoints: { x: [x0 + 78, x0 + 251, x0 + 424, x0 + 598, x0 + 770, x0 + 943], y: [y0 + 629, y0 + 536, y0 + 443, y0 + 347, y0 + 252, y0 + 159], }, }; renderBackground('plain'); // Map game.add.image(x0, y0, 'bg_map', 1.5); // Buildings gameList[gameId].assets.map.startBuilding(); gameList[gameId].assets.map.endBuilding(); // Rocks for (let i in this.scene.rocks.x) { game.add.image( this.scene.rocks.x[i], this.scene.rocks.y[i], 'rock', 0.48 ); } // Bushes for (let i in this.scene.bushes.x) { game.add.image( this.scene.bushes.x[i], this.scene.bushes.y[i], 'bush', 0.59 ); } // Trees for (let i in this.scene.trees.x) { game.add.image( this.scene.trees.x[i], this.scene.trees.y[i], 'tree_' + this.scene.trees.type[i], 0.9 ); } //Road points for (let i = 1; i < this.scene.roadPoints.x.length - 1; i++) { const frame = i < curMapPosition || (canGoToNextMapPosition && i == curMapPosition) ? 1 : 0; // Road points (game levels) game.add.sprite( this.scene.roadPoints.x[i], this.scene.roadPoints.y[i], 'map_place', frame, 0.45 ); // Road signs game.add.image( this.scene.roadPoints.x[i] - 40, this.scene.roadPoints.y[i] - 154, 'sign', 0.7 ); game.add.text( this.scene.roadPoints.x[i], this.scene.roadPoints.y[i] - 104, i, { ...textStyles.h2_, fill: colors.white, } ); } // Character this.character = gameList[gameId].assets.map.character(gameOperation); // Character animation this.character.animation = gameList[gameId].assets.map.characterAnimation(gameOperation); game.animation.play(this.character.animation[0]); this.moveCounter = 0; const speed = 60; const xA = this.scene.roadPoints.x[curMapPosition]; const yA = this.scene.roadPoints.y[curMapPosition]; const xB = this.scene.roadPoints.x[curMapPosition + 1]; const yB = this.scene.roadPoints.y[curMapPosition + 1]; self.speedX = (xB - xA) / speed; self.speedY = (yA - yB) / speed; self.renderProgressBar(); // feedback this.modalBg = game.add.geom.rect( 0, 0, context.canvas.width, context.canvas.height, colors.black, 0 ); this.continueButton = game.add.geom.rect( context.canvas.width / 2, context.canvas.height / 2, 300, 100, colors.green, 0 ); this.continueButton.anchor(0.5, 0.5); // continue // try again? this.continueText = game.add.text( context.canvas.width / 2, context.canvas.height / 2 + 16, game.lang.continue, textStyles.btn ); this.continueText.alpha = 0; // FOR MOODLE if (moodle) { } else { navigation.add.left(['back', 'menu'], 'customMenu'); } game.event.add('click', this.onInputDown); game.event.add('mousemove', this.onInputOver); }, /** * Game loop */ update: function () { self.moveCounter++; if (isDebugMode && debugState.end.skip) { curMapPosition = 4; } if (isDebugMode && debugState.map.skip) { // programmatically skip map curMapPosition++; self.loadGame(); } if (self.moveCounter > 60) { // Wait 1 second before moving or staring a game if (canGoToNextMapPosition) { // Move character on screen for 1 second self.character.x += self.speedX; self.character.y -= self.speedY; if ( Math.ceil(self.character.x) >= self.scene.roadPoints.x[curMapPosition + 1] ) { // Reached next map position canGoToNextMapPosition = false; curMapPosition++; // Set new next position } } if (!canGoToNextMapPosition) { self.waitUserAction = true; self.modalBg.alpha = 0.25; self.continueText.alpha = 1; self.continueButton.alpha = 1; //endUpdate = true; } } game.render.all(); }, /** * Calls game state */ loadGame: function () { if (curMapPosition <= 4) game.state.start('' + gameName); else game.state.start('end'); }, /** * Called by mouse click event * * @param {object} mouseEvent contains the mouse click coordinates */ onInputDown: function (mouseEvent) { const x = game.math.getMouse(mouseEvent).x; const y = game.math.getMouse(mouseEvent).y; if (game.math.isOverIcon(x, y, self.continueButton)) { if (audioStatus) game.audio.popSound.play(); self.loadGame(); } navigation.onInputDown(x, y); }, /** * Called by mouse move event * * @param {object} mouseEvent contains the mouse move coordinates */ onInputOver: function (mouseEvent) { const x = game.math.getMouse(mouseEvent).x; const y = game.math.getMouse(mouseEvent).y; let overIcon; if (game.math.isOverIcon(x, y, self.continueButton)) { overIcon = true; } // Update gui if (overIcon) { // If pointer is over icon document.body.style.cursor = 'pointer'; self.continueButton.scale = self.continueButton.initialScale * 1.1; self.continueText.style = textStyles.btnLg; } else { // If pointer is not over icon self.continueButton.scale = self.continueButton.initialScale * 1; self.continueText.style = textStyles.btn; document.body.style.cursor = 'auto'; } navigation.onInputOver(x, y); }, renderProgressBar: function () { const percentText = completedLevels * 25; const x0 = 300; const y0 = 20; // Bar content for (let i = 0; i < completedLevels; i++) { game.add.image( context.canvas.width - x0 + 37.5 * i, y0, 'progress_bar_tile' ); } // Bar wrapper game.add.geom.rect( context.canvas.width - x0 + 1, y0 + 1, 150, //149, 35, //34, 'transparent', 1, colors.blue, 3 ); // percentage label game.add.text( context.canvas.width - x0 + 160, y0 + 33, percentText + '%', textStyles.h2_ ).align = 'left'; // Difficulty label game.add.text( context.canvas.width - x0 - 10, y0 + 33, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_ ).align = 'right'; }, };