9.8 KiB

Raw Blame History

Gumawa ng Space Game Part 2: I-drawing ang Hero at Monsters sa Canvas

Pre-Lecture Quiz

Ang Canvas

Ang canvas ay isang HTML element na default na walang laman; ito ay parang blangkong papel. Kailangan mo itong lagyan ng nilalaman sa pamamagitan ng pag-drawing dito.

✅ Basahin ang karagdagang impormasyon tungkol sa Canvas API sa MDN.

Ganito karaniwang ideklara ang canvas, bilang bahagi ng body ng pahina:

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

Sa itaas, itinatakda natin ang id, width, at height.

id: itakda ito upang makakuha ng reference kapag kailangan mong makipag-ugnayan dito.
width: ito ang lapad ng elemento.
height: ito ang taas ng elemento.

Pag-drawing ng simpleng geometry

Ang Canvas ay gumagamit ng cartesian coordinate system para mag-drawing ng mga bagay. Kaya't gumagamit ito ng x-axis at y-axis upang ipahayag kung saan matatagpuan ang isang bagay. Ang lokasyon na 0,0 ay ang pinakataas na kaliwang posisyon, at ang pinakababa na kanan ay ang itinakda mong WIDTH at HEIGHT ng canvas.

Larawan mula sa MDN

Upang mag-drawing sa canvas element, kailangan mong sundin ang mga sumusunod na hakbang:

Kumuha ng reference sa Canvas element.
Kumuha ng reference sa Context element na nasa canvas element.
Gumawa ng drawing operation gamit ang context element.

Ang code para sa mga hakbang sa itaas ay karaniwang ganito:

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

✅ Ang Canvas API ay pangunahing nakatuon sa 2D shapes, ngunit maaari ka ring mag-drawing ng 3D elements sa isang website; para dito, maaari mong gamitin ang WebGL API.

Maaari kang mag-drawing ng iba't ibang bagay gamit ang Canvas API tulad ng:

Mga geometric na hugis, ipinakita na namin kung paano mag-drawing ng rectangle, ngunit marami pang iba ang maaari mong i-drawing.
Teksto, maaari kang mag-drawing ng teksto gamit ang anumang font at kulay na gusto mo.
Mga imahe, maaari kang mag-drawing ng imahe batay sa isang image asset tulad ng .jpg o .png halimbawa.

✅ Subukan ito! Alam mo na kung paano mag-drawing ng rectangle, kaya mo bang mag-drawing ng bilog sa isang pahina? Tingnan ang ilang mga kawili-wiling drawing gamit ang Canvas sa CodePen. Narito ang isang napaka-impressive na halimbawa.

Mag-load at mag-drawing ng image asset

Mag-load ka ng image asset sa pamamagitan ng paglikha ng Image object at pagtatakda ng src property nito. Pagkatapos, makinig sa load event upang malaman kung kailan ito handa nang gamitin. Ganito ang code:

Mag-load ng asset

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

Pattern ng pag-load ng asset

Inirerekomenda na balutin ang nasa itaas sa isang construct tulad nito, upang mas madali itong gamitin at subukan lamang itong manipulahin kapag ganap na itong na-load:

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')
}

Upang mag-drawing ng game assets sa screen, ganito ang magiging hitsura ng iyong code:

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);
}

Panahon na para simulan ang paggawa ng iyong laro

Ano ang gagawin

Gagawa ka ng isang web page na may Canvas element. Dapat itong mag-render ng itim na screen na 1024*768. Nagbigay kami ng dalawang imahe:

Hero ship
5*5 monster

Mga inirerekomendang hakbang para simulan ang development

Hanapin ang mga file na ginawa para sa iyo sa folder na your-work. Dapat itong naglalaman ng mga sumusunod:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Buksan ang kopya ng folder na ito sa Visual Studio Code. Kailangan mong magkaroon ng lokal na development environment na naka-setup, mas mainam kung may Visual Studio Code na may NPM at Node na naka-install. Kung wala kang npm na naka-setup sa iyong computer, narito kung paano ito gawin.

Simulan ang iyong proyekto sa pamamagitan ng pag-navigate sa folder na your_work:

cd your-work
npm start

Ang nasa itaas ay magpapasimula ng HTTP Server sa address na http://localhost:5000. Buksan ang browser at ilagay ang address na iyon. Blangkong pahina pa ito sa ngayon, ngunit magbabago ito.

Tandaan: upang makita ang mga pagbabago sa iyong screen, i-refresh ang iyong browser.

Magdagdag ng code

Idagdag ang kinakailangang code sa your-work/app.js upang malutas ang mga sumusunod:

Mag-drawing ng canvas na may itim na background

tip: magdagdag ng dalawang linya sa ilalim ng angkop na TODO sa /app.js, itakda ang ctx element na maging itim at ang top/left coordinates na nasa 0,0 at ang taas at lapad na katumbas ng canvas.
Mag-load ng mga texture

tip: idagdag ang player at enemy images gamit ang await loadTexture at ipasa ang image path. Hindi mo pa makikita ang mga ito sa screen!
Mag-drawing ng hero sa gitna ng screen sa ibabang bahagi

tip: gamitin ang drawImage API upang i-drawing ang heroImg sa screen, itakda ang canvas.width / 2 - 45 at canvas.height - canvas.height / 4);

Mag-drawing ng 5*5 monsters

tip: Ngayon maaari mong i-uncomment ang code upang i-drawing ang mga kalaban sa screen. Susunod, pumunta sa function na createEnemies at buuin ito.

Una, mag-set up ng ilang 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;

pagkatapos, gumawa ng loop upang i-drawing ang array ng monsters sa screen:

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

Resulta

Ang tapos na resulta ay dapat ganito ang hitsura:

Solusyon

Subukan mo munang lutasin ito sa iyong sarili, ngunit kung mahihirapan ka, tingnan ang isang solusyon

Hamon ng GitHub Copilot Agent 🚀

Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:

Deskripsyon: Pagandahin ang iyong space game canvas sa pamamagitan ng pagdaragdag ng mga visual effects at interactive elements gamit ang mga teknik ng Canvas API na natutunan mo.

Prompt: Gumawa ng bagong file na tinatawag na enhanced-canvas.html na may canvas na nagpapakita ng animated na mga bituin sa background, isang pulsing health bar para sa hero ship, at mga enemy ships na dahan-dahang bumababa. Isama ang JavaScript code na nag-drawing ng kumikislap na mga bituin gamit ang random na posisyon at opacity, nag-iimplement ng health bar na nagbabago ng kulay batay sa antas ng kalusugan (berde > dilaw > pula), at nag-aanimate ng mga enemy ships upang bumaba sa screen sa iba't ibang bilis.

🚀 Hamon

Natutunan mo ang tungkol sa pag-drawing gamit ang 2D-focused Canvas API; tingnan ang WebGL API, at subukang mag-drawing ng 3D object.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Alamin pa ang tungkol sa Canvas API sa pamamagitan ng pagbabasa tungkol dito.

Assignment

Maglaro gamit ang Canvas API

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service Co-op Translator. Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.

9.8 KiB Raw Blame History