Împingeți butoanele pentru a muta smiley:
Cum se utilizează imagini?
Pentru a adăuga imagini pe o pânză, The getContext("2d") obiect a încorporat proprietățile imaginii și metode.
În jocul nostru, pentru a crea gamepiece ca imagine, utilizați constructorul componente, dar în loc de a se referi la o culoare, trebuie să vă referiți la adresa URL a imaginii. Și tu trebuie să spui constructorul că această componentă este de tipul "image" :
Exemplu
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}În constructorul componentei am testat dacă componenta este de tip "image" , și de a crea un obiect de imagine prin utilizarea built-in „new Image() “ obiect constructor. Când suntem gata pentru a trage imaginea, folosim metoda drawImage în locul metodei fillRect:
Exemplu
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);
}
}
}
Încearcă - l singur » Modificare imagini
Puteți schimba imaginea ori de câte ori doriți prin schimbarea src proprietatea image obiectului componentei.
Dacă doriți să schimbați Everytime Smiley se misca, schimba sursa de imagine atunci când utilizatorul face clic pe un buton, și înapoi la normal atunci când butonul nu este apasat:
Exemplu
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;
}
Încearcă - l singur » Imagini de fundal
Adăugați o imagine de fundal pentru zona dvs. de joc prin adăugarea acestuia ca o componentă, și să actualizeze, de asemenea, de fundal în fiecare cadru:
Exemplu
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();
}
Încearcă - l singur » Context Moving
Schimbarea componentei de fond al lui speedX proprietate pentru a face mișcare de fond:
Exemplu
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Încearcă - l singur » Buclă de fundal
Pentru a face aceeași buclă de fundal pentru totdeauna, trebuie să folosim o tehnică specifică.
Începeți prin a spune constructorul componentei că acest lucru este un fundal. Constructorul componentă se va adăuga apoi de două ori imaginea, plasarea a doua imagine, imediat după prima imagine.
În newPos() metoda, verificați dacă x poziția componentei a ajunge la capătul imaginii, dacă are, setați x poziția componentei 0:
Exemplu
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;
}
}
}
}
Încearcă - l singur »