Imagens do jogo
Aperte os botões para mover o smiley:
Como usar imagens?
Para adicionar imagens em uma tela, o objeto getContext("2d") possui propriedades e métodos de imagem integrados.
Em nosso jogo, para criar a peça de jogo como uma imagem, use o construtor de componentes, mas em vez de se referir a uma cor, você deve se referir à url da imagem. E você deve informar ao construtor que este componente é do tipo "image":
Exemplo
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
No construtor de componente, testamos se o componente é do tipo "image" e criamos um objeto de imagem usando o construtor de objeto "new Image()" integrado. Quando estamos prontos para desenhar a imagem, usamos o método drawImage em vez do método fillRect:
Exemplo
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
Alterar imagens
Você pode alterar a imagem sempre que quiser alterando a srcpropriedade do imageobjeto do seu componente.
Se você quiser alterar o smiley toda vez que ele se mover, altere a fonte da imagem quando o usuário clicar em um botão e volte ao normal quando o botão não for clicado:
Exemplo
function move(dir) {
myGamePiece.image.src = "angry.gif";
if (dir == "up") {myGamePiece.speedY = -1; }
if (dir == "down") {myGamePiece.speedY = 1; }
if (dir == "left") {myGamePiece.speedX = -1; }
if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
Imagens de fundo
Adicione uma imagem de plano de fundo à sua área de jogo adicionando-a como um componente e também atualize o plano de fundo em cada quadro:
Exemplo
var myGamePiece;
var myBackground;
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Plano de fundo em movimento
Altere a propriedade do componente do plano de fundo speedXpara fazer o plano de fundo se mover:
Exemplo
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Loop de fundo
Para fazer o mesmo loop de fundo para sempre, devemos usar uma técnica específica.
Comece dizendo ao construtor do componente que este é um plano de fundo . O construtor do componente adicionará a imagem duas vezes, colocando a segunda imagem imediatamente após a primeira imagem.
No newPos()método, verifique se a xposição do componente chegou ao final da imagem, caso tenha, defina a xposição do componente para 0:
Exemplo
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image" || type == "background") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image" || type == "background") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}