Canva do Jogo

O elemento HTML <canvas> é exibido na web como um objeto retangular:

Canvas HTML

<canvas> elemento é perfeito para desenvolver jogos em HTML.

<canvas> elemento oferece todas as funcionalidades necessárias para criar jogos.

Use JavaScript no <canvas> desenhar, escrever texto, inserir imagens e mais.

.getContext("2d")

<canvas> o elemento tem um objeto interno chamado getContext("2d") objeto, que oferece métodos e propriedades para desenho.

Você pode encontrar em nosso Tutorial Canvas aprenda sobre <canvas> elementos e getContext("2d") conhecer melhor o objeto.

Então, vamos lá

Para criar um jogo, primeiro crie uma área de jogo e prepare-se para desenhar:

instância

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

experimente você mesmo

Na parte posterior deste tutorial, o objeto myGameArea obterá mais propriedades e métodos.

função startGame() chamar myGameArea 对象的 start() método.

start() O método cria um <canvas> elemento, e inserido como o primeiro nó filho em <body> no elemento.