<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" contect="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 몬스터 잡기 게임 </title>
</head>
<body>
<div id="container"></div>
<script>
let monsterHP = 100; // 몬스터의 HP는 100으로 시작
const container = document.getElementById("container")
const h1 = document.createElement("h1")
h1.textContent = "몬스터 잡기 게임을 시작합니다!"
container.appendChild(h1)
let attackDamage = parseInt(prompt("1회 공격 시 데미지는 얼마인가요? (양의정수)"))
let attackCount = 0
if (attackDamage > 0){
while (monsterHP > 0) {
monsterHP -= attackDamage;
attackCount += 1
if (monsterHP < 0) {
monsterHP = 0;
}
const p = document.createElement("p")
p.textContent = `몬스터를 ${attackCount}회 공격했다!`
container.append(p)
const strong = document.createElement("strong")
strong.textContent = `몬스터의 남은 HP는 ${monsterHP} 입니다`
container.append(strong)
}
const h2 = document.createElement("h2")
h2.textContent = "몬스터 잡기 완료 ! 수고하셨습니다 !!"
h2.style.color = "orange"
h2.title = "게임을 다시 시작하고 싶으면 새로고침을 하세요"
container.appendChild(h2)
}else{
alert("데미지를 잘못 입력하여 게임을 취소합니다!")
}
</script>
</body>
</html>
CSS 애니메이션을 추가하고, 게임의 기능을 더욱 향상시킨 최종 코드를 작성해드릴게요. 이 코드는 몬스터 잡기 게임에 여러 가지 기능을 추가하고, 시각적으로도 더 흥미롭게 보이도록 애니메이션을 포함합니다.
최종 코드 (애니메이션, 새로운 기능 포함)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>몬스터 잡기 게임</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f3f3f3;
text-align: center;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#container {
background-color: #fff;
border-radius: 10px;
padding: 20px;
max-width: 600px;
width: 100%;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #2c3e50;
}
h2 {
color: #e67e22;
animation: fadeIn 1s ease-out;
}
p {
font-size: 1.2rem;
color: #34495e;
}
strong {
display: block;
margin-top: 10px;
font-size: 1.3rem;
color: #16a085;
animation: hpDecrease 0.5s ease-out;
}
button {
background-color: #e74c3c;
color: white;
font-size: 1rem;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #c0392b;
}
#monster {
width: 150px;
height: 150px;
background-color: #2c3e50;
border-radius: 50%;
margin: 20px auto;
animation: monsterAnimation 1s ease-in-out infinite;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hpDecrease {
0% {
color: #16a085;
}
50% {
color: #f39c12;
}
100% {
color: #e74c3c;
}
}
@keyframes monsterAnimation {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div id="container">
<h1>몬스터 잡기 게임을 시작합니다!</h1>
<div id="monster"></div>
<p>게임이 시작되면, 데미지를 입력하여 몬스터를 잡아보세요!</p>
<script>
let monsterHP = 100; // 몬스터의 HP는 100으로 시작
const container = document.getElementById("container");
const monsterDiv = document.getElementById("monster");
let attackDamage = parseInt(prompt("1회 공격 시 데미지는 얼마인가요? (양의정수)"));
let attackCount = 0;
// 몬스터가 죽었을 때 애니메이션 추가
function monsterDeathAnimation() {
monsterDiv.style.animation = "monsterAnimation 0.5s ease-out";
monsterDiv.style.backgroundColor = "#e74c3c"; // 빨간색으로 변함
monsterDiv.style.transform = "scale(0.7)";
}
// 게임 시작
if (attackDamage > 0) {
while (monsterHP > 0) {
monsterHP -= attackDamage;
attackCount += 1;
// HP가 0보다 작으면 강제로 0으로 설정
if (monsterHP < 0) {
monsterHP = 0;
}
const p = document.createElement("p");
p.textContent = `몬스터를 ${attackCount}회 공격했다!`;
container.append(p);
const strong = document.createElement("strong");
strong.textContent = `몬스터의 남은 HP는 ${monsterHP} 입니다`;
container.append(strong);
if (monsterHP === 0) {
monsterDeathAnimation();
break; // 게임 종료
}
}
const h2 = document.createElement("h2");
h2.textContent = "몬스터 잡기 완료! 수고하셨습니다!!";
container.appendChild(h2);
const button = document.createElement("button");
button.textContent = "게임 다시 시작";
button.onclick = function() {
location.reload(); // 새로 고침
};
container.appendChild(button);
} else {
alert("데미지를 잘못 입력하여 게임을 취소합니다!");
}
</script>
</div>
</body>
</html>기능 추가 및 설명:
- 몬스터 애니메이션:
- monsterAnimation: 몬스터가 공격을 받으면서 크기가 커졌다가 작아지는 애니메이션을 추가했습니다. 몬스터의 크기가 확대되었다가 다시 돌아오는 효과로, 게임에 동적인 느낌을 줍니다.
- monsterDeathAnimation: 몬스터가 죽었을 때 애니메이션을 추가했습니다. 죽으면 몬스터의 배경색이 빨간색으로 변하고 크기가 줄어들며, "게임 완료" 메시지가 나타납니다.
- CSS 애니메이션:
- fadeIn: 게임 종료 메시지인 h2가 나타날 때 점차적으로 투명도(opacity)가 변화하여 부드럽게 나타납니다.
- hpDecrease: 몬스터의 HP가 감소할 때 글자 색이 변하는 애니메이션을 추가했습니다. HP가 줄어들수록 색상이 변화하여 시각적인 효과를 줍니다.
- 새로운 기능:
- 게임 다시 시작: 게임이 끝난 후 "게임 다시 시작" 버튼을 추가했습니다. 버튼을 클릭하면 페이지가 새로 고침되어 게임을 다시 시작할 수 있습니다.
- 몬스터의 시각적 표시: #monster 요소를 추가하여 게임 내에서 몬스터의 상태를 시각적으로 표현합니다. 애니메이션을 통해 몬스터가 공격을 받는 모습을 볼 수 있습니다.
- 기타 스타일링:
- 게임의 배경, 텍스트, 버튼 등은 스타일링을 통해 깔끔하고 보기 좋은 레이아웃을 제공합니다.
결과물:
- 게임 진행: 사용자 입력에 따라 공격을 진행하며, 몬스터의 HP가 감소합니다. HP가 0이 되면 "몬스터 잡기 완료!" 메시지와 함께 게임이 종료됩니다.
- 애니메이션: 몬스터가 공격을 받으면 애니메이션이 적용되고, 게임 종료 시 몬스터가 죽는 애니메이션이 실행됩니다.
- 게임 재시작: 버튼을 통해 게임을 새로 시작할 수 있습니다.
이 코드는 게임의 재미를 증가시키고, 시각적 효과와 애니메이션으로 더욱 몰입감 있는 경험을 제공합니다!