Empuje los botones para mover el sonriente:
Cómo usar las imágenes?
Para añadir imágenes en un lienzo, la getContext("2d") objeto ha incorporado la imagen Características y métodos.
En nuestro juego, para crear el gamepiece como una imagen, utilice el constructor de componentes, pero en vez de referirse a un color, se debe hacer referencia a la URL de la imagen. Y usted debe decirle al constructor que este componente es del tipo "image" :
Ejemplo
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}En el constructor de componente se prueba si el componente es de tipo "image" , y creamos un objeto de imagen utilizando el built-in "nueva Image() " constructor de objeto. Cuando estamos listos para dibujar la imagen, utilizamos 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);
}
}
}
Inténtalo tú mismo " Cambiar Imágenes
Puede cambiar la imagen siempre que lo desee cambiando el src propiedad de la image objeto de su componente.
Si desea cambiar el cada vez de sonriente que se mueve, cambia la fuente de la imagen cuando el usuario hace clic en un botón, y de vuelta a la normalidad cuando no se hace 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;
}
Inténtalo tú mismo " Imágenes de fondo
Añadir una imagen de fondo a su área de juego añadiéndolo como un componente, y también actualizar 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();
}
Inténtalo tú mismo " Antecedentes de movimiento
Cambiar el componente de fondo speedX propiedad para hacer el movimiento de fondo:
Ejemplo
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Inténtalo tú mismo " bucle de fondo
Para hacer el mismo bucle de fondo siempre, hay que utilizar una técnica específica.
Comience por decirle al constructor componente que se trata de un fondo. El constructor componente continuación, agregue la imagen dos veces, la colocación de la segunda imagen inmediatamente después de la primera imagen.
En los newPos() método, comprobar si el x posición del componente ha llegar al final de la imagen, si es así, establecer la x posición del componente a 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;
}
}
}
}
Inténtalo tú mismo "