Polytechnic-homework/JavaScriptHomework
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Додати index.html

Browse source
This commit is contained in:
Shizanit 2025-11-21 20:28:20 +00:00
parent 6b5fea5b1b
commit 8d13d1e4c2
1 changed files with 149 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

149
index.html Normal file
View file

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Гра "Злови квадрат"</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
h1 {
color: #333;
}
#game-info {
display: flex;
justify-content: space-around;
width: 500px;
font-size: 24px;
margin-bottom: 20px;
}
#game-area {
width: 500px;
height: 400px;
border: 2px solid #333;
background-color: #fff;
position: relative;
overflow: hidden;
}
#target {
width: 60px;
height: 60px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
cursor: pointer;
transition: background-color 0.2s ease, top 0.1s ease, left 0.1s ease;
}
#startButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border: 2px solid #333;
background-color: #fff;
}
#startButton:disabled {
cursor: not-allowed;
background-color: #ccc;
}
</style>
</head>
<body>
<h1>Гра "Злови квадрат"</h1>
<div id="game-info">
<span id="score-display">Рахунок: 0</span>
<span id="timer-display">Час: 15</span>
</div>
<div id="game-area">
<div id="target"></div>
</div>
<button id="startButton">Почати гру</button>
<script>
const target = document.getElementById('target');
const gameArea = document.getElementById('game-area');
const scoreDisplay = document.getElementById('score-display');
const timerDisplay = document.getElementById('timer-display');
const startButton = document.getElementById('startButton');
let score = 0;
let timeLeft = 15;
let gameInterval = null;
let gameActive = false;
function moveAndRecolorTarget() {
const maxX = gameArea.clientWidth - target.clientWidth;
const maxY = gameArea.clientHeight - target.clientHeight;
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.random() * maxY);
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
target.style.left = randomX + 'px';
target.style.top = randomY + 'px';
target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
}
target.addEventListener('click', () => {
if (gameActive) {
score++;
scoreDisplay.innerHTML = `Рахунок: ${score}`;
moveAndRecolorTarget();
}
});
function startGame() {
score = 0;
timeLeft = 15;
gameActive = true;
scoreDisplay.innerHTML = `Рахунок: ${score}`;
timerDisplay.innerHTML = `Час: ${timeLeft}`;
startButton.disabled = true;
moveAndRecolorTarget();
gameInterval = setInterval(() => {
timeLeft--;
timerDisplay.innerHTML = `Час: ${timeLeft}`;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
}
function endGame() {
clearInterval(gameInterval);
gameActive = false;
alert(`Гру завершено! Ваш рахунок: ${score}`);
startButton.disabled = false;
}
startButton.addEventListener('click', startGame);
</script>
</body>
</html>