משחק טרוויה מוזיקלית מדהים לרדיו קול חי מיוזיק kcm.fm

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

כמובן שמיד נרתמנו למשימה והתחלנו לפתח את המשחק!

רוצים לשחק? לחצו כאן למשחק מיוזיקליק של קול חי מיוזיק>>

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

שלבי המשחק

• המשתתפים במשחק יכול לשחק בשלוש אפשרויות, דרך GMAIL, דרך שם+טלפון או בצורה אנונימית.
• בכל שלב השחקן מקבל 10 שאלות והוא יכול לטעות עד 3 פעמים.
• במידה וצדק לפחות בשמונה מהשאלות הוא ממשיך לשלב הבא.
• במידה וטעה הוא חוזר שוב על אותו שלב עד שיעבור אותו.
• בסיום חמישה שלבים השחקן יכול להמשיך ולשחק בשלבים מההתחלה ולצבור עוד ועוד ניקוד.

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

סרטון ההשקה של המשחק בשידור חי ברדיו ובערוצי הדיגיטל

ההשקעה של משחק המיוזיקליק של רדיו קול חי מיוזיק בפיתוח חברת CloseApp

הסבר טכני על פיתוח המשחק

את המשחק פיתחנו באמצעות ZIM.JS המופלאה שמאפשרת לפתח משחקים ב-HTML5 עבור דפדפנים בכל סוגי המכשירים המודרניים. המשחקים יכולים להיות משוחקים בטלפון חכם ובמחשב ובשניהם החוויה מהנה ומותאמת.
בצד השרת פיתחנו את מערכת ההרשמה ושמירת השחקנים עם Node.js והדטא בייס של MongoDB.

ואיך הגיבו על המשחק בשטח

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

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

באנר פרסומת של המשחק

באנר עבור קול חי מיוזיק

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

בואו לשחק במשחק קול חי מיוזיק.

את המשחק משחק בקישור הבא, נשמח לשמוע את תגובותיכם על המשחק.

http://musiclick.kcm.fm/

מודעת פרסומת למשחק מיוזיקליק

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

פיתוח של משחק ניווט און ליין – משחק לחידוד מסרים

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

הקישור למשחק באתר של MyRouteOnline

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

תהליך פיתוח משחק הניווט:

• 

• 

• 

• 

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

וככה זה נראה במשחק שיצא אל העולם:

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

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

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

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

אז מה זה בוט?

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

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

הבוט זמין תמיד, עונה תמיד ועושה את העבודה בצורה שמוכרת ונעימה למשתמש.

בוט מחולל המשחקים

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

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

משחק סיימון און ליין – מקור ויקיפידיה

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

מחולל משחקים בבוט פיתוח חדשני יצירת משחק בבוט

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

בואו ליצור משחק עם בוט מחולל המשחקים שלנו>>

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

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

מזל טוב!

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

רוצים לשמוע עוד פרטים? לדבר איתנו על בוטים שאתם חולמים עליהם? לפתח משחקי און ליין או משחקים לימודיים בקלי קלות? דברו איתנו>>

ראיון על משחק השבת עם עודד מנשה בערוץ 20

הראיון בערוץ 20 – עמי חניא מנכ"ל חברת CloseApp מתראיין אצל עודד מנשה

בהמשך לעשיה ולמשחקים שאנחנו מפתחים במשחק השבת היום התראיינתי בתוכנית של עודד מנשה בערוץ 20.

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

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

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

סרטון תגובות שחקנים על משחק השבת:

סרטון סיכום לספר בראשית:

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

משחק לקהילה ליום העצמאות – הפעלה מדהימה למשחק מרחוק

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

הפעלה ליום העצמאות – משחק משפחתי מיוחד ומקוון.

קצת על המשחק שלנו ליום העצמאות

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

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

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

פלייר להפעלה ליום העצמאות CloseApp

התאמות יחודיות ומשחק לכולם

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

שילוב של טקס הדלקת משואות במשחק

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

רוצים לשחק? לפרטים והזמנות – שרית ברנס – 050-7770957

משהו נחמד, משחק פלאש כהן גדול

עדכון 2019 – בשעה טובה העלנו גרסה למשחק ב-HTML5 במסגרת משחק השבת הכוללת התאמה לכלל המכשירים הכנסו ושחקו >>

——–

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

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

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

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

מחמם את הלב לראות שאנשים לומדים ומשתמשים במשחק שמזמן שכחתי שעשיתי 🙂

כמובן ששלחתי להם את המשחק שלא יפסידו חלילה את הלימוד.

משחק מראה כהן גדול

מראה כהן גדול – משחק – מבראשית

שימוש ב-bitmapdata מתקדמים

מחלקה bitmapdata מאפשרת לנו "לזכור" מבנה של displayObject, להעתיק אותו, לשנות אותו ולעשות עליו מניפולציות שונות.
לדוגמא, ניתן לחתוך תמונות, לעוות תמונות, לשנות פיקסלים ספציפיים ועוד.
תיעוד המחלקה נמצא כאן: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html
בשביל להבין את העבודה על המחלקה נתחיל מדוגמא פשוטה, נניח שעל הבמה יש לנו movieClip שמצוייר בו ציור כל שהוא ושמו mc, בדוגמא הראשונה נשכפל את מראה המוביקליפ:

import flash.display.BitmapData;
//איתחול המחלקה ביטמפדטא המחלקה מקבלת את הפרמטרים הבאים
//BitmapData(צבע האטימות,האם השכפול יתחשב באטימות,גובה המקור או גובה היעד,רוחב המקור או רוחב היעד);
var bmd:BitmapData = new BitmapData(mc.width,mc.height);
//הוראה לביטמפדטא לצייר את המוביקליפ
bmd.draw(mc);

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

 

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);

עד כאן בעצם יצרנו שכפול של המוביקליפ אל הבמה, מכאן מתחיל הכיף, לפני שאנחנו יוצקים את הביטמפדטא אל הביטמפ אנחנו יכולים לבצע עליו מניפולציות, את המניפולציות אפשר לבצע בכמה דרכים, אני אראה כאן דוגמא המבוססת על הדוקומנטציה של פלאש, בשביל לבצע את המניפולציה הזו, נשתמש במחלקה מטריקס(כן כמו הסרט), שמאפשרת לשחק עם הביטמפדטא ולבצע עליו פעולות כמו חיתוך,עיוות,הקטנה והגדלה, ניתן לקרוא כאן את התיעוד המלא: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html
בדוגמא שלי אני אבצע על התמונה שינוי צורה להקטנה פשוטה ע"י מטריקס:

 

import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Matrix;

//הגדרת הרוחב והגובה חלקי 2 כיוון שאנחנו מעוניינים לצייר את הביטמפדטא בצורה המוטקנת בחצי
var bmd:BitmapData = new BitmapData(mc.width/2,mc.height/2);
//איתחול מטריקס
var mat:Matrix = new Matrix();
//שימוש בפעולה scale
mat.scale(0.5,0.5);
//הוראה לביטמפדטא לצייר את המוביקליפ
//ולהכיל עליו גם את ההוראות של המטריקס
bmd.draw(mc,mat);

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);

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

 

//הגדרנו את האטימות כאמת כיוון שאנחנו רוצים לשקף חלק מהביטמפדטא
var bmd:BitmapData = new BitmapData(mc.width,mc.height,true);
bmd.draw(mc);
//מעבר על כל הפיקסלים במפת הסביות שלנו
//i רוחב
//j גובה
for(var i:uint=0;i<bmd.width;i++)
{

for(var j:uint=0;j<bmd.height;j++)
{
//בדיקה של צבע הפיקסל הספציפי
if(bmd.getPixel(i,j)==0xff0000)
{
//השמת צבע "שקוף" על הפיקסל הנוכחי
//המספר המועבר הוא בעצם מספר רגיל+שני ספרות בסוף המציינות את רמת השקיפות
bmd.setPixel32(i,j,0x00000000);
}
}

}

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);

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