Gerakan Permainan

Dengan memanfaatkan cara baru menarik komponen yang dijelaskan di bab rotasi game, gerakan sekarang lebih fleksibel.

bagaimana cara menggerakkan objek?

pada component menambahkan atribut kecepatan atribut, yang mewakili kecepatan komponen saat ini.

harus diubah newPos() method untuk membuat beberapa perubahan untuk menyesuaikan kecepatan dan angle menghitung posisi komponen.

Secara standar, komponen menghadap ke atas, melalui pengaturan kecepatan atur atribut menjadi 1, komponen akan mulai bergerak maju.

Contoh

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

Coba Sendiri

putar

kami juga ingin dapat berputar kiri dan kanan. Buatlah sebuah komponen bernama moveAngle yang baru, menunjukkan nilai gerakan saat ini atau sudut pengembalian. Dalam newPos() dalam method moveAngle penghitungan atribut angle:

Contoh

Silakan atur atribut moveangle menjadi 1 dan lihat apa yang terjadi:

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

Coba Sendiri

Penggunaan papan ketik

Bagaimana cara menggerakkan blok merah saat menggunakan papan ketik? Saat Anda menggunakan panah ke atas, blok merah tidak bergerak ke atas dan ke bawah, melainkan bergerak dari satu sisi ke sisi lain dan bergerak maju, serta berputar kiri dan kanan saat ditekan panah ke kiri dan kanan.

Contoh

Coba Sendiri

Ungkap area permainan, kemudian gunakan tombol panah untuk memindahkan blok merah.