Человек-симулятор: Мир

Комната

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #222; color: #eee; height: 100vh; display: flex; justify-content: center; align-items: center; } .game-container { width: 900px; height: 650px; background: #333; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); display: flex; overflow: hidden; } .location-view { width: 60%; height: 100%; position: relative; overflow: hidden; } .location-image { width: 100%; height: 100%; background-size: cover; background-position: center; transition: all 0.5s ease; } .interactive-items { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .interactive-item { position: absolute; width: 50px; height: 50px; background: rgba(255,255,255,0.2); border: 2px dashed rgba(255,255,255,0.3); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; font-size: 24px; } .interactive-item:hover { background: rgba(255,255,255,0.3); transform: scale(1.1); } .character { position: absolute; width: 80px; height: 80px; background: #ffdbac; border-radius: 50%; bottom: 50px; left: 50%; transform: translateX(-50%); transition: all 0.5s ease; } .face { position: absolute; width: 100%; height: 100%; } .eyes { display: flex; justify-content: space-around; padding-top: 25px; } .eye { width: 12px; height: 18px; background: #333; border-radius: 50%; position: relative; } .eye::after { content: ''; position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; top: 3px; left: 2px; } .mouth { width: 24px; height: 8px; background: #ff6b6b; border-radius: 0 0 12px 12px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease; } .ui-container { width: 40%; height: 100%; display: flex; flex-direction: column; background: #444; } .location-name { padding: 15px; font-size: 20px; font-weight: bold; text-align: center; background: #555; } .inventory { min-height: 80px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; background: #3a3a3a; border-bottom: 1px solid #555; } .inventory-item { width: 40px; height: 40px; background: #666; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; position: relative; } .inventory-item:hover::after { content: attr(data-name); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #333; padding: 3px 8px; border-radius: 5px; font-size: 12px; white-space: nowrap; } .dialogue-container { flex: 1; display: flex; flex-direction: column; padding: 15px; } .dialogue { flex: 1; overflow-y: auto; margin-bottom: 15px; background: #3a3a3a; border-radius: 8px; padding: 10px; } .message { margin-bottom: 8px; padding: 8px 12px; border-radius: 15px; max-width: 80%; word-wrap: break-word; font-size: 14px; } .user-message { background: #4a6fa5; color: white; margin-left: auto; border-bottom-right-radius: 5px; } .simulator-message { background: #555; margin-right: auto; border-bottom-left-radius: 5px; } .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .action-btn { padding: 8px 12px; background: #5a5a5a; color: white; border: none; border-radius: 5px; font-size: 13px; cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: #6a6a6a; } #inputForm { display: flex; gap: 8px; } #userInput { flex: 1; padding: 10px 12px; background: #555; border: 1px solid #666; border-radius: 5px; color: white; font-size: 14px; } #userInput::placeholder { color: #aaa; } button { padding: 10px 15px; background: #4a6fa5; color: white; border: none; border-radius: 5px; font-size: 14px; cursor: pointer; transition: all 0.2s; } button:hover { background: #5b7fb6; } /* Анимации */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes talk { 0%, 100% { height: 8px; } 50% { height: 4px; } } .character.talking .mouth { animation: talk 0.3s infinite; } .character.happy .mouth { height: 12px; border-radius: 50%; background: #4caf50; } .character.sad .mouth { height: 4px; border-radius: 12px 12px 0 0; background: #f44336; } // Основные переменные const locationView = document.getElementById('locationView'); const locationImage = document.getElementById('locationImage'); const locationName = document.getElementById('locationName'); const interactiveItems = document.getElementById('interactiveItems'); const character = document.getElementById('character'); const inventory = document.getElementById('inventory'); const dialogue = document.getElementById('dialogue'); const actions = document.getElementById('actions'); const inputForm = document.getElementById('inputForm'); const userInput = document.getElementById('userInput'); // Состояние игры let gameState = { currentLocation: 'room', inventory: [], mood: 50, knownLocations: ['room'], visitedLocations: ['room'], characterPosition: 'center', time: 'day' }; // Локации const locations = { room: { name: "Комната", description: "Твоя уютная комната с кроватью, столом и окном.", image: "linear-gradient(135deg, #8e8e8e 0%, #5a5a5a 100%)", items: [ { id: 'bed', name: 'Кровать', emoji: '🛏️', x: 20, y: 60, actions: ['sleep', 'sit'] }, { id: 'desk', name: 'Стол', emoji: '🪑', x: 70, y: 50, actions: ['work', 'examine'] }, { id: 'window', name: 'Окно', emoji: '🪟', x: 80, y: 30, actions: ['look_out', 'open'] }, { id: 'door', name: 'Дверь', emoji: '🚪', x: 50, y: 70, actions: ['go_out'] } ], connections: ['corridor'] }, corridor: { name: "Коридор", description: "Длинный коридор с несколькими дверями.", image: "linear-gradient(135deg, #a1887f 0%, #6d4c41 100%)", items: [ { id: 'door_room', name: 'Дверь в комнату', emoji: '🚪', x: 20, y: 60, actions: ['enter'] }, { id: 'door_kitchen', name: 'Дверь на кухню', emoji: '🚪', x: 70, y: 50, actions: ['enter'] }, { id: 'door_bathroom', name: 'Дверь в ванную', emoji: '🚪', x: 30, y: 30, actions: ['enter'] }, { id: 'mirror', name: 'Зеркало', emoji: '🪞', x: 80, y: 30, actions: ['look'] } ], connections: ['room', 'kitchen', 'bathroom'] }, kitchen: { name: "Кухня", description: "Уютная кухня с холодильником и плитой.", image: "linear-gradient(135deg, #ffcc80 0%, #ffa726 100%)", items: [ { id: 'fridge', name: 'Холодильник', emoji: '🧊', x: 20, y: 50, actions: ['open', 'eat'] }, { id: 'stove', name: 'Плита', emoji: '🔥', x: 70, y: 50, actions: ['cook', 'examine'] }, { id: 'table', name: 'Стол', emoji: '🪑', x: 50, y: 70, actions: ['sit', 'eat'] }, { id: 'door', name: 'Дверь', emoji: '🚪', x: 50, y: 30, actions: ['go_out'] } ], connections: ['corridor'] }, bathroom: { name: "Ванная", description: "Чистая ванная комната с раковиной и душем.", image: "linear-gradient(135deg, #80deea 0%, #4dd0e1 100%)", items: [ { id: 'sink', name: 'Раковина', emoji: '🚰', x: 30, y: 50, actions: ['wash', 'drink'] }, { id: 'shower', name: 'Душ', emoji: '🚿', x: 70, y: 50, actions: ['shower', 'examine'] }, { id: 'mirror', name: 'Зеркало', emoji: '🪞', x: 50, y: 30, actions: ['look'] }, { id: 'door', name: 'Дверь', emoji: '🚪', x: 50, y: 70, actions: ['go_out'] } ], connections: ['corridor'] } }; // Предметы const items = { key: { name: "Ключ", emoji: "🔑", description: "Старый ключ от входной двери.", usableIn: ['corridor'], action: 'unlock' }, book: { name: "Книга", emoji: "📖", description: "Интересная книга о приключениях.", usableIn: ['room'], action: 'read' }, apple: { name: "Яблоко", emoji: "🍎", description: "Сочное красное яблоко.", usableIn: ['kitchen', 'room'], action: 'eat' } }; // Действия const actionResponses = { sleep: [ "Ты лег спать и хорошо отдохнул.", "После сна ты чувствуешь себя бодрее.", "Ты поспал пару часов." ], sit: [ "Ты присел отдохнуть.", "Удобно устроившись, ты наблюдаешь за происходящим.", "Ты сел и задумался." ], work: [ "Ты поработал за столом.", "Сосредоточившись, ты выполнил часть работы.", "Работа продвигается медленно, но верно." ], examine: [ "Ты внимательно осмотрел предмет.", "Ничего необычного ты не заметил.", "Осмотр не принёс новых открытий." ], look_out: [ "Ты выглянул в окно. На улице прекрасная погода!", "За окном ничего интересного.", "Ты увидел, как сосед выгуливает собаку." ], open: [ "Ты открыл предмет.", "Скрипя, предмет открылся.", "Теперь ты можешь заглянуть внутрь." ], go_out: [ "Ты вышел из комнаты.", "Покидая помещение, ты оглянулся.", "Ты решил выйти." ], enter: [ "Ты вошёл в помещение.", "Переступив порог, ты огляделся.", "Ты зашёл внутрь." ], look: [ "Ты посмотрел в зеркало. Ты выглядишь прекрасно!", "В отражении ты увидел себя.", "Зеркало показывает твоё отражение." ], cook: [ "Ты приготовил простой обед.", "Аромат готовящейся еды наполнил кухню.", "Ты неплохо готовишь!" ], eat: [ "Ты с удовольствием поел.", "Еда была вкусной.", "Ты утолил голод." ], wash: [ "Ты умылся и почувствовал себя свежее.", "Холодная вода освежила тебя.", "Ты привёл себя в порядок." ], drink: [ "Ты попил воды.", "Глоток воды утолил жажду.", "Ты напился." ], shower: [ "Ты принял душ.", "Тёплая вода смыла усталость.", "После душа ты чувствуешь себя лучше." ], unlock: [ "Ты открыл дверь ключом.", "Замок щёлкнул, и дверь открылась.", "Ключ подошёл идеально." ], read: [ "Ты почитал книгу. Очень интересно!", "Чтение увлекло тебя.", "Ты узнал что-то новое из книги." ] }; // Инициализация игры function initGame() { updateLocation(gameState.currentLocation); updateInventory(); updateMood(); addMessage("Ты проснулся в своей комнате. Что будешь делать?", "simulator"); renderActions(); } // Обновление локации function updateLocation(locationId) { if (!locations[locationId]) return; gameState.currentLocation = locationId; const location = locations[locationId]; // Обновляем визуальное представление locationImage.style.background = location.image; locationName.textContent = location.name; // Добавляем интерактивные предметы interactiveItems.innerHTML = ''; location.items.forEach(item => { const itemElement = document.createElement('div'); itemElement.className = 'interactive-item'; itemElement.style.left = `${item.x}%`; itemElement.style.top = `${item.y}%`; itemElement.textContent = item.emoji; itemElement.title = item.name; itemElement.addEventListener('click', () => { showItemActions(item); }); interactiveItems.appendChild(itemElement); }); // Если локация новая - добавляем сообщение if (!gameState.visitedLocations.includes(locationId)) { gameState.visitedLocations.push(locationId); addMessage(location.description, "simulator"); } // Обновляем доступные действия renderActions(); } // Показать действия для предмета function showItemActions(item) { actions.innerHTML = ''; item.actions.forEach(action => { const btn = document.createElement('button'); btn.className = 'action-btn'; btn.textContent = getActionName(action); btn.addEventListener('click', () => { performAction(item, action); }); actions.appendChild(btn); }); // Проверяем, можно ли использовать предметы инвентаря gameState.inventory.forEach(invItem => { const itemData = items[invItem]; if (itemData.usableIn.includes(gameState.currentLocation) && itemData.action) { const btn = document.createElement('button'); btn.className = 'action-btn'; btn.textContent = `Использовать ${itemData.emoji} ${itemData.name}`; btn.addEventListener('click', () => { useInventoryItem(invItem, item.id); }); actions.appendChild(btn); } }); } // Использовать предмет из инвентаря function useInventoryItem(itemId, targetId) { const item = items[itemId]; const target = locations[gameState.currentLocation].items.find(i => i.id === targetId); if (item && target) { const response = randomResponse(actionResponses[item.action] || ["Ты использовал предмет."]); addMessage(response, "simulator"); updateMood(randomNumber(-5, 10)); // Специальные эффекты if (itemId === 'key' && targetId === 'door') { addMessage("Теперь ты можешь выйти на улицу!", "simulator"); } } } // Выполнить действие function performAction(item, action) { const response = randomResponse(actionResponses[action] || ["Ты выполнил действие."]); addMessage(`${item.name}: ${response}`, "simulator"); updateMood(randomNumber(-5, 10)); // Специальные обработки действий if (action === 'go_out' || action === 'enter') { const connections = locations[gameState.currentLocation].connections; if (connections.length > 0) { const newLocation = connections[0]; // Упрощённо - всегда первая связь updateLocation(newLocation); } } // Случайное добавление предмета в инвентарь if (Math.random() < 0.1 && gameState.inventory.length < 5) { const newItem = randomItem(); if (newItem && !gameState.inventory.includes(newItem)) { gameState.inventory.push(newItem); addMessage(`Ты нашёл ${items[newItem].emoji} ${items[newItem].name}!`, "simulator"); updateInventory(); } } renderActions(); } // Обновление инвентаря function updateInventory() { inventory.innerHTML = ''; gameState.inventory.forEach(itemId => { const item = items[itemId]; if (item) { const itemElement = document.createElement('div'); itemElement.className = 'inventory-item'; itemElement.textContent = item.emoji; itemElement.title = item.name; itemElement.dataset.name = item.name; itemElement.addEventListener('click', () => { addMessage(`У тебя есть ${item.name}. ${item.description}`, "simulator"); }); inventory.appendChild(itemElement); } }); } // Обновление настроения function updateMood(value) { if (value) { gameState.mood = Math.max(0, Math.min(100, gameState.mood + value)); } // Обновляем эмоции персонажа character.className = 'character'; if (gameState.mood >= 70) { character.classList.add('happy'); } else if (gameState.mood <= 30) { character.classList.add('sad'); } } // Добавление сообщения function addMessage(text, sender) { const message = document.createElement('div'); message.className = `message ${sender}-message`; message.textContent = text; dialogue.appendChild(message); dialogue.scrollTop = dialogue.scrollHeight; // Анимация "говорения" if (sender === 'simulator') { character.classList.add('talking'); setTimeout(() => { character.classList.remove('talking'); }, Math.min(2000, text.length * 50)); } } // Рендер общих действий function renderActions() { actions.innerHTML = ''; const commonActions = [ { name: "Осмотреться", action: "look_around" }, { name: "Проверить инвентарь", action: "check_inventory" }, { name: "Изменить время", action: "change_time" }, { name: "Поговорить", action: "talk" } ]; commonActions.forEach(act => { const btn = document.createElement('button'); btn.className = 'action-btn'; btn.textContent = act.name; btn.addEventListener('click', () => performCommonAction(act.action)); actions.appendChild(btn); }); } // Выполнить общее действие function performCommonAction(action) { switch (action) { case 'look_around': addMessage(locations[gameState.currentLocation].description, "simulator"); break; case 'check_inventory': if (gameState.inventory.length > 0) { addMessage("Ты проверил инвентарь:", "simulator"); gameState.inventory.forEach(itemId => { const item = items[itemId]; addMessage(`${item.emoji} ${item.name}: ${item.description}`, "simulator"); }); } else { addMessage("Твой инвентарь пуст.", "simulator"); } break; case 'change_time': gameState.time = gameState.time === 'day' ? 'night' : 'day'; addMessage(`Теперь ${gameState.time === 'day' ? 'день' : 'ночь'}.`, "simulator"); break; case 'talk': addMessage(randomResponse([ "Сегодня прекрасный день!", "Мне нравится это место.", "Что будем делать?", "Интересно, что здесь можно найти...", "Я готов к приключениям!" ]), "simulator"); break; } updateMood(randomNumber(-5, 5)); } // Обработка текстового ввода function processInput(text) { if (!text.trim()) return; addMessage(text, "user"); // Проверка на команды перемещения const moveCommands = ['идти', 'перейти', 'войти', 'зайти', 'выйти']; if (moveCommands.some(cmd => text.toLowerCase().includes(cmd))) { const currentLoc = locations[gameState.currentLocation]; if (currentLoc.connections.length > 0) { const newLocation = currentLoc.connections[0]; // Упрощённо updateLocation(newLocation); } else { addMessage("Нельзя никуда пойти отсюда.", "simulator"); } return; } // Проверка на осмотр if (text.toLowerCase().includes('осмотреться')) { performCommonAction('look_around'); return; } // Проверка на инвентарь if (text.toLowerCase().includes('инвентарь')) { performCommonAction('check_inventory'); return; } // Общий ответ setTimeout(() => { addMessage(getRandomResponse(text), "simulator"); }, 800 + Math.random() * 1000); } // Получить случайный ответ function getRandomResponse(input) { const text = input.toLowerCase(); if (text.includes('привет')) { return randomResponse([ "Привет! Как твои дела?", "Здравствуй! Что будем делать?", "Приветствую тебя в этом месте!" ]); } if (text.includes('пока') || text.includes('до свидания')) { return randomResponse([ "До встречи!", "Пока! Возвращайся скорее!", "Уже уходишь? Ну ладно..." ]); } if (text.includes('спасибо')) { updateMood(10); return randomResponse([ "Пожалуйста!", "Не за что!", "Всегда рад помочь!" ]); } if (text.includes('что делать') || text.includes('что можно')) { return "Попробуй осмотреться или взаимодействовать с предметами вокруг."; } if (text.includes('где я')) { return `Ты находишься в ${locations[gameState.currentLocation].name}. ${locations[gameState.currentLocation].description}`; } return randomResponse([ "Интересно...", "Я не совсем понял.", "Может, сделаем что-то ещё?", "Попробуй что-нибудь другое.", "Хм, хороший вопрос.", "Я бы тоже хотел это знать.", "Давай попробуем разобраться вместе." ]); } // Вспомогательные функции function randomResponse(responses) { return responses[Math.floor(Math.random() * responses.length)]; } function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function randomItem() { const itemKeys = Object.keys(items); return itemKeys[Math.floor(Math.random() * itemKeys.length)]; } function getActionName(action) { const names = { sleep: "Спать", sit: "Сидеть", work: "Работать", examine: "Осмотреть", look_out: "Посмотреть в окно", open: "Открыть", go_out: "Выйти", enter: "Войти", look: "Посмотреть", cook: "Готовить", eat: "Поесть", wash: "Умыться", drink: "Попить", shower: "Принять душ", unlock: "Отпереть", read: "Читать" }; return names[action] || action; } // Инициализация игры при загрузке window.onload = initGame; // Обработчик формы inputForm.addEventListener('submit', (e) => { e.preventDefault(); const text = userInput.value.trim(); userInput.value = ''; processInput(text); });