Oyun Bileşenleri
Oyun alanına kırmızı bir kare ekleyin:
Bileşen Ekle
Oyun alanına bileşenler eklemenize izin veren bir bileşen oluşturucusu yapın.
Nesne oluşturucu çağrılır
componentve ilk bileşenimizi oluştururuz myGamePiece:
Örnek
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
Bileşenler, görünüşlerini ve hareketlerini kontrol etmek için özelliklere ve yöntemlere sahiptir.
çerçeveler
Oyunu aksiyona hazır hale getirmek için, bir filmdeki karelere çok benzeyen ekranı saniyede 50 kez güncelleyeceğiz.
İlk olarak, adlı yeni bir işlev oluşturun updateGameArea().
Nesnede , işlevi her 20 milisaniyede bir (saniyede 50 kez) myGameAreaçalıştıracak bir aralık ekleyin . Ayrıca tüm tuvali temizleyen updateGameArea()adlı bir işlev ekleyin .clear()
Yapıcıda , bileşenin çizimini işlemek için componentadlı bir işlev ekleyin .
update()
İşlev ve yöntemini updateGameArea()çağırır .clear()update()
Sonuç, bileşenin saniyede 50 kez çizilmesi ve temizlenmesidir:
Örnek
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
Hareket Ettir
Kırmızı karenin saniyede 50 kez çizildiğini kanıtlamak için, oyun alanını her güncellediğimizde x konumunu (yatay) bir piksel değiştireceğiz:
Örnek
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Oyun Alanını Neden Temizlemelisiniz?
Her güncellemede oyun alanını temizlemek gereksiz görünebilir. Ancak,
clear()yöntemi dışarıda bırakırsak, bileşenin tüm hareketleri, son karede nerede konumlandığına dair bir iz bırakacaktır:
Örnek
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Boyutu Değiştir
Bileşenin genişliğini ve yüksekliğini kontrol edebilirsiniz:
Örnek
10x140 piksellik bir dikdörtgen oluşturun:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Rengi Değiştir
Bileşenin rengini kontrol edebilirsiniz:
Örnek
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Hex, rgb veya rgba gibi diğer renk değerlerini de kullanabilirsiniz:
Örnek
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Pozisyonu Değiştir
Bileşenleri oyun alanına yerleştirmek için x ve y koordinatlarını kullanırız.
Tuvalin sol üst köşesinde (0,0) koordinatları bulunur.
X ve y koordinatlarını görmek için fareyi aşağıdaki oyun alanının üzerine getirin:
Bileşenleri oyun alanında istediğiniz yere konumlandırabilirsiniz:
Örnek
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Birçok Bileşen
Oyun alanına istediğiniz kadar bileşen koyabilirsiniz:
Örnek
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Hareketli Bileşenler
Üç bileşenin de farklı yönlerde hareket etmesini sağlayın:
Örnek
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}