framework

Parv-gugnani · Aug 24, 2023 · a429e13 · a429e13
1 parent ba09486
commit a429e13
Show file tree

Hide file tree

Showing 3 changed files with 222 additions and 0 deletions.
diff --git a/Dino game/index.html b/Dino game/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      #dino {
+        width: 40px;
+        height: 40px;
+        background-color: green;
+        position: absolute;
+        bottom: 0;
+        animation: jump 0.5s ease-in-out infinite;
+      }
+      #obstacle {
+        width: 20px;
+        height: 40px;
+        background-color: red;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+      @keyframes jump {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-40px);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="dino"></div>
+    <div id="obstacle"></div>
+    <script>
+      const dino = document.getElementById("dino");
+      const obstacle = document.getElementById("obstacle");
+      let score = 0;
+      let isJumping = false;
+
+      document.addEventListener("keydown", jump);
+
+      function jump(event) {
+        if (event.keyCode === 32 && !isJumping) {
+          isJumping = true;
+          let jumpUp = 0;
+          let jumpDown = 0;
+          let jumpInterval = setInterval(() => {
+            jumpUp += 20;
+            dino.style.bottom = jumpUp + "px";
+            if (jumpUp >= 200) {
+              clearInterval(jumpInterval);
+              let jumpDownInterval = setInterval(() => {
+                jumpUp -= 20;
+                dino.style.bottom = jumpUp + "px";
+                if (jumpUp === 0) {
+                  clearInterval(jumpDownInterval);
+                  isJumping = false;
+                }
+              }, 30);
+            }
+          }, 30);
+        }
+      }
+
+      function checkCollision() {
+        const dinoPosition = dino.getBoundingClientRect();
+        const obstaclePosition = obstacle.getBoundingClientRect();
+
+        if (
+          dinoPosition.left < obstaclePosition.left + obstaclePosition.width &&
+          dinoPosition.left + dinoPosition.width > obstaclePosition.left &&
+          dinoPosition.top < obstaclePosition.top + obstaclePosition.height &&
+          dinoPosition.top + dinoPosition.height > obstaclePosition.top
+        ) {
+          alert(`Game Over! Your score: ${score}`);
+          location.reload();
+        }
+      }
+
+      function updateScore() {
+        score++;
+        if (score % 10 === 0) {
+          alert(`Congratulations! Your score: ${score}`);
+        }
+      }
+
+      function moveObstacle() {
+        const obstaclePosition = obstacle.getBoundingClientRect();
+        if (obstaclePosition.right <= 0) {
+          obstacle.style.right = "100%";
+          updateScore();
+        } else {
+          obstacle.style.right = `${obstaclePosition.right - 5}px`;
+        }
+        checkCollision();
+      }
+
+      setInterval(moveObstacle, 20);
+    </script>
+  </body>
+</html>
diff --git a/Dino game/script.js b/Dino game/script.js
@@ -0,0 +1,75 @@
+const dino = document.querySelector(".dino");
+const obstacle = document.querySelector(".obstacle");
+const scoreDisplay = document.querySelector(".score");
+
+let isJumping = false;
+let score = 0;
+
+document.addEventListener("keydown", jump);
+
+function jump(event) {
+  if (event.keyCode === 32 && !isJumping) {
+    isJumping = true;
+
+    let jumpUp = 0;
+    const jumpInterval = setInterval(() => {
+      if (jumpUp >= 100) {
+        clearInterval(jumpInterval);
+        let fallDown = 0;
+        const fallInterval = setInterval(() => {
+          if (fallDown <= 0) {
+            clearInterval(fallInterval);
+            isJumping = false;
+          } else {
+            jumpUp -= 5;
+            fallDown -= 5;
+            dino.style.bottom = jumpUp + "px";
+          }
+        }, 20);
+      } else {
+        jumpUp += 5;
+        dino.style.bottom = jumpUp + "px";
+      }
+    }, 20);
+  }
+}
+
+function updateScore() {
+  score++;
+  scoreDisplay.textContent = score;
+}
+
+function checkCollision() {
+  if (score > 0) {
+    const dinoPosition = dino.getBoundingClientRect();
+    const obstaclePosition = obstacle.getBoundingClientRect();
+
+    if (
+      dinoPosition.left < obstaclePosition.left + obstaclePosition.width &&
+      dinoPosition.left + dinoPosition.width > obstaclePosition.left &&
+      dinoPosition.top < obstaclePosition.top + obstaclePosition.height &&
+      dinoPosition.top + dinoPosition.height > obstaclePosition.top
+    ) {
+      alert(`Game Over! Your score: ${score}`);
+      location.reload(); // Reload the game
+    }
+  }
+}
+
+function moveObstacle() {
+  let obstaclePosition = 300;
+
+  const moveInterval = setInterval(() => {
+    if (obstaclePosition <= -20) {
+      clearInterval(moveInterval);
+      updateScore();
+      moveObstacle();
+    } else {
+      obstaclePosition -= 5;
+      obstacle.style.right = obstaclePosition + "px";
+      checkCollision();
+    }
+  }, 20);
+}
+
+moveObstacle();
diff --git a/Dino game/style.css b/Dino game/style.css
@@ -0,0 +1,43 @@
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f7f7f7;
+}
+
+.game-container {
+  position: relative;
+  width: 300px;
+  height: 150px;
+  border: 1px solid #000;
+  overflow: hidden;
+}
+
+.dino {
+  position: absolute;
+  bottom: 0;
+  left: 30px;
+  width: 30px;
+  height: 30px;
+  background-color: #666;
+}
+
+.obstacle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 20px;
+  height: 30px;
+  background-color: #333;
+}
+
+.score {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  font-weight: bold;
+}