8.3 KiB

Raw Permalink Blame History

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

Jaribio la Kabla ya Somo

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 kwenye MDN.

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

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

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

Ili kuchora kwenye kipengele cha canvas, utahitaji kupitia hatua zifuatazo:

Pata rejeleo la kipengele cha Canvas.
Pata rejeleo la kipengele cha Context kinachokaa kwenye kipengele cha canvas.
Fanya operesheni ya kuchora ukitumia kipengele cha context.

Kodi ya hatua zilizo juu kawaida inaonekana kama hivi:

// 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.

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.

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

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:

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:

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:

-| 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.

Anza mradi wako kwa kuingia kwenye folda ya your_work:

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:

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.
Pakia textures

kidokezo: ongeza picha za mchezaji na adui ukitumia await loadTexture na kupitisha njia ya picha. Hautaona kwenye skrini bado!
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);

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:

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:

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

🚀 Changamoto

Umejifunza kuhusu kuchora ukitumia Canvas API inayozingatia 2D; angalia WebGL API, na jaribu kuchora kipengele cha 3D.

Jaribio la Baada ya Somo

Jaribio la baada ya somo

Mapitio na Kujisomea

Jifunze zaidi kuhusu Canvas API kwa kusoma kuhusu hilo.

Kazi

Cheza na Canvas API

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

8.3 KiB Raw Permalink Blame History