Текстовый квест — игра, где игрок читает описания локаций, выбирает, куда идти и что брать, исследует мир. В этом проекте создадим веб-версию: кнопки вместо ввода команд, сохранение в браузере — аналог проекта из курса Python.
Финальный проект объединяет: localStorage, события, создание элементов, массивы и объекты.
localStorage.Создать веб-страницу квеста, которая:
localStorage.rooms (описания, выходы, предметы), currentRoom, inventory.createElement, append для динамических кнопок.addEventListener для обработки кликов.localStorage и JSON.stringify / JSON.parse для сохранения.Создай script.js с объектом комнат:
const rooms = {
start: {
name: "Стартовая комната",
description: "Ты в небольшой комнате с каменными стенами. На столе лежит старый фонарик.",
exits: { север: "коридор" },
items: ["фонарик"]
},
коридор: {
name: "Коридор",
description: "Длинный тёмный коридор. Вдалеке виднеется свет.",
exits: {
Создай index.html с контейнерами для игры и инвентаря:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Текстовый квест</title>
</head>
<body>
<h1>Текстовый квест</h1>
<div id="game"></div>
<
В script.js — объект состояния и функция, которая рисует текущую комнату:
let state = {
currentRoom: "start",
inventory: []
};
function renderRoom() {
const room = rooms[state.currentRoom];
const container = document.getElementById("game");
container.innerHTML = "";
const title = document.
Функции перемещения и взятия предмета:
function move(direction) {
const room = rooms[state.currentRoom];
const nextRoom = room.exits[direction];
if (nextRoom) {
state.currentRoom = nextRoom;
renderRoom();
}
}
function takeItem(item) {
При загрузке страницы вызови renderRoom(). Добавь в конец script.js:
document.getElementById("saveBtn").onclick = saveGame;
document.getElementById("loadBtn").onclick = loadGame;
renderRoom();localStorageКнопки «Сохранить» и «Загрузить»:
function saveGame() {
localStorage.setItem("questSave", JSON.stringify(state));
alert("Игра сохранена!");
}
function loadGame() {
const saved = localStorage.getItem("questSave");
if (saved) {
state = JSON.parse(saved
В HTML добавь кнопки «Сохранить» и «Загрузить», привяжи их к saveGame и loadGame. Сохраняем объект state с полями currentRoom и inventory — этого достаточно для базовой работы. Для полного сохранения того, какие предметы уже взяты из комнат, потребуется дополнительная логика (см. домашнее задание).
Финальный проект курса: текстовый квест в браузере. Ты объединил HTML, CSS, JavaScript, DOM, события и localStorage. Курс завершён — впереди практика и углубление в веб-разработку.
localStorage при переходе/взятии предмета — после перезагрузки прогресс потеряется.exits, items) — код обратится к несуществующим полям и сломает логику.getItem перед разбором JSON — неверное значение приведёт к ошибке при загрузке состояния.Создай минимум 5 локаций с переходами между ними. Реализуй условие победы: например, найти определённый предмет в определённой комнате. При победе покажи сообщение «Победа!».
Реализуй кнопки «Сохранить» и «Загрузить». Сохраняй в localStorage состояние: currentRoom, inventory. При загрузке восстанавливай позицию игрока и инвентарь. Дополнительно: сохраняй, какие предметы уже взяты из комнат (чтобы при загрузке они не появлялись снова).
В некоторых комнатах размести врагов. Добавь кнопку «Атаковать», счётчик здоровья врага и игрока. Победа при здоровье врага ≤ 0.
Добавь минимум 2 предмета в игру. Реализуй возможность «использовать» предмет из инвентаря (например, фонарик освещает тёмную комнату, ключ открывает запертую дверь).
Реализуй загрузку описания мира из JSON: комнаты, выходы, предметы в одном объекте или файле. Парси данные при старте и создавай структуру rooms динамически. Это позволит расширять игру без изменения кода.