Tela do jogo
O elemento HTML <canvas>é exibido como um objeto retangular em uma página da web:
Tela HTML
O <canvas>elemento é perfeito para fazer jogos em HTML.
O <canvas>elemento oferece toda a funcionalidade que você precisa para fazer jogos.
Use JavaScript para desenhar, escrever, inserir imagens e muito mais no arquivo
<canvas>.
.getContext("2d")
O <canvas>elemento possui um objeto embutido, chamado de getContext("2d")objeto, com métodos e propriedades para desenho.
Você pode aprender mais sobre o <canvas>elemento e o
getContext("2d")objeto em nosso Tutorial do Canvas .
Iniciar
Para fazer um jogo, comece criando uma área de jogo e prepare-a para desenhar:
Exemplo
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]);
}
}
O objeto myGameAreaterá mais propriedades e métodos posteriormente neste tutorial.
A função startGame()invoca o método
start()do
myGameAreaobjeto.
O
start()método cria um <canvas>elemento e o insere como o primeiro nó filho do <body>elemento.