# Jenga Mchezo wa Anga Sehemu ya 2: Chora Shujaa na Wanyama wa Ajabu kwenye Canvas ## Jaribio la Kabla ya Somo [Jaribio la kabla ya somo](https://ff-quizzes.netlify.app/web/quiz/31) ## Canvas Canvas ni kipengele cha HTML ambacho kwa default hakina maudhui; ni kama ubao tupu. Unahitaji kuongeza maudhui kwa kuchora juu yake. ✅ Soma [zaidi kuhusu Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) kwenye MDN. Hivi ndivyo kawaida kinavyotangazwa, kama sehemu ya mwili wa ukurasa: ```html ``` Hapo juu tunaset `id`, `width` na `height`. - `id`: weka hii ili uweze kupata rejeleo unapohitaji kuingiliana nacho. - `width`: hii ni upana wa kipengele. - `height`: hii ni urefu wa kipengele. ## Kuchora maumbo rahisi Canvas inatumia mfumo wa kuratibu wa Cartesian kuchora vitu. Kwa hivyo, inatumia mhimili wa x na mhimili wa y kueleza mahali kitu kilipo. Eneo la `0,0` ni kona ya juu kushoto, na kona ya chini kulia ni kile ulichosema kuwa WIDTH na HEIGHT ya canvas.  > Picha kutoka [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Ili kuchora kwenye kipengele cha canvas, utahitaji kupitia hatua zifuatazo: 1. **Pata rejeleo** la kipengele cha Canvas. 1. **Pata rejeleo** la kipengele cha Context kinachokaa kwenye kipengele cha canvas. 1. **Fanya operesheni ya kuchora** ukitumia kipengele cha context. Kodi ya hatua zilizo juu kawaida inaonekana kama hivi: ```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 inazingatia zaidi maumbo ya 2D, lakini unaweza pia kuchora vipengele vya 3D kwenye tovuti; kwa hili, unaweza kutumia [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API). Unaweza kuchora vitu vya aina mbalimbali ukitumia Canvas API kama: - **Maumbo ya kijiometri**, tayari tumeonyesha jinsi ya kuchora mstatili, lakini kuna mengi zaidi unayoweza kuchora. - **Maandishi**, unaweza kuchora maandishi kwa fonti na rangi yoyote unayotaka. - **Picha**, unaweza kuchora picha ukitumia mali ya picha kama .jpg au .png kwa mfano. ✅ Jaribu! Unajua jinsi ya kuchora mstatili, unaweza kuchora duara kwenye ukurasa? Angalia baadhi ya michoro ya kuvutia ya Canvas kwenye CodePen. Hapa kuna [mfano wa kuvutia sana](https://codepen.io/dissimulate/pen/KrAwx). ## Pakia na chora mali ya picha Unapakia mali ya picha kwa kuunda kipengele cha `Image` na kuweka mali yake ya `src`. Kisha unasikiliza tukio la `load` ili kujua wakati iko tayari kutumika. Kodi inaonekana kama hii: ### Pakia mali ```javascript const img = new Image(); img.src = 'path/to/my/image.png'; img.onload = () => { // image loaded and ready to be used } ``` ### Muundo wa kupakia mali Inapendekezwa kufunga kodi iliyo juu katika muundo kama huu, ili iwe rahisi kutumia na ujaribu kuibadilisha tu wakati imepakiwa kikamilifu: ```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') } ``` Ili kuchora mali za mchezo kwenye skrini, kodi yako itaonekana kama hii: ```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); } ``` ## Sasa ni wakati wa kuanza kujenga mchezo wako ### Unachopaswa kujenga Utajenga ukurasa wa wavuti wenye kipengele cha Canvas. Inapaswa kuonyesha skrini nyeusi `1024*768`. Tumekupa picha mbili: - Meli ya shujaa  - Meli ya wanyama wa ajabu 5*5  ### Hatua zinazopendekezwa za kuanza maendeleo Tafuta faili ambazo zimeundwa kwa ajili yako kwenye folda ndogo ya `your-work`. Inapaswa kuwa na yafuatayo: ```bash -| assets -| enemyShip.png -| player.png -| index.html -| app.js -| package.json ``` Fungua nakala ya folda hii kwenye Visual Studio Code. Unahitaji kuwa na mazingira ya maendeleo ya ndani yaliyosetiwa, ikiwezekana na Visual Studio Code ikiwa na NPM na Node imewekwa. Ikiwa huna `npm` kwenye kompyuta yako, [hapa kuna jinsi ya kufanya hivyo](https://www.npmjs.com/get-npm). Anza mradi wako kwa kuingia kwenye folda ya `your_work`: ```bash cd your-work npm start ``` Hapo juu kutaanzisha HTTP Server kwenye anwani `http://localhost:5000`. Fungua kivinjari na ingiza anwani hiyo. Ni ukurasa tupu kwa sasa, lakini hiyo itabadilika. > Kumbuka: ili kuona mabadiliko kwenye skrini yako, fresha kivinjari chako. ### Ongeza kodi Ongeza kodi inayohitajika kwenye `your-work/app.js` ili kutatua yafuatayo: 1. **Chora** canvas yenye mandhari nyeusi > kidokezo: ongeza mistari miwili chini ya TODO inayofaa kwenye `/app.js`, ukiseti kipengele cha `ctx` kuwa nyeusi na kuratibu za juu/kushoto kuwa 0,0 na urefu na upana kuwa sawa na canvas. 2. **Pakia** textures > kidokezo: ongeza picha za mchezaji na adui ukitumia `await loadTexture` na kupitisha njia ya picha. Hautaona kwenye skrini bado! 3. **Chora** shujaa katikati ya skrini katika nusu ya chini > kidokezo: tumia API ya `drawImage` kuchora heroImg kwenye skrini, ukiseti `canvas.width / 2 - 45` na `canvas.height - canvas.height / 4)`; 4. **Chora** wanyama wa ajabu 5*5 > kidokezo: Sasa unaweza kuondoa maoni ya kodi ya kuchora maadui kwenye skrini. Kisha, nenda kwenye kazi ya `createEnemies` na iunde. Kwanza, weka constants: ```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; ``` kisha, unda kitanzi cha kuchora safu ya wanyama wa ajabu kwenye skrini: ```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); } } ``` ## Matokeo Matokeo ya mwisho yanapaswa kuonekana kama hivi:  ## Suluhisho Tafadhali jaribu kutatua mwenyewe kwanza lakini ukikwama, angalia [suluhisho](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) --- ## 🚀 Changamoto Umejifunza kuhusu kuchora ukitumia Canvas API inayozingatia 2D; angalia [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), na jaribu kuchora kipengele cha 3D. ## Jaribio la Baada ya Somo [Jaribio la baada ya somo](https://ff-quizzes.netlify.app/web/quiz/32) ## Mapitio na Kujisomea Jifunze zaidi kuhusu Canvas API kwa [kusoma kuhusu hilo](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## Kazi [Cheza na Canvas API](assignment.md) --- **Kanusho**: Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.