Spel bild
- Föregående sida Spel poäng
- Nästa sida Spel ljud
Tryck på knappen för att flytta leenden:
Hur använder man bilder?
För att lägga till bilder på canvas använd den inbyggda bildegenskapen och metoderna i objektet getContext("2d").
För att skapa spelkomponenter som bilder i vårt spel använder du komponentkonstruktören, men du måste referera till bildens url, inte till färg. Och du måste informera konstruktören att komponentens typ är "image":
exempel
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
I komponentens konstruktör testar vi om komponenten tillhör typen "image", och använder den inbyggda konstruktören "new Image()" för att skapa ett bildobjekt. När vi är klara att rita bilden använder vi metoden drawImage istället för metoden fillRect:
exempel
function component(width, height, color, x, y, type) { this.type = type; om (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; om (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
属性来更改图像。
如果您想在每次移动时更改笑脸,请在用户单击按钮时更改图像源,并在未单击按钮时恢复正常:
exempel
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; }
背景图片
通过将背景图像添加为组件,可将其添加到游戏区域,并在每个帧中更新背景:
exempel
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
属性可使背景移动:
exempel
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); }
Bakgrundscykling
För att denna bakgrund ska kunna upprepas för evigt, måste vi använda specifika tekniker.
Först berättar vi för komponentens konstruktör att detta är bakgrund. Därefter lägger komponentens konstruktör till bilden två gånger, och placerar den andra bilden omedelbart efter den första.
i newPos()
i metoden, kontrollera om komponentens x-position har nått änden av bilden, om det är fallet, sätt komponentens x
Position sätts till 0:
exempel
function component(width, height, color, x, y, type) { this.type = type; om (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; om (type == "image" || type == "background") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); om (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; om (this.type == "background") { if (this.x == -(this.width)) { this.x = 0; } } } }
- Föregående sida Spel poäng
- Nästa sida Spel ljud