Oyun Hareket

Oyun döndürme bölümünde anlatılan yeni bileşen çizim yöntemlerini kullanarak, hareketler şimdi daha esnek hale geldi.

Nasıl hareket ettirilir?

içinde component constructor hız özelliği ekleyin, bu özellik bileşenin mevcut hızını temsil eder.

hız newPos() metodlarını bazı değişikliklerle güncelleyin, hız ve angle bileşenin konumunu hesaplamak için

Varsayılan olarak, bileşen yukarıya doğru bakar, hız özelliğini 1 olarak ayarlayın, bileşen ileri doğru hareket etmeye başlar.

Ö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);
  }
}

Kişisel Olarak Deneyin

dönüş

sol ve sağ dönüş yapabilmek için moveAngle yeni özelliğine göre, mevcut hareket değerini veya dönüş açısını gösterir. Ayrıca newPos() metodunda moveAngle özellik hesaplaması angle:

Örnek

moveangle özelliğini 1 olarak ayarlayın ve ne olur görelim:

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);
  }
}

Kişisel Olarak Deneyin

Klavyeyi kullanma

Klavyeyi kullanırken kırmızı blok nasıl hareket eder? 'Yukarı' okunu kullanırken, kırmızı blok yukarı ve aşağı değil, bir tarafa doğru hareket eder ve sol ve sağ oklara basıldığında sağa ve sola döner.

Örnek

Kişisel Olarak Deneyin

Oyun alanını odaklandırmak için tıklayın, ardından kırmızı küpü hareket ettirmek için ok tuşlarını kullanın.