Canva di gioco

Corso consigliato:

Canvas HTML

metodo <canvas> ha creato un L'elemento <canvas> HTML è visualizzato come un oggetto rettangolare nella pagina web:

metodo <canvas> ha creato un L'elemento fornisce tutte le funzionalità necessarie per creare giochi.

Usa JavaScript per disegnare su metodo <canvas> ha creato un per disegnare, scrivere testo, inserire immagini e altro ancora.

.getContext("2d")

metodo <canvas> ha creato un L'elemento ha un oggetto incorporato chiamato getContext("2d") oggetti, che offrono metodi e attributi per il disegno.

Puoi trovare ulteriori informazioni sui nostri Guida Canvas impara di più su metodo <canvas> ha creato un e getContext("2d") conoscere meglio l'oggetto.

Allora, iniziamo

Per creare un gioco, prima di tutto crea un'area di gioco e preparati per disegnare:

istanza

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]);
  }
}

prova personalmente

In una parte successiva di questa guida, l'oggetto myGameArea ottenere più attributi e metodi.

funzione startGame() richiesta myGameArea 对象的 start() metodo.

start() metodo metodo <canvas> ha creato un elemento <canvas>, e viene inserito come primo figlio del elemento <body> nello elemento.