텍스트 RPG 순서도 그리기
<html lang="en">
<head>
<meta charset="UTF-8">
<title>텍스트 RPG</title>
</head>
<body>
<form id="start-screen">
<input id="name-input" placeholder="영웅 이름을 입력하세요!" />
<button id="start">시작</button>
</form>
<div id="hero-stat">
<span id="hero-name"></span>
<span id="hero-level"></span>
<span id="hero-hp"></span>
<span id="hero-xp"></span>
<span id="hero-att"></span>
</div>
<form id="game-menu" style="display: none;">
<div id="menu-1">1.모험</div>
<div id="menu-2">2.휴식</div>
<div id="menu-3">3.종료</div>
<input id="menu-input" />
<button id="menu-button">입력</button>
</form>
<form id="battle-menu" style="display: none;">
<div id="battle-1">1.공격</div>
<div id="battle-2">2.회복</div>
<div id="battle-3">3.도망</div>
<input id="battle-input" />
<button id="battle-button">입력</button>
</form>
<div id="message"></div>
<div id="monster-stat">
<span id="monster-name"></span>
<span id="monster-hp"></span>
<span id="monster-att"></span>
</div>
const $startScreen = document.querySelector('#start-screen');
const $gameMenu = document.querySelector('#game-menu');
const $battleMenu = document.querySelector('#battle-menu');
const $heroName = document.querySelector('#hero-name');
$startScreen.addEventListener('submit', (event) => {
event.preventDefault();
const name = event.target['name-input'].value;
$startScreen.style.display = 'none';
$gameMenu.style.display = 'block';
$heroName.textContent = name;
});
주인공이나 몬스터 만들기
const $startScreen = document.querySelector('#start-screen');
const $gameMenu = document.querySelector('#game-menu');
const $battleMenu = document.querySelector('#battle-menu');
const $heroName = document.querySelector('#hero-name');
const $heroLevel = document.querySelector('#hero-level');
const $heroHp = document.querySelector('#hero-hp');
const $heroXp = document.querySelector('#hero-xp');
const $heroAtt = document.querySelector('#hero-att');
const $monsterName = document.querySelector('#monster-name');
const $monsterHp = document.querySelector('#monster-hp');
const $monsterAtt = document.querySelector('#monster-att');
const $message = document.querySelector('#message');
const hero = {
name: '',
lev: 1,
maxHp: 100,
hp: 100,
xp: 0,
att: 10,
};
let monster = null;
const mosterList = [
{ name: '슬라임', hp: 25, att: 10, xp: 10 },
{ name: '스켈레톤', hp: 50, att: 15, xp: 20 },
{ name: '마왕', hp: 150, att: 35, xp: 50 },
];
$startScreen.addEventListener('submit', (event) => {
event.preventDefault();
const name = event.target['name-input'].value;
$startScreen.style.display = 'none';
$gameMenu.style.display = 'block';
$heroName.textContent = name;
$heroLevel.textContent = '$[hero.lev}Lev';
$heroHp.textContent = 'HP: ${hero.hp}/${hero.maxHp}';
$heroXp.textContent = 'XP: ${hero.xp}/${15 * hero.lev}';
$heroAtt.textContent = 'Att: ${hero.att}';
hero.name = name;
});
$battleMenu.addEventListener('submit', (event) => {
const input = event.target['battle-input'].value;
if (input === '1') {
} else if () {
} else if () {
}
}
깊은 복사와 얕은 복사
$gameMenu.addEventListener('submit', (event) => {
event.preventDefault();
const input = event.target['menu-input'].value;
if (input === '1') {
$gameMenu.style.display = 'none';
$battleMenu.style.display = 'block';
monster = JSON.parse(
JSON.stringy(monsterList[Math.floor(Math.random() * monsterList.length)])
);
monster.maxHp = monster.hp;
$monsterName.textContent = monster.name;
$monsterHp.textContent = 'HP: ${monster.hp} / ${monster.maxHp}';
$monsterAtt.textContent = 'Att: ${monster.att}';
const monster1 = JSON.parse(JSON.strigyfy(monsterList[0]));
const monster2 = monsterList[0];
monster1.name = '새 몬스터';
console.log(monsterList[0].name);
monster2.name = '새 몬스터';
console.log(monsterList[0].name);
console.log(monsterList[0] === monster1);
console.log(monsterList[0] === monster2);
} else if (input === '2') {
} else if (input === '3') {
}
});
