Herní plátno
Element HTML <canvas>se na webové stránce zobrazí jako obdélníkový objekt:
HTML plátno
Prvek <canvas>je ideální pro vytváření her v HTML.
Tento <canvas>prvek nabízí všechny funkce, které potřebujete pro vytváření her.
Pomocí JavaScriptu můžete kreslit, psát, vkládat obrázky a další do
<canvas>.
.getContext("2d")
Prvek <canvas>má vestavěný objekt, nazývaný getContext("2d")objekt, s metodami a vlastnostmi pro kreslení.
Více o <canvas>prvku a
getContext("2d")objektu se můžete dozvědět v našem Canvas Tutorial .
Začít
Chcete-li vytvořit hru, začněte vytvořením herní oblasti a připravte ji na kreslení:
Příklad
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]);
}
}
Objekt myGameAreabude mít více vlastností a metod později v tomto tutoriálu.
Funkce startGame()vyvolá metodu
start()objektu
myGameArea.
Metoda
start()vytvoří <canvas>prvek a vloží jej jako první podřízený uzel <body>prvku.