Cara Membuat Game Hangman Dengan Svelte

Svelte adalah kerangka kerja JavaScript baru yang radikal yang memenangkan hati para pengembang. Sintaksnya yang sederhana menjadikannya kandidat yang bagus untuk pemula yang ingin mendalami dunia kerangka JavaScript. Salah satu cara terbaik untuk belajar adalah dengan membangun, jadi dalam panduan ini, Anda akan mempelajari cara menggunakan fitur yang ditawarkan Svelte untuk membuat permainan algojo sederhana.

Bagaimana Algojo Bekerja

Hangman adalah permainan menebak kata yang biasanya dimainkan antara dua orang, di mana satu pemain memikirkan sebuah kata dan pemain lainnya mencoba menebak kata tersebut huruf demi huruf. Tujuan pemain menebak adalah untuk menemukan kata rahasia sebelum kehabisan tebakan yang salah.

Saat permainan dimulai, tuan rumah memilih kata rahasia. Panjang kata biasanya ditunjukkan kepada pemain lain (penebak) dengan menggunakan tanda hubung. Saat penebak membuat tebakan yang salah, bagian tambahan dari algojo diambil, mulai dari kepala, badan, lengan, dan kaki.

Penebak memenangkan permainan jika berhasil menebak semua huruf dalam kata sebelum gambar gambar stickman selesai. Hangman adalah cara terbaik untuk menguji keterampilan kosa kata, penalaran, dan deduksi.

Menyiapkan Lingkungan Pembangunan

Untuk mengaktifkan dan menjalankan Svelte di mesin Anda, disarankan untuk melakukan scaffold proyek dengan Vite.js. Untuk menggunakan Vite, pastikan Anda memilikinya Manajer Paket Node (NPM) Dan Node.js diinstal pada mesin Anda. Anda juga dapat menggunakan pengelola paket alternatif seperti Yarn. Sekarang, buka terminal Anda dan jalankan perintah berikut:

npm create vite

Ini akan memulai proyek baru dengan Vite Antarmuka Baris Perintah (CLI). Beri nama proyek Anda, pilih Langsing sebagai kerangka kerja, dan atur variannya ke JavaScript. Sekarang CD ke dalam direktori proyek dan jalankan perintah berikut untuk menginstal dependensi:

npm install

Sekarang, buka proyek, dan di src folder, buat a algojoArt.js file dan hapus aktiva Dan lib map. Kemudian bersihkan isinya Aplikasi.svelte Dan Aplikasi.css file. Dalam Aplikasi.css file, tambahkan berikut ini;

:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}

Salin isi dari algojoArt.js file dari proyek ini Repositori GitHub, lalu tempelkan ke milik Anda algojoArt.js mengajukan. Anda dapat memulai server pengembangan dengan perintah berikut:

npm run dev

Mendefinisikan Logika Aplikasi

Buka Aplikasi.svelte file dan buat a naskah tag yang akan menampung sebagian besar logika aplikasi. Membuat kata-kata array untuk menampung daftar kata.

let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];

Selanjutnya, impor algojoArt susunan dari algojoArt.js mengajukan. Kemudian, buat variabel masukan pengguna, sebuah variabel angka acak, dan variabel lain untuk menampung kata yang dipilih secara acak dari kata-kata Himpunan.

Tetapkan Kata yang dipilih ke variabel lain awal. Selain variabel lainnya, buatlah variabel berikut: cocok, pesan, panggung algojo, Dan keluaran. Inisialisasi variabel keluaran dengan serangkaian tanda hubung, bergantung pada panjangnya Kata yang dipilih. Tetapkan algojoArt susunan ke tahapan algojo variabel.

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;

Menambahkan Fungsi yang Diperlukan

Saat pemain menebak, Anda ingin menunjukkan hasilnya kepada pemain. Keluaran ini akan membantu pemain mengetahui apakah tebakannya benar atau salah. Buat sebuah fungsi menghasilkan Output untuk menangani tugas menghasilkan output.

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

Untuk setiap tebakan yang diajukan pemain, program harus menentukan apakah tebakannya benar. Buat sebuah evaluasi fungsi yang akan memindahkan gambar algojo ke tahap berikutnya jika pemain salah menebak, atau memanggil menghasilkan Output berfungsi jika pemain membuat tebakan yang benar.

functionevaluate() {
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 = "";
}

Dan dengan itu, Anda telah menyelesaikan logika aplikasi. Anda sekarang dapat melanjutkan ke penentuan markup.

Mendefinisikan Markup Proyek

Membuat utama elemen yang akan menampung setiap elemen lain dalam game. Dalam utama elemen, tentukan an h1 elemen dengan teks Algojo.

<h1class="title">
 Hangman
h1>

Buat tagline dan render sosok algojo pada tahap pertama hanya jika jumlah elemen di dalamnya tahapan algojo larik lebih besar dari 0.

class="tagline">
 I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
class="hangman">
 {hangmanStages[0]}</pre>
{/if}

Setelah itu, terapkan logika tersebut untuk menampilkan pesan yang menunjukkan apakah pemain menang atau kalah:

{#if hangmanStages.length 1}

class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord match}

class="message" bind:this={message}>You Win...</div>
{/if}

Selanjutnya, render keluaran dan formulir untuk menerima masukan dari pengguna. Output dan formulir hanya boleh ditampilkan jika elemen dengan kelas "pesan" tidak ada di layar.

{#if !message}

class="output">
 {#each output as letter}
 {#if letter !== "-"}
class="complete box">{letter}</span>
 {:else}
class="incomplete box" />
 {/if}
 {/each}
 </div>
 evaluate()}>
 type="text"
 placeholder="Enter a letter"
 maxlength="1"
 bind: value={userInput}
 />
"submit">Submit</button>
 </form>
{/if}

Sekarang, Anda dapat menambahkan gaya yang sesuai ke aplikasi. Membuat gaya tag dan di dalamnya, tambahkan yang berikut ini:

 * {
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.2pxgreen;
height:40px;
font-size: 15px;
 }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2pxgreen;
 }
.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;
 }

Anda telah membuat game algojo dengan Svelte. Kerja bagus!

Apa yang Membuat Svelte Luar Biasa?

Svelte adalah kerangka kerja yang relatif mudah diambil dan dipelajari. Karena sintaks logika Svelte mirip dengan Vanilla JavaScript, ini menjadikannya pilihan sempurna jika Anda menginginkannya kerangka kerja yang dapat menampung hal-hal kompleks seperti reaktivitas, sekaligus memberi Anda kesempatan untuk bekerja dengan Vanilla JavaScript. Untuk proyek yang lebih kompleks, Anda dapat menggunakan SvelteKit—kerangka kerja meta yang dikembangkan sebagai jawaban Svelte untuk Next.js.