En son web geliştirme öğreticiler
 

HTML Oyun Hareketi

Çizim bileşenlerinin yeni bir yol ile, Oyun Rotasyon bölümde açıklandığı, hareketleri daha esnektir.


Nasıl Nesneleri taşı?

Bir ekleme speed mülkü component bileşeninin geçerli hızını temsil yapıcısı.

Ayrıca bazı değişiklikler yapmak newPos() göre bileşenin konumunu hesaplamak için, bir yöntem speed ve angle .

Varsayılan olarak, bileşenler yukarı bakacak ve 1 olarak hız özelliğini ayarlayarak, bileşen ilerlemeye başlayacaktır.

Örnek

function component(width, height, color, x, y) {
    this.gamearea = gamearea;
    this.width = width;
    this.height = height;
    this.angle = 0;
    this.speed = 1;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();
    }
    this.newPos = function() {
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}
Kendin dene "

dönüşler yapma

Ayrıca sol ve sağ dönüşler yapabilmek istiyorum. Adlı yeni bir özellik yapın moveAngle akım hareketli değerini veya döndürme açısını gösterir. Içinde newPos() yöntemi hesaplamak angle göre moveAngle özelliği:

Örnek

1 moveangle özelliğini ayarlayın ve ne olduğunu görün:

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.angle = 0;
    this.moveAngle = 1;
    this.speed = 1;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}
Kendin dene "

Klavye kullanma

klavyeyi kullanırken nasıl kırmızı kare hareket eder? Bunun yerine yan ve yan aşağı yukarı ve hareketli, kırmızı kare kullandığınızda ilerlerken "up" ok ve sağ ve sol ok basıldığında sol ve sağ döner.

Örnek

Kendin dene "