suratı taşımak için Butonlar:
Nasıl Görüntüleri Kullanılır?
Bir tuval üzerine resim eklemek için getContext("2d") nesne yerleşik görüntü özellikleri ve yöntemleri.
Bizim oyunda, bir görüntü olarak gamepiece oluşturmak bileşen Oluşturucu kullanın, ancak bunun yerine bir renge atıfta yerine, resmin url başvurmalıdır için. Ve bu bileşen tipidir yapıcı söylemelisiniz "image" :
Örnek
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}Bileşen türü ise bileşen yapıcısı biz sınamak "image" ve yerleşik "Yeni kullanarak bir görüntü nesnesi oluşturmak Image() " nesne yapıcı. Biz resim çizmek için hazır olduğunda, bunun yerine fillRect yöntemi drawImage yöntemi kullanın:
Örnek
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);
}
}
}
Kendin dene " Değişim Görüntüler
Eğer değiştirerek istediğiniz zaman görüntüyü değiştirebilir src özelliğini image sizin bileşenin nesne.
Eğer hareket gülen her şey değiştirmek isterseniz düğmesine tıklandığında değilken kullanıcı normale döndü bir düğmesini tıklar ve ne zaman, görüntü kaynağını değiştirin:
Örnek
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;
}
Kendin dene " Arkaplan Görüntüleri
bir bileşeni olarak ekleyerek oyun alanının arka plan resmi ekleme ve ayrıca her karede arka planını güncellemek:
Örnek
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();
}
Kendin dene " hareketli Arka Plan
Arka plan bileşenin değiştirme speedX arkaplan hamle yapmak özelliğini:
Örnek
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Kendin dene " Arka plan Döngü
sonsuza kadar aynı arka plan döngü yapmak için, belirli bir tekniği kullanmalıdır.
Bu bir arka plan olduğunu bileşen yapıcı anlatarak başlayın. Bileşen yapıcısı sonra ilk görüntü hemen sonra ikinci görüntü yerleştirerek, iki kez görüntü katacak.
Içinde newPos() ise yöntem, kontrol x bir bileşenin konum sonunda görüntü ulaşmış, sahip olduğu takdirde, set, x 0 bileşenin konumunu:
Örnek
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;
}
}
}
}
Kendin dene "