Web-Dev-For-Beginners/translations/sw/6-space-game/2-drawing-to-canvas/README.md

Jenga Mchezo wa Anga Sehemu ya 2: Chora Shujaa na Wanyama wa Ajabu kwenye Canvas

API ya Canvas ni mojawapo ya vipengele vyenye nguvu zaidi katika maendeleo ya wavuti kwa kuunda michoro ya nguvu na ya kuingiliana moja kwa moja kwenye kivinjari chako. Katika somo hili, tutabadilisha kipengele cha HTML <canvas> kilicho tupu kuwa ulimwengu wa mchezo uliojaa mashujaa na wanyama wa ajabu. Fikiria canvas kama ubao wako wa sanaa wa kidijitali ambapo msimbo unakuwa wa kuona.

Tunajenga juu ya kile ulichojifunza katika somo la awali, na sasa tutazama katika vipengele vya kuona. Utajifunza jinsi ya kupakia na kuonyesha sprites za mchezo, kuweka vipengele kwa usahihi, na kuunda msingi wa kuona kwa mchezo wako wa anga. Hii inaziba pengo kati ya kurasa za wavuti zisizobadilika na uzoefu wa nguvu na wa kuingiliana.

Mwisho wa somo hili, utakuwa na eneo kamili la mchezo na meli ya shujaa wako ikiwa imewekwa kwa usahihi na maumbo ya adui tayari kwa vita. Utaelewa jinsi michezo ya kisasa inavyotoa michoro kwenye vivinjari na kupata ujuzi wa kuunda uzoefu wako wa kuona wa kuingiliana. Hebu tuchunguze michoro ya canvas na kuleta mchezo wako wa anga uhai!

Maswali ya Awali ya Somo

Maswali ya awali ya somo

Canvas

Kwa hivyo, kipengele hiki cha <canvas> ni nini hasa? Ni suluhisho la HTML5 la kuunda michoro ya nguvu na uhuishaji katika vivinjari vya wavuti. Tofauti na picha za kawaida au video ambazo ni za kudumu, canvas inakupa udhibiti wa kiwango cha pikseli juu ya kila kitu kinachoonekana kwenye skrini. Hii inafanya kuwa bora kwa michezo, taswira za data, na sanaa ya kuingiliana. Fikiria kama uso wa kuchora unaoweza kupangwa ambapo JavaScript inakuwa brashi yako ya rangi.

Kwa chaguo-msingi, kipengele cha canvas kinaonekana kama mstatili tupu, wa uwazi kwenye ukurasa wako. Lakini hapo ndipo uwezo wake unapoonekana! Nguvu yake halisi inaibuka unapoitumia JavaScript kuchora maumbo, kupakia picha, kuunda uhuishaji, na kufanya vitu viitike kwa mwingiliano wa mtumiaji. Ni sawa na jinsi waanzilishi wa michoro za kompyuta wa mapema huko Bell Labs katika miaka ya 1960 walivyolazimika kupanga kila pikseli kuunda uhuishaji wa kidijitali wa kwanza.

✅ Soma zaidi kuhusu API ya Canvas kwenye MDN.

Hivi ndivyo inavyotangazwa kawaida, kama sehemu ya mwili wa ukurasa:

<canvas id="myCanvas" width="200" height="100"></canvas>

Hivi ndivyo msimbo huu unavyofanya:

• Huweka sifa ya id ili uweze kurejelea kipengele hiki maalum cha canvas katika JavaScript
• Hufafanua width kwa pikseli ili kudhibiti ukubwa wa usawa wa canvas
• Huweka height kwa pikseli ili kuamua vipimo vya wima vya canvas

Kuchora Jiometri Rahisi

Sasa kwa kuwa unajua kipengele cha canvas ni nini, hebu tuchunguze jinsi ya kuchora juu yake! Canvas hutumia mfumo wa kuratibu ambao unaweza kuhisi kuwa wa kawaida kutoka darasa la hesabu, lakini kuna mabadiliko moja muhimu maalum kwa michoro za kompyuta.

Canvas hutumia kuratibu za Cartesian na mhimili wa x (usawa) na mhimili wa y (wima) kuweka kila kitu unachochora. Lakini hapa kuna tofauti kuu: tofauti na mfumo wa kuratibu kutoka darasa la hesabu, sehemu ya asili (0,0) huanza kwenye kona ya juu-kushoto, na thamani za x huongezeka unapohamia kulia na thamani za y huongezeka unaposhuka chini. Njia hii inatokana na maonyesho ya kompyuta ya mapema ambapo mihimili ya elektroni ilichunguza kutoka juu hadi chini, na kufanya juu-kushoto kuwa sehemu ya asili ya kawaida.

Picha kutoka MDN

Ili kuchora kwenye kipengele cha canvas, utafuata mchakato wa hatua tatu ambao unaunda msingi wa michoro yote ya canvas. Mara unapofanya hivi mara chache, inakuwa rahisi:

1. Pata rejeleo la kipengele chako cha Canvas kutoka DOM (kama kipengele kingine chochote cha HTML)
2. Pata muktadha wa utoaji wa 2D – hii inatoa mbinu zote za kuchora
3. Anza kuchora! Tumia mbinu za muktadha zilizojengwa ndani kuunda michoro yako

Hivi ndivyo inavyoonekana katika msimbo:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

Hebu tuchambue hatua kwa hatua:

• Tunachukua kipengele chetu cha canvas kwa kutumia ID yake na kuhifadhi katika kigezo
• Tunapata muktadha wa utoaji wa 2D – hii ni zana yetu iliyojaa mbinu za kuchora
• Tunaiambia canvas tunataka kujaza vitu kwa rangi nyekundu kwa kutumia mali ya fillStyle
• Tunachora mstatili kuanzia kwenye kona ya juu-kushoto (0,0) ambao ni upana wa pikseli 200 na urefu

✅ API ya Canvas inazingatia zaidi maumbo ya 2D, lakini unaweza pia kuchora vipengele vya 3D kwenye tovuti; kwa hili, unaweza kutumia API ya WebGL.

Unaweza kuchora vitu vya aina mbalimbali kwa kutumia API ya Canvas kama:

• Maumbo ya jiometri, tayari tumeonyesha jinsi ya kuchora mstatili, lakini kuna mengi zaidi unayoweza kuchora.
• Maandishi, unaweza kuchora maandishi kwa fonti yoyote na rangi unayotaka.
• Picha, unaweza kuchora picha kulingana na 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.

Pakia na Chora Mali ya Picha

Kuchora maumbo ya msingi ni muhimu kwa kuanza, lakini michezo mingi inahitaji picha halisi! Sprites, mandhari, na textures ndizo zinazotoa mvuto wa kuona kwa michezo. Kupakia na kuonyesha picha kwenye canvas hufanya kazi tofauti na kuchora maumbo ya jiometri, lakini ni rahisi mara unapofahamu mchakato.

Tunahitaji kuunda kipengele cha Image, kupakia faili ya picha yetu (hii hufanyika kwa njia ya asinkroni, ikimaanisha "katika usuli"), na kisha kuichora kwenye canvas mara tu inapokuwa tayari. Njia hii inahakikisha picha zako zinaonyeshwa vizuri bila kuzuia programu yako wakati zinapakia.

Kupakia Picha ya Msingi

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // Image loaded and ready to be used
  console.log('Image loaded successfully!');
};

Hivi ndivyo kinachotokea katika msimbo huu:

• Tunaunda kipengele kipya cha Picha ili kushikilia sprite au texture yetu
• Tunaiambia faili gani ya picha ya kupakia kwa kuweka njia ya chanzo
• Tunaisikiliza tukio la kupakia ili tujue hasa wakati picha iko tayari kutumika

Njia Bora ya Kupakia Picha

Hapa kuna njia thabiti zaidi ya kushughulikia upakiaji wa picha ambayo watengenezaji wa kitaalamu hutumia mara kwa mara. Tutafunga upakiaji wa picha katika kazi inayotegemea Promise – njia hii, maarufu wakati Promise za JavaScript zilipokuwa kiwango cha ES6, hufanya msimbo wako kuwa wa mpangilio zaidi na hushughulikia makosa kwa urahisi:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

Kile tulichofanya hapa:

• Tumefunga mantiki yote ya upakiaji wa picha katika Promise ili tuweze kuishughulikia vizuri
• Tumeongeza utunzaji wa makosa ambao hutufahamisha wakati kitu kinakwenda vibaya
• Tumetumia sintaksia ya kisasa ya async/await kwa sababu ni rahisi kusoma
• Tumetumia vizuizi vya try/catch kushughulikia kwa urahisi matatizo yoyote ya upakiaji

Mara picha zako zinapopakiwa, kuzichora kwenye canvas ni rahisi sana:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

Hebu tuchambue hatua kwa hatua:

• Tunapakia picha zetu za shujaa na monster kwa usuli kwa kutumia await
• Tunachukua kipengele chetu cha canvas na kupata muktadha wa utoaji wa 2D tunaohitaji
• Tunapanga picha ya shujaa katikati kwa kutumia hesabu ya haraka ya kuratibu
• Tunaiweka picha ya monster kwenye kona ya juu-kushoto kuanza maumbo ya adui
• Tunashika makosa yoyote yanayoweza kutokea wakati wa upakiaji au utoaji

Sasa Ni Wakati wa Kuanza Kujenga Mchezo Wako

Sasa tutaweka kila kitu pamoja kuunda msingi wa kuona wa mchezo wako wa anga. Una uelewa mzuri wa misingi ya canvas na mbinu za upakiaji wa picha, kwa hivyo sehemu hii ya vitendo itakuongoza kupitia kujenga skrini kamili ya mchezo na sprites zilizowekwa kwa usahihi.

Kile cha Kujenga

Utajenga ukurasa wa wavuti na kipengele cha Canvas. Inapaswa kutoa skrini nyeusi 1024*768. Tumekupa picha mbili:

• Meli ya shujaa

  

• 5*5 monster

  

Hatua Zinazopendekezwa za Kuanza Maendeleo

Tafuta faili za kuanzia ambazo zimeundwa kwa ajili yako katika folda ndogo ya your-work. Muundo wa mradi wako unapaswa kuwa na:

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

Hivi ndivyo unavyofanya kazi:

• Sprites za mchezo ziko katika folda ya assets/ ili kila kitu kiwe kimepangwa
• Faili yako kuu ya HTML inaweka kipengele cha canvas na kuandaa kila kitu
• Faili ya JavaScript ambapo utaandika uchawi wako wote wa utoaji wa mchezo
• Package.json inayoseti seva ya maendeleo ili uweze kujaribu kwa ndani

Fungua folda hii katika Visual Studio Code ili kuanza maendeleo. Utahitaji mazingira ya maendeleo ya ndani na Visual Studio Code, NPM, na Node.js imewekwa. Ikiwa huna npm imewekwa kwenye kompyuta yako, hivi ndivyo unavyoweza kuisakinisha.

Anzisha seva yako ya maendeleo kwa kuvinjari folda ya your-work:

cd your-work
npm start

Amri hii inafanya mambo mazuri sana:

• Inaanzisha seva ya ndani kwenye http://localhost:5000 ili uweze kujaribu mchezo wako
• Inahudumia faili zako zote vizuri ili kivinjari chako kiweze kuzibeba kwa usahihi
• Inatazama faili zako kwa mabadiliko ili uweze kuendeleza kwa urahisi
• Inakupa mazingira ya maendeleo ya kitaalamu ya kujaribu kila kitu

💡 Kumbuka: Kivinjari chako kitaonyesha ukurasa tupu mwanzoni – hilo linatarajiwa! Unapoongeza msimbo, safisha kivinjari chako ili kuona mabadiliko yako. Njia hii ya maendeleo ya kurudia ni sawa na jinsi NASA ilivyojenga kompyuta ya mwongozo wa Apollo – kujaribu kila sehemu kabla ya kuijumuisha katika mfumo mkubwa.

Ongeza Msimbo

Ongeza msimbo unaohitajika kwenye your-work/app.js kukamilisha kazi zifuatazo:

1. Chora canvas na mandhari nyeusi

   💡 Hivi ndivyo: Tafuta TODO katika /app.js na ongeza mistari miwili tu. Weka ctx.fillStyle kuwa nyeusi, kisha tumia ctx.fillRect() kuanzia (0,0) na vipimo vya canvas yako. Rahisi!

2. Pakia textures za mchezo

   💡 Hivi ndivyo: Tumia await loadAsset() kupakia picha zako za mchezaji na adui. Hifadhi katika vigezo ili uweze kuzitumia baadaye. Kumbuka – hazitaonekana hadi uzichore!

3. Chora meli ya shujaa katikati-chini

   💡 Hivi ndivyo: Tumia ctx.drawImage() kuweka shujaa wako. Kwa kuratibu ya x, jaribu canvas.width / 2 - 45 kuisogeza katikati, na kwa kuratibu ya y tumia canvas.height - canvas.height / 4 kuisogeza eneo la chini.

4. Chora maumbo ya adui ya 5×5

   💡 Hivi ndivyo: Tafuta kazi ya createEnemies na weka kitanzi kilichopachikwa. Utahitaji kufanya hesabu kwa nafasi na kuweka, lakini usijali – nitakuonyesha jinsi ya kufanya!

Kwanza, weka constants kwa mpangilio sahihi wa maumbo ya adui:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

Hebu tuchambue constants hizi:

• Tunapanga maadui 5 kwa kila safu na safu (gridi nzuri ya 5×5)
• Tunafafanua nafasi ya kuweka kati ya maadui ili wasionekane wamebanwa
• Tunahesabu upana wa mpangilio wetu wote
• Tunajua wapi pa kuanza na kuacha ili mpangilio uonekane katikati

Kisha, unda vitanzi vilivyopachikwa kuchora mpangilio wa maadui:

for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
  for (let y = 0; y < 50 * 5; y += 50) {
    ctx.drawImage(enemyImg, x, y);
  }
}

Hivi ndivyo kitanzi kilichopachikwa kinavyofanya:

• Kitanzi cha nje kinasogea kutoka kushoto kwenda kulia kwenye mpangilio wetu
• Kitanzi cha ndani kinapita kutoka juu kwenda chini kuunda safu nadhifu
• Tunachora kila sprite ya adui kwenye kuratibu sahihi za x,y tulizohesabu
• Kila kitu kinabaki kimepangwa vizuri ili kionekane kitaalamu na kimepangwa

Matokeo

Matokeo ya mwisho yanapaswa kuonekana kama hivi:

Suluhisho

Tafadhali jaribu kutatua mwenyewe kwanza lakini ukikwama, angalia suluhisho

---

Changamoto ya Wakala wa GitHub Copilot 🚀

Tumia hali ya Wakala kukamilisha changamoto ifuatayo:

Maelezo: Boresha canvas ya mchezo wako wa anga kwa kuongeza athari za kuona na vipengele vya kuingiliana kwa kutumia mbinu za API ya Canvas ulizojifunza.

Kichocheo: Unda faili mpya inayoitwa enhanced-canvas.html na canvas inayonyesha nyota zinazong'aa kwenye mandhari, upau wa afya unaopiga kwa meli ya shujaa, na meli za adui zinazotembea polepole chini. Jumuisha msimbo wa JavaScript unaochora nyota zinazong'aa kwa kutumia nafasi za nasibu na opacity, kutekeleza upau wa afya unaobadilisha rangi kulingana na kiwango cha afya (kijani > njano > nyekundu), na kuhuisha meli za adui kusonga chini ya skrini kwa kasi tofauti.

Jifunze zaidi kuhusu hali ya wakala hapa.

🚀 Changamoto

Umejifunza kuhusu kuchora kwa API ya Canvas inayozingatia 2D; angalia API ya WebGL, na jaribu kuchora kitu cha 3D.

Maswali ya Baada ya Somo

Maswali ya baada ya somo

Mapitio na Kujisomea

Jifunze zaidi kuhusu API ya Canvas kwa kusoma kuhusu.

Kazi

Cheza na API ya Canvas

---

Kanusho:
Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI Co-op Translator. Ingawa tunajitahidi kwa 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.