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 Xoay trò chơi, các chuyển động sẽ linh hoạt hơn.
Làm thế nào để di chuyển đồ vật?
Thêm thuộc tính speed
vào hàm tạo component
, biểu thị tốc độ hiện tại của thành phần.
Đồng thời thực hiện một số thay đổi trong phương thức newPos()
để tính toán vị trí của thành phần, dựa trên speed
và 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.
Ví 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);
}
}
Hãy tự mình thử » Lần 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ó tên là moveAngle
, cho biết giá trị di chuyển hiện tại hoặc góc quay. Trong phương thức newPos()
tính toán angle
dựa trên thuộc tính moveAngle
:
Ví 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);
}
}
Hãy tự mình thử »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à rẽ trái và phải khi nhấn mũi tên trái và phải.