Basit bir Hangman oyunu oluşturarak Svelte'nin temellerini anlayın.

Svelte, geliştiricilerin kalbini kazanan radikal yeni bir JavaScript çerçevesidir. Basit sözdizimi, onu JavaScript çerçeveleri dünyasına dalmak isteyen yeni başlayanlar için harika bir aday haline getiriyor. Öğrenmenin en iyi yollarından biri inşa etmektir; dolayısıyla bu kılavuzda, Svelte'nin basit bir adam asmaca oyunu oluşturmak için sunduğu özellikleri nasıl kullanacağınızı öğreneceksiniz.

Adam Asmaca Nasıl Çalışır?

Hangman, genellikle iki kişi arasında oynanan, bir oyuncunun bir kelime düşündüğü ve diğer oyuncunun bu kelimeyi harf harf tahmin etmeye çalıştığı bir kelime tahmin oyunudur. Tahmin eden oyuncunun amacı, yanlış tahminler bitmeden gizli kelimeyi bulmaktır.

Oyun başladığında sunucu gizli bir kelime seçer. Kelimenin uzunluğu genellikle diğer oyuncuya (tahmin edene) kısa çizgiler kullanılarak gösterilir. Tahminci yanlış tahminler yaptıkça celladın başından, gövdesinden, kollarından ve bacaklarından başlayarak ek parçaları çizilir.

instagram viewer

Tahminci, çöp adam figürü çizimi tamamlanmadan önce kelimedeki tüm harfleri tahmin etmeyi başarırsa oyunu kazanır. Adam Asmaca kelime dağarcığını, muhakeme ve çıkarım becerilerini test etmenin harika bir yoludur.

Geliştirme Ortamını Kurma

Bu projede kullanılan kod şu şekilde mevcuttur: GitHub deposu ve MIT lisansı kapsamında kullanımınız ücretsizdir. Bu projenin canlı versiyonuna göz atmak istiyorsanız, şu adrese göz atabilirsiniz: bu demo.

Svelte'i makinenizde çalışır hale getirmek için projeyi Vite.js ile kurmanız tavsiye edilir. Vite'ı kullanmak için şunlara sahip olduğunuzdan emin olun: Düğüm Paketi Yöneticisi (NPM) Ve Node.js makinenizde yüklü. Ayrıca Yarn gibi alternatif bir paket yöneticisi de kullanabilirsiniz. Şimdi terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm create vite

Bu Vite ile yeni bir proje başlatacak Komut Satırı Arayüzü (CLI). Projenize ad verin, seçin ince çerçeve olarak seçin ve değişkeni şu şekilde ayarlayın: JavaScript. Şimdi CD proje dizinine girin ve bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:

npm install

Şimdi projeyi açın ve kaynak klasör oluşturun HangmanArt.js dosyalayın ve silin varlıklar Ve kitap dosya. Daha sonra içeriğini temizleyin Uygulama.svelte Ve Uygulama.css Dosyalar. İçinde Uygulama.css dosyaya şunu ekleyin;

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

İçeriğini kopyalayın cellatArt.js bu projenin dosyası GitHub deposuve ardından bunu kendi dosyanıza yapıştırın HangmanArt.js dosya. Geliştirme sunucusunu aşağıdaki komutla başlatabilirsiniz:

npm run dev

Uygulamanın Mantığını Tanımlamak

Aç Uygulama.svelte dosyalayın ve bir tane oluşturun senaryo uygulamanın mantığının çoğunu tutacak etiket. Oluşturmak kelimeler kelimelerin listesini tutacak dizi.

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

Ardından, içe aktarın cellatSanat diziden HangmanArt.js dosya. Daha sonra bir değişken oluşturun kullanıcı girişi, bir değişken rastgeleNumarave rastgele seçilen bir kelimeyi tutacak başka bir değişken kelimeler sıralamak.

Ata seçili Kelime başka bir değişkene ilk. Diğer değişkenlere ek olarak aşağıdaki değişkenleri oluşturun: kibrit, İleti, cellatAşamalar, Ve çıktı. Çıkış değişkenini, uzunluğuna bağlı olarak bir dizi tire ile başlatın. seçili Kelime. Ata cellatSanat dizi cellatAşamalar değişken.

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;

Gerekli İşlevlerin Eklenmesi

Oyuncu bir tahminde bulunurken çıktıyı oyuncuya göstermek istersiniz. Bu çıktı, oyuncunun doğru veya yanlış tahminde bulunup bulunmadığını bilmesine yardımcı olacaktır. Bir işlev oluşturun çıktı üret bir çıktı üretme görevini yerine getirmek için.

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

Oyuncunun gönderdiği her tahmin için programın doğru tahmin olup olmadığını belirlemesi gerekecektir. Oluşturduğunuz bir değerlendirmek Oyuncu yanlış tahminde bulunursa cellat çizimini bir sonraki aşamaya taşıyacak veya çağrıyı yapacak işlev çıktı üret Oyuncu doğru bir tahminde bulunursa işlev görür.

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 = "";
}

Böylece uygulamanın mantığını da tamamlamış oluyorsunuz. Artık işaretlemeyi tanımlamaya geçebilirsiniz.

Projenin İşaretlemesinin Tanımlanması

Oluşturmak ana Oyundaki diğer tüm unsurları barındıracak unsur. İçinde ana öğeyi tanımlayın h1 metin içeren öğe Cellat.

<h1class="title">
 Hangman
h1>

Bir slogan oluşturun ve cellat figürünü ilk aşamada yalnızca içindeki öğelerin sayısı yeterliyse oluşturun. cellatAşamalar dizi 0'dan büyüktür.


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}

Daha sonra oyuncunun kazanıp kazanmadığını belirten bir mesaj gösterecek mantığı uygulayın:

{#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}

Daha sonra çıktıyı ve kullanıcıdan gelen girdiyi kabul edecek bir form oluşturun. Çıktı ve form yalnızca "mesaj" sınıfına sahip öğe ekranda değilse görüntülenmelidir.

{#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}
 />

Artık uygulamaya uygun stili ekleyebilirsiniz. Oluşturmak stil etiketini bulun ve içine aşağıdakileri ekleyin:

 * {
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;
 }

Svelte ile bir cellat oyunu yarattınız. İyi iş!

Svelte'i Muhteşem Yapan Nedir?

Svelte, edinilmesi ve öğrenilmesi nispeten kolay bir çerçevedir. Svelte'nin mantık sözdizimi Vanilla JavaScript'e benzer olduğundan, eğer istiyorsanız bu onu mükemmel bir seçim haline getirir. Reaktivite gibi karmaşık şeyleri barındırabilen ve size Vanilya ile çalışma fırsatı veren çerçeve JavaScript. Daha karmaşık projeler için Svelte'nin Next.js'ye yanıtı olarak geliştirilen bir meta çerçeve olan SvelteKit'i kullanabilirsiniz.