Phong trào trò chơi
Với cách vẽ các thành phần mới, được giải thích trong chương Game Rotation, các chuyển động linh hoạt hơn.
Làm thế nào để di chuyển các đối tượng?
Thêm một speedthuộc tính vào phương thức componentkhởi tạo, đại diện cho tốc độ hiện tại của thành phần.
Cũng thực hiện một số thay đổi trong newPos()phương pháp, để tính toán vị trí của thành phần, dựa trên speedvà angle.
Theo mặc định, các thành phần hướng lên trên và bằng cách đặt thuộc tính tốc độ thành 1, thành phần sẽ bắt đầu di chuyển về phía trước.
Thí dụ
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);
}
}
Tạo lượt
Chúng tôi cũng muốn có thể rẽ trái và rẽ phải. Tạo một thuộc tính mới được gọi moveAngle, cho biết giá trị di chuyển hiện tại hoặc góc quay. Trong newPos()phương pháp tính toán
angledựa trên thuộc moveAngletính:
Thí dụ
Đặt thuộc tính moveangle thành 1 và xem điều gì sẽ xảy ra:
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);
}
}
Sử dụng bàn phím
Hình vuông màu đỏ di chuyển như thế nào khi sử dụng bàn phím? Thay vì di chuyển lên xuống và từ bên này sang bên kia, hình vuông màu đỏ di chuyển về phía trước khi bạn sử dụng mũi tên "lên" và quay sang trái và phải khi nhấn mũi tên trái và phải.