diff --git a/src/game.js b/src/game.js index ab6844a..d4c5a7b 100644 --- a/src/game.js +++ b/src/game.js @@ -1,3 +1,9 @@ +const Screens = { + Exit: -1, + Menu: 0, + Game: 1, +} + class Game { constructor(canvas) { @@ -5,13 +11,13 @@ class Game { this.canvas = canvas; // Create menu - let menu = new Menu(canvas); + this.menu = new Menu(canvas); // Create game scene let box = new Box(); this.scene = new Scene(document.getElementById('canvas'), box); - this.changeScreen(menu); + this.changeScreen(this.menu); } changeScreen(screen) { @@ -28,13 +34,15 @@ class Game { this.mainScreen.update(time); if (this.mainScreen.status === Status.Finished) { - if (this.mainScreen.after === AfterMenu.Start) { + if (this.mainScreen.after === Screens.Game) { this.scene.initialize(); this.changeScreen(this.scene); - } else if (this.mainScreen.after === AfterMenu.Exit) { + } else if (this.mainScreen.after === Screens.Exit) { if (navigator.app !== undefined && typeof navigator.app.exitApp === 'function') { navigator.app.exitApp(); } + } else if (this.mainScreen.after === Screens.Menu) { + this.changeScreen(this.menu); } } } diff --git a/src/menu.js b/src/menu.js index d76d03d..8d001ef 100644 --- a/src/menu.js +++ b/src/menu.js @@ -1,10 +1,9 @@ -const AfterMenu = { - Exit: 0, - Start: 1, -}; - function resetHighScoreText() { - return "Reset high score (" + heightToScore(window.localStorage.getItem("maxHeight")) + ")"; + return "High score: " + heightToScore(window.localStorage.getItem("maxHeight")); +} + +function collectableText() { + return "Coins: " + window.localStorage.getItem("collectableNumber"); } class Menu extends Gui { @@ -17,18 +16,17 @@ class Menu extends Gui { this.addButton(new GuiButton(this.context, "Escalator", 0.5, 0.25, Type.StrokeFill)); this.context.font = "30px Dimbo"; - this.addButton(new GuiButton(this.context, "New Game", 0.5, 0.55, Type.StrokeFill, () => { + this.addButton(new GuiButton(this.context, "New Game", 0.5, 0.5, Type.StrokeFill, () => { this.status = Status.Finished; - this.after = AfterMenu.Start; + this.after = Screens.Game; })); - this.addButton(new GuiButton(this.context, resetHighScoreText, 0.5, 0.7, Type.StrokeFill, () => { - window.localStorage.setItem("maxHeight", 0) - })); + this.addButton(new GuiButton(this.context, resetHighScoreText, 0.5, 0.6, Type.StrokeFill)); + this.addButton(new GuiButton(this.context, collectableText, 0.5, 0.7, Type.StrokeFill)); - this.addButton(new GuiButton(this.context, "Exit", 0.5, 0.85, Type.StrokeFill, () => { + this.addButton(new GuiButton(this.context, "Exit", 0.5, 0.8, Type.StrokeFill, () => { this.status = Status.Finished; - this.after = AfterMenu.Exit; + this.after = Screens.Exit; })); } diff --git a/src/scene.js b/src/scene.js index 4485028..8be53a7 100644 --- a/src/scene.js +++ b/src/scene.js @@ -5,11 +5,11 @@ class Scene extends Screen { this.player = player; this.currentHeight = 0; - if (this.maxHeight === undefined) { + if (this.maxHeight == undefined) { this.maxHeight = 0; } - if (this.collectableNumber === undefined) { + if (this.collectableNumber == undefined) { this.collectableNumber = 0; } @@ -179,10 +179,10 @@ class Scene extends Screen { // Ugly but don't care // Copied and adapted from sdz - if( (collectable.x >= next.x + next.size / 2) - || (collectable.x + collectable.size <= next.x) - || (collectable.y >= next.y + next.size) - || (collectable.y + collectable.size <= next.y)) { + if( (collectable.x - collectable.size / 2 >= next.x + next.size / 4) + || (collectable.x + collectable.size / 2 <= next.x - next.size / 4) + || (collectable.y - collectable.size / 2 >= next.y + next.size / 4) + || (collectable.y + collectable.size / 2 <= next.y - next.size / 4)) { } else { collectable.collected = true; @@ -241,7 +241,7 @@ class Scene extends Screen { Collectable.texture, 0, 0, 64, 64, (object.x - object.size / 2) * this.width(), - (1 - object.y - object.size / 2) * this.height(), + (1 - object.y) * this.height() - size / 2, size, size ); } @@ -371,20 +371,61 @@ class Scene extends Screen { let text = this.newRecord ? "New Record!" : "Game Over"; this.context.fillStyle = 'rgb(255, 255, 255)'; this.context.font = "50px Dimbo"; - this.centerFillText(text, this.height() / 4); - this.centerStrokeText(text, this.height() / 4); + this.centerFillText(text, this.height() / 6); + this.centerStrokeText(text, this.height() / 6); let size = 40; this.context.font = size + "px Dimbo"; let currentScoreText = "Your score: " + heightToScore(this.currentHeight); - this.centerFillText(currentScoreText, this.height() / 2); - this.centerStrokeText(currentScoreText, this.height() / 2); + this.centerFillText(currentScoreText, this.height() / 3); + this.centerStrokeText(currentScoreText, this.height() / 3); let highScoreText = "Highest score: " + heightToScore(this.maxHeight); - this.centerFillText(highScoreText, this.height() / 2 + 2 * size); - this.centerStrokeText(highScoreText, this.height() / 2 + 2 * size); + this.centerFillText(highScoreText, this.height() / 3 + 1.5 * size); + this.centerStrokeText(highScoreText, this.height() / 3 + 1.5 * size); + let retryBox = this.makeRetryBox(); + this.context.fillText("Retry", retryBox.x, retryBox.y + 40); + this.context.strokeText("Retry", retryBox.x, retryBox.y + 40); + + let exitBox = this.makeExitBox(); + this.context.fillText("Exit", exitBox.x, exitBox.y + 40); + this.context.strokeText("Exit", exitBox.x, exitBox.y + 40); + + } + + makeExitBox() { + let fontSize = 40; + let text = "Exit"; + this.context.font = fontSize + "px Dimbo"; + this.context.fillStyle = "rgb(255, 255, 255)"; + this.context.strokeStyle = "rgb(0, 0, 0)"; + let width = this.context.measureText(text).width; + + return { + x: 2 * this.width() / 3 - width / 2, + y: 3 * this.height() / 4, + width: width, + height: fontSize, + } + } + + makeRetryBox() { + + let fontSize = 40; + let text = "Retry"; + this.context.font = fontSize + "px Dimbo"; + this.context.fillStyle = "rgb(255, 255, 255)"; + this.context.strokeStyle = "rgb(0, 0, 0)"; + let width = this.context.measureText(text).width; + + return { + x: this.width() / 3 - width / 2, + y: 3 * this.height() / 4, + width: width, + height: fontSize, + } } makePauseBox() { @@ -427,8 +468,17 @@ class Scene extends Screen { this.player.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight); } } else if (this.status === Status.GameOver) { - this.initialize(); - this.status = Status.Running; + let p = position(e); + + if (isInBox(p, enlargeBox(this.makeRetryBox()))) { + // Retry game + this.initialize(); + this.status = Status.Running; + } else if (isInBox(p, enlargeBox(this.makeExitBox()))) { + // Go back to menu + this.status = Status.Finished; + this.after = Screens.Menu; + } } }