GAME DEVELOPMENT WITH AI - LESSON 5

המשחק הוויראלי הבא שלכם

שיעור 5 - Flappy Bird למובייל עם סאונד

📱

🔊

👻

הבעיה: המשחק לא עובד בטלפון

במחשב ✓

לוחצים על מקלדת
Snake עובד מושלם
Spacebar, חצים
😊 הכל טוב

בטלפון ✗

אין מקלדת
לוחצים על המסך
שום דבר לא קורה
😢 המשחק מת

למעלה מ-60% משחקנים משחקים במובייל!

מושג חדש: Event Listeners

EVENT LISTENERS

מאזינים לאירועים - התגובה לפעולות משתמש

הדרך שבה הקוד "מאזין" לפעולות:
onKeyDown - מישהו לחץ על מקש (מחשב)
onTouchStart - מישהו נגע במסך (טלפון)

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

כוח הכבידה - הפיזיקה של המשחק

                // Task

                Create a Flappy Bird clone

                in a single index.html file.

                // Features

                1. The character: procedurally drawn white ghost

                2. Gravity constantly pulls it down

                3. Obstacles: green pipes moving left

                4. Gap in the middle for passing through

                // Style

                Dark blue gradient background

המהפכה: Touch Events

TOUCH vs CLICK

Click Event

עובד גם במובייל
אבל עם עיכוב של
300ms ⏱️

Touch Event

מהיר ומדויק
תגובה מיידית
0ms ⚡

Responsive Design - התאמה לכל מסך

01 Viewport - <meta name="viewport"> לתצוגה נכונה
02 Full-Screen Canvas - 100% רוחב וגובה
03 Both Controls - Spacebar + Touch במקביל
04 Prevent Scroll - מניעת גלילה לא רצויה

סאונד בלי קבצים: Web Audio API

WEB AUDIO API

יצירת סאונד בדפדפן באמצעות קוד

AudioContext - המנוע המרכזי לסאונד
Oscillator - מחולל גלי קול בתדרים שונים
Frequency - תדר גבוה = צליל גבוה (Beep 🔔)
Waveform - צורת הגל קובעת את הצבע הקולי

הדפדפן הוא סינתיסייזר מלא! במקום להוריד MP3, אנחנו מלחינים בקוד.

צורות גל: Waveforms

SINE WAVE

רך ונקי
כמו חליל 🎵
טוב ל-Beeps

SQUARE WAVE

קשה ואלקטרוני
כמו משחקי 8-Bit 🎮
צליל רטרו

SAWTOOTH WAVE

חד ומתכתי
כמו חרירות ⚡
טוב ל-Buzzes

TRIANGLE WAVE

רך יחסית
באמצע 🔺
צליל מעוגל

לב המשחק: Game Loop

לולאה שרצה 60 פעמים בשנייה (60 FPS)

📐

Update Physics

כבידה + מהירות

💥

Check Collisions

AABB Detection

🎯

Update Score

ניקוד + High Score

🎨

Render

ציור על Canvas

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

📱

Touch Events

מעבר ממקלדת למגע - המשחק עובד בכל מכשיר

🎨

Responsive Design

התאמה אוטומטית לכל גודל מסך - טלפון, טאבלט, מחשב

🔊

Web Audio API

סאונד מסונתז בלי קבצים - Beeps, Buzzes, Dings

🎮

Game Loop

הלב של כל משחק - 60 FPS של פיזיקה, התנגשויות וציור

האתגר שלכם: שנו את הכבידה!

נסו gravity = 0.8 במקום 0.6. מה קורה?
בונוס: הוסיפו סוג מכשול נוסף מלבד צינורות!