שיעור 9
אפליקציה רבת-שחקנים
פלטפורמת Sender
אחרי לחיצה על תיבה 4 - אנחנו רואים בקונסול ש:�1.שלחנו הודעה על קליק על תיבה 4.
2. קיבלנו הודעה על קליק על תיבה 4.
אנחנו רואים בקונסול ש:�קיבלנו הודעה על קליק על תיבה 4.
משמע: בוצעה הקלקה על כפתור מספר 4 בחלון דפדפן אחר
הכל מבוסס על צ'אט, או שליחת הודעות - אחד שולח, כולם מקבלים�Broadcast
התקנת שרת node.js�מקומי localhost
א. התקנת node.js:
בחרו את "הגרסה שמתאימה לרוב המשתמשים" פה:
https://nodejs.org/en/
ב. הורדת הזיפ של פלטפורמת הסנדר.
http://www.tau.ac.il/~ehadas/must/sender.zip
יש לפתוח אל תוך תיקיה במחשב.
ג. הרצת השרת:
יש לפתוח cmd, לעשות cd לפולדר ומשם להריץ node index.js
לראות שאין שגיאות.
ד. התחברות לשרת:
יש לפתוח דפדפן ולגלוש ל- http://localhost:3000
ה. בדיקה:
יש לפתוח חלון גלישה בסתר ולגלוש לאותו מקום. לצ'וטט ביניהם וללחוץ על התיבות.
שליחת הודעה
our.js
index.html
our.js
כשנרצה לשלוח הודעה:
index.html
קבלת הודעה
our.js
זהו המקרה בו קיבלנו הודעה מסוג chat message שענתה לקטגוריה ###box### ואז מספר התיבה.
במקרה כזה נקבל קריאה לפונקציה receiveBox עם מספר התיבה ונוכל לטפל באירוע על-ידי עדכון ה-DOM
our.js
זהו המקרה בו קיבלנו הודעה מסוג chat message שמתחילה ב- ###box### ואז מספר התיבה.
במקרה כזה נקבל קריאה לפונקציה receiveBox עם מספר התיבה ונוכל לטפל באירוע על-ידי עדכון ה-DOM
טיפול בהודעה ספציפית
דוגמה: משחק שאלות� "זה הסוד שלי"
נרצה שיהיו שני שחקנים. האחד אמור לגלות מה הסוד של השני. האחד שואל שאלות (דרך הצ'אט). השני עונה בכן ולא.
נרצה ליצור שני קבצים: player1.html
player2.html
כדי שהשרת יכיר את הקבצים, נצטרך לערוך את index.js
אחרי שינוי בשרת, יש "להוריד" ו"להעלות" אותו. נעצור את התהליך ונריץ מחדש.
תרגיל 1: העתיקו את index.html ל-player1.html ול-player2.html, עדכנו את index.js, הורידו והעלו את השרת כך ששניהם יעבדו.
נרצה לעצב את המשחק. נצטרך לקבוע מה ההודעות שישלחו בין שני השחקנים.
שחקן 1 - השואל:
א. שליחת טקסט - נשתמש בצ'אט.
ב. הודעת "נכנעתי" - נשתמש באחת התיבות.
שחקן 2 - המשיב:
א. שליחת טקסט - לא נאפשר.
ב. הודעות "כן", "לא", "לא פה ולא שם" - באמצעות תיבות.
הודעות מיוחדות (ניתן להם מספרים):
100 - נכנעתי
101 - כן
102 - לא
103 - לא פה ולא שם
player1.html
player2.html
תרגיל 2: עדכנו את קבצי ה-HTML.
נותר לנו לעדכן את הלוגיקה כאשר אנחנו מקבלים את ההודעות. למעשה בכל התיבות שהגדרנו פשוט נוסיף את הטקסט המתאים לשיחה.
נותר לנו לעדכן את הלוגיקה כאשר אנחנו מקבלים את ההודעות. למעשה בכל התיבות שהגדרנו פשוט נוסיף את הטקסט המתאים לשיחה.
הוספת הטקסט "נכנעתי" לתיבת השיחה:
document.getElementById("messages").innerHTML +=
"<li> נכנעתי </li>";
תרגיל: �איפה מוסיפים את השורה הזו?
באיזה תנאי?
�איפה מוסיפים את השורה הזו?
כשההודעה מתקבלת - receiveBox
באיזה תנאי?
שקיבלנו את ההודעה המתאימה, קוד 100.
our.js
הוא משותף לכל ה-HTML-ים
תרגיל 3: �הוסיפו באותו מקום את עדכון הצ'אט להודעות האחרות. הריצו!
הקוד זמין לכם פה: