149 lines
No EOL
4.1 KiB
HTML
149 lines
No EOL
4.1 KiB
HTML
<!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> |