Adicionar um quadrado vermelho para a área de jogo:
Adicionar um componente
Faça um construtor do componente, que permite adicionar componentes para o gamearea.
O construtor do objeto é chamado de component , e nós fazemos o nosso primeiro componente, chamado myGamePiece :
Exemplo
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
} Os componentes têm propriedades e métodos para controlar suas aparências e movimentos.
Frames
Para tornar o jogo pronto para a ação, vamos atualizar a tela 50 vezes por segundo, o que é muito parecido com quadros em um filme.
Primeiro, crie uma nova função chamada updateGameArea() .
No myGameArea objeto, adicione um intervalo que vai executar o updateGameArea() função de cada milissegundo 20 (50 times per second) . Além disso, adicione uma função chamada clear() , que apura a tela inteira.
No component do construtor, adicionar uma função chamada update() , para lidar com o desenho do componente.
O updateGameArea() função chama a clear() eo update() método.
O resultado é que o componente é desenhado e afastada 50 vezes por segundo:
Exemplo
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]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
} Tente você mesmo " Torná-lo Mova
Para provar que o quadrado vermelho está sendo desenhado 50 vezes por segundo, vamos mudar a posição x (horizontal) por um pixel de cada vez que atualizar a área de jogo:
Exemplo
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Tente você mesmo " Por Limpar The Game Area?
Pode parecer desnecessário para limpar a área de jogo em cada atualização. No entanto, se deixar de fora o clear() método, todos os movimentos do componente irá deixar um rastro de onde foi posicionado no último quadro:
Exemplo
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Tente você mesmo " Alterar o tamanho
Você pode controlar a largura e altura do componente:
Exemplo
Crie um retângulo 10x140 pixels:
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} Tente você mesmo " Alterar a cor
É possível controlar a cor do componente:
Exemplo
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} Tente você mesmo " Você também pode usar outros colorvalues como hexadecimal, rgb, ou rgba:
Exemplo
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} Tente você mesmo " Alterar a posição
Nós usamos X e Y coordenadas para posicionar componentes para a área de jogo.
O canto superior esquerdo da tela tem as coordenadas (0,0)
Passe o mouse sobre a área de jogo abaixo para ver suas coordenadas x e y:
Você pode posicionar os componentes onde quer que você gosta da área de jogo:
Exemplo
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 2 , 2 );
} Tente você mesmo " muitos componentes
Você pode colocar tantos componentes quanto você gosta da área de jogo:
Exemplo
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new
component(75, 75, "red" , 10, 10);
yellowGamePiece = new component(75, 75, "yellow" , 50, 60);
blueGamePiece = new component(75, 75, "blue" , 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Tente você mesmo " Mover componentes
Faça todos os três componentes movem em direções diferentes:
Exemplo
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Tente você mesmo "