Oyun Resimleri
Gülen yüzü hareket ettirmek için düğmelere basın:
Görseller Nasıl Kullanılır?
Bir tuvale görüntü eklemek için getContext("2d") nesnesinde yerleşik görüntü özellikleri ve yöntemleri bulunur.
Oyunumuzda oyun parçasını görüntü olarak oluşturmak için bileşen yapıcısını kullanın, ancak bir renge atıfta bulunmak yerine görüntünün url'sine başvurmalısınız. Ve yapıcıya bu bileşenin "image" türünde olduğunu söylemelisiniz:
Örnek
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Bileşen yapıcısında, bileşenin "image" türünde olup olmadığını test ederiz ve yerleşik "new Image()" nesne yapıcısını kullanarak bir görüntü nesnesi oluştururuz. Resmi çizmeye hazır olduğumuzda fillRect yöntemi yerine drawImage yöntemini kullanırız:
Ö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);
}
}
}
Resimleri Değiştir
Bileşeninizin nesnesinin srcözelliğini değiştirerek görüntüyü istediğiniz zaman değiştirebilirsiniz .image
Her hareket ettiğinde suratı değiştirmek istiyorsanız, kullanıcı bir butona tıkladığında görüntü kaynağını değiştirin ve butona tıklanmadığında normale dönün:
Ö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;
}
Arka Plan Resimleri
Bir bileşen olarak ekleyerek oyun alanınıza bir arka plan resmi ekleyin ve ayrıca her karede arka planı güncelleyin:
Ö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();
}
hareketli arka plan
Arka planı hareket ettirmek için arka plan bileşeninin speedXözelliğini değiştirin:
Örnek
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Arka Plan Döngüsü
Aynı arka plan döngüsünü sonsuza kadar yapmak için belirli bir teknik kullanmalıyız.
Bileşen yapıcısına bunun bir arka plan olduğunu söyleyerek başlayın . Bileşen oluşturucu daha sonra görüntüyü iki kez ekleyerek ikinci görüntüyü ilk görüntüden hemen sonra yerleştirir.
Yöntemde , bileşenin konumunun görüntünün sonuna ulaşıp ulaşmadığını newPos()kontrol edin , varsa bileşenin konumunu 0'a ayarlayın:xx
Ö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;
}
}
}
}