Текстовый Рогалик

body { margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; background: #23242a; color: #f2f2f2; min-height: 100vh; } #app { max-width: 900px; margin: 32px auto; background: #23242a; border: 4px solid #b71c1c; border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 0; overflow: hidden; } .header { background: #2d2e36; border-bottom: 2px solid #b71c1c; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; } .hero-texture { width: 64px; height: 64px; background: url('data:image/svg+xml;utf8,') no-repeat center/cover; border-radius: 50%; border: 2px solid #b71c1c; margin-right: 16px; } .tabs { display: flex; background: #23242a; border-bottom: 2px solid #b71c1c; } .tab { flex: 1; padding: 14px 0; text-align: center; cursor: pointer; background: #23242a; color: #f2f2f2; font-weight: 600; border-right: 1px solid #b71c1c; transition: background 0.2s; } .tab:last-child { border-right: none; } .tab.active { background: #2d2e36; color: #ff5252; } .content { padding: 32px; min-height: 400px; background: repeating-linear-gradient( 135deg, #23242a, #23242a 40px, #26272e 40px, #26272e 80px ); } .section-title { color: #ff5252; font-size: 1.5rem; margin-bottom: 18px; letter-spacing: 1px; } .equipment-list, .inventory-list, .skills-list, .enemies-list, .shop-list, .fortune-list, .potions-list, .misc-list { display: flex; flex-wrap: wrap; gap: 18px; } .item-card { background: #2d2e36; border: 2px solid #b71c1c; border-radius: 10px; padding: 14px 18px; min-width: 180px; max-width: 220px; flex: 1 1 180px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); margin-bottom: 8px; position: relative; } .item-card .item-rank { position: absolute; top: 8px; right: 12px; font-size: 0.9em; font-weight: bold; color: #ffd600; text-shadow: 0 1px 2px #000; } .item-card .item-name { font-weight: bold; font-size: 1.1em; margin-bottom: 6px; } .item-card .item-desc { font-size: 0.95em; color: #bdbdbd; margin-bottom: 6px; } .item-card .item-stats { font-size: 0.95em; color: #fff; } .item-card .item-type { font-size: 0.85em; color: #90caf9; margin-bottom: 4px; } .currency { color: #ffd600; font-weight: bold; margin-right: 18px; } .shards { color: #80cbc4; font-weight: bold; margin-right: 18px; } .btn { background: #b71c1c; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 1em; cursor: pointer; margin-top: 8px; transition: background 0.2s; } .btn:hover { background: #ff5252; } .dungeon-map { display: grid; grid-template-columns: repeat(8, 32px); grid-template-rows: repeat(8, 32px); gap: 2px; margin: 0 auto 24px auto; width: max-content; } .dungeon-cell { width: 32px; height: 32px; background: #23242a; border: 1px solid #b71c1c; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.1em; color: #fff; } .dungeon-cell.hero { background: #ff5252; color: #fff; font-weight: bold; } .dungeon-cell.loot { background: #ffd600; color: #23242a; } .dungeon-cell.enemy { background: #b71c1c; color: #fff; } .dungeon-cell.exit { background: #80cbc4; color: #23242a; } .dungeon-cell.shop { background: #90caf9; color: #23242a; } .fortune-wheel { margin: 24px auto; width: 220px; height: 220px; border-radius: 50%; border: 6px solid #b71c1c; background: conic-gradient( #ffd600 0% 10%, #ff5252 10% 20%, #80cbc4 20% 30%, #90caf9 30% 40%, #bdbdbd 40% 50%, #ffd600 50% 60%, #ff5252 60% 70%, #80cbc4 70% 80%, #90caf9 80% 90%, #bdbdbd 90% 100% ); display: flex; align-items: center; justify-content: center; position: relative; } .fortune-pointer { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 24px solid #ffd600; } .fortune-result { text-align: center; margin-top: 18px; font-size: 1.1em; color: #ffd600; font-weight: bold; } import { getRandomEquipment, equipmentColors, equipmentRanks } from './modules/equipment.js'; import { getRandomEnemy } from './modules/enemies.js'; import { getRandomSkill, allSkills } from './modules/skills.js'; import { getRandomPotion } from './modules/potions.js'; import { getRandomMisc } from './modules/misc.js'; import { renderDungeon, moveHero, getDungeonState } from './modules/dungeon.js'; import { renderShop, buyItem } from './modules/shop.js'; import { renderInventory, addToInventory, removeFromInventory } from './modules/inventory.js'; import { renderSkills, learnSkill } from './modules/skills-ui.js'; import { renderFortune, spinFortune } from './modules/fortune.js'; // --- State --- const state = { hero: { name: 'Герой', hp: 100, maxHp: 100, atk: 10, def: 5, luck: 5, gold: 100, shards: 10, inventory: [], equipment: [], skills: [], potions: [], misc: [], location: 'dungeon', position: { x: 0, y: 0 }, }, dungeon: getDungeonState(), shop: [], fortuneResult: null, enemies: [], log: [], }; // --- UI --- const tabs = [ { id: 'dungeon', label: 'Подземелье' }, { id: 'inventory', label: 'Инвентарь' }, { id: 'equipment', label: 'Снаряжение' }, { id: 'skills', label: 'Навыки' }, { id: 'shop', label: 'Магазин' }, { id: 'fortune', label: 'Колесо Фортуны' }, { id: 'potions', label: 'Зелья' }, { id: 'misc', label: 'Прочее' }, ]; let currentTab = 'dungeon'; function renderHeader() { return ` `; } function renderTabs() { return `

${tabs.map(tab => `

${tab.label}

`).join('')}

`; } function renderContent() { switch (currentTab) { case 'dungeon': return renderDungeon(state); case 'inventory': return renderInventory(state); case 'equipment': return renderEquipment(state); case 'skills': return renderSkills(state); case 'shop': return renderShop(state); case 'fortune': return renderFortune(state); case 'potions': return renderPotions(state); case 'misc': return renderMisc(state); default: return '

Пусто

'; } } function renderEquipment(state) { return `

Снаряжение

${state.hero.equipment.length === 0 ? '

Нет экипировки

' : ''} ${state.hero.equipment.map(item => `

${item.rank}

${item.type}

${item.name}

${item.desc}

${item.stats}

`).join('')}

`; } function renderPotions(state) { return `

Зелья

${state.hero.potions.length === 0 ? '

Нет зелий

' : ''} ${state.hero.potions.map(item => `

Зелье

${item.name}

${item.desc}

${item.stats}

`).join('')}

`; } function renderMisc(state) { return `

Прочее

${state.hero.misc.length === 0 ? '

Нет предметов

' : ''} ${state.hero.misc.map(item => `

${item.type}

${item.name}

${item.desc}

${item.stats}

`).join('')}

`; } function rerender() { document.getElementById('app').innerHTML = ` ${renderHeader()} ${renderTabs()}

${renderContent()}

`; // Tab switching document.querySelectorAll('.tab').forEach(tab => { tab.onclick = () => { currentTab = tab.dataset.tab; rerender(); }; }); // Dungeon movement if (currentTab === 'dungeon') { document.querySelectorAll('.dungeon-cell').forEach(cell => { cell.onclick = () => { const x = +cell.dataset.x, y = +cell.dataset.y; moveHero(state, x, y); rerender(); }; }); } // Shop buy if (currentTab === 'shop') { document.querySelectorAll('.btn.buy').forEach(btn => { btn.onclick = () => { const idx = +btn.dataset.idx; buyItem(state, idx); rerender(); }; }); } // Fortune spin if (currentTab === 'fortune') { const btn = document.querySelector('.btn.spin'); if (btn) { btn.onclick = () => { spinFortune(state); rerender(); }; } } // Skills learn if (currentTab === 'skills') { document.querySelectorAll('.btn.learn').forEach(btn => { btn.onclick = () => { const idx = +btn.dataset.idx; learnSkill(state, idx); rerender(); }; }); } } // --- Initial Shop Fill --- state.shop = Array.from({length: 5}, () => getRandomEquipment()); // --- Initial Inventory Fill --- state.hero.inventory = [ getRandomEquipment(), getRandomPotion(), getRandomMisc() ]; // --- Initial Equipment Fill --- state.hero.equipment = [ getRandomEquipment() ]; // --- Initial Potions & Misc Fill --- state.hero.potions = [ getRandomPotion() ]; state.hero.misc = [ getRandomMisc() ]; // --- Initial Skills Fill --- state.hero.skills = [ getRandomSkill() ]; rerender(); // Цвета и ранги export const equipmentColors = { common: '#bdbdbd', rare: '#90caf9', epic: '#80cbc4', legendary: '#ffd600', mythic: '#ff5252' }; export const equipmentRanks = [ 'D', 'C', 'B', 'A', 'S', 'SS', 'SSS', 'X' ]; // 200+ предметов (примерно, для генерации) const equipmentTypes = [ 'Меч', 'Топор', 'Кинжал', 'Посох', 'Щит', 'Лук', 'Арбалет', 'Копьё', 'Молот', 'Коса', 'Шлем', 'Доспех', 'Плащ', 'Сапоги', 'Перчатки', 'Кольцо', 'Амулет', 'Пояс', 'Браслет', 'Маска' ]; const equipmentAdjectives = [ 'Древний', 'Проклятый', 'Божественный', 'Теневой', 'Пылающий', 'Ледяной', 'Грозовой', 'Ядовитый', 'Сияющий', 'Кровавый', 'Звёздный', 'Мистический', 'Вечный', 'Сломанный', 'Скрытый', 'Легендарный', 'Могучий', 'Грозный', 'Счастливый', 'Потерянный' ]; const equipmentWorlds = [ 'Средневековье', 'Будущее', 'Древний Египет', 'Космос', 'Постапокалипсис', 'Магический мир', 'Киберпанк', 'Дикий Запад' ]; function random(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function randomInt(a, b) { return a + Math.floor(Math.random() * (b - a + 1)); } export function getRandomEquipment() { const type = random(equipmentTypes); const adj = random(equipmentAdjectives); const world = random(equipmentWorlds); const colorKeys = Object.keys(equipmentColors); const color = random(colorKeys); const rank = random(equipmentRanks); // Генерация статов const atk = randomInt(1, 30) + equipmentRanks.indexOf(rank) * 5; const def = randomInt(0, 20) + equipmentRanks.indexOf(rank) * 3; const luck = randomInt(0, 10) + (color === 'mythic' ? 10 : 0); return { name: `${adj} ${type}`, type: type, desc: `Из ${world}.`, color, rank, stats: `🗡️ ${atk} | 🛡️ ${def} | 🍀 ${luck}`, atk, def, luck, price: 20 + equipmentRanks.indexOf(rank) * 30 + (color === 'mythic' ? 200 : 0) }; } // Враги из разных миров и эпох const enemyWorlds = [ 'Средневековье', 'Будущее', 'Древний Египет', 'Космос', 'Постапокалипсис', 'Магический мир', 'Киберпанк', 'Дикий Запад' ]; const enemyTypes = [ 'Скелет', 'Робот', 'Мумия', 'Инопланетянин', 'Зомби', 'Демон', 'Киборг', 'Бандит', 'Дракон', 'Голем', 'Вампир', 'Волк' ]; function random(arr) { return arr[Math.floor(Math.random() * arr.length)]; } export function getRandomEnemy() { const type = random(enemyTypes); const world = random(enemyWorlds); const hp = 30 + Math.floor(Math.random() * 70); const atk = 5 + Math.floor(Math.random() * 15); const def = 2 + Math.floor(Math.random() * 8); return { name: `${type} (${world})`, desc: `Враг из мира "${world}".`, hp, atk, def }; } // Навыки export const allSkills = [ { name: 'Мощный удар', desc: 'Увеличивает урон на 20% на 1 бой.', cost: 3 }, { name: 'Щит веры', desc: 'Увеличивает защиту на 30% на 1 бой.', cost: 3 }, { name: 'Удача героя', desc: 'Повышает шанс выпадения редких предметов.', cost: 5 }, { name: 'Вампиризм', desc: 'Восстанавливает здоровье при атаке.', cost: 7 }, { name: 'Критический удар', desc: 'Шанс нанести двойной урон.', cost: 6 }, { name: 'Магический барьер', desc: 'Поглощает часть урона.', cost: 8 }, { name: 'Быстрые ноги', desc: 'Позволяет избежать ловушки.', cost: 4 }, { name: 'Огненный шар', desc: 'Атакует врага магией.', cost: 5 }, { name: 'Ледяная броня', desc: 'Снижает урон от врагов.', cost: 6 }, { name: 'Золотая жила', desc: 'Увеличивает добычу золота.', cost: 5 } ]; function random(arr) { return arr[Math.floor(Math.random() * arr.length)]; } export function getRandomSkill() { return random(allSkills); } import { allSkills } from './skills.js'; export function renderSkills(state) { return `

Навыки

${state.hero.skills.length === 0 ? '

Нет изученных навыков

' : ''} ${state.hero.skills.map(skill => `

Навык

${skill.name}

${skill.desc}

`).join('')}

Изучить новые навыки за осколки

${allSkills.map((skill, idx) => `

Навык

${skill.name}

${skill.desc}

Стоимость: 🔷 ${skill.cost}

`).join('')}

`; } export function learnSkill(state, idx) { const skill = allSkills[idx]; if (!state.hero.skills.find(s => s.name === skill.name) && state.hero.shards >= skill.cost) { state.hero.skills.push(skill); state.hero.shards -= skill.cost; } } // Зелья const potionTypes = [ { name: 'Зелье лечения', desc: 'Восстанавливает 30 HP.', stats: '❤️ +30' }, { name: 'Зелье силы', desc: 'Увеличивает атаку на 10 на 1 бой.', stats: '🗡️ +10' }, { name: 'Зелье защиты', desc: 'Увеличивает защиту на 8 на 1 бой.', stats: '🛡️ +8' }, { name: 'Зелье удачи', desc: 'Увеличивает удачу на 5 на 1 бой.', stats: '🍀 +5' }, { name: 'Зелье золота', desc: 'Дает 50 золота.', stats: '💰 +50' } ]; function random(arr) { return arr[Math.floor(Math.random() * arr.length)]; } export function getRandomPotion() { return random(potionTypes); } // Прочие предметы const miscTypes = [ { name: 'Карта подземелья', type: 'Карта', desc: 'Показывает расположение лута.', stats: '' }, { name: 'Ключ', type: 'Ключ', desc: 'Открывает сундуки.', stats: '' }, { name: 'Осколок удачи', type: 'Осколок', desc: 'Увеличивает шанс выпадения редких предметов.', stats: '🍀 +2' }, { name: 'Монета древности', type: 'Монета', desc: 'Можно продать в магазине.', stats: '💰 +100' } ]; function random(arr) { return arr[Math.floor(Math.random() * arr.length)]; } export function getRandomMisc() { return random(miscTypes); } import { getRandomEnemy } from './enemies.js'; // Генерация подземелья export function getDungeonState() { const size = 8; const map = []; for (let y = 0; y < size; y++) { const row = []; for (let x = 0; x < size; x++) { let cell = { type: 'empty' }; if ((x === 0 && y === 0) || (x === size-1 && y === size-1)) { cell.type = (x === 0 && y === 0) ? 'hero' : 'exit'; } else if (Math.random() < 0.12) { cell.type = 'enemy'; cell.enemy = getRandomEnemy(); } else if (Math.random() < 0.10) { cell.type = 'loot'; } else if (Math.random() < 0.07) { cell.type = 'shop'; } row.push(cell); } map.push(row); } return { map, size, hero: { x: 0, y: 0 } }; } export function renderDungeon(state) { const { map, size, hero } = state.dungeon; let html = `

Подземелье

`; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { let cell = map[y][x]; let classes = ['dungeon-cell']; let content = ''; if (hero.x === x && hero.y === y) { classes.push('hero'); content = '🧑'; } else if (cell.type === 'enemy') { classes.push('enemy'); content = '👾'; } else if (cell.type === 'loot') { classes.push('loot'); content = '💎'; } else if (cell.type === 'exit') { classes.push('exit'); content = '🚪'; } else if (cell.type === 'shop') { classes.push('shop'); content = '🏪'; } html += `

${content}

`; } } html += `

Кликните по клетке для перемещения.
🧑 — вы, 👾 — враг, 💎 — лут, 🚪 — выход, 🏪 — магазин.

`; return html; } export function moveHero(state, x, y) { const { map, hero } = state.dungeon; // Только соседние клетки if (Math.abs(hero.x - x) + Math.abs(hero.y - y) !== 1) return; hero.x = x; hero.y = y; const cell = map[y][x]; if (cell.type === 'enemy') { // Бой const enemy = cell.enemy; let heroPower = state.hero.atk + (Math.random() * state.hero.luck); let enemyPower = enemy.atk + (Math.random() * 5); if (heroPower > enemyPower) { state.hero.gold += 20; state.hero.shards += 2; } else { state.hero.hp -= Math.max(0, enemy.atk - state.hero.def); } map[y][x] = { type: 'empty' }; } else if (cell.type === 'loot') { // Лут if (Math.random() < 0.5) { state.hero.inventory.push(state.hero.inventory.length % 2 === 0 ? getRandomEnemy() : getRandomEnemy()); } else { state.hero.inventory.push(getRandomEnemy()); } state.hero.gold += 10; map[y][x] = { type: 'empty' }; } else if (cell.type === 'shop') { // Магазин state.shop = Array.from({length: 5}, () => getRandomEnemy()); } else if (cell.type === 'exit') { // Новый уровень state.dungeon = getDungeonState(); } } import { getRandomEquipment } from './equipment.js'; import { getRandomPotion } from './potions.js'; import { getRandomMisc } from './misc.js'; export function renderShop(state) { return `

Магазин

${state.shop.map((item, idx) => `

${item.type || 'Предмет'}

${item.name}

${item.desc || ''}

${item.stats || ''}

Цена: 💰 ${item.price || 50}

`).join('')}

`; } export function buyItem(state, idx) { const item = state.shop[idx]; const price = item.price || 50; if (state.hero.gold >= price) { state.hero.gold -= price; if (item.type === 'Зелье') state.hero.potions.push(item); else if (item.type === 'Осколок' || item.type === 'Карта' || item.type === 'Ключ' || item.type === 'Монета') state.hero.misc.push(item); else state.hero.equipment.push(item); state.shop.splice(idx, 1); } } export function renderInventory(state) { return `

Инвентарь

${state.hero.inventory.length === 0 ? '

Инвентарь пуст

' : ''} ${state.hero.inventory.map(item => `

${item.type || 'Предмет'}

${item.name}

${item.desc || ''}

${item.stats || ''}

`).join('')}

`; } export function addToInventory(state, item) { state.hero.inventory.push(item); } export function removeFromInventory(state, idx) { state.hero.inventory.splice(idx, 1); } import { getRandomEquipment, equipmentColors } from './equipment.js'; export function renderFortune(state) { return `

Колесо Фортуны

🎡

${state.fortuneResult ? state.fortuneResult : ''}

`; } export function spinFortune(state) { if (state.hero.gold < 10) { state.fortuneResult = 'Недостаточно золота!'; return; } state.hero.gold -= 10; const item = getRandomEquipment(); state.hero.inventory.push(item); state.fortuneResult = `Выпало: ${item.name} (${item.rank})!`; }