Immagine di gioco
- Pagina precedente Punti di gioco
- Pagina successiva Suono di gioco
Premere il pulsante per muovere il sorriso:
Come utilizzare l'immagine?
Per aggiungere un'immagine alla lavagna, utilizzare le proprietà e i metodi integrati dell'oggetto getContext("2d") dell'immagine.
Nel nostro gioco, se si desidera creare un pezzo di gioco come immagine, utilizzare il costruttore del componente, ma è necessario referenziare l'URL dell'immagine invece di referenziare il colore. E deve essere detto al costruttore che il tipo del componente è "image":
istanza
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
Nel costruttore del componente, testiamo se il componente appartiene al tipo "image" e utilizziamo il costruttore del costruttore di oggetti "new Image()" per creare un oggetto immagine. Quando ci prepariamo a disegnare l'immagine, utilizziamo il metodo drawImage invece del metodo fillRect:
istanza
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); } } }
更改图像
您可以随时通过更改组件的 image
对象的 src
属性来更改图像。
如果您想在每次移动时更改笑脸,请在用户单击按钮时更改图像源,并在未单击按钮时恢复正常:
istanza
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; }
背景图片
通过将背景图像添加为组件,可将其添加到游戏区域,并在每个帧中更新背景:
istanza
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(); }
移动背景
更改背景组件的 speedX
属性可使背景移动:
istanza
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); }
ciclo di sfondo
Per far sì che lo stesso sfondo si ripeta perpetuamente, dobbiamo utilizzare tecniche specifiche.
prima di tutto, informare il costruttore del componente che questo è uno sfondo. Poi, il costruttore del componente aggiungerà l'immagine due volte, posizionando la seconda immagine immediatamente dopo la prima.
in newPos()
nel metodo, verificare se la posizione x del componente è giunta alla fine dell'immagine, se sì, spostare il componente alla posizione x
impostazione della posizione a 0:
istanza
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); } } 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; } } } }
- Pagina precedente Punti di gioco
- Pagina successiva Suono di gioco