Merge pull request #1789 from shuvadeepmondal/shrekvswild

Shrekvswild Game Extension Added
Sulagna-Dutta-Roy · Jun 20, 2024 · 549586b · 549586b
2 parents f964c10 + 51995d6
commit 549586b
Show file tree

Hide file tree

Showing 35 changed files with 2,120 additions and 0 deletions.
diff --git a/ShrekVsWild Game/docs/assets/images/Boss_Sprite.png b/ShrekVsWild Game/docs/assets/images/Boss_Sprite.png
diff --git a/...sWild Game/docs/assets/images/Game Boy Advance - Shrek Reekin Havoc - Shrek.png b/...sWild Game/docs/assets/images/Game Boy Advance - Shrek Reekin Havoc - Shrek.png
diff --git a/ShrekVsWild Game/docs/assets/images/GameBackground.png b/ShrekVsWild Game/docs/assets/images/GameBackground.png
diff --git a/ShrekVsWild Game/docs/assets/images/Homebackground.png b/ShrekVsWild Game/docs/assets/images/Homebackground.png
diff --git a/ShrekVsWild Game/docs/assets/images/NUN_SPRITES.png b/ShrekVsWild Game/docs/assets/images/NUN_SPRITES.png
diff --git a/ShrekVsWild Game/docs/assets/images/SimonSpriteSheet.png b/ShrekVsWild Game/docs/assets/images/SimonSpriteSheet.png
diff --git a/ShrekVsWild Game/docs/assets/images/ZOMBIE_SPRITE.png b/ShrekVsWild Game/docs/assets/images/ZOMBIE_SPRITE.png
diff --git a/ShrekVsWild Game/docs/assets/images/Zombie.png b/ShrekVsWild Game/docs/assets/images/Zombie.png
diff --git a/ShrekVsWild Game/docs/assets/images/bossImage.png b/ShrekVsWild Game/docs/assets/images/bossImage.png
diff --git a/ShrekVsWild Game/docs/assets/images/boss_bullets.png b/ShrekVsWild Game/docs/assets/images/boss_bullets.png
diff --git a/ShrekVsWild Game/docs/assets/images/boss_bullets_vertical.png b/ShrekVsWild Game/docs/assets/images/boss_bullets_vertical.png
diff --git a/ShrekVsWild Game/docs/assets/images/bullet.png b/ShrekVsWild Game/docs/assets/images/bullet.png
diff --git a/ShrekVsWild Game/docs/assets/images/canvas-img.png b/ShrekVsWild Game/docs/assets/images/canvas-img.png
diff --git a/ShrekVsWild Game/docs/assets/images/chieficon.png b/ShrekVsWild Game/docs/assets/images/chieficon.png
diff --git a/...VsWild Game/docs/assets/images/d2jt4f5-62c435b7-5e49-4306-86f5-409b08d681da.png b/...VsWild Game/docs/assets/images/d2jt4f5-62c435b7-5e49-4306-86f5-409b08d681da.png
diff --git a/ShrekVsWild Game/docs/assets/images/health_bar.png b/ShrekVsWild Game/docs/assets/images/health_bar.png
diff --git a/ShrekVsWild Game/docs/assets/images/main_char_sprite.png b/ShrekVsWild Game/docs/assets/images/main_char_sprite.png
diff --git a/ShrekVsWild Game/docs/assets/images/nun_orig-black-NESW.png b/ShrekVsWild Game/docs/assets/images/nun_orig-black-NESW.png
diff --git a/ShrekVsWild Game/docs/assets/images/nun_sprite.png b/ShrekVsWild Game/docs/assets/images/nun_sprite.png
diff --git a/ShrekVsWild Game/docs/assets/images/pickle_rick_bullet.png b/ShrekVsWild Game/docs/assets/images/pickle_rick_bullet.png
diff --git a/ShrekVsWild Game/docs/assets/images/unicorn.png b/ShrekVsWild Game/docs/assets/images/unicorn.png
diff --git a/ShrekVsWild Game/docs/assets/images/zombies_sprite.png b/ShrekVsWild Game/docs/assets/images/zombies_sprite.png
diff --git a/ShrekVsWild Game/docs/assets/sounds/background-song.mp3 b/ShrekVsWild Game/docs/assets/sounds/background-song.mp3
diff --git a/ShrekVsWild Game/docs/assets/sounds/boss-song.mp3 b/ShrekVsWild Game/docs/assets/sounds/boss-song.mp3
diff --git a/ShrekVsWild Game/highscore.html b/ShrekVsWild Game/highscore.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Title Name -->
+    <title></title>
+    <!-- link to highscore CSS file -->
+    <link rel="stylesheet" href="styles/highscorestyles.css">
+    <!-- Font Families link -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&family=VT323&display=swap" rel="stylesheet">
+    <!-- Browser Icon -->
+    <link rel="icon" href="docs/assets/images/chieficon.png" type="image/x-icon">
+</head>
+<body id="page-wide">
+
+    <div>
+        <img src="docs/assets/images/Homebackground.png" id="scrolling-background-image" alt="neon-lines background image">
+    </div>
+
+    <div>
+
+        <div>
+            <h1 id="title">Shrek Vs Wild</h1>
+        </div>
+
+
+        <div class="middle-body">
+
+
+            <div id="home-page-button-div">
+                <button type="button" id="home-page-button">Home Page</button>
+           </div>
+
+            <div>
+            <table>
+                <tr>
+                    <thead>
+                        <th>Rankings</th>
+                        <th>Name</th>
+                        <th>Score</th>
+
+                    </thead>
+                </tr>
+                <tr id="champion">
+                    <td>Champion</td>
+                    <td id="first-place-name"></td>
+                    <td id="first-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Second Place</td>
+                    <td id="second-place-name"></td>
+                    <td id="second-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Third Place</td>
+                    <td id="third-place-name"></td>
+                    <td id="third-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Fourth Place</td>
+                    <td id="fourth-place-name"></td>
+                    <td id="fourth-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Fifth Place</td>
+                    <td id="fifth-place-name"></td>
+                    <td id="fifth-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Sixth Place</td>
+                    <td id="sixth-place-name"></td>
+                    <td id="sixth-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Seventh Place</td>
+                    <td id="seventh-place-name"></td>
+                    <td id="seventh-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Eigth Place</td>
+                    <td id="eigth-place-name"></td>
+                    <td id="eigth-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Ninth Place</td>
+                    <td id="nineth-place-name"></td>
+                    <td id="nineth-place-score"></td>
+                </tr>
+                <tr>
+                    <td>Tenth Place</td>
+                    <td id="tenth-place-name"></td>
+                    <td id="tenth-place-score"></td>
+                </tr>
+            </table>
+            </div>
+
+
+        </div>
+
+
+    </div>
+
+
+
+
+
+
+
+    <script src="scripts/highscore.js"></script>   
+    <script src="scripts/bindings.js"></script>   
+    <script src="scripts/components.js"></script>
+    <script src="scripts/shooting.js"></script>
+    <script src="scripts/game.js"></script>    
+    <script src="scripts/main.js"></script> 
+
+    <script> 
+
+    let highScores = JSON.parse(localStorage.getItem('playerScore'));
+    highScores.sort(( {score: a }, {score: b}) => a - b)
+    highScores.reverse();
+
+    //Highscores names
+    if(highScores[0]) document.getElementById("first-place-name").innerHTML = highScores[0].name
+    if(highScores[1]) document.getElementById("second-place-name").innerHTML = highScores[1].name
+    if(highScores[2]) document.getElementById("third-place-name").innerHTML = highScores[2].name
+    if(highScores[3]) document.getElementById("fourth-place-name").innerHTML = highScores[3].name
+    if(highScores[4]) document.getElementById("fifth-place-name").innerHTML = highScores[4].name
+    if(highScores[5]) document.getElementById("sixth-place-name").innerHTML = highScores[5].name
+    if(highScores[6]) document.getElementById("seventh-place-name").innerHTML = highScores[6].name
+    if(highScores[7]) document.getElementById("eigth-place-name").innerHTML = highScores[7].name
+    if(highScores[8]) document.getElementById("nineth-place-name").innerHTML = highScores[8].name
+    if(highScores[9]) document.getElementById("tenth-place-name").innerHTML = highScores[9].name 
+
+    //Highscores scores
+    if(highScores[0]) document.getElementById("first-place-score").innerHTML = highScores[0].score
+    if(highScores[1]) document.getElementById("second-place-score").innerHTML = highScores[1].score
+    if(highScores[2]) document.getElementById("third-place-score").innerHTML = highScores[2].score
+    if(highScores[3]) document.getElementById("fourth-place-score").innerHTML = highScores[3].score
+    if(highScores[4]) document.getElementById("fifth-place-score").innerHTML = highScores[4].score
+    if(highScores[5]) document.getElementById("sixth-place-score").innerHTML = highScores[5].score
+    if(highScores[6]) document.getElementById("seventh-place-score").innerHTML = highScores[6].score
+    if(highScores[7]) document.getElementById("eigth-place-score").innerHTML = highScores[7].score
+    if(highScores[8]) document.getElementById("nineth-place-score").innerHTML = highScores[8].score
+    if(highScores[9]) document.getElementById("tenth-place-score").innerHTML = highScores[9].score
+    </script>
+</body>
+</html>
diff --git a/ShrekVsWild Game/index.html b/ShrekVsWild Game/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Title Name -->
+    <title>Shrek VS Wild -- PC Shooter Game</title>
+    <!-- link to main css file -->
+    <link rel="stylesheet" href="styles/styles.css">
+    <!-- Font Families link -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&family=VT323&display=swap" rel="stylesheet">
+    <!-- Browser Icon -->
+    <link rel="icon" href="docs/assets/images/chieficon.png" type="image/x-icon">
+</head>
+<body>
+    <div id="page-wide-div">
+
+    <div>
+        <img src="docs/assets/images/Homebackground.png" id="scrolling-background-image" alt="neon-lines background image">
+    </div>
+
+
+    <section>
+
+        <div id="title-div">
+            <h1 id="title">Shrek Vs<span>Wild</span></h1>
+        </div>
+
+    </section>
+
+
+    <section id= "middle-section"> <!-- for the middle of the page -->
+
+        <div id="game-controls-info" class="hide-on-click"> <!-- How to play the game -  move and shoot-->
+            <div>
+                <h3>Controls</h3>
+                <ol>
+                    <li>Arrow Up - Move Up</li>
+                    <li>Arrow Down - Move Down</li>
+                    <li>Arrow Left - Move Left</li>
+                    <li>Arrow Right - Move Right</li>
+                    <li>Shoot - spacebar</li>
+                </ol>
+            </div>  
+         </div>   
+
+         <canvas id="canvas" width="1000px" height="500px" style="border: 5px solid white"></canvas>
+
+
+        <div class="end-screen">
+            <h2 id="end-game-condition">PLACEHOLDER</h2>
+
+            <div class="end-score-div">
+                <p>Score</p>
+                <p id="end-score">300</p>
+            </div>
+            <div class="end-buttons-div">
+                <button id="restart-button" class="end-buttons">Restart</button>
+                <button class="end-buttons"><a href="index.html">Home Page</a></button>
+            </div>
+         </div>
+
+        <div class="middlepart-middle-section"> <!-- div for the menu -->
+            <ul class="list">
+                <li><button type="button" class="hide-on-click" id="start-game-button">Start Game</button></li>
+                <audio src="docs/assets/sounds/background-song.mp3" id="myAudio"></audio>
+
+                <li><button type="button" class="hide-on-click" id="highscore-button">Highscore</button></li>
+                <li><button type="button" class="hide-on-click" id="credits-button">Credits</button></li>
+                <li><button type="button" class="hide-on-click" id="exit-button"><a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" target="_blank">Exit</a></button></li>
+            </ul>
+
+        </div>
+
+        <div class="form-popup hidden" id="myForm">
+            <form action='' id="form" class="form-container" required>
+                <h2 id="form-title">Hello,boss</h2>
+
+                <label for="text" id="player-label"><b>Gamer Name</b></label>
+                <input type="text" placeholder="Enter your nickname" id="player-name" name="text" required autocomplete="off">
+
+                <h4>Select your Mode</h4>
+                <div>
+                    <input type="radio" id="easy-mode" name="mode" value="easy peasy lemon squeezy">
+                    <label for="mode" id="easy-mode-label">Easy peasy</label>
+
+                </div>
+                <div>
+                    <input type="radio" id="average-mode" name="mode" value="head scratcher">
+                    <label for="mode" id="mid-mode-label">Head Scratcher</label>
+                </div>
+                <div>
+                    <input type="radio" id="hard-mode" name="mode" value="chaos and madness">
+                    <label for="mode" id="hard-mode-label">Chaos&Madness</label>
+
+                </div>
+                <div id="begin-game-button-div">
+                    <button type="button" id="begin-game">Let's Start!</button>
+                </div>
+            </form>
+         </div>
+
+
+        <div id="bonus-story-line-div"> 
+            <button type="button" class="hide-on-click " id="bonus-story-line-style-button">
+                <a href="https://youtu.be/hnql4vU28Ns?si=ia7d3RlsAt7ad6I_" target="_blank">
+                    <span>Bonus </span><span>Story </span><span>Line</span>
+                </a>
+            </button>
+        </div>
+
+    </section>
+
+    </div>
+
+
+
+
+    <script src="scripts/highscore.js"></script> 
+    <script src="scripts/bindings.js"></script>   
+    <script src="scripts/components.js"></script>
+    <script src="scripts/shooting.js"></script>
+    <script src="scripts/game.js"></script>    
+    <script src="scripts/main.js"></script>  
+</body>
+</html>
diff --git a/ShrekVsWild Game/manifest.json b/ShrekVsWild Game/manifest.json
@@ -0,0 +1,23 @@
+{
+    "manifest_version": 3,
+    "name": "ShrekVsWild",
+    "version": "1.0",
+    "description": "Shreck fights with the Monsters & Zombies",
+    "permissions": [
+        "storage"
+    ],
+    "optional-permissions" : ["tabs"],
+    "action": {
+        "default_popup": "index.html"
+    },
+    "web_accessible_resources": [
+        {
+            "resources": [
+                "index.html"
+            ],
+            "matches": [
+                "<all_urls>"
+            ]
+        }
+    ]
+}