→ דף הבית
01 / 10
GAME DEVELOPMENT WITH AI - LESSON 2

בניתי אימפריה ב-10 דקות

שיעור 2 - בניית משחק Tycoon / Clicker

+1 +1 +1

מה נלמד היום?

Canvas מול DOM

Canvas (שיעור 1)

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

DOM (שיעור 2)

חלקי לגו מוכנים
כפתורים, טקסטים, רשימות
מתאים לממשקים וחנויות
💰 Clicker, חנויות, דשבורדים

היום לא צריך לצייר. צריך להרכיב.

מושג חדש: UI

UI
User Interface - ממשק משתמש
כל מה שהמשתמש רואה ולוחץ עליו:
כפתורים, מונה ניקוד, חנות שדרוגים, אנימציות.
Canvas = צייר ציור חופשי. DOM = הרכב לגו מחלקים מוכנים. הסוכן אלוף בשניהם.

הפרומפט הראשון - המנוע

// Task
Build a single-file HTML/CSS/JS 'Cupcake Clicker'.

// HTML Structure
Left: Giant 'Bake' button & counter. Right: 'Sweet Shop'.

// JS Logic
Invent 5 buyable auto-baking upgrades (scale math!).
Spawn a bonus cupcake every 10-15s for massive points.

// CSS Design
Sweet pink theme, fun hover & juicy click animations.

State - ניהול מצבים

STATE MANAGEMENT
בכל רגע, המשחק יודע ומנהל:
💰
כמה כסף
⛏️
כמה כורים
📈
כסף לשנייה

הבעיה: אינפלציה

בלי איזון

Mixing Bowl תמיד עולה 10
קונים אלף קערות בדקה
המשחק משעמם מיד
🥱 אין אתגר

עם איזון

המחיר עולה 15% כל קנייה
10 ← 12 ← 14 ← 16...
תמיד צריך לעבוד יותר
🔥 ממכר!

10
קנייה 1
12
קנייה 2
14
קנייה 3
16
קנייה 4
18
קנייה 5
// Fix inflation
Update the shop logic: The price of each upgrade
must increase by 15% after every purchase.
Round the price to the nearest integer.

הרגע המפחיד

⚠️

Refresh = הכל נעלם!

HTML ו-JavaScript בברירת מחדל לא זוכרים כלום.
סוגרים את הדפדפן? כל הכסף, כל הכורים, כל ההתקדמות – נמחקים.

LocalStorage - הכספת של הדפדפן

🔐

שמירה אוטומטית!

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

Add an auto-save feature using LocalStorage.
Save total cupcakes and owned items
every second, and restore when page loads.

מה למדנו היום?

🖱️

UI & DOM

ממשק משתמש עם כפתורים וחנויות - לא רק ציורים

📊

State Management

ניהול מצב המשחק - כמה כסף, כמה כורים

📈

Game Balance

עלות אקספוננציאלית - מחירים שעולים כל קנייה

💾

LocalStorage

שמירת נתונים - המשחק זוכר גם אחרי סגירה

שיעורי בית: Reskinning!

שנו את הנושא: מאפייה, מפעל מכוניות, חנות חיות...
הדמיון שלכם הוא הגבול!