2025 / 01 / 14
오늘 수업시간에는 그동안 배운 조건문을 활용하여 선택지 게임을 만들었습니다.
각자가 스토리를 정하고 순서도도 그려보며 조건문에대해 정리하는 시간을 가졌습니다.
되도록이면 삼항 조건 연산자 사용을 권유하셨지만 저의 선택지 게임에는 선택지가 많아서 if문과 else if문을 중점적으로 사용하였습니다.
💌 순서도
코드가 실행되는 흐름을 시각적으로 표현한 다이어그램입니다.
어떻게 실행되고 조건이나 반복문 등에서 어떤 선택이 이루어지는지를 보여줍니다.
논리 구조를 명확히 이해하고 디버깅 및 코드 설계를 더 쉽게 할 수 있습니다.
순서도의 기본 요소
- 원(○) : 시작과 종료를 나타냅니다.
- 사각형(□) : 처리 과정(명령 실행)을 나타냅니다.
- 마름모(◇) : 조건을 나타냅니다.
- 화살표(→) : 흐름(순서)을 나타냅니다.
- 제가 만들 선택지 게임의 순서도를 만들어보았습니다.
💌 선택지 게임
- 이 문서에서는 간단한 선택형 모험 게임을 만드는 방법을 단계별로 정리합니다.
- HTML과 JavaScript를 활용하여 기본적인 상호작용을 구현합니다.
- 던전으로 모험을 떠나는 이야기로 선택지 게임을 제작하였습니다.
1. JavaScript 로직 작성
2.1 첫 번째 선택 - 왼쪽 또는 오른쪽
- prompt를 사용하여 사용자에게 갈림길에서 방향을 선택하도록 입력받습니다.
- toUpperCase를 통해 입력값을 대소문자 구분 없이 처리합니다.
- 잘못된 입력에 대해서는 alert로 알려줍니다.
let Q1;
do {
Q1 = prompt(
"어느 날 당신은 반복되는 생활에 지쳐 모험을 떠나기로 합니다. \n" +
"모험길에 올라선 당신의 앞에는 두가지의 갈림길이 있습니다. \n어느 쪽으로 가시겠습니까? [왼쪽 | 오른쪽]"
).toUpperCase();
if (Q1 !== "왼쪽" && Q1 !== "오른쪽") {
alert("잘못된 입력입니다. '왼쪽' 또는 '오른쪽'을 입력해주세요.");
}
} while (Q1 !== "왼쪽" && Q1 !== "오른쪽");2.2 왼쪽 선택 - 고대 유적지 탐험
- 사용자가 왼쪽을 선택하면 고대 유적지 탐험이 시작됩니다.
- 각 선택에 따라 추가적인 분기가 이어집니다.
if (Q1 === "왼쪽") {
alert("어두운 숲속을 지나면, 고대 유적이 있는 곳으로 이어집니다. \n그곳에는 고대의 유물이나 지식이 있을 수 있습니다.");
let Q2;
do {
Q2 = prompt(
"고대 유적지에 도달한 플레이어는 오래된 문을 발견하게 됩니다. \n" +
"문은 마법으로 봉인되어 있지만, 앞에 영롱한 구슬이 놓여 있습니다. \n" +
"구슬을 만지시겠습니까? \n[YES | NO]"
).toUpperCase();
if (Q2 !== "YES" && Q2 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q2 !== "YES" && Q2 !== "NO");
if (Q2 === "YES") {
alert("영롱한 구슬을 만진 당신! \n하늘이 돕는걸까요? 바로 앞에 문이 열립니다.");
let Q4;
do {
Q4 = prompt(
"방 안에는 고대의 유물이 있습니다. \n" +
"유물을 사용하시겠습니까? \n[YES | NO]"
).toUpperCase();
if (Q4 !== "YES" && Q4 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q4 !== "YES" && Q4 !== "NO");
if (Q4 === "YES") {
alert("유물을 사용해 강력한 마법을 사용한 당신! \n큰 대가를 치뤄야 합니다. 몬스터들이 몰려옵니다.");
} else if (Q4 === "NO") {
alert("유물을 사용하지 않고 안전하게 나왔습니다. \n던전에서 가져온 구슬을 팔고 부자가 되었습니다.");
}
} else if (Q2 === "NO") {
alert("구슬을 무시하고 문을 조사했지만, 열 방법이 없습니다.");
}
}2.3 오른쪽 선택 - 꽃밭과 요정
- 오른쪽을 선택하면 꽃밭과 요정을 만나는 이야기가 이어집니다.
- 요정과의 상호작용에 따라 결과가 달라집니다.
if (Q1 === "오른쪽") {
alert("넓고 화려한 꽃밭을 지나며, 숲 속의 생명체와 접할 가능성이 큽니다.");
let Q2;
do {
Q2 = prompt(
"꽃밭을 지나던 플레이어는 숲의 정령들을 만납니다. \n" +
"요정과 친구가 되시겠습니까? [YES | NO]"
).toUpperCase();
if (Q2 !== "YES" && Q2 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q2 !== "YES" && Q2 !== "NO");
if (Q2 === "YES") {
alert("요정들과 친구가 되어 도움을 받을 수 있습니다.");
} else if (Q2 === "NO") {
alert("요정을 거부한 당신! 요정들이 화가 나서 당신을 공격합니다.");
}
}2. 페이지 새로고침 기능
일부 선택에서는 모험을 다시 시작하기 위해 페이지를 새로고침합니다.
location.reload();
- 전체 이야기가 너무 길어서 일부분을 넘기고 작성하였으니 아래의 전체코드를 봐주세요!!
💌 전체 코드
안내창을 띄워서 진행하는 간단한 게임이라 따로 화면에 출력하진 않았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let Q1;
// 첫 번째 선택: 왼쪽 또는 오른쪽
do {
Q1 = prompt(
"어느 날 당신은 반복되는 생활에 지쳐 모험을 떠나기로 합니다. \n" +
"모험길에 올라선 당신의 앞에는 두가지의 갈림길이 있습니다. \n어느 쪽으로 가시겠습니까? [왼쪽 | 오른쪽]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q1 !== "왼쪽" && Q1 !== "오른쪽") {
alert("잘못된 입력입니다. '왼쪽' 또는 '오른쪽'을 입력해주세요.");
}
} while (Q1 !== "왼쪽" && Q1 !== "오른쪽");
if (Q1 === "왼쪽") {
alert("어두운 숲속을 지나면, 고대 유적이 있는 곳으로 이어집니다. \n" + "그곳에는 고대의 유물이나 지식이 있을 수 있습니다.");
let Q2;
// 두 번째 선택: 구슬을 만질지 말지
do {
Q2 = prompt(
"고대 유적지에 도달한 플레이어는 오래된 문을 발견하게 됩니다. \n" +
"문은 마법으로 봉인되어 있지만, 앞에 영롱한 구슬이 놓여 있습니다. \n" +
"구슬을 만지시겠습니까? \n" +
"[YES : 구슬을 손에 쥔다 | NO : 무시하고 문을 조사한다]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q2 !== "YES" && Q2 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q2 !== "YES" && Q2 !== "NO");
if (Q2 === "YES") {
alert("영롱한 구슬을 만진 당신! \n" + "하늘이 돕는걸까요? 바로 앞에 문이 열립니다.");
let Q4;
// 세 번째 선택: 유물 사용 여부
do {
Q4 = prompt(
"고대 유적지에서 구슬을 쥔 후, 문이 열리고 들어간 방에는 출구와 함께 고대의 유물이 있습니다. \n" +
"그 유물은 강력하지만 사용하기에 신중을 기해야 합니다. \n" +
"유물을 사용하시겠습니까? 가져가시겠습니까? \n" +
"[YES : 사용 | NO : 가져감]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q4 !== "YES" && Q4 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q4 !== "YES" && Q4 !== "NO");
if (Q4 === "YES") {
alert("유물을 사용해 강력한 마법을 사용한 당신! \n" + "큰 대가를 치뤄야 합니다. 큰 소리를 듣고 몬스터들이 몰려옵니다.");
alert("몬스터와의 싸움으로 구슬이 깨지게 됩니다. \n" + "유물 사용 후 출구로 나오게 된 당신. \n" + "별 다른 소득 없이 마을로 돌아갑니다.");
alert("이야기 끝");
} else if (Q4 === "NO") {
alert("유물을 사용하지 않고 안전하게 나왔습니다. \n" + "던전에서 가져온 구슬을 팔고 당신은 부자가 되었습니다.");
alert("이야기 끝");
}
} else if (Q2 === "NO") {
alert("구슬의 유혹을 무시하고 문을 조사한 당신! \n" + "문을 열 방도가 보이지 않습니다.");
alert("아무래도 구슬이 문을 여는 열쇠인 것 같습니다. \n" + "돌아가서 구슬을 가져와봅시다.");
let Q3;
// 세 번째 선택: 구슬을 다시 가져올지 여부
while (true) {
Q3 = prompt(
"구슬을 다시 가져오시겠습니까? \n [YES : 구슬을 가져간다 | NO : 돌아가지 않는다]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q3 === "YES") {
alert("구슬을 다시 가져와 문이 열립니다!");
break;
} else if (Q3 === "NO") {
alert("당신은 이 던전에서 나가지 못하게 됩니다.");
alert("이야기 끝");
break;
} else {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
}
if (Q3 === "YES") {
let Q4;
// 네 번째 선택: 유물 사용 여부
do {
Q4 = prompt(
"고대 유적지에서 구슬을 쥔 후, 문이 열리고 들어간 방에는 출구와 함께 고대의 유물이 있습니다. \n" +
"그 유물은 강력하지만 사용하기에 신중을 기해야 합니다. \n" +
"유물을 사용하시겠습니까? 가져가시겠습니까? \n" +
"[YES : 사용 | NO : 가져감]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q4 !== "YES" && Q4 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q4 !== "YES" && Q4 !== "NO");
if (Q4 === "YES") {
alert("유물을 사용해 강력한 마법을 사용한 당신! \n" + "큰 대가를 치뤄야 합니다. 큰 소리를 듣고 몬스터들이 몰려옵니다.");
alert("몬스터와의 싸움으로 구슬이 깨지게 됩니다. \n" + "유물 사용 후 출구로 나오게 된 당신. \n" + "별 다른 소득 없이 마을로 돌아갑니다.");
alert("이야기 끝");
} else if (Q4 === "NO") {
alert("유물을 사용하지 않고 안전하게 나왔습니다. \n" + "던전에서 가져온 구슬을 팔고 당신은 부자가 되었습니다.");
alert("이야기 끝");
}
}
}
} else if (Q1 === "오른쪽") {
alert("넓고 화려한 꽃밭을 지나며, 숲 속의 생명체와 접할 가능성이 큽니다. \n" + "생명체들과 친구가 될 수도 있고, 위험에 처할 수도 있습니다.");
let Q2;
// 두 번째 선택: 요정과 친구가 될지 말지
do {
Q2 = prompt(
"꽃밭을 지나던 플레이어는 숲의 정령들을 만납니다. \n" +
"그들은 고대의 숲을 보호하는 존재들입니다. \n" +
"요정과 친구가 되시겠습니까? [YES | NO]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q2 !== "YES" && Q2 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q2 !== "YES" && Q2 !== "NO");
if (Q2 === "YES") {
alert("요정들과 대화를 하여 친구가 되었습니다, \n" + "그들이 제공하는 도움을 받을 수 있습니다. \n" + "하지만 요정이 당신에게 티 타임을 요구합니다.");
let Q3;
// 세 번째 선택: 기억을 지울지 말지
do {
Q3 = prompt(
"요정들과 즐거운 티타임을 가진 당신! \n" +
"아까의 보상인걸까요? 요정들이 당신을 출구로 안내합니다. \n" +
"헤어지기 직전 요정이 당신에게 한가지 질문을 던집니다. \n" +
"모험을 하며 생긴 기억을 지우시겠습니까? ] \n" +
"[YES | NO]"
).toUpperCase(); // 대소문자 구분 없도록 처리
if (Q3 !== "YES" && Q3 !== "NO") {
alert("잘못된 입력입니다. 'YES' 또는 'NO'로 입력해주세요.");
}
} while (Q3 !== "YES" && Q3 !== "NO");
if (Q3 === "YES") {
alert("요정이 당신이 기억을 지워주었습니다. \n" + "하지만 요정과의 기억도 지우려는 당신의 태도에 요정이 속상해합니다. \n" + "속상한 요정은 당신에게 한 가지 장난을 칩니다.\n" + "당신은 모든 기억을 읽고 다시 두 가지의 갈림길 앞으로 이동합니다.");
location.reload(); // 페이지 새로 고침하여 초반 갈림길로 돌아가기
} else if (Q3 === "NO") {
alert("요정과의 기억도 소중하게 생각하는 당신! \n" + "모험을 하며 경험한 일들을 기억에서 지우지 않기로 합니다. \n" + "요정이 그 모습을 보고 기뻐합니다. \n" + "당신이 마음에 든 요정은 당신에게 마법 지팡이를 줍니다.");
alert("요정의 도움으로 숲에서 벗어나 마을로 돌아갑니다. \n" + "신기한 경험을 하고 마법 지팡이를 얻은 당신은 \n" + "즐거웠던 기억을 가지고 일상으로 돌아갑니다.");
alert("이야기 끝");
}
} else if (Q2 === "NO") {
alert("요정과 친구가 되는 것을 거부한 당신! \n" + "요정들이 화가 나서 당신을 공격합니다.");
alert("당신은 상대가 되지 않습니다.\n" + "요정들이 당신을 영원한 미로에 가뒀습니다.");
alert("모두와 친하게 지냅시다.");
alert("이야기 끝");
}
}
</script>
</body>
</html>💌 결과 확인
-
왼쪽 선택
-
오른쪽 선택 -> 마지막 기억 지우지 않음
-
오른쪽 선택 -> 마지막 기억을 지움
9일차 후기
- 간단한 선택지 게임을 제작하는 것이었지만 스토리를 정하는 것부터 힘들었습니다.
- 스토리 상황에 따른 선택지를 정하고 프로그래밍하는데 많은 시간이 걸렸습니다.
- 화면에 선택한 내용을 출력하면 좋았겠지만 생각보다 많아서.. 기회가 된다면 다음에..
- 최대한 내용을 정리하고 고민해서 만들었는 결과가 나름 괜찮은 것 같습니다.
- 다음에는 안내창을 띄워서 만드는게 아닌 HTML 파일 자체에서 버튼을 클릭하면 내용이 넘어가는 형식으로도 한 번 만들어봐야겠다고 생각했습니다. ૮₍´ ｡ ' ꒳ ' ｡`₎ა
૮꒰ ྀི〃´꒳`〃꒱ა