Merge pull request #472 from souvikpramanikgit/among-web

Add among us game
iamrahulmahato · Oct 6, 2024 · fdb83cd · fdb83cd
2 parents 88709c2 + 2e1fa7d
commit fdb83cd
Show file tree

Hide file tree

Showing 16 changed files with 288 additions and 1 deletion.
diff --git a/assets/image/amongus.png b/assets/image/amongus.png
diff --git a/index.html b/index.html
@@ -530,7 +530,18 @@ <h3 class="card-heading">Flappy Bird</h3>
                     </p>
                 </div>
             </a>
-                  <a href="./projects/Doodle Jump/index.html" class="card">
+            <a href="./projects/Among Us/index.html" class="card">
+                <div class="card-cover counter-cover-colour">
+                    <img src="assets/image/amongus.png" alt="Among Us">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Among Us</h3>
+                    <p class="card-description">
+                        Find who is imposter.
+                    </p>
+                </div>
+              </a>
+              <a href="./projects/Doodle Jump/index.html" class="card">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/doodle.png" alt="Doodle Jump">
                 </div>
@@ -539,6 +550,7 @@ <h3 class="card-heading">Doodle Jump</h3>
                     <p class="card-description">
                         Enjoy and Jump.
                      </p>
+                </div>
             </a>
         </div>
     </section>

diff --git a/projects/Among Us/audio/Killing_Sound.mp3 b/projects/Among Us/audio/Killing_Sound.mp3
diff --git a/projects/Among Us/audio/Sound.mp3 b/projects/Among Us/audio/Sound.mp3
diff --git a/projects/Among Us/images/Amogus_Icon.png b/projects/Among Us/images/Amogus_Icon.png
diff --git a/projects/Among Us/images/Crewmate_killed.png b/projects/Among Us/images/Crewmate_killed.png
diff --git a/projects/Among Us/images/Crewmate_normal.png b/projects/Among Us/images/Crewmate_normal.png
diff --git a/projects/Among Us/images/Impostor_Killing.png b/projects/Among Us/images/Impostor_Killing.png
diff --git a/projects/Among Us/images/Impostor_normalWalk.png b/projects/Among Us/images/Impostor_normalWalk.png
diff --git a/projects/Among Us/images/Killing_Animation.png b/projects/Among Us/images/Killing_Animation.png
diff --git a/projects/Among Us/images/Loading_Screen.jpg b/projects/Among Us/images/Loading_Screen.jpg
diff --git a/projects/Among Us/images/The_Skeld_Cafeteria.png b/projects/Among Us/images/The_Skeld_Cafeteria.png
diff --git a/projects/Among Us/images/kill_button.png b/projects/Among Us/images/kill_button.png
diff --git a/projects/Among Us/index.html b/projects/Among Us/index.html
@@ -0,0 +1,48 @@
+<!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>AMOGUS!</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="./images/Amogus_Icon.png" sizes="32x32" type="image/png">
+</head>
+
+<body>
+    <div id="main">
+        <div id="loading">
+            <img src="./images/Loading_Screen.jpg" alt="">
+            <div id="overlay">
+                <ion-icon name="play-circle-outline"></ion-icon>
+            </div>
+            <div id="audio1">
+                <audio src="./audio/Sound.mp3"></audio>
+            </div>
+            <div id="audio2">
+                <audio src="./audio/Killing_Sound.mp3"></audio>
+            </div>
+        </div>
+        <img src="./images/The_Skeld_Cafeteria.png" alt="">
+        <div id="impostor">
+            <img src="./images/Impostor_normalWalk.png" alt="">
+        </div>
+        <div id="crewmate">
+            <img src="./images/Crewmate_normal.png" alt="">
+        </div>
+        <div id="kill">
+            <img src="./images/kill_button.png" alt="">
+            <div class="overlay"></div>
+        </div>
+        <div id="animation">
+            <img src="./images/Killing_Animation.png" alt="">
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
+</body>
+
+</html>
diff --git a/projects/Among Us/script.js b/projects/Among Us/script.js
@@ -0,0 +1,106 @@
+var loadingScreen = document.querySelector('#loading img');
+var playbtn = document.querySelector('#overlay ion-icon');
+var loadingOverlay = document.querySelector('#overlay');
+var bgmusic = document.querySelector('#audio1 audio');
+var killingAudio = document.querySelector('#audio2 audio');
+
+playbtn.addEventListener('click', function (dets) {
+    setTimeout(function () {
+        loadingScreen.style.opacity = '0';
+        bgmusic.play();
+        loadingOverlay.style.display = 'none';
+    }, 500);
+    setTimeout(function () {
+        loadingScreen.style.display = 'none';
+    }, 1000);
+});
+
+var posX = 10;
+var posY = 260;
+
+var impostor = document.querySelector('#impostor img');
+var crewmate = document.querySelector('#crewmate img');
+var overlay = document.querySelector('.overlay');
+var killbtn = document.querySelector('#kill img');
+var distanceX;
+var distanceY;
+var distance;
+var killDistance = 140;
+var killState = 0;
+
+var anim = document.querySelector('#animation img');
+
+window.addEventListener('keydown', function (dets) {
+    if (dets.keyCode === 38) { //up
+        if (posY > 0) {
+            posY -= 20;
+            impostor.style.top = `${posY}px`;
+        }
+    }
+    else if (dets.keyCode === 40) { //down
+        if (posY < document.body.getBoundingClientRect().bottom - 100 - 20) {
+            posY += 20;
+            impostor.style.top = `${posY}px`;
+        }
+    }
+    else if (dets.keyCode === 37) { //left
+        if (posX >= 0) {
+            posX -= 20;
+            impostor.style.left = `${posX}px`;
+        }
+    }
+    else if (dets.keyCode === 39) { //right
+        posX += 20;
+        impostor.style.left = `${posX}px`;
+    }
+
+    distanceX = crewmate.getBoundingClientRect().left - impostor.getBoundingClientRect().left;
+    distanceY = crewmate.getBoundingClientRect().top - impostor.getBoundingClientRect().top;
+    distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+
+    if (distance <= killDistance) {
+        overlay.style.display = 'none';
+        impostor.setAttribute('src', "./images/Impostor_Killing.png");
+        killCrew();
+    }
+    else {
+        impostor.setAttribute('src', "./images/Impostor_normalWalk.png");
+        overlay.style.display = 'initial';
+    }
+
+    if (posX > document.body.getBoundingClientRect().width) {
+        bgmusic.pause();
+        this.alert("The End!");
+    }
+});
+
+function killCrew() {
+    killbtn.addEventListener('click', function () {
+        impostor.style.left = `590px`;
+        impostor.style.top = `440px`;
+        crewmate.setAttribute('src', "./images/Crewmate_killed.png");
+        crewmate.style.top = `500px`;
+        posX = 590;
+        posY = 440;
+        setTimeout(function () {
+            impostor.setAttribute('src', "./images/Impostor_normalWalk.png");
+        }, 100);
+        killDistance = -1;
+        anim.style.height = 60 + '%';
+        anim.style.opacity = 1;
+        bgmusic.pause();
+        killingAudio.currentTime = '1';
+        killingAudio.play();
+        setTimeout(function () {
+            anim.style.height = 0;
+            anim.style.opacity = 0;
+            killingAudio.pause();
+        }, 2500);
+        setTimeout(function(){
+            bgmusic.play();
+        }, 3250);
+        setTimeout(function () {
+            crewmate.style.display = 'none';
+        }, 8000);
+    });
+}
diff --git a/projects/Among Us/style.css b/projects/Among Us/style.css
@@ -0,0 +1,121 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+#main {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+#main>img {
+    width: 100%;
+    height: 100%;
+    /* object-fit: cover; */
+}
+
+#main #impostor img {
+    object-fit: cover;
+    position: absolute;
+    top: 260px;
+    left: 0px;
+    width: 90px;
+    height: 97px;
+}
+
+#loading img {
+    width: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
+}
+
+#loading #overlay {
+    display: initial;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: rgba(128, 128, 128, 0.384);
+}
+
+#overlay ion-icon {
+    position: absolute;
+    top: 51%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    z-index: 4;
+    font-size: 100px;
+    cursor: pointer;
+}
+
+#main #crewmate img {
+    object-fit: cover;
+    position: absolute;
+    top: 440px;
+    left: 590px;
+    width: 85px;
+}
+
+#main #kill {
+    /* display: none; */
+    position: absolute;
+    width: 120px;
+    right: 3%;
+    bottom: 10%;
+}
+
+#kill .overlay {
+    display: initial;
+    position: absolute;
+    top: 50%;
+    left: 49%;
+    transform: translate(-50%, -50%);
+    width: 85px;
+    height: 85px;
+    border-radius: 30%;
+    background-color: rgba(0, 0, 0, 0.575);
+}
+
+#kill img {
+    position: absolute;
+    width: 80px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#kill img:hover {
+    width: 85px;
+    cursor: pointer;
+}
+
+#animation {
+    height: 100%;
+    width: 100%;
+}
+
+#animation img{
+    height: 0;
+    opacity: 0;
+    width: 100%;
+    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}