HTML5 Canvas: Sinu värav 2D-mängude arendusse

HTML5 Canvas'e element pakub võimsat ja mitmekülgset platvormi 2D-mängude loomiseks otse veebibrauseris. See teeb selle kättesaadavaks laiale publikule, nõudmata pistikprogramme või allalaadimisi. See põhjalik juhend tutvustab teile HTML5 Canvas'e mänguarenduse põhialuseid, hõlmates kõike alates lihtsast seadistamisest kuni kaasahaaravate ja jõudlusele optimeeritud mängude loomise edasijõudnud tehnikateni.

Miks valida HTML5 Canvas 2D-mängude arendamiseks?

HTML5 Canvas pakub 2D-mängude arendamiseks mitmeid eeliseid:

Juurdepääsetavus: Mängud jooksevad otse brauseris, kaotades vajaduse pistikprogrammide või installatsioonide järele. See võimaldab lihtsat jagamist ja juurdepääsu erinevates operatsioonisüsteemides ja seadmetes.
Platvormist sõltumatus: Canvas'e mängud on platvormist sõltumatud, mis tähendab, et need töötavad Windowsis, macOS-is, Linuxis ja mobiilseadmetes, millel on kaasaegne veebibrauser.
Avatud standardid: HTML5 Canvas põhineb avatud veebistandarditel, tagades ühilduvuse ja pikaealisuse.
Jõudlus: Õige optimeerimisega suudab Canvas pakkuda suurepärast jõudlust 2D-mängude jaoks. Kaasaegsed brauserid pakuvad riistvaralist kiirendust Canvas'e operatsioonidele, võimaldades sujuvat ja reageerivat mängukogemust.
Suur kogukond ja ressursid: Ulatuslik ja aktiivne kogukond pakub rohkelt ressursse, õpetusi ja teeke, et toetada teie mänguarenduse teekonda.
JavaScripti integratsioon: Canvas on tihedalt integreeritud JavaScriptiga, mis on laialt levinud ja mitmekülgne programmeerimiskeel.

Arenduskeskkonna seadistamine

HTML5 Canvas'e mänguarendusega alustamiseks vajate:

Tekstiredaktor: Valige koodiredaktor, millega olete harjunud, näiteks VS Code, Sublime Text või Atom.
Veebibrauser: Kasutage kaasaegset veebibrauserit nagu Chrome, Firefox, Safari või Edge.
HTML-i, CSS-i ja JavaScripti algteadmised: Nende veebitehnoloogiate põhialuste mõistmine on hädavajalik.

Siin on lihtne HTML-fail teie Canvas'e seadistamiseks:


<!DOCTYPE html>
<html>
<head>
  <title>Minu esimene Canvas'e mäng</title>
  <style>
    body { margin: 0; }
    canvas { background: #eee; display: block; margin: 0 auto; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="640" height="480"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // Sinu mängukood läheb siia
  </script>
</body>
</html>

See kood loob Canvas'e elemendi ID-ga "gameCanvas" ning määrab selle laiuse ja kõrguse. Samuti hangib see 2D renderdamise konteksti, mida kasutatakse Canvas'ele joonistamiseks.

HTML5 Canvas'e mänguarenduse põhimõisted

Mängutsükkel

Mängutsükkel on iga mängu süda. See on pidev tsükkel, mis uuendab mängu olekut, renderdab mängugraafikat ja tegeleb kasutaja sisendiga. Tüüpiline mängutsükkel näeb välja selline:


function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}

function update() {
  // Uuenda mänguloogikat (nt mängija asukoht, vaenlase tehisintellekt)
}

function render() {
  // Puhasta lõuend
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Joonista mänguelemendid (nt mängija, vaenlased, taust)
}

requestAnimationFrame(gameLoop);

requestAnimationFrame on brauseri API, mis ajastab funktsiooni kutsumise enne järgmist ekraani värskendamist. See tagab sujuva ja tõhusa animatsiooni.

Kujundite ja piltide joonistamine

Canvas API pakub meetodeid erinevate kujundite, sealhulgas ristkülikute, ringide ja joonte joonistamiseks. Samuti võimaldab see joonistada pilte Canvas'ele.

Ristküliku joonistamine


ctx.fillStyle = 'red'; // Määra täitevärv
ctx.fillRect(10, 10, 50, 50); // Joonista täidetud ristkülik koordinaatidel (10, 10) laiusega 50 ja kõrgusega 50

ctx.strokeStyle = 'blue'; // Määra joonevärv
ctx.strokeRect(70, 10, 50, 50); // Joonista ristküliku kontuur koordinaatidel (70, 10) laiusega 50 ja kõrgusega 50

Ringi joonistamine


ctx.beginPath();
ctx.arc(150, 35, 25, 0, 2 * Math.PI); // Joonista ring koordinaatidel (150, 35) raadiusega 25
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();

Pildi joonistamine


const image = new Image();
image.src = 'tee/sinu/pildini.png';

image.onload = function() {
  ctx.drawImage(image, 200, 10); // Joonista pilt koordinaatidel (200, 10)
};

Kasutajasisendi käsitlemine

Et muuta oma mäng interaktiivseks, peate käsitlema kasutaja sisendit, näiteks klahvivajutusi, hiireklõpse ja puutesündmusi. Nende sündmuste tuvastamiseks saate kasutada JavaScripti sündmuste kuulajaid (event listeners).

Klaviatuurisisend


document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowLeft') {
    // Liiguta mängijat vasakule
  }
  if (event.key === 'ArrowRight') {
    // Liiguta mängijat paremale
  }
});

Hiire sisend


canvas.addEventListener('mousedown', function(event) {
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;

  // Kontrolli, kas klõps toimus kindlas piirkonnas
});

Kokkupõrke tuvastamine

Kokkupõrke tuvastamine on protsess, millega tehakse kindlaks, millal kaks mänguobjekti kattuvad või lõikuvad. See on paljude mängumehaanikate jaoks hädavajalik, näiteks mängija ja vaenlase kokkupõrked või mürskude tabamused.

Lihtne ristkülikukujuline kokkupõrke tuvastamine


function checkCollision(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y
  );
}

// Kasutusnäide:
const player = { x: 10, y: 10, width: 32, height: 32 };
const enemy = { x: 100, y: 100, width: 32, height: 32 };

if (checkCollision(player, enemy)) {
  // Kokkupõrge tuvastatud!
}

Spraidi animatsioon

Spraidi animatsioon on tehnika, mida kasutatakse liikumise illusiooni loomiseks, kuvades kiiresti järjestikku piltide (spraitide) jada. Iga pilt esindab animatsiooni erinevat kaadrit.

Spraidi animatsiooni rakendamiseks vajate spraidilehte (sprite sheet), mis on üks pilt, mis sisaldab kõiki animatsiooni kaadreid. Seejärel saate kasutada drawImage meetodit, et joonistada spraidilehelt konkreetseid kaadreid Canvas'ele.


const spriteSheet = new Image();
spriteSheet.src = 'tee/sinu/spraidileheni.png';

const frameWidth = 32; // Iga kaadri laius
const frameHeight = 32; // Iga kaadri kõrgus
let currentFrame = 0; // Praeguse kaadri indeks

function animate() {
  // Arvuta praeguse kaadri x- ja y-koordinaadid spraidilehel
  const spriteX = currentFrame * frameWidth;
  const spriteY = 0; // Eeldades, et kõik kaadrid on ühes reas

  // Joonista praegune kaader Canvas'ele
  ctx.drawImage(
    spriteSheet,
    spriteX,
    spriteY,
    frameWidth,
    frameHeight,
    100, // x-koordinaat lõuendil
    100, // y-koordinaat lõuendil
    frameWidth,
    frameHeight
  );

  // Suurenda praeguse kaadri indeksit
  currentFrame = (currentFrame + 1) % numberOfFrames; // numberOfFrames on animatsiooni kaadrite koguarv
}

Edasijõudnute tehnikad ja optimeerimine

Mängu olekud

Erinevate mängu olekute (nt menüü, mäng, paus, mäng läbi) haldamine on mänguloogika korrastamiseks ülioluline. Nende olekute haldamiseks saate kasutada lihtsat olekumasinat (state machine).


let gameState = 'menu'; // Algne mängu olek

function update() {
  switch (gameState) {
    case 'menu':
      updateMenu();
      break;
    case 'game':
      updateGame();
      break;
    case 'pause':
      updatePause();
      break;
    case 'gameover':
      updateGameOver();
      break;
  }
}

function render() {
  // Puhasta lõuend
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  switch (gameState) {
    case 'menu':
      renderMenu();
      break;
    case 'game':
      renderGame();
      break;
    case 'pause':
      renderPause();
      break;
    case 'gameover':
      renderGameOver();
      break;
  }
}

Objektide kogumid (Object Pools)

Objektide sage loomine ja hävitamine võib olla arvutuslikult kulukas. Objektide kogumid (Object pools) pakuvad võimalust objekte taaskasutada uute loomise asemel. See võib märkimisväärselt parandada jõudlust, eriti mängudes, kus on palju dünaamiliselt loodud objekte, nagu näiteks mürsud.


function createObjectPool(size, objectFactory) {
  const pool = [];

  for (let i = 0; i < size; i++) {
    pool.push(objectFactory());
  }

  return {
    get: function() {
      if (pool.length > 0) {
        return pool.pop();
      } else {
        // Soovi korral loo uus objekt, kui kogum on tühi
        return objectFactory();
      }
    },
    release: function(object) {
      pool.push(object);
    }
  };
}

// Kasutusnäide:
function createBullet() {
  return { x: 0, y: 0, speed: 10, active: false };
}

const bulletPool = createObjectPool(100, createBullet);

Plaadistikud (Tile Maps)

Plaadistikud (Tile maps) on levinud tehnika mängumaailmade loomiseks. Plaadistik on ruudustik plaatidest, kus iga plaat esindab väikest pilti või mustrit. Plaadistikud on tõhusad suurte ja detailsete mängukeskkondade loomiseks.

Plaadistike rakendamiseks vajate plaadilehte (tile sheet), mis sisaldab kõiki üksikuid plaate. Teil on vaja ka andmestruktuuri, mis määratleb plaadistika paigutuse. See andmestruktuur võib olla lihtne 2D-massiiv.


const tileSheet = new Image();
tileSheet.src = 'tee/sinu/plaadileheni.png';

const tileWidth = 32;
const tileHeight = 32;

const mapData = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

function drawTileMap() {
  for (let row = 0; row < mapData.length; row++) {
    for (let col = 0; col < mapData[row].length; col++) {
      const tileIndex = mapData[row][col];

      // Arvuta plaadi x- ja y-koordinaadid plaadilehel
      const spriteX = (tileIndex % numberOfTilesPerRow) * tileWidth; // numberOfTilesPerRow on plaatide arv igas reas plaadilehel
      const spriteY = Math.floor(tileIndex / numberOfTilesPerRow) * tileHeight;

      // Joonista plaat Canvas'ele
      ctx.drawImage(
        tileSheet,
        spriteX,
        spriteY,
        tileWidth,
        tileHeight,
        col * tileWidth, // x-koordinaat lõuendil
        row * tileHeight, // y-koordinaat lõuendil
        tileWidth,
        tileHeight
      );
    }
  }
}

Jõudluse optimeerimine

Oma Canvas'e mängu optimeerimine on sujuva ja reageeriva jõudluse saavutamiseks ülioluline, eriti vähem võimsatel seadmetel.

Minimeeri Canvas'e ümberjoonistamist: Joonista uuesti ainult need Canvas'e osad, mis on muutunud. Kasutage tehnikaid nagu "määrdunud ristkülikud" (dirty rectangles), et jälgida, millised alad vajavad uuendamist.
Kasuta spraidilehti: Ühendage mitu pilti üheks spraidileheks, et vähendada HTTP-päringute arvu.
Optimeeri kokkupõrke tuvastamist: Kasutage tõhusaid kokkupõrke tuvastamise algoritme. Suure hulga objektide puhul kaaluge ruumilise jaotamise tehnikate, nagu quadtree'd või ruudustikud, kasutamist.
Kasuta objektide kogumeid: Taaskasutage objekte uute loomise asemel, et vähendada prügikoristuse (garbage collection) koormust.
Pane kulukad arvutused vahemällu: Salvestage kulukate arvutuste tulemused, et vältida nende asjatut uuesti arvutamist.
Kasuta riistvaralist kiirendust: Veenduge, et teie Canvas on riistvaraliselt kiirendatud. Kaasaegsed brauserid lubavad riistvaralise kiirenduse tavaliselt vaikimisi.
Profileeri oma koodi: Kasutage brauseri arendaja tööriistu, et tuvastada jõudluse kitsaskohti oma koodis. Need tööriistad aitavad teil leida optimeerimist vajavad alad. Chrome DevTools ja Firefox Developer Tools on suurepärased valikud.
Kaalu WebGL-i: Keerukamate 2D-mängude või 3D-graafikat nõudvate mängude puhul kaaluge WebGL-i kasutamist, mis pakub juurdepääsu graafikaprotsessorile (GPU).

Kasulikud teegid ja raamistikud

Mitmed JavaScripti teegid ja raamistikud võivad lihtsustada HTML5 Canvas'e mänguarendust:

Phaser: Populaarne 2D-mängude raamistik, mis pakub laia valikut funktsioone, sealhulgas füüsikat, animatsiooni ja sisendi käsitlemist. (phaser.io)
PixiJS: Kiire ja paindlik 2D renderdamismootor, mida saab kasutada mängude ja muude interaktiivsete rakenduste loomiseks. (pixijs.com)
CraftyJS: Modulaarne mängumootor, mis pakub lihtsat ja intuitiivset API-t. (craftyjs.com)
melonJS: Kergekaaluline HTML5 mängumootor, mis keskendub lihtsusele ja kasutusmugavusele. (melonjs.org)

HTML5 Canvas'e mängude näited

Paljud populaarsed ja edukad mängud on ehitatud HTML5 Canvas'e abil, demonstreerides selle võimekust:

Agar.io: Massiivne mitme mängijaga online-märulimäng, kus mängijad kontrollivad rakke, mis söövad väiksemaid rakke, et suuremaks kasvada.
Slither.io: Sarnane kontseptsioon Agar.io-le, kuid mängijad kontrollivad rakkude asemel madusid.
Kingdom Rush: Populaarne tornikaitsemäng, mis on porditud HTML5 Canvas'ele.
Cut the Rope: Füüsikal põhinev puslemäng, mis on samuti realiseeritud HTML5 Canvas'e abil.

Kokkuvõte

HTML5 Canvas on võimas ja kättesaadav platvorm 2D-mängude arendamiseks. Oma platvormideülese ühilduvuse, avatud standardite ja suure kogukonnaga pakub Canvas kindla aluse kaasahaaravate ja jõudlusele optimeeritud mängude loomiseks. Selles juhendis käsitletud põhimõistete ja edasijõudnute tehnikate valdamisega saate avada HTML5 Canvas'e täieliku potentsiaali ja oma mänguideed ellu viia.

Ärge unustage uurida olemasolevaid teeke ja raamistikke, et oma arendusprotsessi veelgi sujuvamaks muuta ja kasutada eelehitatud funktsionaalsusi. Edu teile mänguarenduse teekonnal!