Dengan cara baru komponen drawing, dijelaskan dalam bab permainan Rotasi, gerakan yang lebih fleksibel.
Cara Pindah Objects?
Tambahkan speed properti ke component konstruktor, yang mewakili kecepatan saat komponen.
Juga membuat beberapa perubahan dalam newPos() metode, untuk menghitung posisi komponen, berdasarkan speed dan angle .
Secara default, komponen menghadap ke atas, dan dengan menyetel properti kecepatan untuk 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);
}
}
Cobalah sendiri " membuat Turns
Kami juga ingin dapat membuat kiri dan kanan bergantian. Membuat properti baru yang disebut moveAngle , yang menunjukkan nilai bergerak saat ini, atau sudut rotasi. Dalam newPos() metode menghitung angle berdasarkan moveAngle properti:
Contoh
Mengatur properti moveangle ke 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);
}
}
Cobalah sendiri " Gunakan Keyboard
Bagaimana persegi merah bergerak ketika menggunakan keyboard? Alih-alih bergerak naik dan turun, dan dari sisi ke sisi, lapangan merah bergerak maju ketika Anda menggunakan "up" panah, dan ternyata kiri dan kanan ketika menekan tombol panah kiri dan kanan.