Lienzo de juego
El elemento HTML <canvas>se muestra como un objeto rectangular en una página web:
Lienzo HTML
El <canvas>elemento es perfecto para hacer juegos en HTML.
El <canvas>elemento ofrece toda la funcionalidad que necesitas para hacer juegos.
Use JavaScript para dibujar, escribir, insertar imágenes y más, en el archivo
<canvas>.
.getContext("2d")
El <canvas>elemento tiene un objeto incorporado, llamado getContext("2d")objeto, con métodos y propiedades para dibujar.
Puede obtener más información sobre el <canvas>elemento y el
getContext("2d")objeto en nuestro Tutorial de Canvas .
Empezar
Para hacer un juego, comience creando un área de juego y prepárela para dibujar:
Ejemplo
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]);
}
}
El objeto myGameAreatendrá más propiedades y métodos más adelante en este tutorial.
La función startGame()invoca el método
start()del
myGameAreaobjeto.
El
start()método crea un <canvas>elemento y lo inserta como el primer nodo secundario del <body>elemento.