Imagem do Jogo
- Página Anterior Pontuação do Jogo
- Próxima Página Som do Jogo
Pressione o botão para mover o sorriso:
Como usar imagens?
Para adicionar uma imagem na tela, use as propriedades e métodos integrados do objeto getContext("2d") de imagem.
No nosso jogo, se precisar criar um componente de imagem, use o construtor do componente, mas você deve referenciar a url da imagem, não a cor. E você deve informar ao construtor que o tipo do componente é "image":
function component(width, height, color, x, y, type) {
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
No construtor do componente, testamos se o componente pertence ao tipo "image" e usamos o construtor de objeto embutido "new Image()" para criar um objeto de imagem. Quando estamos prontos para desenhar a imagem, usamos o método drawImage em vez do método fillRect:
function component(width, height, color, x, y, type) {
this.type = type; if (type == "image" || if (type == "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") { 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); } } }
alterando a imagem
Você pode alterar a imagem do componente a qualquer momento image
do objeto src
propriedade para alterar a imagem.
Se você quiser mudar o sorriso em cada movimento, altere a fonte da imagem ao clicar no botão e restaure ao normal quando não clicar no botão:
function component(width, height, color, x, y, type) {
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; }
imagem de fundo
Ao adicionar a imagem de fundo como componente, você pode adicioná-la à área do jogo e atualizá-la em cada frame:
function component(width, height, color, x, y, type) {
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(); }
movimento do fundo
Altere o componente de fundo speedX
A propriedade permite que o fundo se mova:
function component(width, height, color, x, y, type) {
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); }
Ciclo de fundo
Para que este mesmo fundo ciclique para sempre, devemos usar técnicas específicas.
primeiro informar ao construtor do componente que é fundo. Em seguida, o construtor do componente adicionará a imagem duas vezes, colocando a segunda imagem imediatamente após a primeira.
newPos() no método, verificar se a posição x do componente já atingiu o final da imagem, se sim, ajustar a posição do componente
x posicionamento definido como 0:
instância
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; } } } }
- Página Anterior Pontuação do Jogo
- Próxima Página Som do Jogo