איך ליצור משחק תליין עם Svelte

Svelte היא מסגרת JavaScript חדשה רדיקלית שכובשת את לבם של מפתחים. התחביר הפשוט שלו הופך אותו למועמד מצוין למתחילים שמחפשים לצלול לתוך עולם מסגרות JavaScript. אחת הדרכים הטובות ביותר ללמוד היא על ידי בנייה, אז במדריך זה תלמדו כיצד להשתמש בתכונות ש-Svelte מציעה כדי ליצור משחק תליין פשוט.

איך עובד התליין

התליין הוא משחק ניחוש מילים המופעל בדרך כלל בין שני אנשים, שבו שחקן אחד חושב על מילה והשחקן השני מנסה לנחש את המילה הזו אות אחר אות. המטרה של השחקן המנחש היא להבין את המילה הסודית לפני שייגמרו לו ניחושים שגויים.

כשהמשחק מתחיל, המארח בוחר מילה סודית. אורך המילה מצוין בדרך כלל לשחקן השני (מנחש) באמצעות מקפים. כאשר המנחש ניחוש שגוי, חלקים נוספים של התליין מצוירים, מתקדמים מהראש, הגוף, הידיים והרגליים.

המנחש מנצח במשחק אם יצליח לנחש את כל האותיות במילה לפני השלמת ציור דמות הסטיקמן. התליין הוא דרך מצוינת לבחון אוצר מילים, נימוקים וכישורי גזירה.

הגדרת סביבת הפיתוח

כדי להפעיל את Svelte במחשב שלך, מומלץ לתקן את הפרויקט באמצעות Vite.js. כדי להשתמש ב-Vite, ודא שיש לך מנהל חבילות צומת (NPM) ו Node.js מותקן במחשב שלך. אתה יכול גם להשתמש במנהל חבילות חלופי כמו Yarn. כעת, פתח את הטרמינל שלך והפעל את הפקודה הבאה:

npm create vite

זה יתחיל פרויקט חדש עם Vite ממשק שורת פקודה (CLI). תן שם לפרויקט שלך, בחר תָמִיר כמסגרת, והגדר את הגרסה ל JavaScript. עַכשָׁיו CD לתוך ספריית הפרויקט והפעל את הפקודה הבאה כדי להתקין את התלות:

npm install

כעת, פתח את הפרויקט, וב- src תיקיה, צור א hangmanArt.js קובץ ומחק את ה נכסים ו lib תיקייה. לאחר מכן נקה את התוכן של App.svelte ו App.css קבצים. בתוך ה App.css קובץ, הוסף את הדברים הבאים;

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

העתק את התוכן של hangmanArt.js קובץ מהפרויקט הזה מאגר GitHub, ולאחר מכן הדבק אותו לתוך שלך hangmanArt.js קוֹבֶץ. אתה יכול להפעיל את שרת הפיתוח עם הפקודה הבאה:

npm run dev

הגדרת הלוגיקה של האפליקציה

פתח את ה App.svelte קובץ וצור א תַסרִיט תג שיחזיק את רוב ההיגיון של האפליקציה. ליצור מילים מערך כדי להחזיק רשימה של מילים.

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

לאחר מכן, ייבא את ה hangmanArt מערך מה hangmanArt.js קוֹבֶץ. לאחר מכן, צור משתנה קלט משתמש, משתנה מספר אקראי, ועוד משתנה שיחזיק מילה שנבחרה באקראי מתוך מילים מַעֲרָך.

הקצה את מילה שנבחרה למשתנה אחר התחלתי. בנוסף למשתנים האחרים, צור את המשתנים הבאים: התאמה, הוֹדָעָה, hangmanStages, ו תְפוּקָה. אתחול משתנה הפלט עם מחרוזת של מקפים, בהתאם לאורך של מילה שנבחרה. הקצה את 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;

הוספת הפונקציות הנחוצות

כשהשחקן מנחש, אתה רוצה להציג את הפלט לנגן. פלט זה יעזור לשחקן לדעת אם ניחוש נכון או לא נכון. צור פונקציה ליצור פלט לטפל במשימה של יצירת פלט.

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

עבור כל ניחוש שהשחקן יגיש, התוכנית תצטרך לקבוע אם זה הניחוש הנכון. ליצור להעריך פונקציה שתעביר את ציור התליין לשלב הבא אם השחקן מנחש לא נכון, או תקרא ל- ליצור פלט לתפקד אם השחקן ניחוש נכון.

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

ועם זה, השלמת את ההיגיון של היישום. כעת תוכל לעבור להגדרת הסימון.

הגדרת הסימון של הפרויקט

ליצור רָאשִׁי אלמנט שיכיל כל אלמנט אחר במשחק. בתוך ה רָאשִׁי אלמנט, הגדר an 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 JavaScript. לפרויקטים מורכבים יותר, אתה יכול להשתמש ב-SvelteKit - מסגרת מטא שפותחה כתשובה של Svelte ל-Next.js.