Added Dino Game (Spandan-Bhattacharya#326)

* Added Dino Game * Made Changes
Anshikaa-Saini · Feb 25, 2024 · 90c1f62 · 90c1f62
1 parent 094d5e3
commit 90c1f62
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 0 deletions.
diff --git a/Dino Game/chrome-dino-game-1200x763-removebg-preview.png b/Dino Game/chrome-dino-game-1200x763-removebg-preview.png
diff --git a/Dino Game/index.html b/Dino Game/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dino Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="score">Score : 0</div>
+        <div class="game-div">   
+            <div class="dino">
+                <img src="./chrome-dino-game-1200x763-removebg-preview.png" alt="">
+            </div>
+            <div class="obstacle animateBox"></div>
+        </div>
+        <div class="reset">Reset</div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Dino Game/script.js b/Dino Game/script.js
@@ -0,0 +1,51 @@
+let dino = document.querySelector(".dino");
+let box = document.querySelector(".obstacle");
+let reset = document.querySelector(".reset");
+let flag = true;
+let score = 0;
+let scoreDiv = document.querySelector(".score");
+
+function jump() {
+    if (!dino.classList.contains("animateDino")) {
+        dino.classList.add("animateDino");  
+    }
+
+    setTimeout(() => {
+        dino.classList.remove("animateDino");
+    }, 500);
+}
+
+setInterval(() => {
+    let dinoPos = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
+    let boxPos = parseInt(window.getComputedStyle(box).getPropertyValue("left"));
+
+    // if (boxPos > 0 && boxPos <= 80 && dinoPos >= 350) {
+    //     box.style.display = 'none';
+    //     box.classList.remove("animateBox");
+    //     flag = false;
+    //     alert('Game Over') ;
+    // }
+    if (boxPos > 0 && boxPos <= 50 && dinoPos >= 370) {
+        box.style.display = 'none';
+        box.classList.remove("animateBox");
+        flag = false;
+        alert('Game Over') ;
+    }
+}, 10);
+
+setInterval(() => {
+    if(flag) { 
+        score++;
+        scoreDiv.innerHTML = `Score : ${score}`;
+    }
+
+}, 1200);
+document.addEventListener("keydown", jump);
+
+reset.addEventListener("click", () => {
+    box.style.display = 'inline-block';
+    box.classList.add("animateBox");
+    scoreDiv.innerHTML = `Score : 0`;
+    score = 0;
+    flag = true;
+})
diff --git a/Dino Game/style.css b/Dino Game/style.css
@@ -0,0 +1,113 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    min-width: 100vw;
+}
+
+.wrapper{
+    min-height: 100vh;
+    min-width: 100vw;
+    background: url(../assets/bg.webp);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.game-div{
+    width: 1000px;
+    height: 500px;
+    background-color: #fff;
+    border: 3px solid white;
+    overflow: hidden;
+}
+
+.dino{
+    height: 100px;
+    width: 80px;
+    background-color: #fff;
+    position: relative;
+    top: 398px;
+}
+
+img{
+    height: 100%;
+    width: 100%;
+}
+
+.obstacle{
+    display: inline-block;
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+    position: relative;
+    top: 350px;
+    left: 1000px;
+}
+
+.animateBox{
+    animation-name: animate;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+.animateDino {
+    animation-name: animate2;
+    animation-duration: 500ms;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+}
+
+@keyframes animate {
+    0%{
+        left: 1000px;
+    }
+
+    100%{
+        left: -60px;
+    }
+}
+
+@keyframes animate2 {
+    0%{
+        top: 398px;
+    }
+
+    30%{
+        top: 300px;
+    }
+
+    70%{
+        top: 300px;
+    }
+
+    100%{
+        top: 398px;
+    }
+}
+
+.reset , .score{
+    border: 2px solid white;
+    color: black;
+    font-size: 2rem;
+    padding: 5px 10px;
+    background-color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.reset:hover{
+    transform: scale(1.05);
+    transition: all 0.2s ease-in-out;
+}
diff --git a/index.html b/index.html
@@ -662,6 +662,18 @@ <h3>Game</h3>
         </div>
       </div>
 
+      <div class="box game hide">
+        <span>Dino Game</span>
+        <div class="content">
+          <h1>Dino Game</h1>
+          <h3>Game</h3>
+          <p> Play it !</p>
+          <a href="./Dino Game/index.html">
+            <div class="trynow-button">TRY NOW!</div>
+          </a>
+        </div>
+      </div>
+
 
     </div>
     <!-- GAME SECTION ENDS HERE -->