Gioco su tela
L'elemento HTML <canvas>viene visualizzato come un oggetto rettangolare su una pagina Web:
Tela HTML
L' <canvas>elemento è perfetto per creare giochi in HTML.
L' <canvas>elemento offre tutte le funzionalità necessarie per creare giochi.
Usa JavaScript per disegnare, scrivere, inserire immagini e altro nel file
<canvas>.
.getContext("2d")
L' <canvas>elemento ha un oggetto incorporato, chiamato getContext("2d")oggetto, con metodi e proprietà per il disegno.
Puoi saperne di più <canvas>sull'elemento e
getContext("2d")sull'oggetto nel nostro Canvas Tutorial .
Iniziare
Per creare un gioco, inizia creando un'area di gioco e rendila pronta per il disegno:
Esempio
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]);
}
}
L'oggetto myGameAreaavrà più proprietà e metodi più avanti in questo tutorial.
La funzione startGame()richiama il metodo
start()dell'oggetto
myGameArea.
Il
start()metodo crea un <canvas>elemento e lo inserisce come primo nodo figlio <body>dell'elemento.