Spil Billeder
- Forrige Side Spil Points
- Næste Side Spil Lyd
按下按钮可移动笑脸:
如何使用图像?
如需在画布上添加图像,请使用 getContext("2d") 对象内置的图像属性和方法。
在我们的游戏中,如需将游戏件创建为图像,请使用组件构造函数,但您必须引用图像的 url,而不是引用颜色。并且必须告诉构造函数该组件的类型为 "image":
instans
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
I komponentens konstruktør测试组件是否属于 "image" 类型,并使用内置的 "new Image()" 对象构造函数创建一个图像对象。在我们准备绘制图像时,我们使用的是 drawImage 方法而不是 fillRect 方法:
instans
function component(width, height, color, x, y, type) { this.type = type; hvis (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; hvis (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); } } }
ændre billede
Du kan altid ændre billedet ved at ændre komponentens image
objektets src
egenskab for at ændre billedet.
Hvis du vil ændre smiley ved hver bevægelse, ændr billedkilden, når brugeren klikker på knappen, og gendan normalt, når knappen ikke klikkes:
instans
function move(dir) { myGamePiece.image.src = "angry.gif"; hvis (dir == "up") {myGamePiece.speedY = -1; } hvis (dir == "down") {myGamePiece.speedY = 1; } hvis (dir == "left") {myGamePiece.speedX = -1; } hvis (dir == "right") {myGamePiece.speedX = 1; } } function clearmove() { myGamePiece.image.src = "smiley.gif"; myGamePiece.speedX = 0; myGamePiece.speedY = 0; }
Baggrundsbillede
Ved at tilføje baggrundsbilledet som en komponent, kan det tilføjes til spilområdet og opdateres i hver frame:
instans
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(); }
flytte baggrunden
Ændre baggrundskomponenten speedX
Egenskaben gør det muligt at flytte baggrunden:
instans
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); }
Baggrundsgentagelse
For at lade denne baggrund gentage sig uendeligt, skal vi bruge specifikke teknologier.
Først fortæller komponentens konstruktør, at dette er baggrund. Derefter tilføjer komponentens konstruktør billedet to gange, og placerer det andet billede med det samme efter det første billede.
i newPos()
metoden, tjek om komponentens x-position allerede er nået til bunden af billedet, hvis ja, så sæt komponentens x
Positioner indstillet til 0:
instans
function component(width, height, color, x, y, type) { this.type = type; hvis (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; hvis (type == "image" || type == "background") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); hvis (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; hvis (this.type == "background") { if (this.x == -(this.width)) { this.x = 0; } } } }
- Forrige Side Spil Points
- Næste Side Spil Lyd