Peli-kuvat
- Edellinen sivu Peliarvosanat
- Seuraava sivu Peli-äänet
Painamalla nappia voit siirtää hymyilevää naamaa:
Kuinka käyttää kuvia?
Jos haluat lisätä kuvan taulukkoon, käytä getContext("2d")-olion sisäänrakennettuja kuvan ominaisuuksia ja menetelmiä.
Jos haluat luoda pelielementin kuvana pelissämme, käytä komponentin rakentajafunktiota, mutta sinun täytyy viitata kuvan url:iin eikä väriin. Ja sinun täytyy kertoa rakentajafunktiolle, että komponentin tyyppi on "image":
esimerkki
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
Komponentin rakentajafunktiossa testataan, onko komponentti "image"-tyyppiä, ja luodaan sisäänrakennetulla "new Image()"-olion rakentajafunktiolla kuvat object. Kun olemme valmiita piirtämään kuvaa, käytämme drawImage-metodia fillRect-metodia sijaan:
esimerkki
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
属性来更改图像。
如果您想在每次移动时更改笑脸,请在用户单击按钮时更改图像源,并在未单击按钮时恢复正常:
esimerkki
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; }
背景图片
通过将背景图像添加为组件,可将其添加到游戏区域,并在每个帧中更新背景:
esimerkki
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
属性可使背景移动:
esimerkki
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); }
Taustatoisto
Jotta tämä sama tausta toistuisi loputtomasti, meidän on käytettävä tiettyjä teknikoita.
Ensiksi kertoomme komponentin rakentajafunktiolle, että tämä on tausta. Sitten komponentin rakentajafunktiolle lisätään kuva kahdesti, ja toinen kuva asetetaan välittömästi ensimmäisen kuvan jälkeen.
newPos()
menetelmässä tarkistetaan, onko komponentin x-sijainti saavuttanut kuvan lopun, jos on, aseta komponentin x
Aseta sijainti 0:
esimerkki
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; } } } }
- Edellinen sivu Peliarvosanat
- Seuraava sivu Peli-äänet