Mace Duel Mobile: דו-קרב מקוון לדפדפן עם שליטה מלאה מהנייד

מהו Mace Duel Mobile?

Mace Duel Mobile הוא מימוש מעשי למשחק דו־קרב מקוון בדפדפן, המיועד גם לטלפון וגם למחשב. בצד הלקוח הוא נשען על TypeScript, Vite ו־Three.js; בצד השרת על Node.js, TypeScript ו־WebSocket באמצעות ws.

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

מה כולל המשחק?

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

למה השרת הוא הסמכות?

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

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

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

שליטה נוחה במובייל

ממשק המגע מתוכנן למצב אופקי ומחלק את המסך לאזורי פעולה ברורים:

• ג׳ויסטיק בצד שמאל לתנועה;
• גרירה בצד ימין לשינוי כיוון המבט;
• כפתורי קפיצה וריצה;
• כפתור מתקפת אלה;
• כפתור מטען רוח.

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

ארכיטקטורת הפרויקט

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

server/
  ניהול חדרים, סימולציה קבועה, תנועה, קרבות, קליעים,
  ניקוד, heartbeat ובדיקת הודעות.

shared/
  חוקי משחק, קבועים, טיפוסי פרוטוקול וחישובי נזק משותפים.

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

חוקי הקרב בקצרה

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

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

ביצועים בדפדפן

בזירה הכוללת פריטים רבים שחוזרים על אותה גאומטריה וחומר, InstancedMesh של Three.js מתאים במיוחד להצגה מרובת מופעים של אותו אובייקט 2. זהו כלי שימושי, למשל, לאריחי קרקע, עמודים או קישוטים חוזרים.

גם צללים יכולים להיות יקרים במכשירים ניידים. ב־Three.js ניתן לשלוט במפת הצללים של המנוע, והיא אף כבויה כברירת מחדל; לכן אפשר להשאיר אותה כבויה במכשירים חלשים או להציע מתג איכות גרפית בהגדרות 4.

דגשים לפריסה

לפריסה ציבורית יש להפעיל את הלקוח והחיבור בזמן אמת דרך HTTPS ו־WSS. בעת שימוש ב־reverse proxy, יש לוודא שהגדרות WebSocket תומכות בשדרוג החיבור ושמנגנון heartbeat פעיל, כדי לזהות ניתוקים ולשחרר חדרים שהתפנו.

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

נקודת פתיחה טובה, לא מוצר מוגמר

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