משחק הדגמה HTML5 Texas Holdem Poker Demo

 

09/10/2011

נכתב ע"י משה הלוי

[email protected]

 

עבור תחרות פיתוח אפליקציות – HTML5FEST APP CONTEST

המתקיימת ביום 25 אוקטובר 2011

במסגרת כנס HTML5FEST של איגוד האינטרנט הישראלי ו W3C ישראל

 

 

הקדמה

 

האפליקציה המוגשת לתחרות עושה שימוש נרחב ברכיב canvas וביכולות שלו להצגת גרפיקה הכתובה בשפת JavaScript בקוד פתוח.

האפליקציה נבדקה ועבדה בהצלחה על מערכות ההפעלה והדפדפנים הבאים:

 

 

מערכת הפעלה

 

דפדפן

גירסה

 

Windows XP SP3

Firefox

7.0.1

 

Windows XP SP3

Google Chrome

14.0.835.186

 

Windows XP SP3

Apple Safari

5.1

 

 

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

Intel Pentium Dual CPU

E2180 @ 2Ghz

RAM 1GB 2GHz

 

 

האפליקציה נבדקה גם על מכשיר מיני טאבלט של חברת Apple מסוג iPod Touch דור 3 הכולל זכרון בגודל 8GB ומערכת הפעלה iOS 4.1.

 

 

 

כיצד האפליקציה עובדת

 

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

 

עד 9 שחקנים יכולים להשתתף במשחק. שחקן מספר 0 נחשב כמחלק הקלפים – "הדילר" (Dealer).

הדילר יושב בשעה 12 של השולחן.

שחקן מספר 1 יושב בצד ימין של הדילר. שחקן מספר 2 מיד אחריו בכיוון השעון. כך עד לשחקן 9 שיושב בצד שמאל של הדילר (שעה 11).

 

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

המשתמש יכול לסלק שחקנים מהשולחן על ידי כפתור LEAVE.

המשתמש יכול להתחיל משחק אם יש יותר מ 2 שחקנים על השולחן (כפתור NEW GAME).

המשתמש יכול לחלק 2 קלפים לכל שחקן שיושב בשולחן על ידי כפתור DEAL. שחקן בודד יכול לקבל קלפים על ידי לחיצה על מיקום השחקן בשולחן.

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

המשתמש יכול לחשוף את קלף הקהילה הרביעי על ידי לחיצה על כפתור TURN או על ידי לחיצה עם העכבר על מרכז השולחן.

המשתמש יכול לחשוף את קלף הקהילה החמישי והאחרון על ידי לחיצה על כפתור RIVER. או על ידי לחיצה עם העכבר על מרכז השולחן.

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

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

 

המשתמש יכול להיעזר בעכבר כדי להצביע על מקומות בשולחן: במרכז השולחן או במקום הישיבה של כל שחקן.

המשתמש יכול לחלק קלפים לשחקן, או לתת לו זמן לחשוב בזמן המשחק על ידי הפעלת טיימר (TIMER) עד לביצוע CHECK או FOLD .

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

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

 

חבילת הקלפים המכילה 52 קלפים שבזמן המשחק חלקם נמצאים על השולחן ואצל השחקנים מוצגת למשתמש עם מספר המכיל את מיקום הקלף: שולחן (מספר שווה או גדול מ 100) ו/או אצל שחקן (מספר מ 1 עד 9).

 

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

 

המשתמש יכול לשמור (SAVE) את מצב המשחק או לעלות משחק ששמר בעבר (LOAD).

 

 

רכיבים גרפיים בהם האפליקציה משתמשת

 

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

 

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

ציור הגרפיקה נעשה על ידי שימוש בפונקציות המובנות של רכיב הקונטקס (context) של הקנבס (canvas).

השולחן מצויר כמלבן שמשני צדדיו שני חצאי עיגול בצירוף מערך צבעים.

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

הצ'יפים מצויירים כעיגולים על משולשי פיצה (קשתות מחוברות למרכז העיגול).

 

 

הקבצים המרכיבים את האפליקציה

 

 

שם הקובץ

 

תפקיד

תלות בקובץ אחר

1.

poker.htm

הקובץ הראשי:

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

מפעיל את המשחק.

 

תלוי בכל הקבצים

2.

pokerStyle.css

הגדרות עיצוב של האלמנטים – קישורים, לחצנים וקנבסים

 

עצמאי

3.

pokerVis.js

ניהול אובייקט תצוגה (objVis) הכולל אלמנטים גרפיים שונים של המשחק:

חדר (Room)

שולחן (Table)

שחקן (Player)

קלפים (Cards)

טיימר (Timer)

צ'יפים (ז'יטונים) (Chips)

 

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

 

מודל זה משתמש ישירות ב API של HTML5  והאלמנטים החדשים, כמו canvas.

 

עצמאי

4.

pokerAlg.js

הגדרת אובייקטים פשוטים של מידע:

קבועים (Const)

קלף (CardObj)

יד (HandObj)

 

כולל הגדרת פונקציות חישוביות שונות:

הוספת קלפים ליד (Add)

מיון קלפים לפי מספר או צבע (Sort)

חישוב יד זוכה (Evaluate)

 

עצמאי

5.

pokerData.js

הגדרת אובייקטים מורכבים של מידע:

שחקן (PlayerObj)

חפיסת קלפים (DeckObj)

מידע על מצב המשחק (DataObj)

 

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

 

באובייקט קיימת אפשרות לשמור את מצב המשחק ו/או לעלות משחק שנשמר בעבר (localStorage).

 

pokerAlg.js

6.

pokerEvent.js

איתחול ורישום הטיפול באירועי עכבר ומקלדת

 

עצמאי

7.

pokerClock.js

קוד לציור ספרות של שעון דיגיטלי

 

עצמאי

8.

pokerGame.js

קובץ לוגיקת המשחק

משלב בין מודל התצוגה לבין מודל הנתונים.

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

 

pokerLog.js

pokerVis.js

pokerClock.js

pokerEvent.js

pokerData.js

pokerAlg.js

 

9.

pokerLog.js

קובץ קוד המצעד פעולות שבוצעו במהלך המשחק בחלון טקסטואלי.

 

קיימים שלושה סוגי רישום במהלך המשחק:

  • M הודעות (Messages)
  • F פונקציות שנקראה במהלך המשחק (Functions)
  • C קלפים שקיבלו שחקנים ו/או השולחן (Cards)

 

עצמאי

10.

pokerHelp.htm

קובץ עזרה המסביר על האפליקציה והמשחק

 

עצמאי

 

 

 

קריטריונים להערכת זוכים (בתחרות HTML5FEST)

 

אנימציות:

באפליקציה נעשה שימוש באנימציות קלות לפי העניין:

 

 

מודלים:

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

מודל התצוגה (pokerVis.js) ומודל הנתונים (pokerData.js) מופרדים אחד מן השני.

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

מודל הנתונים הוא בעצם מכונת מצבים ששומרת את מצבי המשחק. למשל, אילו שחקנים קיבלו קלפים (GOT), מה מספר הקלפים על השולחן (Table Deck), האם שחקנים כלשהם פרשו (FOLD) בזמן המשחק, האם יש מנצח (Winner) וכדומה.

 

 

מקוריות:

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

 

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

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

 

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

 

 

השקעה:

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

 

 

שימוש ברכיבים חדשים

האפליקציה עושה בשימוש ברכיבים חדשים של HTML5:

 

 

זכויות יוצרים

 

זכויות היוצרים באפליקציה המוגשת לתחרות שייכות לכותב האפליקציה ומסמך זה (משה הלוי).