diff --git a/index.html b/index.html index 4d85bed..1ea9683 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@ + @@ -60,6 +61,7 @@ + diff --git a/sketch.js b/sketch.js index 4bd61b6..8171601 100644 --- a/sketch.js +++ b/sketch.js @@ -22,6 +22,7 @@ let fullHealth, twoHealth, oneHealth, deadHealth; let mainMenu; let pauseMenu; let settingsMenu; +let winMenu; let CreepyPiano1, CreepyPiano2; let mainMenuSound; let trapDoorImage; @@ -152,6 +153,9 @@ function setup() { //Makes a new settings menu settingsMenu = new SettingsMenu(); + //Makes a new win menu + winMenu = new WinMenu(); + } function draw() { @@ -185,6 +189,9 @@ function draw() { else if (GAMESTATE == "PAUSE") { pauseFunctionality(); } + else if (GAMESTATE == "WON") { + winFunctionality(); + } /* TODO - FOR THE SETTINGS TRIGGER /*else if (GAMESTATE == 'SETTINGS') { diff --git a/src/css/WinMenu.css b/src/css/WinMenu.css new file mode 100644 index 0000000..7b7991d --- /dev/null +++ b/src/css/WinMenu.css @@ -0,0 +1,80 @@ +/** + CSS Styling for the pause screen + +*/ + + +/* + Lays out the grid implementation that will be overlaid to center the buttons + 3x4 grid with fractional units for scalability + The 3 allows for a center +*/ +.layoutGrid { + display: grid; + grid-template: + ". . . . ." 1fr + ". . . . ." 1fr + ". . Exit . ." 1fr + ". . . . ." 1fr + /1fr 1fr 1fr 1fr 1fr; +} + +.Exit{ + grid-area: Exit; + justify-content: center; + padding-top: 150px; + +} + +.EscapedMenuButtons{ + background-color: transparent; + display: grid; + color: white; + border: none; + font-size: 25px; + font-family: 'Courier New', Courier, monospace; +} + + +.EscapedHeading { + color: white; +} + +.EscapedMenuButtons:hover{ + color: rgb(252, 252, 86); +} + + +@keyframes EscapedGlitch { + 0% { + opacity: 1; + } + 20% { + opacity: 0.8; + } + 40% { + opacity: 0.9; + } + 60% { + text-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow; + } + 80% { + background-color: transparent; + color: rgb(255, 255, 157); + text-shadow: 0 0 10px rgb(255, 255, 117), 0 0 20px rgb(255, 255, 246), 0 0 30px rgb(255, 255, 0); + opacity: 0.75; + } + 100% { + opacity: 1; + } + } + +.EscapedH1 { + font-size: 7em; + color: rgb(255, 255, 0); + background-color: transparent; + border:none; + animation: EscapedGlitch 4s infinite; + text-shadow: 0 0 5px yellow; /* Add a yellow glow effect */ + transition: all 0.1s ease-in-out; /* Smoother transition for the glitch effect */ + } diff --git a/src/js/Screens.js b/src/js/Screens.js index c7d6134..dd176fd 100644 --- a/src/js/Screens.js +++ b/src/js/Screens.js @@ -434,3 +434,65 @@ class BlinkViewer { return CURRENTGAMESTATE; } } + +class WinMenu { + /** + * Default constructor, makes a background and exit buttons + */ + constructor() { + this.exitButton = createButton('> Exit'); + this.title = createButton('YOU ESCAPED'); + + //Backdrop to the menu + this.menu = new Sprite(1920/2,1080/2,1920,1080); + this.menu.layer = MAIN_MENU_LAYER; + this.menu.opacity = 0.4; + this.menu.color = 'black'; + this.menu.collider = 'none'; + + this.title.class("EscapedH1"); + this.title.position(600,50); + this.title.hide(); + + // Setup exit Button + this.exitButton.class("EscapedMenuButtons"); + this.exitButton.attribute("name", "exit"); + + this.exitButton.position(675,250) + this.exitButton.hide(); //Hides the button until win menu is triggered + + } + + /** + * Shows the menu and buttons + * + * @param {*} CURRENTGAMESTATE + */ + showMenu() { + this.menu.visible = true; + this.exitButton.show(); + this.title.show(); + + } + + /** + * Hides the menu + * + */ + hideMenu() { + this.exitButton.hide(); + this.title.hide(); + this.menu.visible = false; + } + + + /** + * Called when exit is clicked + * Takes you to the main menu + */ + exitGame(CURRENTGAMESTATE) { + this.hideMenu(); + CURRENTGAMESTATE = "MENU"; + return CURRENTGAMESTATE; + } +} \ No newline at end of file diff --git a/src/js/playing.js b/src/js/playing.js index 48e73a9..fcc6d6d 100644 --- a/src/js/playing.js +++ b/src/js/playing.js @@ -44,6 +44,7 @@ function playingFunctionality(){ }}); } if(BOSSISALIVE) giantEyeBossfight(); + else GAMESTATE = "WON"; } if(player.health <= 0) { diff --git a/src/js/win.js b/src/js/win.js new file mode 100644 index 0000000..705a58e --- /dev/null +++ b/src/js/win.js @@ -0,0 +1,13 @@ +function winFunctionality() { + player.velocity.y = 0; + player.velocity.x = 0; + player.changeAni("idle_" + playerMovement.lastDirection); + movementSounds(player,footsteps); + + winMenu.showMenu(); + + winMenu.exitButton.mousePressed(() => { + GAMESTATE = winMenu.exitGame(GAMESTATE); + + }); +} \ No newline at end of file