diff --git a/README.md b/README.md index 90bf68ed..10ec2bf3 100644 --- a/README.md +++ b/README.md @@ -257,7 +257,6 @@ ________________________________________________________________________________ - ________________________________________________________________________________________________________________________________________________________________ # 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 new file mode 100644 index 00000000..a7673c02 --- /dev/null +++ b/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md @@ -0,0 +1,33 @@ +# **Touch-No-Fire-Game** +Enjoy The Game!!! +
+ +## **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! + + +
+ +## **Screenshots 📸** + +
+ + + + +
+ + +## **Working video 📹** +https://github.com/GameSphere-MultiPlayer/GameSphere/assets/154777864/a88f676a-69c8-4cc9-b6e6-98e5fca1aa59 \ No newline at end of file diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/index.html b/SinglePlayer - Games/Touch-No-Fire-Game/index.html new file mode 100644 index 00000000..b9c61d7c --- /dev/null +++ b/SinglePlayer - Games/Touch-No-Fire-Game/index.html @@ -0,0 +1,31 @@ + + + + + + Move Element + + + + +
+
+

😋

+
+
🍔
+
🔥
+
+
+



+ 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
+

+
+ + + diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/script.js b/SinglePlayer - Games/Touch-No-Fire-Game/script.js new file mode 100644 index 00000000..e551b3ff --- /dev/null +++ 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 = "😁"; + y = Math.max(y - 10, 0); + } else if (event.key === "ArrowDown") { + h3.innerHTML = "😁"; + y = Math.min(y + 10, maxHeight); + } else if (event.key === "ArrowLeft") { + h3.innerHTML = "😁"; + x = Math.max(x - 10, 0); + } else if (event.key === "ArrowRight") { + h3.innerHTML = "😁"; + 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 = "😃"; + 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 = "😋"; +console.log("your score is " + count); + +if (count % 2 === 0) { + const newEnemy = document.createElement("div"); + newEnemy.className = "enemy"; + + container.appendChild(newEnemy); + newEnemy.innerHTML = '🔥'; + 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 new file mode 100644 index 00000000..add48945 --- /dev/null +++ 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; + }