Imagen de juego
- Página anterior Puntuación de juego
- Página siguiente Sonido de juego
Pulsa el botón para mover la sonrisa:
¿Cómo usar imágenes?
Para agregar una imagen al lienzo, utiliza las propiedades y métodos integrados del objeto getContext("2d") de la imagen.
En nuestro juego, si deseas crear un componente de imagen, utiliza el constructor del componente, pero debes referirte a la url de la imagen en lugar de referirte al color. Además, debes informar al constructor que el tipo del componente es "image":
function component(width, height, color, x, y, type) {
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
En el constructor del componente, verificamos si el componente pertenece al tipo "image", y utilizamos el constructor de objetos integrados "new Image()" para crear un objeto de imagen. Cuando nos preparamos para dibujar la imagen, utilizamos el método drawImage en lugar del 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); } } }
更改图像
您可以随时通过更改组件的 image
对象的 src
属性来更改图像。
如果您想在每次移动时更改笑脸,请在用户单击按钮时更改图像源,并在未单击按钮时恢复正常:
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; }
背景图片
通过将背景图像添加为组件,可将其添加到游戏区域,并在每个帧中更新背景:
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.update(); 背景循环 }
移动背景
更改背景组件的 speedX
属性可使背景移动:
function component(width, height, color, x, y, type) {
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.update(); 背景循环 }
为了让这幅相同的背景永远循环,我们必须使用特定的技术。
首先告诉组件构造函数这是背景。然后,组件构造函数将添加图像两次,将第二个图像立即放置在第一个图像之后。
在
newPos() 方法中,检查组件的 x 位置是否已到达图像的末尾,如果已到达,则将组件的
x 位置设置为 0:
实例
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 Puntuación de juego
- Página siguiente Sonido de juego