צור משחק Tic-Tac-Toe לשני שחקנים באמצעות JavaScript, HTML ו-CSS

טיק-tac-toe הוא משחק פופולרי המשתמש ברשת 3×3. מטרת המשחק היא להיות השחקן הראשון שיציב שלושה סמלים בשורה אופקית, אנכית או אלכסונית ישרה.

אתה יכול ליצור משחק Tic-tac-toe שפועל בדפדפן אינטרנט באמצעות HTML, CSS ו-JavaScript. אתה יכול להשתמש ב-HTML כדי להוסיף את התוכן שמכיל את הרשת של 3×3, ו-CSS כדי להוסיף קצת סטיילינג לעיצוב המשחק.

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

כיצד ליצור את ממשק המשתמש למשחק Tic-Tac-Toe

אתה יכול לקרוא ולהוריד את קוד המקור המלא של המשחק הזה מהמשחק שלו מאגר GitHub.

טיק-tac-toe הוא אחד מהמשחקים הרבים שאתה יכול לעשות כשאתה לומד כיצד לתכנת. זה טוב לתרגל שפה או סביבה חדשה, כמו מנוע פיתוח המשחקים PICO-8.

כדי ליצור משחק Tic-tac-toe שפועל בדפדפן אינטרנט, תצטרך להוסיף HTML עבור תוכן העמוד. לאחר מכן תוכל לעצב זאת באמצעות CSS.

1. צור קובץ חדש בשם "index.html".
2. בתוך "index.html", הוסף את המבנה הבסיסי של קובץ HTML:
   instagram viewer

   html>
   <htmllang="en-US">
   <רֹאשׁ>
   <כותרת>משחק טיק טקכותרת>
   רֹאשׁ>
   <גוּף>
   
   גוּף>
   html>

3. בתוך תג גוף ה-HTML, הוסף טבלה המכילה שלוש שורות, עם שלושה תאים בכל שורה:

   <divמעמד="מְכוֹלָה">
   <שולחן>
   <tr>
   <tdתְעוּדַת זֶהוּת="1">td>
   <tdתְעוּדַת זֶהוּת="2">td>
   <tdתְעוּדַת זֶהוּת="3">td>
   tr>
   <tr>
   <tdתְעוּדַת זֶהוּת="4">td>
   <tdתְעוּדַת זֶהוּת="5">td>
   <tdתְעוּדַת זֶהוּת="6">td>
   tr>
   <tr>
   <tdתְעוּדַת זֶהוּת="7">td>
   <tdתְעוּדַת זֶהוּת="8">td>
   <tdתְעוּדַת זֶהוּת="9">td>
   tr>
   שולחן>
   div>

4. באותה תיקיה כמו קובץ ה-HTML שלך, צור קובץ חדש בשם "styles.css".
5. בתוך קובץ ה-CSS, הוסף קצת סגנון לרשת 3 על 3 שלך:

   שולחן {
   קריסת גבול: הִתמוֹטְטוּת;
   שולים: 0 אוטומטי;
   }
   td {
   רוֹחַב: 100פיקסלים;
   גוֹבַה: 100פיקסלים;
   יישור טקסט: מֶרְכָּז;
   יישור אנכי: אֶמצַע;
   גבול: 1פיקסליםמוצקשָׁחוֹר;
   }

6. קשר את קובץ ה-CSS לקובץ ה-HTML שלך על ידי הוספתו לתג head:

   <קישורrel="גיליון סגנונות"סוּג="טקסט/css"href="styles.css">

איך מתחלפים בהוספת סמלים ללוח המשחק

במשחק יהיו שני שחקנים, כל אחד עם סמל "X" או "O". אתה יכול להוסיף סמל "X" או "O" על ידי לחיצה על אחד מתאי הרשת. זה יימשך עד שאחד מכם ייצור שורה ישרה אופקית, אנכית או אלכסונית.

אתה יכול להוסיף פונקציונליות זו באמצעות JavaScript.

1. באותה תיקיה כמו קובצי ה-HTML וה-CSS שלך, צור קובץ JavaScript בשם "script.js".
2. קשר את קובץ ה-JavaScript לקובץ ה-HTML שלך על ידי הוספת הסקריפט לתחתית תג הגוף:

   <גוּף>
    הקוד שלך כאן 
   <תַסרִיטsrc="script.js">תַסרִיט>
   גוּף>

3. בתוך קובץ ה-JavaScript, הוסף מחרוזת שתייצג את סמל השחקן. זה יכול להיות "X" או "O". כברירת מחדל, השחקן הראשון ישים "X":

   לתת סמל שחקן = "איקס";

4. הוסף משתנה נוסף כדי לעקוב אם המשחק הסתיים:

   לתת המשחק הסתיים = שֶׁקֶר

5. לכל תא בטבלת HTML יש מזהה בין 1 ל-9. עבור כל תא בטבלה, הוסף מאזין אירועים שיפעל בכל פעם שמשתמש לוחץ על התא:

   ל (לתת אני = 1; אני <= 9; i++) {
   מסמך.getElementById (i.toString()).addEventListener(
   "נְקִישָׁה", 
   פוּנקצִיָה() {
   
    }
    );
   }

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

   אם (זֶה.innerHTML "" && !gameEnded) {
   זֶה.innerHTML = playerSymbol;
   }

7. הוסף מחלקה לאלמנט ה-HTML כדי לעצב את הסמל שיופיע ברשת. השם של מחלקות ה-CSS יהיה "X" או "O", בהתאם לסמל:

   זֶה.classList.add (playerSymbol.toLowerCase());

8. בתוך הקובץ "styles.css", הוסף את שתי המחלקות החדשות הללו עבור הסמלים "X" ו-"O". הסמלים "X" ו-"O" יוצגו בצבעים שונים:

   .איקס {
   צֶבַע: כְּחוֹל;
   גודל גופן: 80פיקסלים;
   }
   .o {
   צֶבַע: אָדוֹם;
   גודל גופן: 80פיקסלים;
   }

9. בקובץ JavaScript, לאחר שינוי ה-innerHTML כדי להציג את הסמל, החלף את הסמל. לדוגמה, אם השחקן פשוט שם "X", שנה את הסמל הבא ל-"O":

   אם (סמל שחקן "איקס")
    סמל שחקן = "או"
   אַחֵר
    סמל שחקן = "איקס"

10. כדי להפעיל את המשחק, פתח את הקובץ "index.html" בדפדפן אינטרנט כדי להציג את הרשת של 3 על 3:
11. התחל להציב סמלים על הרשת על ידי לחיצה על התאים. המשחק יתחלף בין סמלי "X" ו-"O":

כיצד לקבוע את המנצח

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

1. בתוך קובץ ה-JavaScript שלך, הוסף משתנה חדש כדי לאחסן את כל מיקומי ה"מנצחים" האפשריים עבור הרשת של 3 על 3. לדוגמה, "[1,2,3]" היא השורה העליונה, או "[1,4,7]" היא שורה אלכסונית.

   לתת winPos = [
    [1, 2, 3], [4, 5, 6], 
    [7, 8, 9], [1, 4, 7], 
    [2, 5, 8], [3, 6, 9], 
    [1, 5, 9], [3, 5, 7]
   ];

2. הוסף פונקציה חדשה בשם checkWin():

   פוּנקצִיָהcheckWin() {
   
   }

3. בתוך הפונקציה, עברו בלולאה בין כל אחת מהעמדות המנצחות האפשריות:

   ל (לתת אני = 0; i < winPos.length; i++) {
   }

4. בתוך לולאת for, בדוק אם כל התאים מכילים את סמל השחקן:

   אם (
   מסמך.getElementById (winPos[i][0]).innerHTML playerSymbol &&
   מסמך.getElementById (winPos[i][1]).innerHTML playerSymbol &&
   מסמך.getElementById (winPos[i][2]).innerHTML playerSymbol
   ) {
   }

5. אם התנאי מוערך כאמת, אז כל הסמלים נמצאים בקו ישר. בתוך הצהרת if, הצג הודעה למשתמש. אתה יכול גם לשנות את הסגנון של אלמנט ה-HTML על ידי הוספת מחלקת CSS בשם "win":

   מסמך.getElementById (winPos[i][0]).classList.add("לנצח");
   מסמך.getElementById (winPos[i][1]).classList.add("לנצח");
   מסמך.getElementById (winPos[i][2]).classList.add("לנצח"); 
   המשחק הסתיים = נָכוֹן;
   setTimeout(פוּנקצִיָה() {
    התראה (playerSymbol + "מנצח!");
   }, 500);

6. הוסף את מחלקת ה-CSS הזו "win" לקובץ "styles.css". כאשר השחקן מנצח, הוא ישנה את צבע הרקע של התאים הזוכים לצהוב:

   .לנצח {
   צבע רקע: צהוב;
   }

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

   ל (לתת אני = 1; אני <= 9; i++) {
   // בכל פעם ששחקן לוחץ על תא
   מסמך.getElementById (i.toString()).addEventListener(
   "נְקִישָׁה", 
   פוּנקצִיָה() {
   אם (זֶה.innerHTML "" && !gameEnded) {
   // הצג "X" או "O" בתא, וסגנון אותו
   זֶה.innerHTML = playerSymbol;
   זֶה.classList.add (playerSymbol.toLowerCase());
   
   // בדוק אם שחקן זכה
    checkWin();
   
   // החליפו את הסמל לסמל השני לקראת התור הבא
   אם (סמל שחקן "איקס")
    סמל שחקן = "או"
   אַחֵר
    סמל שחקן = "איקס"
    }
    }
    );
   }

כיצד לאפס את לוח המשחק

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

1. בקובץ ה-HTML, לאחר הטבלה, הוסף לחצן איפוס:

   <לַחְצָןתְעוּדַת זֶהוּת="אִתחוּל">אִתחוּללַחְצָן>

2. הוסף קצת סטיילינג לכפתור האיפוס:

   .מְכוֹלָה {
   לְהַצִיג: לְהַגמִישׁ;
   כיוון הגמיש: טור;
   }
   #אִתחוּל {
   שולים: 48פיקסלים 40%;
   ריפוד: 20פיקסלים;
   }

3. בקובץ JavaScript, הוסף מטפל באירועים שיפעל בכל פעם שהמשתמש ילחץ על כפתור האיפוס:

   מסמך.getElementById("אִתחוּל").addEventListener(
   "נְקִישָׁה", 
   פוּנקצִיָה() {
    }
   );

4. עבור כל תא ברשת, קבל את רכיב ה-HTML באמצעות הפונקציה getElementById(). אפס את innerHTML כדי להסיר את הסמלים "O" ו-"X", והסר את כל שאר עיצובי ה-CSS:

   ל (לתת אני = 1; אני <= 9; i++) {
   מסמך.getElementById (i.toString()).innerHTML = "";
   מסמך.getElementById (i.toString()).classList.remove("איקס");
   מסמך.getElementById (i.toString()).classList.remove("או");
   מסמך.getElementById (i.toString()).classList.remove("לנצח");
    המשחק הסתיים = שֶׁקֶר;
   }

5. הפעל את המשחק על ידי פתיחת הקובץ "index.html" בדפדפן אינטרנט.
6. התחל להציב סמלי "X" ו-"O" על הרשת. נסה לגרום לאחד הסמלים לנצח.
7. לחץ על לחצן האיפוס כדי לאפס את לוח המשחק.

לימוד JavaScript על ידי יצירת משחקים

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

אין דרך טובה יותר לשפר את התכנות שלך מאשר לתרגל כתיבת תוכניות!