Wciśnij przyciski, aby przesunąć buźkę:
Jak użyć wizerunki?
Aby dodać obrazy na płótnie, na getContext("2d") Obiekt posiada wbudowane właściwości obrazu i metod.
W naszej grze, aby utworzyć gamepiece jako obraz, należy użyć konstruktora składnik, ale zamiast odnoszenia się do koloru, należy zapoznać się z url obrazu. I trzeba powiedzieć, że konstruktor tego komponentu jest typu "image" :
Przykład
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}W konstruktorze komponentu możemy sprawdzić, czy element jest typu "image" i utworzenia obiektu obrazu przy użyciu wbudowanego "nowy Image() " konstruktora obiektu. Kiedy jesteśmy gotowi, aby narysować obraz, możemy użyć metody drawImage zamiast metody fillRect:
Przykład
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);
}
}
}
Spróbuj sam " Zmiany Images
Można zmienić obraz w dowolnym momencie, zmieniając src własność image przedmiotu komponentu.
Jeśli chcesz zmienić buźkę za każdym razem się porusza, zmienić źródło obrazu, gdy użytkownik kliknie przycisk, a wraca do normy, gdy przycisk nie zostanie kliknięty:
Przykład
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;
}
Spróbuj sam " Obrazy tła
Dodaj obraz tła do swojego obszaru gry, dodając je jako składnik, a także aktualizować tło w każdej ramce:
Przykład
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();
}
Spróbuj sam " Przenoszenie Tło
Zmień składnika tle za speedX właściwość, aby ruch w tle:
Przykład
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Spróbuj sam " Pętla Tło
Aby dokonać tej samej pętli tła wiecznie, musimy użyć konkretnej techniki.
Zacznij mówiąc konstruktora składnik, który jest tłem. Konstruktor składnik będzie następnie dodać zdjęcie dwukrotnie, od razu umieszczając drugi obraz po pierwszym obrazie.
W newPos() metody, należy sprawdzić, czy x pozycja komponentu ma dotrzeć do końca obrazu, jeśli ma ustaw x pozycję składnika na 0:
Przykład
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;
}
}
}
}
Spróbuj sam "