Испытание на смекалистость! Вы застряли в доме (и зачем только вы туда залезли?), полном запертых дверей. Все замки на дверях - кодовые. На каждой двери - вопрос. Сможете ли вы выйти из этого дома или будете блуждать между бесконечными комнатами?
За прохождение испытания вы получите 70 баллов!
Чтобы получить их, пришлите скриншот завершённой игры!
[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.9);
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;
}
/* Кнопки и инпуты */
button {
padding: 12px 20px;
margin: 8px 5px;
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;
}
#submitGuess {
background-color: var(--dark-hat-blue);
color: var(--light-cream);
width: calc(100% - 10px);
margin-left: 5px;
margin-right: 5px;
}
#submitGuess:hover {
background-color: var(--button-hover-dark);
transform: translateY(-2px);
}
#newGameButton {
background-color: var(--pumpkin-orange);
color: var(--dark-text-color);
}
#newGameButton:hover {
background-color: #E67800;
transform: translateY(-2px);
}
#guessInput {
width: calc(100% - 22px);
padding: 12px;
margin-bottom: 18px;
border: 2px solid var(--pumpkin-orange);
box-sizing: border-box;
font-size: 1.2em;
text-transform: uppercase;
background-color: var(--light-cream);
color: var(--dark-text-color);
border-radius: 4px;
}
/* Информационные итоговые блоки */
.info-panel {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
font-weight: bold;
padding: 8px 0;
border-bottom: 1px dotted var(--dark-text-color);
font-size: 1.1em;
}
#wordDisplay {
color: var(--accent-red);
letter-spacing: 2px;
}
.message-area {
min-height: 50px;
margin-top: 20px;
padding: 12px;
border: 1px dashed var(--dark-hat-blue);
background-color: var(--light-cream);
text-align: center;
font-weight: bold;
border-radius: 5px;
font-size: 1.05em;
line-height: 1.4;
}
.message-area.success { color: var(--success-color); border-color: var(--success-color); background-color: #e6ffe6; }
.message-area.error { color: var(--error-color); border-color: var(--error-color); background-color: #ffe6e6; }
.message-area.info { color: var(--dark-text-color); border-color: var(--pumpkin-orange); background-color: #FFF8E1; }
</style>
</head>
<body>
<div class="game-container">
<h2>ПУТЬ К СВОБОДЕ</h2>
<div class="info-panel">
<span>Очки: <span id="currentScore">0</span></span>
<span>Попытки: <span id="attemptsLeft">3</span></span>
<span>Кодовое слово: <span id="wordDisplay">????</span></span>
</div>
<input type="text" id="guessInput" placeholder="Введите ваш ответ" maxlength="308">
<button id="submitGuess">ОТВЕТИТЬ</button>
<div id="message" class="message-area info">
Добро пожаловать в игру! Угадайте кодовое слово.
</div>
<div style="text-align: center; margin-top: 15px;">
<button id="newGameButton">Начать новую загадку</button>
</div>
</div>
<script>
// СЛОВАРЬ КОДОВ (30 СЛОВ)
const CODES = [
{ word: "ФАНТАЗМ", hint: "Существа, превращающие жизнь жителей Годфри в кошмар." },
{ word: "МАГИК", hint: "Тот, кто и вавку залечит, и в мозгах поковыряется." },
{ word: "ГОДФРИ", hint: "Город-сказка, город-мечта." },
{ word: "ЭХО", hint: "Неупокоенные души." },
{ word: "КОТЁЛ", hint: "Медная посудина для варки зелья." },
{ word: "ТУМАН", hint: "Природное явление, скрывающее зло." },
{ word: "АРТЕФАКТ", hint: "Зачарованный или проклятый предмет." },
{ word: "ВЕНДИГО", hint: "Гурманы, предпочитающие особый вид мяса." },
{ word: "КУЛЬТИСТ", hint: "Последователь тайного идола или демона." },
{ word: "ОБЕТ", hint: "Торжественное обещание, часто данное нечистой силе." },
{ word: "ЛИКАНТРОП", hint: "Научное название для оборотня." },
{ word: "ВЕДЬМА", hint: "Женщина, владеющая колдовством." },
{ word: "ВАСИЛИСК", hint: "Мифический змей с убийственным взглядом." },
{ word: "ВЕРВОЛЬФ", hint: "Зэ мэн ху кэн трансформ инту э вольф." },
{ word: "ФЕТИШИЗМ", hint: "Лучший и единственный бордель в городе." },
{ word: "ВАМПИР", hint: "Ночной хищник, питающийся кровью." },
{ word: "ОБОРОТЕНЬ", hint: "Существо, способное менять облик." },
{ word: "УПЫРЬ", hint: "Славянский вампир или мертвец." },
{ word: "ПРИЗРАК", hint: "Бестелесный дух умершего, но не в Годфри." },
{ word: "КОЛДУН", hint: "Магик, который дружит с потусторонними существами." },
{ word: "ЗЕЛЬЕ", hint: "Магический напиток." },
{ word: "ХЭЛЛОУИН", hint: "Праздник кануна Дня всех святых." },
{ word: "СКЕЛЕТ", hint: "Остатки мертвеца." },
{ word: "МУМИЯ", hint: "Древний египетский оживший труп." },
{ word: "КУКЛА", hint: "Игрушка, иногда проклятая." },
{ word: "ФАНТОМ", hint: "Привидение, призрак, любит оперу." },
{ word: "ОККУЛЬТИЗМ", hint: "Тайные знания и практики." },
{ word: "МАГИЯ", hint: "Искусство управления сверхъестественными силами." },
{ word: "ОБЕРЕГ", hint: "Предмет, защищающий от зла." },
{ word: "НЕКРОМАНТ", hint: "Магик, повелевающий мёртвыми." },
{ word: "ЧЕРТОГ", hint: "Торжественное название для зала или мрачного дворца." }
];
const MAX_ATTEMPTS = 3;
let currentCode = {};
let attempts = MAX_ATTEMPTS;
let score = 0;
let gameActive = false;
// Массив для слов, которые еще не были использованы в текущей игре
let availableCodes = [];
// Элементы DOM
const scoreElement = document.getElementById('currentScore');
const attemptsElement = document.getElementById('attemptsLeft');
const wordDisplayElement = document.getElementById('wordDisplay');
const inputElement = document.getElementById('guessInput');
const submitButton = document.getElementById('submitGuess');
const newGameButton = document.getElementById('newGameButton');
const messageElement = document.getElementById('message');
function setupNewCode() {
// 1. Проверяем, остались ли слова
if (availableCodes.length === 0) {
gameActive = false;
inputElement.disabled = true;
submitButton.disabled = true;
wordDisplayElement.textContent = "КОНЕЦ";
// Используем CODES.length для отображения общего числа слов
setMessage(`ПОЗДРАВЛЯЕМ! Вы угадали все ${CODES.length} слов! Ваш финальный счет: ${score}`, 'success');
return;
}
// 2. Выбираем случайный индекс из доступных слов
const randomIndex = Math.floor(Math.random() * availableCodes.length);
// 3. Получаем слово и удаляем его из доступного пула (чтобы оно не повторялось)
currentCode = availableCodes.splice(randomIndex, 1)[0];
attempts = MAX_ATTEMPTS;
gameActive = true;
wordDisplayElement.textContent = '?'.repeat(currentCode.word.length);
attemptsElement.textContent = attempts;
inputElement.value = '';
inputElement.disabled = false;
submitButton.disabled = false;
// Сообщение теперь включает количество оставшихся слов
setMessage(`Загадка: ${currentCode.word.length} символов. (Осталось ${availableCodes.length + 1} слов) Подсказка: ${currentCode.hint}`, 'info');
}
function checkGuess() {
if (!gameActive) return;
const guess = inputElement.value.toUpperCase().trim();
inputElement.value = '';
if (guess.length === 0 || guess.length !== currentCode.word.length) {
setMessage("Ошибка: Неверная длина слова. Попробуйте снова.", 'error');
return;
}
if (guess === currentCode.word) {
score += 10;
scoreElement.textContent = score;
wordDisplayElement.textContent = currentCode.word;
setMessage(`ВЕРНО! Слово [${currentCode.word}] угадано! +10 очков.`, 'success');
// Запускаем новую загадку через 2 секунды
setTimeout(setupNewCode, 2000);
return;
}
attempts--;
attemptsElement.textContent = attempts;
let charHint = generateCharHint(guess, currentCode.word);
setMessage(`Неверно. Осталось попыток: ${attempts}. ${charHint}`, 'error');
if (attempts <= 0) {
gameActive = false;
inputElement.disabled = true;
submitButton.disabled = true;
wordDisplayElement.textContent = currentCode.word;
setMessage(`НЕУДАЧА! Правильное слово было: [${currentCode.word}]. ИГРА ЗАВЕРШЕНА. Ваш финальный счет: ${score}`, 'error');
}
}
function generateCharHint(guess, target) {
let correctPosition = 0;
for (let i = 0; i < target.length; i++) {
if (guess[i] === target[i]) {
correctPosition++;
}
}
return `Найдено ${correctPosition} правильных символов на своих местах.`;
}
function setMessage(text, type = '') {
messageElement.textContent = text;
messageElement.className = 'message-area';
if (type) {
messageElement.classList.add(type);
}
}
function startNewGame() {
score = 0;
scoreElement.textContent = score;
// Сброс пула доступных слов для новой игры
availableCodes = [...CODES];
setupNewCode();
}
// =========================================================
// --- ИНИЦИАЛИЗАЦИЯ И ОБРАБОТЧИКИ СОБЫТИЙ ---
// =========================================================
submitButton.addEventListener('click', checkGuess);
inputElement.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
checkGuess();
}
});
newGameButton.addEventListener('click', startNewGame);
startNewGame();
</script>
</body>
</html>[/html]
