Spelafbeeldingen
Druk op de knoppen om de smiley te verplaatsen:
Hoe afbeeldingen te gebruiken?
Om afbeeldingen aan een canvas toe te voegen, heeft het object getContext("2d") ingebouwde afbeeldingseigenschappen en methoden.
In onze game, om het gamepiece als een afbeelding te maken, gebruik je de componentconstructor, maar in plaats van naar een kleur te verwijzen, moet je naar de url van de afbeelding verwijzen. En u moet de constructor vertellen dat dit onderdeel van het type "image" is:
Voorbeeld
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
In de componentconstructor testen we of de component van het type "image" is en maken een image-object door de ingebouwde "new Image()"-objectconstructor te gebruiken. Wanneer we klaar zijn om de afbeelding te tekenen, gebruiken we de methode drawImage in plaats van de fillRect-methode:
Voorbeeld
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);
}
}
}
Afbeeldingen wijzigen
U kunt de afbeelding op elk gewenst moment wijzigen door de srceigenschap van het imageobject van uw component te wijzigen.
Als je de smiley elke keer dat deze beweegt wilt veranderen, verander dan de afbeeldingsbron wanneer de gebruiker op een knop klikt, en weer normaal wanneer de knop niet wordt geklikt:
Voorbeeld
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;
}
Achtergrondafbeeldingen
Voeg een achtergrondafbeelding toe aan je gamegebied door deze als onderdeel toe te voegen en werk ook de achtergrond in elk frame bij:
Voorbeeld
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();
}
Achtergrond verplaatsen
Wijzig de speedXeigenschap van de achtergrondcomponent om de achtergrond te laten bewegen:
Voorbeeld
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Achtergrondlus
Om voor altijd dezelfde achtergrondlus te maken, moeten we een specifieke techniek gebruiken.
Begin door de componentconstructeur te vertellen dat dit een achtergrond is . De componentconstructor voegt de afbeelding vervolgens twee keer toe, waarbij de tweede afbeelding direct na de eerste afbeelding wordt geplaatst.
Controleer in de newPos()methode of de xpositie van het onderdeel het einde van de afbeelding heeft bereikt, zo ja, stel de xpositie van het onderdeel in op 0:
Voorbeeld
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;
}
}
}
}