Game Canvas
Die HTML <canvas>-element word as 'n reghoekige voorwerp op 'n webblad vertoon:
HTML-doek
Die <canvas>element is perfek om speletjies in HTML te maak.
Die <canvas>element bied al die funksionaliteit wat jy nodig het om speletjies te maak.
Gebruik JavaScript om te teken, skryf, beelde in te voeg, en meer, op die
<canvas>.
.getContext("2d")
Die <canvas>element het 'n ingeboude voorwerp, wat die getContext("2d")voorwerp genoem word, met metodes en eienskappe om te teken.
Jy kan meer leer oor die <canvas>element, en die
getContext("2d")voorwerp, in ons Canvas Tutoriaal .
Begin
Om 'n speletjie te maak, begin deur 'n speletjie-area te skep en maak dit gereed om te teken:
Voorbeeld
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]);
}
}
Die voorwerp myGameAreasal later in hierdie tutoriaal meer eienskappe en metodes hê.
Die funksie startGame()roep die metode
start()van die
myGameAreaobjek aan.
Die
start()metode skep 'n <canvas>element en voeg dit as die eerste kindnode van die <body>element in.