Merge pull request #1002 from Anjaliavv51/main

[Game]: Touch-No-Fire
ChromeGaming · Jun 7, 2024 · 9eac393 · 9eac393
2 parents a05754a + 3b1a016
commit 9eac393
Show file tree

Hide file tree

Showing 5 changed files with 293 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -257,7 +257,6 @@ ________________________________________________________________________________
 
 
 
-
 </div>
 ________________________________________________________________________________________________________________________________________________________________
 # How to make a PR in a Project 🟢

diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md b/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md
@@ -0,0 +1,33 @@
+# **Touch-No-Fire-Game** 
+Enjoy The Game!!!
+<br>
+
+## **Description 📃**
+- This is a Normal crossword game that we can play in virtually and blow I have print some tips for the beginners as well!
+- The project will contain HTML, CSS and JavaScript files. The HTML file adds structure to the game followed by styling using CSS. JavaScript adds functionality to the game.
+
+## **How to play? 🕹️**
+- Controls :
+    - Game Rules!
+    - Eat the food to gain score
+    - Do not touch the fire
+    - The fire multiplies once with even scores
+    - If you stay idle, the fire won't do anything
+    - Do not touch the moving fire
+    - Please play using arrow keys!
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<img src="https://github.com/GameSphere-MultiPlayer/GameSphere/assets/154777864/8835bbe2-13a4-43d5-b986-bb30442f833c">
+
+
+
+<br>
+
+
+## **Working video 📹**
+https://github.com/GameSphere-MultiPlayer/GameSphere/assets/154777864/a88f676a-69c8-4cc9-b6e6-98e5fca1aa59
diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/index.html b/SinglePlayer - Games/Touch-No-Fire-Game/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Move Element</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="head">Touch no Fire</div>
+  <div id="container">
+    <div id="mover">
+      <h3 id="h3">&#128523</h3>
+    </div>
+    <div id="food">&#127828</div>
+    <div class="enemy">&#128293</div>
+  </div>
+  <div> 
+    <p id="paragraph"> <br> <br> 
+      Game Rules!<br>
+      * Eat the food to gain score<br>
+      * Do not touch the fire<br>
+      * The fire multiplies once with even scores<br>
+      * If you stay idle, the fire won't do anything<br>
+      * Do not touch the moving fire<br>
+      * Please play using arrow keys<br>
+    </p>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/script.js b/SinglePlayer - Games/Touch-No-Fire-Game/script.js
@@ -0,0 +1,169 @@
+const container = document.getElementById("container");
+const move = document.getElementById("mover");
+const maxWidth = container.clientWidth - move.clientWidth;
+const maxHeight = container.clientHeight - move.clientHeight;
+
+let enemies = document.querySelectorAll(".enemy");
+
+let x = Math.random() * maxWidth;
+let y = Math.random() * maxHeight;
+let a;
+let b;
+let count = -1;
+const h3 = document.getElementById("h3");
+let gameActive = true;
+
+const initialEnemy = document.querySelector(".enemy");
+let initialEnemyRect = initialEnemy.getBoundingClientRect();
+let initialEnemyX = Math.random() * (maxWidth - initialEnemyRect.width);
+let initialEnemyY = Math.random() * (maxHeight - initialEnemyRect.height);
+initialEnemy.style.left = `${initialEnemyX}px`;
+initialEnemy.style.top = `${initialEnemyY}px`;
+
+document.addEventListener("keydown", (event) => {
+  if (!gameActive) return;
+  const para = document.getElementById("para");
+  event.preventDefault();
+
+  if (event.key === "ArrowUp") {
+    h3.innerHTML = "&#128513";
+    y = Math.max(y - 10, 0);
+  } else if (event.key === "ArrowDown") {
+    h3.innerHTML = "&#128513";
+    y = Math.min(y + 10, maxHeight);
+  } else if (event.key === "ArrowLeft") {
+    h3.innerHTML = "&#128513";
+    x = Math.max(x - 10, 0);
+  } else if (event.key === "ArrowRight") {
+    h3.innerHTML = "&#128513";
+    x = Math.min(x + 10, maxWidth);
+  } else {
+    para.innerHTML = "error";
+    return;
+  }
+
+  if (isOverlapping()) {
+    foodfun();
+  }
+  if (die()) {
+    end();
+  }
+
+  move.style.left = `${x}px`;
+  move.style.top = `${y}px`;
+});
+
+document.addEventListener("keyup", (event) => {
+  h3.innerHTML = "&#128515";
+  keyIsPressed = false;
+});
+
+function isOverlapping() {
+  if (!gameActive) return;
+  const moverRect = move.getBoundingClientRect();
+  const foodRect = food.getBoundingClientRect();
+  return (
+    moverRect.left < foodRect.right &&
+    moverRect.right > foodRect.left &&
+    moverRect.top < foodRect.bottom &&
+    moverRect.bottom > foodRect.top
+  );
+}
+
+const food = document.getElementById("food");
+const foodfun = function () {
+  if (!gameActive) return;
+a = Math.floor(Math.random() * (maxWidth - food.clientWidth));
+b = Math.floor(Math.random() * (maxHeight - food.clientHeight));
+
+
+a = Math.max(a, 0);
+b = Math.max(b, 0);
+a = Math.min(a, maxWidth - food.clientWidth);
+b = Math.min(b, maxHeight - food.clientHeight);
+
+food.style.transform = `translate(${a}px, ${b}px)`;
+count++;
+h3.innerHTML = "&#128523";
+console.log("your score is " + count);
+
+if (count % 2 === 0) {
+  const newEnemy = document.createElement("div");
+  newEnemy.className = "enemy";
+
+  container.appendChild(newEnemy);
+  newEnemy.innerHTML = '&#128293';
+  enemies = document.querySelectorAll(".enemy");
+
+  let newEnemyRect = newEnemy.getBoundingClientRect();
+  let newEnemyX = Math.random() * (maxWidth - newEnemyRect.width);
+  let newEnemyY = Math.random() * (maxHeight - newEnemyRect.height);
+  newEnemy.style.left = `${newEnemyX}px`;
+  newEnemy.style.top = `${newEnemyY}px`;
+}
+};
+if (!gameActive) foodfun();
+
+
+function die() {
+  if (!gameActive) return;
+  const moverRect = move.getBoundingClientRect();
+
+  for (const enemy of enemies) {
+    const enemyRect = enemy.getBoundingClientRect();
+    if (
+      moverRect.left < enemyRect.right &&
+      moverRect.right > enemyRect.left &&
+      moverRect.top < enemyRect.bottom &&
+      moverRect.bottom > enemyRect.top
+    ) {
+      return true; 
+    }
+  }
+
+  return false; 
+}
+
+function end() {
+console.log("game over");
+gameActive = false;
+container.style.display = 'flex';
+container.style.flexDirection = 'column';
+container.style.alignItems = 'center';
+container.style.justifyContent = 'center';
+
+const gameOverText = document.createElement('span');
+gameOverText.style.fontWeight = 'bold';
+gameOverText.textContent = 'Game Over';
+container.appendChild(gameOverText);
+
+const scoreText = document.createElement('span');
+scoreText.style.fontWeight = 'bold';
+scoreText.textContent = 'Your Score: ' + count;
+container.appendChild(scoreText);
+
+const replayButton = document.createElement('button');
+replayButton.style.fontWeight = 'bold';
+replayButton.textContent = 'Replay';
+replayButton.addEventListener('click', () => {
+  location.reload();
+});
+container.appendChild(replayButton);
+
+
+}
+
+
+
+function enemyMove() {
+  if (!gameActive) return;
+  for (const enemy of enemies) {
+    let m = Math.ceil(Math.random() * maxWidth);
+    let n = Math.ceil(Math.random() * maxHeight);
+    enemy.style.left = `${m}px`;
+    enemy.style.top = `${n}px`;
+  }
+}
+
+
+setInterval(enemyMove, 2000);
diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/style.css b/SinglePlayer - Games/Touch-No-Fire-Game/style.css
@@ -0,0 +1,60 @@
+/* styles.css */
+
+#head {
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  #container {
+    width: 50%;
+    height: 50vh;
+    border: 3px solid black;
+    position: relative;
+  }
+
+  #mover {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0px;
+  }
+
+  #h3 {
+    font-size: 2em;
+    position: absolute;
+    margin: 0px;
+  }
+
+  #food {
+    font-size: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+  }
+
+  .enemy {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 2s linear;
+  }
+
+  body {
+    background-color: blanchedalmond;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+  }
+
+  #paragraph {
+    font-size: 1.2em;
+    text-align: center;
+    margin-top: 20px;
+  }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -257,7 +257,6 @@ ________________________________________________________________________________




		</div>
		________________________________________________________________________________________________________________________________________________________________
		# How to make a PR in a Project 🟢
Expand Down