Peli-ruudukko

HTML <canvas> -elementti näyttää verkkosivulla neliömäisen objektina:

HTML Canvas

<canvas> elementti sopii erinomaisesti pelien kehittämiseen HTML:ssä.

<canvas> elementti tarjoaa kaikki tarvittavat toiminnot pelin luomiseen.

Käytä JavaScriptiä piirtämiseen <canvas> piirtää, kirjoittaa tekstejä, lisätä kuvia jne.

.getContext("2d")

<canvas> elementti sisältää sisäänrakennetun objektin nimeltä getContext("2d") objekti tarjoaa kaikkia tarvittavia menetelmiä ja ominaisuuksia piirtämiseen.

Voit löytää Canvas-ohjelmointikoulutus opit tietoa <canvas> elementeistä ja getContext("2d") tietoa objekteista.

Nyt siis aloitetaan

Jotta voit tehdä pelin, luo ensin pelialue ja valmistaudu piirtämään:

esimerkki

function startGame() {
  myGameArea.start();
}
var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}

kokeile itse

Tässä opetusohjelmassa myöhemmin osassa myGameArea saa lisää ominaisuuksia ja menetelmiä.

toiminto startGame() kutsu myGameArea objektin start() metodi.

start() metodi luo <canvas> elementtiä, ja se lisätään ensimmäisenä lapsenodeksi <body> elementissä.