كيفية إنشاء لعبة الجلاد مع Svelte

Svelte هو إطار عمل JavaScript جديد جذري يستحوذ على قلوب المطورين. تركيبه البسيط يجعله مرشحًا رائعًا للمبتدئين الذين يتطلعون إلى التعمق في عالم أطر عمل JavaScript. إحدى أفضل الطرق للتعلم هي البناء، لذلك في هذا الدليل، ستتعلم كيفية استخدام الميزات التي يقدمها Svelte لإنشاء لعبة جلاد بسيطة.

كيف يعمل الجلاد

Hangman هي لعبة تخمين كلمات يتم لعبها عادةً بين شخصين، حيث يفكر أحد اللاعبين في كلمة ويحاول اللاعب الآخر تخمين تلك الكلمة حرفًا بحرف. هدف اللاعب المخمن هو معرفة الكلمة السرية قبل نفاد التخمينات غير الصحيحة.

عندما تبدأ اللعبة، يختار المضيف كلمة سرية. عادةً ما تتم الإشارة إلى طول الكلمة للاعب الآخر (التخمين) باستخدام الشرطات. عندما يقوم الحازر بتخمينات غير صحيحة، يتم رسم أجزاء إضافية من الجلاد، بدءًا من الرأس والجسم والذراعين والساقين.

يفوز الحازر باللعبة إذا تمكن من تخمين جميع الحروف الموجودة في الكلمة قبل اكتمال رسم شخصية الرجل العصي. الجلاد هو وسيلة رائعة لاختبار المفردات، والتفكير، ومهارات الاستنتاج.

تهيئة بيئة التطوير

لتشغيل Svelte على جهازك، يُنصح بدعم المشروع باستخدام Vite.js. لاستخدام Vite، تأكد من أن لديك مدير حزمة العقدة (NPM) و تم تثبيت Node.js على جهازك. يمكنك أيضًا استخدام مدير حزم بديل مثل Yarn. الآن، افتح المحطة الطرفية الخاصة بك وقم بتشغيل الأمر التالي:

npm create vite

سيؤدي هذا إلى بدء مشروع جديد مع Vite واجهة سطر الأوامر (CLI). قم بتسمية مشروعك، اختر ممشوق كإطار، وقم بتعيين المتغير على جافا سكريبت. الآن قرص مضغوط في دليل المشروع وقم بتشغيل الأمر التالي لتثبيت التبعيات:

npm install

الآن، افتح المشروع، وفي src مجلد، أنشئ ملف HangmanArt.js ملف وحذف أصول و ليب مجلد. ثم قم بمسح محتويات الملف التطبيق.svelte و App.css ملفات. في ال App.css الملف، أضف ما يلي؛

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

انسخ محتويات الملف HangmanArt.js ملف من هذا المشروع مستودع جيثب، ثم قم بلصقه في ملفك الخاص HangmanArt.js ملف. يمكنك بدء خادم التطوير باستخدام الأمر التالي:

npm run dev

تحديد منطق التطبيق

افتح ال التطبيق.svelte ملف وإنشاء ملف النصي العلامة التي ستحتوي على معظم منطق التطبيق. إنشاء كلمات مجموعة لعقد قائمة من الكلمات.

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

بعد ذلك، قم باستيراد HangmanArt مصفوفة من HangmanArt.js ملف. ثم قم بإنشاء متغير إدخال المستخدم، متغير رقم عشوائيومتغير آخر للاحتفاظ بكلمة مختارة عشوائيًا من ملف كلمات مجموعة مصفوفة.

تعيين كلمة مختارة إلى متغير آخر أولي. بالإضافة إلى المتغيرات الأخرى، قم بإنشاء المتغيرات التالية: مباراة, رسالة, مراحل الجلاد, و انتاج. قم بتهيئة متغير الإخراج بسلسلة من الشرطات، اعتمادًا على طول الملف كلمة مختارة. تعيين 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;

إضافة الوظائف اللازمة

عندما يقوم اللاعب بالتخمين، فأنت تريد إظهار الإخراج للاعب. سيساعد هذا الإخراج اللاعب على معرفة ما إذا كان قد قام بالتخمين الصحيح أو الخاطئ. إنشاء وظيفة createOutput للتعامل مع مهمة توليد الإخراج.

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

لكل تخمين يرسله اللاعب، سيتعين على البرنامج تحديد ما إذا كان هذا هو التخمين الصحيح. يخترع يقيم الوظيفة التي ستنقل رسم الجلاد إلى المرحلة التالية إذا خمن اللاعب بشكل خاطئ، أو اتصل بـ createOutput تعمل إذا قام اللاعب بالتخمين الصحيح.

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

وبذلك تكون قد أكملت منطق التطبيق. يمكنك الآن الانتقال إلى تحديد العلامات.

تحديد علامة المشروع

إنشاء رئيسي العنصر الذي سيضم كل العناصر الأخرى في اللعبة. في ال رئيسي عنصر، تعريف h1 العنصر مع النص الجلاد.

<h1class="title">
 Hangman
h1>

أنشئ شعارًا واعرض شكل الجلاد في المرحلة الأولى فقط إذا كان عدد العناصر في HangmanStages المصفوفة أكبر من 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}

بعد ذلك، قم بتنفيذ المنطق لإظهار رسالة تشير إلى ما إذا كان اللاعب قد فاز أم خسر:

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

بعد ذلك، قم بتقديم الإخراج ونموذج لقبول الإدخال من المستخدم. يجب أن يتم عرض الإخراج والنموذج فقط إذا لم يكن العنصر الذي يحمل فئة "رسالة" موجودًا على الشاشة.

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

الآن، يمكنك إضافة التصميم المناسب إلى التطبيق. إنشاء أسلوب العلامة وأضف فيها ما يلي:

 * {
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. عمل عظيم!

ما الذي يجعل Svelte مذهلة؟

Svelte هو إطار عمل يسهل التقاطه وتعلمه نسبيًا. نظرًا لأن بناء الجملة المنطقي لـ Svelte يشبه Vanilla JavaScript، فإن هذا يجعله الخيار الأمثل إذا كنت تريد إطار عمل يمكنه استيعاب أشياء معقدة مثل التفاعلية، بينما يمنحك الفرصة للعمل مع Vanilla جافا سكريبت. بالنسبة للمشاريع الأكثر تعقيدًا، يمكنك استخدام SvelteKit، وهو إطار تعريفي تم تطويره كإجابة Svelte على Next.js.