Добро пожаловать на испытание проворности! Скорее! Ловите их! Они все разлетаются! Призраки вырвались на свободу и заполонили город, нужно отловить их всех, пока они не украли все ваши хэллоуинские конфеты!
Вы получаете столько баллов, сколько поймали призраков за минуту.
Вы можете играть несколько раз, но баллы начислятся за максимальное количество, которое вы сможете наиграть за раз. Если вы сегодня набили 50 призраков, мы начислим 50 баллов. Если завтра вы набьёте 60 призраков, мы начислим ещё 10 баллов. Скриншот вашего результата присылайте в эту тему.
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мини-игра: Поймай Призрака</title>
<style>
/* =========================================================
* --- СТИЛИ ИГРЫ ---
* ========================================================= */
:root {
--pumpkin-orange: #FF8C00;
--dark-hat-blue: #36454F;
--light-cream: #FDFBF2;
--dark-text-color: #282828;
--accent-red: #A01010;
--button-hover-dark: #1A2126;
--success-color: #388E3C;
--error-color: #D32F2F;
}
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
/* ВАША ССЫЛКА НА ФОН */
background-image: url('https://img.freepik.com/premium-vector/pumpkin-with-hat-halloween-pattern-design_92495-166.jpg');
background-repeat: repeat;
background-size: 150px;
background-color: var(--light-cream);
color: var(--dark-text-color);
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.game-container {
width: 500px;
max-width: 95%;
padding: 25px;
border: 3px solid var(--dark-hat-blue);
background-color: rgba(255, 255, 255, 0.95); /* Чуть меньше прозрачности для лучшей видимости */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
border-radius: 10px;
position: relative;
z-index: 10;
}
h2 {
text-align: center;
color: var(--accent-red);
border-bottom: 2px dashed var(--pumpkin-orange);
padding-bottom: 12px;
margin-bottom: 25px;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ИНФОРМАЦИОННАЯ ПАНЕЛЬ */
.info-panel {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
font-weight: bold;
padding: 8px 10px;
background-color: var(--light-cream);
border: 1px solid var(--dark-hat-blue);
border-radius: 5px;
font-size: 1.2em;
}
/* КНОПКА */
button {
padding: 12px 20px;
margin-top: 15px;
border: none;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s, transform 0.1s;
border-radius: 5px;
font-size: 1em;
letter-spacing: 0.5px;
background-color: var(--dark-hat-blue);
color: var(--light-cream);
width: 100%;
}
button:hover {
background-color: var(--button-hover-dark);
transform: translateY(-2px);
}
button:disabled {
background-color: #AAA;
cursor: not-allowed;
transform: none;
}
/* ИГРОВОЕ ПОЛЕ */
#gameArea {
width: 450px;
height: 450px;
margin: 0 auto;
border: 5px dashed var(--pumpkin-orange);
background-color: rgba(0, 0, 0, 0.1);
position: relative;
cursor: crosshair;
border-radius: 10px;
overflow: hidden; /* Чтобы призраки не вылезали за границы */
}
/* ПРИЗРАК (ЦЕЛЬ) */
.ghost {
width: 50px;
height: 50px;
background-color: var(--pumpkin-orange);
border: 3px solid var(--accent-red);
border-radius: 50%;
position: absolute;
cursor: pointer;
box-shadow: 0 0 15px var(--pumpkin-orange);
transition: opacity 0.1s;
line-height: 50px;
text-align: center;
font-weight: bold;
color: white;
opacity: 0; /* Изначально скрыт */
user-select: none;
}
.ghost.visible {
opacity: 1;
}
/* СООБЩЕНИЯ */
#message {
margin-top: 15px;
text-align: center;
font-weight: bold;
color: var(--dark-text-color);
}
</style>
</head>
<body>
<div class="game-container">
<h2>ПОЙМАЙ ПРИЗРАКА!</h2>
<div class="info-panel">
<span>Счет: <span id="currentScore">0</span></span>
<span>Время: <span id="timerDisplay">60</span> сек</span>
</div>
<div id="gameArea">
</div>
<div id="message">Нажмите "Начать игру", чтобы найти всех неупокоенных духов за 60 секунд!</div>
<button id="startGameButton">Начать игру</button>
</div>
<script>
// =========================================================
// --- ЛОГИКА ИГРЫ ---
// =========================================================
const GAME_DURATION = 60; // Секунды
const GHOST_DISPLAY_TIME = 1000; // Миллисекунды, как долго отображается призрак
const GHOST_SIZE = 50; // Размер призрака в пикселях
let score = 0;
let timeLeft = GAME_DURATION;
let gameActive = false;
let timerInterval;
let ghostTimeout;
// Элементы DOM
const scoreElement = document.getElementById('currentScore');
const timerElement = document.getElementById('timerDisplay');
const gameArea = document.getElementById('gameArea');
const startButton = document.getElementById('startGameButton');
const messageElement = document.getElementById('message');
function startGame() {
if (gameActive) return;
score = 0;
timeLeft = GAME_DURATION;
gameActive = true;
scoreElement.textContent = score;
timerElement.textContent = timeLeft;
startButton.disabled = true;
messageElement.textContent = "Ловите призраков! Время пошло...";
// Очищаем поле от старых призраков
gameArea.innerHTML = '';
// Запускаем таймер
timerInterval = setInterval(updateTimer, 1000);
// Начинаем спавнить призраков
spawnNewGhost();
}
function updateTimer() {
timeLeft--;
timerElement.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}
function spawnNewGhost() {
if (!gameActive) return;
// 1. Создаем новый элемент призрака
const ghost = document.createElement('div');
ghost.className = 'ghost';
ghost.textContent = '👻'; // Можно использовать эмодзи или текст
// 2. Определяем случайные координаты, учитывая размер поля и призрака
const areaWidth = gameArea.offsetWidth - GHOST_SIZE;
const areaHeight = gameArea.offsetHeight - GHOST_SIZE;
const randomX = Math.floor(Math.random() * areaWidth);
const randomY = Math.floor(Math.random() * areaHeight);
ghost.style.left = `${randomX}px`;
ghost.style.top = `${randomY}px`;
// 3. Устанавливаем обработчик клика
ghost.addEventListener('click', handleGhostClick);
// 4. Добавляем на поле и делаем видимым
gameArea.appendChild(ghost);
setTimeout(() => {
ghost.classList.add('visible');
}, 50); // Небольшая задержка, чтобы transition сработал красиво
// 5. Планируем исчезновение и новый спавн
ghostTimeout = setTimeout(() => {
// Если призрак не был пойман, он исчезает
if (gameActive && ghost.parentNode === gameArea) {
gameArea.removeChild(ghost);
}
// И спавним следующего, если игра активна
if (gameActive) {
spawnNewGhost();
}
}, GHOST_DISPLAY_TIME);
}
function handleGhostClick(event) {
if (!gameActive) return;
const ghost = event.target;
// Увеличиваем счет
score++;
scoreElement.textContent = score;
// Добавляем быстрый визуальный эффект (например, +1)
// (Для простоты, убираем его сразу)
// Удаляем призрака, чтобы он не исчез сам
gameArea.removeChild(ghost);
// Очищаем таймаут текущего призрака и спавним нового
clearTimeout(ghostTimeout);
spawnNewGhost();
}
function endGame() {
gameActive = false;
clearInterval(timerInterval);
clearTimeout(ghostTimeout);
startButton.disabled = false;
// Очищаем поле
gameArea.innerHTML = '';
messageElement.textContent = `ВРЕМЯ ИСТЕКЛО! Ваш финальный счет: ${score} призраков поймано!`;
}
// =========================================================
// --- ИНИЦИАЛИЗАЦИЯ И ОБРАБОТЧИКИ СОБЫТИЙ ---
// =========================================================
startButton.addEventListener('click', startGame);
// Инициализация при загрузке
timerElement.textContent = GAME_DURATION;
</script>
</body>
</html>[/html]
