Canvas de juego

El elemento <canvas> de HTML se muestra en la página web como un objeto rectangular:

Canvas HTML

<canvas> el elemento es ideal para desarrollar juegos en HTML.

<canvas> el elemento proporciona todas las funciones necesarias para crear juegos.

Utilice JavaScript en <canvas> dibujar, escribir texto, insertar imágenes, etc.

.getContext("2d")

<canvas> un elemento tiene un objeto integrado llamado getContext("2d") el objeto proporciona métodos y propiedades para dibujar.

Puede encontrar más información en Tutorial de Canvas aprender sobre <canvas> elementos y getContext("2d") más información sobre el objeto.

Entonces, comencemos

Para crear un juego, primero debe crear un área de juego y prepararse para dibujar:

instancia

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

intente hacerlo usted mismo

En la parte posterior de este tutorial, el objeto miÁreaDeJuego obtendrá más propiedades y métodos.

función startGame() llamar miÁreaDeJuego 对象的 start() método.

start() El método creó un <canvas> elemento, y se inserta como el primer nodo hijo en <body> en el elemento.