En son web geliştirme öğreticiler
 

HTML Oyun Bileşenleri

❮ Önceki Sonraki Bölüm ❯

Oyun alanı üzerine kırmızı bir kare ekleyin:

Bir Bileşen Ekle

Eğer gamearea üzerine bileşenleri eklemenizi sağlayan bir bileşen yapıcı, yapın.

Nesne yapıcısı denir component ve biz ilk bileşen olarak adlandırılan yapmak 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);
}

Kendin dene "

bileşenleri, görünümlerini ve hareketlerini kontrol etmek özelliklere ve yöntemlere sahiptir.

Çerçeveler

eylem için oyun hazır hale getirmek için, ekrana test çok bir filmde kare gibi saniyede 50 kere, güncelleyecektir.

İlk olarak, adlı yeni bir işlev oluşturmak updateGameArea() .

Gelen myGameArea nesnesi, çalışır bir aralık eklemek updateGameArea() fonksiyonu her 20 milisaniyede (50 times per second) . Ayrıca adında bir işlev eklemek clear() tüm tuval temizler.

Olarak component yapıcı, bir işlev olarak adlandırılan ilave update() bileşeninin çizim işlemek.

updateGameArea() işlev çağrısı clear() ve update() metodu.

Sonuç bileşeni çekilir ve saniyede 50 kez temizlenir olmasıdır:

Ö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();
}
Kendin dene "

o taşı yapın

Kırmızı kare saniyede 50 kez çizilmiş ediliyor kanıtlamak için, x konumunu değiştirir (horizontal) bir piksel biz oyun alanı güncellemek her zaman ölçütü:

Örnek

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Kendin dene "

Neden Temizle Oyunu Alan?

Her güncelleme de oyun alanı temizlemek için gereksiz görünebilir. Biz dışarıda bırakın Ancak, clear() yöntemini bileşenin tüm hareketleri son çerçeveye yerleştirilmiş nerede bir iz bırakacaktır:

Örnek

function updateGameArea() {
    //myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Kendin dene "

Boyutu değiştirin

Sen bileşenin genişliğini ve yüksekliğini kontrol edebilirsiniz:

Örnek

Bir 10x140 piksel dikdörtgen oluşturun:

function startGame() {
    myGameArea.start();
    myGamePiece = new component( 10 , 140 , "red" , 10, 120);
}
Kendin dene "

Rengini değiştirme

Sen bileşenin rengini kontrol edebilirsiniz:

Örnek

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue" , 10, 120);
}
Kendin dene "

Ayrıca onaltılık, rgb, veya RGBA gibi diğer colorvalues ​​kullanabilirsiniz:

Örnek

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
}
Kendin dene "

Konumunu değiştirme

Biz oyun alanı üzerine bileşenleri konumlandırmak için x ve y-koordinatlarını kullanın.

Tuvalin sol üst köşe koordinatları vardır (0,0)

Oyun alanı üzerinde Fare aşağıda x ve y koordinatları görmek için:

X
Y

Eğer oyun alanı üzerinde istediğiniz yere bileşenleri konumlandırabilirsiniz:

Örnek

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red" , 2 , 2 );
}
Kendin dene "

Birçok Bileşenleri

Eğer oyun alanı üzerinde istediğiniz kadar çok 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();
 }
Kendin dene "

Bileşenleri Hareketli

Her üç bileşen farklı yönlerde hareket yapı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();
}
Kendin dene "

❮ Önceki Sonraki Bölüm ❯