Svelte로 행맨 게임을 만드는 방법
스벨트로 만드는 행맨 게임
스벨트(Svelte)는 개발자들의 마음을 사로잡는 혁신적인 자바스크립트 프레임워크입니다. 단순한 문법 덕분에 자바스크립트 프레임워크 세계에 처음 발을 들이려는 초보자에게 매우 적합합니다. 배우는 가장 좋은 방법 중 하나는 직접 만들어보는 것입니다. 그래서 이 가이드에서는 스벨트가 제공하는 기능을 활용하여 간단한 행맨 게임을 만드는 과정을 알아볼 것입니다.
행맨 게임의 작동 원리
행맨은 일반적으로 두 사람이 하는 단어 추측 게임입니다. 한 사람이 단어를 생각하고, 다른 사람이 그 단어를 글자 단위로 맞춰야 합니다. 추측하는 사람은 정해진 횟수 안에 단어를 알아내는 것을 목표로 합니다.
게임이 시작되면 단어를 생각하는 사람은 비밀 단어를 선택합니다. 이 단어는 보통 대시 기호로 추측하는 사람에게 표시됩니다. 추측하는 사람이 틀린 글자를 말할 때마다 교수형 집행인 그림이 머리부터 팔, 다리 순서로 그려집니다.
스틱맨 그림이 완성되기 전에 단어의 모든 글자를 맞추면 추측하는 사람이 승리합니다. 행맨 게임은 어휘력, 추론 능력, 추측 능력을 기르는 데 매우 효과적입니다.
개발 환경 구축
이 프로젝트에 사용된 코드는 GitHub 저장소에서 확인할 수 있으며, MIT 라이선스에 따라 자유롭게 사용할 수 있습니다. 프로젝트의 라이브 데모는 여기에서 볼 수 있습니다.
스벨트 프로젝트를 시작하려면 Vite.js를 사용하여 프로젝트를 생성하는 것이 좋습니다. Vite를 사용하려면 시스템에 NPM(Node Package Manager)과 Node.js가 설치되어 있어야 합니다. Yarn과 같은 다른 패키지 관리자를 사용해도 무방합니다. 먼저 터미널을 열고 다음 명령어를 실행하세요.
npm create vite
이 명령어는 Vite CLI를 사용하여 새로운 프로젝트를 시작합니다. 프로젝트 이름을 설정하고, 프레임워크로 Svelte를 선택한 다음, 변형을 JavaScript로 설정합니다. 그런 다음 생성된 프로젝트 폴더로 이동하여 다음 명령어를 실행하여 필요한 종속성을 설치합니다.
npm install
이제 프로젝트를 열고 src 폴더에 hangmanArt.js 파일을 생성하고 assets 및 lib 폴더는 삭제합니다. 그 후 App.svelte와 App.css 파일의 내용을 비웁니다. App.css 파일에 다음 코드를 추가하세요.
:root {
background-color: rgb(0, 0, 0);
color: green;
font-family: monospace;
}
다음으로, GitHub 저장소에서 hangmanArt.js 파일의 내용을 복사하여 프로젝트의 hangmanArt.js 파일에 붙여넣습니다. 이제 다음 명령어로 개발 서버를 시작할 수 있습니다.
npm run dev
애플리케이션 로직 정의
App.svelte 파일을 열고 애플리케이션 로직을 구현할 스크립트 태그를 만듭니다. 먼저 단어 목록을 저장할 단어 배열을 생성합니다.
let words = [ "appetizer", "roommates", "shrinking", "freedom", "happiness", "development", ];
다음으로 hangmanArt.js 파일에서 hangmanArt 배열을 가져옵니다. 그리고 userInput 변수, randomNumber 변수, 단어 배열에서 무작위로 선택된 단어를 저장할 변수를 생성합니다.
selectedWord를 다른 변수에 초기 할당합니다. 그 외에 match, message, hangmanStages, output 변수들을 생성합니다. selectedWord의 길이에 따라 대시 문자로 이루어진 문자열로 output 변수를 초기화합니다. hangmanArt 배열을 hangmanStages 변수에 할당합니다.
import { hangmanArt } from "./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length - 1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output += "-"));
match = output;
필요한 기능 추가
플레이어가 글자를 추측하면 결과를 화면에 보여줘야 합니다. 이는 플레이어가 추측이 맞았는지 틀렸는지 알 수 있게 해줍니다. 출력을 생성하는 기능을 담당할 generateOutput 함수를 만듭니다.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
플레이어가 제출한 각 추측에 대해 프로그램은 그것이 올바른 추측인지 판단해야 합니다. 만약 플레이어의 추측이 틀렸다면 교수형 집행인 그림을 다음 단계로 넘어가게 하거나, 추측이 맞았을 경우 generateOutput 함수를 호출합니다.
function evaluate() {
let guess = userInput.toUpperCase().trim();
if (!guess) {
return;
}
if (selectedWord.includes(guess)) {
selectedWord = selectedWord.replaceAll(guess, "-");
generateOutput(initial, selectedWord);
} else {
hangmanStages.shift();
hangmanStages = hangmanStages;
}
userInput = "";
}
이제 애플리케이션의 로직이 완성되었습니다. 이제 마크업을 정의할 차례입니다.
프로젝트 마크업 정의
게임의 모든 요소를 담을 기본 요소를 만듭니다. 기본 요소 안에서 "Hangman" 텍스트를 포함하는 h1 요소를 정의합니다.
<h1 class="title"> Hangman </h1>
hangmanStages 배열의 요소 수가 0보다 클 때만 태그라인을 만들고, 첫 번째 단계의 행맨 그림을 렌더링합니다.
<div class="tagline">
I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
다음으로, 플레이어의 승패 여부를 나타내는 메시지를 표시하는 로직을 구현합니다.
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>You Win...</div>
{/if}
그 다음으로, 현재까지 맞춘 단어를 보여주는 output과 사용자 입력을 받는 폼을 렌더링합니다. 이들은 “메시지” 클래스를 가진 요소가 화면에 없을 때만 보여져야 합니다.
{#if !message}
<div class="output">
{#each output as letter}
{#if letter !== "-"}
<span class="complete box">{letter}</span>
{:else}
<span class="incomplete box" />
{/if}
{/each}
</div>
<form on:submit|preventDefault={() => evaluate()}>
<input
type="text"
placeholder="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
이제 애플리케이션에 적절한 스타일을 추가할 수 있습니다. 스타일 태그를 생성하고 다음 코드를 추가합니다.
* {
color: green;
text-align: center;
}
main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
input,
button {
text-transform: uppercase;
background-color: transparent;
border: solid 1.2px green;
height: 40px;
font-size: 15px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2px green;
}
.output {
display: flex;
font-size: 23px;
font-weight: 600;
height: 45px;
gap: 10px;
justify-content: center;
}
.hangman {
font-size: 32px;
}
form {
margin-top: 50px;
}
.tagline,
.message {
font-size: 20px;
}
축하합니다! 스벨트를 사용하여 행맨 게임을 성공적으로 만들었습니다.
스벨트가 뛰어난 이유
스벨트는 배우기 쉽고 빠르게 사용할 수 있는 프레임워크입니다. 스벨트의 문법은 바닐라 자바스크립트와 유사해서 반응성 같은 복잡한 요소들을 쉽게 다룰 수 있습니다. 바닐라 자바스크립트의 경험을 유지하면서 프레임워크를 사용하고 싶다면 스벨트가 좋은 선택입니다. 더 복잡한 프로젝트를 위해 Next.js에 대한 스벨트의 답안이라고 할 수 있는 메타 프레임워크 SvelteKit을 활용할 수도 있습니다.