דלג לתוכן
מדריכים#לבנות משחק עם AI#Claude Code משחק#TWA אנדרואיד

איך בניתי משחק מכות שלם עם קלוד קוד (Claude Code) והעליתי אותו לאפסטור

הסיפור המלא והמדריך המפורט: איך נבנה 'הדרך לכנסת', משחק מכות סאטירי שלם, עם קלוד קוד (Claude Code), בלי מנוע משחקים ובלי אנדרואיד סטודיו, ואיך הוא הגיע לאפסטור של אפל ולטלפונים, שלב אחרי שלב.

יעקב צדק
יעקב צדק · מומחה AI·9 דקות קריאה
איור בסגנון פיקסל-ארט: שני לוחמים במשחק מכות רטרו על רקע כיפת בניין ממשלתי, לצד טלפון שמריץ את המשחק
בשורה התחתונה
  • המשחק נבנה כאתר: JavaScript נקי על Canvas, בלי שום מנוע משחקים או פריימוורק.
  • מנוע שלם נכתב בשיחות עם קלוד קוד: לוחמים, AI ליריב ממוחשב, מולטיפלייר מקוון, דירוג ELO עולמי.
  • אנדרואיד: עטיפת TWA (Trusted Web Activity) של כ-450KB, שנבנתה ידנית עם Gradle, בלי אנדרואיד סטודיו.
קורס אינטראקטיבי עם תעודהקלוד קוד (Claude Code) 2026הכלי שבונה, מסדר ומריץ על הקבצים שלכם, בלי רקע טכני. שיעור ראשון חינם.₪9.90לקורס ←
הידעת?

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

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

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

המשחק עצמו: הדרך לכנסת באפסטור של אפל · לשחק בדפדפן

בקצרה

  • המשחק נבנה כאתר: JavaScript נקי על Canvas, בלי שום מנוע משחקים או פריימוורק.
  • מנוע שלם נכתב בשיחות עם קלוד קוד: לוחמים, AI ליריב ממוחשב, מולטיפלייר מקוון, דירוג ELO עולמי.
  • אנדרואיד: עטיפת TWA (Trusted Web Activity) של כ-450KB, שנבנתה ידנית עם Gradle, בלי אנדרואיד סטודיו.
  • אייפון: אפליקציה שמארזת את המשחק במלואו, עברה את ביקורת אפל ופורסמה באפסטור.
  • עדכון תוכן במשחק לא דורש גרסה חדשה בחנות: דוחפים לאתר, וכל המשתמשים מקבלים מיד.

שלב 1: למה בכלל לבנות משחק כאתר?

ההחלטה הארכיטקטונית הכי חשובה בפרויקט התקבלה ביום הראשון: המשחק הוא אתר. לא פרויקט Unity, לא Godot, לא React Native. קובץ HTML אחד שטוען מודולים של JavaScript ומצייר הכל על Canvas.

הסיבות, בדיעבד, התבררו כנכונות אחת אחת:

  1. איטרציות בשניות. כל שינוי שקלוד קוד עושה נבדק מיד בדפדפן. אין קומפילציה, אין המתנה לבילד.
  2. פלטפורמה אחת, כל המכשירים. אותו קוד רץ במחשב, באנדרואיד ובאייפון. ההבדל הוא רק העטיפה.
  3. עדכונים בלי חנות. כשהמשחק חי באתר, תיקון באג מגיע לכל השחקנים ברגע שהוא עולה לשרת. אין "מחכים לאישור גרסה".
  4. AI כותב JavaScript מצוין. מודלים של קוד ראו יותר JavaScript מכל שפה אחרת. כשעובדים עם קלוד קוד, לבחור את השפה שהוא הכי חזק בה זה יתרון מובנה.

שלב 2: מנוע משחק שלם, מודול אחרי מודול

אנשים מדמיינים "AI בונה משחק" כפקודה אחת שמוציאה משחק. במציאות זה פרויקט הנדסי מסודר, שנבנה שכבה אחרי שכבה לאורך שיחות. ככה נראה המבנה הסופי של המנוע, כ-20 מודולים של JavaScript נקי:

מודולתפקיד
pixel.js, sprites.js, render.jsציור הדמויות והזירות על Canvas בסגנון פיקסל-ארט
fighter.js, projectile.jsפיזיקת הלחימה: מכות, קפיצות, מכות חתימה, פגיעות
ai.jsהיריב הממוחשב: התקרבות, תזמון מכות, רמות קושי
game.js, backdrop.jsלולאת המשחק, השלבים והזירות
input.js, touch.jsמקלדת במחשב, כפתורי מגע בטלפון
net.jsמולטיפלייר מקוון בזמן אמת (P2P עם PeerJS)
rank.jsטבלת דירוג עולמית בשיטת ELO, בלי הרשמה
audio.js, music.jsאפקטים ומוזיקה
save.js, i18n.jsשמירת התקדמות מקומית, תמיכה בשפות

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

  1. דרשו הפרדה למודולים מהיום הראשון. קובץ ענק אחד הופך כל שינוי למסוכן. כשכל תחום חי בקובץ משלו, אפשר לבקש "תקן את ה-AI של הבוס בשלב 5" בלי לפחד שהמולטיפלייר יישבר.
  2. בדקו כל פיצ'ר ברגע שהוא נבנה. לא אוספים עשרה פיצ'רים ואז בודקים. משחקים אחרי כל שינוי. באג שמתגלה מיד מתוקן בדקה; באג שמתגלה אחרי שבוע דורש חפירה.
  3. המולטיפלייר היה החלק הקשה באמת. קרב מקומי נגד המחשב זה פרויקט של ערב. סנכרון שני שחקנים מרחוק, עם חיבורי P2P, חדרים פרטיים עם קוד ודירוג עולמי, זה החלק שדרש הכי הרבה סבלנות ואיטרציות.

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

שלב 3: מהאתר לאפליקציית אנדרואיד, בלי אנדרואיד סטודיו

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

הבחירה: TWA (Trusted Web Activity)

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

הקמת סביבת הבנייה

בסביבת הענן היו Java ו-Gradle, ואת ה-SDK של אנדרואיד מורידים ישירות מגוגל ככלי שורת פקודה (command line tools). זה כל מה שצריך; אנדרואיד סטודיו הוא נוחות, לא דרישה.

כתיבת פרויקט האנדרואיד ידנית

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

  • build.gradle: מזהה האפליקציה (com.littleknesset), מספרי גרסה, ותלות אחת בלבד: androidbrowserhelper.
  • AndroidManifest.xml: הצהרה על מסך פתיחה שמפנה לכתובת המשחק, ונעילת המסך לרוחב.
  • אייקונים: נוצרו מהאייקון של המשחק בסקריפט פייתון קטן שמייצר את כל חמש הרזולוציות הנדרשות.

מפתח החתימה: הקובץ שאסור לאבד

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

קישור הדומיין לאפליקציה

הקסם שמעלים את סרגל הכתובת: קובץ בשם assetlinks.json שיושב באתר תחת /.well-known/, ומכיל את טביעת האצבע (SHA-256) של מפתח החתימה. זה מה שמוכיח לאנדרואיד שהאתר והאפליקציה שייכים לאותו בעלים:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.littleknesset",
    "sha256_cert_fingerprints": ["38:91:E0:38:..."]
  }
}]

הבנייה: פקודה אחת

Gradle מוריד את התלויות, מהדר, אורז וחותם עם המפתח, הכל בפקודת בנייה אחת. התוצאה: קובץ APK מוכן להתקנה וקובץ AAB מוכן להעלאה לגוגל פליי.

הקריסה, והדיבוג שפתר אותה

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

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

ממשיכים לתרגול: קורס אינטראקטיבי עם תעודהקלוד קוד (Claude Code) 2026הכלי שבונה, מסדר ומריץ על הקבצים שלכם, בלי רקע טכני. שיעור ראשון חינם.₪9.90לקורס ←

שלב 4: האפסטור של אפל

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

התהליך מול אפל כולל כמה תחנות שכל מפתח עצמאי צריך להכיר:

  1. חשבון Apple Developer (99 דולר לשנה), עם אימות זהות.
  2. App Store Connect: יצירת האפליקציה, מילוי דף החנות, צילומי מסך, תיאור, מילות מפתח ומדיניות פרטיות.
  3. דירוג גיל ותוכן: משחק מכות סאטירי מחייב שקיפות. המשחק הוגדר 9+ והתיאור מצהיר במפורש: התוכן סאטירי ובדיוני, אינו קשור, ממומן או מאושר על ידי אף מפלגה, חבר כנסת או גוף ממשלתי.
  4. ביקורת אפל: הגשה והמתנה. הביקורת בודקת יציבות, תוכן והתאמה לקווים המנחים.

ב-26 באוגוסט 2026 האפליקציה אושרה ופורסמה. בחינם, בלי פרסומות ובלי רכישות:

הדרך לכנסת: משחק מכות סאטירי, באפסטור של אפל ←

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

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

ככה נראית תחזוקה של המשחק היום:

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

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

מה זה אומר לעסק שלכם?

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

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

שאלות נפוצות

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

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

איך המולטיפלייר עובד בלי שרת משחק? בחיבור P2P ישיר בין השחקנים (ספריית PeerJS). השרת רק מפגיש בין היריבים; הקרב עצמו רץ ישירות בין שני הטלפונים. חדר פרטי עם קוד עובד באותה שיטה.

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

שורה תחתונה

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

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

🎬 חדש · קורס וידאו

קלוד קוד (Claude Code) בווידאו: מההתקנה ועד מערכת שעובדת

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

  • ▶ 3 שיעורים ראשונים בחינם
  • 🛠️ בונים מערכות אמיתיות
  • 🎓 תעודת סיום
לצפייה בשיעורים החינמיים ←
קורס וידאו קלוד קוד
▶

🎬 חדש · קורס וידאו

פיתוח משחקים עם AI: קלוד קוד ו-ChatGPT בווידאו

60 שיעורים: מעצבים משחק עם ChatGPT, בונים אותו עם קלוד קוד ו-Phaser 4, מייצרים גרפיקה ומפרסמים ב-itch.io. ארקייד, פלטפורמר ופאזל בעברית, בלי ניסיון בתכנות.

  • ▶ 3 שיעורים ראשונים בחינם
  • 🎮 4 משחקים שבונים בפועל
  • 🎓 תעודת סיום
לצפייה בשיעורים החינמיים ←
קורס וידאו פיתוח משחקים עם AI
▶
🎁
רוצים לפנק מישהו שאתם אוהבים במתנה עם ערך אמיתי?

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

לרכישת שובר מתנה ←
ממשיכים לתרגול: קורס אינטראקטיבי עם תעודהקלוד קוד (Claude Code) 2026הכלי שבונה, מסדר ומריץ על הקבצים שלכם, בלי רקע טכני. שיעור ראשון חינם.₪9.90לקורס ←

קישורים רלוונטיים

יעקב צדק, מומחה AI בישראלמומחה בינה מלאכותית, ייעוץ אישיסדנת קלוד קוד, כל הפרטיםAI לרואי חשבוןקלוד (Claude) לרואי חשבון, מדריך מעשיAI לעורכי דיןהטמעת AI בארגונים, מדריךסדנת Claude Code לארגוניםכלי AI ליצירת וידאו, המדריךAI לפי תחום (נדל"ן, עו"ד ועוד)הטמעת AI בארגוןבניית סוכני AI (AI Agents)מדריך סוכני AI, מה זה סוכן AIייעוץ אסטרטגי AIסדנאות AI מעשיותהרצאות AI לארגוניםמה זה MCP, המדריך המלאMCP, חיבור כלים ל-AIClaude Code, המדריך המלאClaude (קלוד), המדריך המרכזיכלי AI בעברית, מה עובד הכי טובקלוד בעברית, המדריך המרכזיClaude Fable 5 מול Mythos 5פייבל 5 (Claude Fable 5), מה חדשמה זה MCP, הסבר פשוט בעבריתקלוד (Claude) בעברית מימין לשמאל (RTL)גרוק (Grok), המדריך המלא בעבריתסונו (Suno), יצירת מוזיקה ב-AIלאבבל (Lovable), בניית אפליקציות עם AIקרסור (Cursor), עורך הקוד מבוסס ה-AIמילון מונחי AIקורס AI חינם, כל הקורסיםהקהילה הגדולה בישראלאיך בונים סוכן AI (AI Agent), 5 שלביםקורס קלוד קוד (Claude Code)השוואת מודלים של קלוד (Claude)איזה כלי AI הכי טוב ליצירת תמונותהרצאות AI לחברות ולארגוניםקורס קנבה למתחילים (Canva)קלוד (Claude) מול צ'אט-ג'י-פי-טי (ChatGPT)מומחה AI, ייעוץ, הרצאות וקורסיםסדנת קלוד קוד (Claude Code), הרשמהעברית בקלוד (Claude), כך מפעילים RTLסדנת קלודקלוד לעורכי דיןמה זה ג'מיניסוכן AI בעבריתקלוד אופוס 5 (Claude Opus 5), המדריך המלאאופוס 5 מול פייבל 5 (Opus 5 vs Fable 5)סופהבייס (Supabase) עם קלוד קוד (Claude Code)סופהבייס (Supabase), המדריך בעבריתקורס קלוד קוד (Claude Code) חינםסקילים לקלוד קוד (Claude Code Skills), המומלציםמפגש מבוא לקלוד קוד (Claude Code), מקומות אחרוניםמה ההבדל בין סוכן AI לצ'אטסדנת AI בגוף ביטחוני, כך זה נראה בפועלקלוד דסקטופ (Claude Desktop), התקנה ועברית RTLהיגספילד (Higgsfield), וידאו AI ופרסומות UGCבייס44 (Base44), המדריך המלא בעבריתקלוד קוד (Claude Code), איך משתמשים, מדריך מלאסקילים לקלוד (Claude Skills), המומלציםשרתי MCP הטובים ביותר לחיבור לקלוד (Claude)קלוד (Claude) לעורכי דין, המדריך המלאסקילים לקלודקלוד קוד (Claude Code) בעברית, מדריך התחלה מהירמומחה בינה מלאכותית בישראל, ייעוץ, הרצאות וסדנאותכיצד להשתמש בקלוד קוד (Claude Code)קלוד קוד (Claude Code) למתחילים, מדריך התקנהמה זה קלוד קוד (Claude Code)? המדריך המרכזי

שאלות נפוצות

האם הכתבה עזרה לכם?
שיתוף:WhatsAppLinkedInX
יעקב צדק
נכתב על ידי

יעקב צדק

מרצה AI מוביל בישראל, מטמיע בינה מלאכותית בארגונים מ-2021. מייסד LazySEO AI ומכללת צדק אקדמי, מוביל קהילות עם מעל 100,000 חברים. שותף רשמי של Meta, Google, Canva ו-TikTok.

עוד עליי ←