בניית משחק טיק טק טואו באמצעות React

ברוכים הבאים לגרסה שלי של משחק הTic Tac Toe הקלאסי! יצרתי משחק Tic Tac Toe באמצעות React וSCSS, והשקעתי בו כ-6 שעות. המשחק כולל מצב של שחקן יחיד מול המחשב, פופ-אפ להכרזת מנצח, וספירות ניצחונות עבור שני השחקנים. בעוד שהגריד ניתן להתאמה ל-n x n, הלוגיקה הנוכחית של הניצחון תומכת רק ב-3 x 3. שיפורים עתידיים כוללים מהלכים חכמים יותר של המחשב ופונקציה של רב-משתתפים בזמן אמת.

סקירה כללית

• סך כל הזמן לפיתוח: ~6 שעות
• טכנולוגיות בשימוש: JavaScript (React) + SCSS

חוקי המשחק

1. מטרה

המטרה של המשחק היא לסדר שלושה מתוך הסמלים שלך (X או O) בשורה אופקית, אנכית או אלכסונית על גריד של 3 x 3.

2. סדר תור

• שחקן A תמיד מתחיל ומשחק כX.
• היריב המחשב משחק כO ומבצע את המהלך שלו מיד לאחר שחקן A.

3. מהלך המשחק

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

4. תנאי ניצחון

שחקן זוכה אם הוא מצליח להשיג:

• שלושה סמלים בשורה אופקית
• שלושה סמלים בעמודה אנכית, או
• שלושה סמלים בקו אלכסוני

5. שרטט

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

6. מעקב נקודות

ספירת ניצחונות עוקבת אחרי מספר הניצחונות הכולל של שחקן A ושל המחשב.

תכונות מיושמות (MVP)

הנה מה שנכלל בגרסה זו של המשחק:

1. שחק נגד המחשב: מצב משחק מהנה לשחקן יחיד שבו אתה מתמודד מול המחשב
2. חלון קפיצה להכרזת המנצח: בסוף כל משחק, חלון קופץ חושף את המנצח.
3. ספירת ניצחונות: עוקבת אחרי מספר הניצחונות הכולל של השחקן ושל המחשב.
4. רשת מותאמת אישית: צור רשת n x n (אם כי הלוגיקה לניצחון תומכת כרגע רק ב3 x 3).

שיפורים אפשריים

בהסתכלות קדימה, הנה כמה תחומים לשיפור:

1. [UX] אחסון מקומי לניקוד: שמור את ניקוד המשחקים מקומית כך שהם יישמרו לאחר רענון הדפדפן.
2. [UX/טכנולוגיה] מהלכים חכמים יותר של המחשב: החלף מהלכים אקראיים באלגוריתם למשחק תחרותי יותר.
3. [UX] ריבוי משתתפים בזמן אמת: אפשר לשני שחקנים להתחרות בזמן אמת באמצעות טכנולוגיות כמו Socket.io.
4. [טכנולוגיה] ארגון SCSS מתקדם: ארגן מחדש את SCSS בעזרת מיקסינים, משתנים וטכניקות מבנה טובות יותר.
5. [UX/טכנולוגיה] הידרדרות אלגנטית: ודא תאימות עם דפדפנים לא מודרניים לתמיכה רחבה יותר.

הגדרה ופיתוח

דרישות מוקדמות

לפני שמתחילים, ודאו שיש לכם Node.js מותקן (גרסה מומלצת: 6.4.1).

איך להתחיל

1. שכפול המאגר מ GitHub.

2. התקן תלותים:

npm install

3. הפעל את שרת הפיתוח:

npm start

• פתח את http://localhost:3000 בדפדפן שלך כדי לראות את האפליקציה.

4. (אופציונלי) בנה את הפרויקט לייצור:

npm run build

זה יוצר תיקיית build אופטימלית, מוכנה לפרישה.

בדיקות

הרץ בדיקות במצב צפייה אינטראקטיבית עם:

npm test

פרטים טכניים

מבנה קבצים

הפרויקט עוקב אחרי מבנה הסטנדרטי של Create React App עם גישה מבוססת רכיבים מודולריים.

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

תיאור וגישה

• האפליקציה הוקמה עם Create React App להקמה מהירה של MVP.
• המשחק מתחיל רשת בגודל n x n למשחק.
• לכל תא יש מאזין לאירוע קליק, המאפשר לשחקן A (X) לבצע את המהלך הראשון.
• תור המחשב מדמה לוגיקת בחירת תא אקראית, אשר תצטרך לשדרוג עבור גדלי רשת מותאמים.
• השתמשתי ב-SCSS לעיצוב עם דגש על מהירות על פני מורכבות במהלך הפיתוח.

גישה לבדיקה

בדיקות ידניות

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

בדיקות יחידה פוטנציאליות

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

סיכום

תודה שהקדשת זמן לחקור את הפרויקט שלי!

תוכל למצוא את קוד המקור המלא ולתרום לפרויקט הזה ב-GitHub. בואו נבנה דברים מגניבים יחד!