Speletjie beelde
Druk die knoppies om die smiley te beweeg:
Hoe om beelde te gebruik?
Om beelde op 'n doek by te voeg, het die getContext ("2d") voorwerp ingeboude beeldeienskappe en -metodes.
In ons speletjie, om die speletjie as 'n prent te skep, gebruik die komponentkonstruktor, maar in plaas daarvan om na 'n kleur te verwys, moet jy na die url van die prent verwys. En jy moet vir die konstruktor vertel dat hierdie komponent van die tipe "beeld" is:
Voorbeeld
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
In die komponentkonstruktor toets ons of die komponent van die tipe "beeld" is, en skep 'n beeldobjek deur die ingeboude "new Image()"-objekkonstruktor te gebruik. Wanneer ons gereed is om die prent te teken, gebruik ons die drawImage-metode in plaas van die fillRect-metode:
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);
}
}
}
Verander prente
Jy kan die beeld verander wanneer jy wil deur die srceienskap van die imagevoorwerp van jou komponent te verander.
As jy die smiley wil verander elke keer as dit beweeg, verander die beeldbron wanneer die gebruiker 'n knoppie klik, en terug na normaal wanneer die knoppie nie geklik word nie:
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;
}
Agtergrond beelde
Voeg 'n agtergrondprent by jou speletjie area deur dit as 'n komponent by te voeg, en werk ook die agtergrond in elke raam op:
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();
}
Bewegende agtergrond
Verander die agtergrondkomponent se speedXeienskap om die agtergrond te laat beweeg:
Voorbeeld
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Agtergrond lus
Om vir altyd dieselfde agtergrondlus te maak, moet ons 'n spesifieke tegniek gebruik.
Begin deur vir die komponentkonstruktor te vertel dat dit 'n agtergrond is . Die komponentkonstruktor sal dan die prent twee keer byvoeg en die tweede prent onmiddellik na die eerste prent plaas.
Kyk in die newPos()metode of die xposisie van die komponent die einde van die prent bereik het, indien wel, stel die xposisie van die komponent 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;
}
}
}
}