# בניית משחק חלל חלק 2: ציור גיבור ומפלצות על הקנבס ## שאלון לפני ההרצאה [שאלון לפני ההרצאה](https://ff-quizzes.netlify.app/web/quiz/31) ## הקנבס הקנבס הוא אלמנט HTML שבברירת מחדל אין לו תוכן; הוא כמו דף ריק. צריך להוסיף לו תוכן על ידי ציור עליו. ✅ קראו [עוד על Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) באתר MDN. כך בדרך כלל מצהירים עליו כחלק מגוף הדף: ```html ``` למעלה אנחנו מגדירים את `id`, `width` ו-`height`. - `id`: הגדרה זו מאפשרת לקבל הפניה לאלמנט כאשר יש צורך לעבוד איתו. - `width`: זהו רוחב האלמנט. - `height`: זהו גובה האלמנט. ## ציור גיאומטריה פשוטה הקנבס משתמש במערכת צירים קרטזית לציור. לכן הוא משתמש בציר x ובציר y כדי לבטא את מיקום האלמנט. המיקום `0,0` הוא הפינה השמאלית העליונה, והפינה הימנית התחתונה היא מה שהגדרתם כ-WIDTH ו-HEIGHT של הקנבס.  > תמונה מ-[MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) כדי לצייר על אלמנט הקנבס, יש לבצע את השלבים הבאים: 1. **לקבל הפניה** לאלמנט הקנבס. 1. **לקבל הפניה** לאלמנט הקונטקסט שיושב על אלמנט הקנבס. 1. **לבצע פעולת ציור** באמצעות אלמנט הקונטקסט. הקוד עבור השלבים הנ"ל נראה בדרך כלל כך: ```javascript // draws a red rectangle //1. get the canvas reference canvas = document.getElementById("myCanvas"); //2. set the context to 2D to draw basic shapes ctx = canvas.getContext("2d"); //3. fill it with the color red ctx.fillStyle = 'red'; //4. and draw a rectangle with these parameters, setting location and size ctx.fillRect(0,0, 200, 200) // x,y,width, height ``` ✅ Canvas API מתמקד בעיקר בצורות דו-ממדיות, אך ניתן גם לצייר אלמנטים תלת-ממדיים באתר; לשם כך ניתן להשתמש ב-[WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API). ניתן לצייר מגוון דברים עם Canvas API כמו: - **צורות גיאומטריות**, כבר הראינו איך לצייר מלבן, אבל יש עוד הרבה דברים שאפשר לצייר. - **טקסט**, ניתן לצייר טקסט בכל גופן וצבע שתרצו. - **תמונות**, ניתן לצייר תמונה על בסיס נכס תמונה כמו .jpg או .png למשל. ✅ נסו את זה! אתם יודעים איך לצייר מלבן, האם תוכלו לצייר עיגול על הדף? הסתכלו על כמה ציורים מעניינים של קנבס ב-CodePen. הנה [דוגמה מרשימה במיוחד](https://codepen.io/dissimulate/pen/KrAwx). ## טעינה וציור של נכס תמונה טוענים נכס תמונה על ידי יצירת אובייקט `Image` והגדרת המאפיין `src` שלו. לאחר מכן מאזינים לאירוע `load` כדי לדעת מתי הוא מוכן לשימוש. הקוד נראה כך: ### טעינת נכס ```javascript const img = new Image(); img.src = 'path/to/my/image.png'; img.onload = () => { // image loaded and ready to be used } ``` ### תבנית טעינת נכס מומלץ לעטוף את הקוד הנ"ל במבנה כמו זה, כך שיהיה קל יותר להשתמש בו ותנסו לעבוד איתו רק כשהוא נטען במלואו: ```javascript function loadAsset(path) { return new Promise((resolve) => { const img = new Image(); img.src = path; img.onload = () => { // image loaded and ready to be used resolve(img); } }) } // use like so async function run() { const heroImg = await loadAsset('hero.png') const monsterImg = await loadAsset('monster.png') } ``` כדי לצייר נכסי משחק על המסך, הקוד שלכם ייראה כך: ```javascript async function run() { const heroImg = await loadAsset('hero.png') const monsterImg = await loadAsset('monster.png') canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); ctx.drawImage(heroImg, canvas.width/2,canvas.height/2); ctx.drawImage(monsterImg, 0,0); } ``` ## עכשיו הגיע הזמן להתחיל לבנות את המשחק שלכם ### מה לבנות תבנו דף אינטרנט עם אלמנט קנבס. הוא צריך להציג מסך שחור בגודל `1024*768`. סיפקנו לכם שתי תמונות: - ספינת גיבור  - מפלצת בגודל 5*5  ### שלבים מומלצים להתחלת הפיתוח אתרו את הקבצים שנוצרו עבורכם בתיקיית `your-work`. היא אמורה להכיל את הדברים הבאים: ```bash -| assets -| enemyShip.png -| player.png -| index.html -| app.js -| package.json ``` פתחו עותק של תיקייה זו ב-Visual Studio Code. אתם צריכים להגדיר סביבת פיתוח מקומית, רצוי עם Visual Studio Code עם NPM ו-Node מותקנים. אם אין לכם `npm` מוגדר במחשב, [כך עושים זאת](https://www.npmjs.com/get-npm). התחילו את הפרויקט על ידי ניווט לתיקיית `your_work`: ```bash cd your-work npm start ``` הפעולה הנ"ל תתחיל שרת HTTP בכתובת `http://localhost:5000`. פתחו דפדפן והזינו את הכתובת הזו. כרגע זהו דף ריק, אבל זה ישתנה. > הערה: כדי לראות שינויים על המסך, רעננו את הדפדפן. ### הוספת קוד הוסיפו את הקוד הדרוש ל-`your-work/app.js` כדי לפתור את המשימות הבאות: 1. **ציירו** קנבס עם רקע שחור > טיפ: הוסיפו שתי שורות תחת ה-TODO המתאים ב-`/app.js`, הגדרת האלמנט `ctx` לשחור והגדרת הקואורדינטות העליונות/שמאליות ל-0,0 והגובה והרוחב לשווים לאלו של הקנבס. 2. **טענו** טקסטורות > טיפ: הוסיפו את תמונות השחקן והאויב באמצעות `await loadTexture` והעברת נתיב התמונה. עדיין לא תראו אותן על המסך! 3. **ציירו** את הגיבור במרכז המסך בחצי התחתון > טיפ: השתמשו ב-API `drawImage` כדי לצייר את heroImg על המסך, הגדרת `canvas.width / 2 - 45` ו-`canvas.height - canvas.height / 4)`. 4. **ציירו** מפלצות בגודל 5*5 > טיפ: עכשיו תוכלו לבטל את ההערות בקוד כדי לצייר אויבים על המסך. לאחר מכן, עברו לפונקציה `createEnemies` ובנו אותה. קודם כל, הגדירו כמה קבועים: ```javascript const MONSTER_TOTAL = 5; const MONSTER_WIDTH = MONSTER_TOTAL * 98; const START_X = (canvas.width - MONSTER_WIDTH) / 2; const STOP_X = START_X + MONSTER_WIDTH; ``` לאחר מכן, צרו לולאה לציור מערך המפלצות על המסך: ```javascript for (let x = START_X; x < STOP_X; x += 98) { for (let y = 0; y < 50 * 5; y += 50) { ctx.drawImage(enemyImg, x, y); } } ``` ## תוצאה התוצאה הסופית אמורה להיראות כך:  ## פתרון נסו לפתור זאת בעצמכם קודם, אבל אם אתם נתקעים, הסתכלו על [פתרון](../../../../6-space-game/2-drawing-to-canvas/solution/app.js). --- ## 🚀 אתגר למדתם על ציור עם Canvas API שמתמקד בדו-ממד; הסתכלו על [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), ונסו לצייר אובייקט תלת-ממדי. ## שאלון אחרי ההרצאה [שאלון אחרי ההרצאה](https://ff-quizzes.netlify.app/web/quiz/32) ## סקירה ולימוד עצמי למדו עוד על Canvas API על ידי [קריאה עליו](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## משימה [שחקו עם Canvas API](assignment.md) --- **כתב ויתור**: מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.