From e8b7824f8f34765346af40920a0f84d45d21801c Mon Sep 17 00:00:00 2001 From: Carson Smith Date: Sat, 4 May 2024 15:23:05 -0400 Subject: [PATCH 1/2] added win screen --- index.html | 2 ++ sketch.js | 7 ++++ src/css/WinMenu.css | 80 +++++++++++++++++++++++++++++++++++++++++++++ src/js/Screens.js | 61 ++++++++++++++++++++++++++++++++++ src/js/playing.js | 1 + src/js/win.js | 13 ++++++++ 6 files changed, 164 insertions(+) create mode 100644 src/css/WinMenu.css create mode 100644 src/js/win.js 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 1daa83b..d7cb0a1 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; @@ -158,6 +159,9 @@ function setup() { //Makes a new settings menu settingsMenu = new SettingsMenu(); + //Makes a new win menu + winMenu = new WinMenu(); + } function draw() { @@ -193,6 +197,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 0670fb6..6a9c7a8 100644 --- a/src/js/Screens.js +++ b/src/js/Screens.js @@ -430,3 +430,64 @@ class BlinkViewer { return CURRENTGAMESTATE; } } + +class WinMenu { + /** + * Default constructor, makes a background, resume 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 pause 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"; + } +} \ No newline at end of file diff --git a/src/js/playing.js b/src/js/playing.js index a67af41..28725aa 100644 --- a/src/js/playing.js +++ b/src/js/playing.js @@ -41,6 +41,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 From 87c332914e98b1579c328b08983e13e0c1b1dafc Mon Sep 17 00:00:00 2001 From: Carson Smith Date: Sat, 4 May 2024 15:26:41 -0400 Subject: [PATCH 2/2] win screen exits to main menu --- src/js/Screens.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/js/Screens.js b/src/js/Screens.js index 6a9c7a8..7a0d38b 100644 --- a/src/js/Screens.js +++ b/src/js/Screens.js @@ -433,7 +433,7 @@ class BlinkViewer { class WinMenu { /** - * Default constructor, makes a background, resume and exit buttons + * Default constructor, makes a background and exit buttons */ constructor() { this.exitButton = createButton('> Exit'); @@ -455,7 +455,7 @@ class WinMenu { this.exitButton.attribute("name", "exit"); this.exitButton.position(675,250) - this.exitButton.hide(); //Hides the button until pause menu is triggered + this.exitButton.hide(); //Hides the button until win menu is triggered } @@ -489,5 +489,6 @@ class WinMenu { exitGame(CURRENTGAMESTATE) { this.hideMenu(); CURRENTGAMESTATE = "MENU"; + return CURRENTGAMESTATE; } } \ No newline at end of file