Додати index.html

2025-11-21 20:28:20 +00:00 · 2025-11-21 20:28:20 +00:00 · 8d13d1e4c2
commit 8d13d1e4c2
parent 6b5fea5b1b
1 changed files with 149 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>