Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Touch No Fire Game Added. #2516

Merged
merged 2 commits into from
Jul 25, 2024
Merged

Touch No Fire Game Added. #2516

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8404a40
Touch No Fire Game Added.
Anjaliavv51 Jul 25, 2024
b95a52c
manifest.json
Anjaliavv51 Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions Touch No Fire Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-Touch No Fire Game</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>
169 changes: 169 additions & 0 deletions Touch No Fire Game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
60 changes: 60 additions & 0 deletions Touch No Fire Game/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}