Imágenes del juego
Presiona los botones para mover el emoticón:
¿Cómo usar imágenes?
Para agregar imágenes en un lienzo, el objeto getContext("2d") tiene propiedades y métodos de imagen integrados.
En nuestro juego, para crear la pieza de juego como una imagen, usa el constructor de componentes, pero en lugar de referirte a un color, debes referirte a la url de la imagen. Y debes decirle al constructor que este componente es de tipo "imagen":
Ejemplo
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
En el constructor de componentes, probamos si el componente es del tipo "imagen" y creamos un objeto de imagen utilizando el constructor de objetos "nueva imagen ()" incorporado. Cuando estamos listos para dibujar la imagen, usamos el método drawImage en lugar del método fillRect:
Ejemplo
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);
}
}
}
Cambiar imágenes
Puede cambiar la imagen cuando lo desee cambiando la srcpropiedad del imageobjeto de su componente.
Si desea cambiar el emoticón cada vez que se mueve, cambie la fuente de la imagen cuando el usuario haga clic en un botón y vuelva a la normalidad cuando no se haga clic en el botón:
Ejemplo
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;
}
Imágenes de fondo
Agregue una imagen de fondo a su área de juego agregándola como un componente y también actualice el fondo en cada cuadro:
Ejemplo
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();
}
Fondo en movimiento
Cambie la speedXpropiedad del componente de fondo para hacer que el fondo se mueva:
Ejemplo
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Bucle de fondo
Para hacer el mismo bucle de fondo para siempre, debemos usar una técnica específica.
Comience diciéndole al constructor del componente que se trata de un fondo . El constructor del componente luego agregará la imagen dos veces, colocando la segunda imagen inmediatamente después de la primera imagen.
En el newPos()método, verifique si la xposición del componente ha llegado al final de la imagen, si es así, establezca la xposición del componente en 0:
Ejemplo
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;
}
}
}
}