Trò chơi trọng lực
Một số trò chơi có lực kéo thành phần trò chơi theo một hướng, giống như trọng lực kéo các vật thể xuống đất.
Trọng lực
Để thêm chức năng này vào hàm tạo thành phần của chúng ta, trước tiên hãy thêm thuộc tính gravity
để đặt trọng lực hiện tại. Sau đó, thêm thuộc tính gravitySpeed
, thuộc tính này sẽ tăng mỗi khi chúng ta cập nhật khung:
Ví dụ
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed ;
}
}
Hãy tự mình thử » Chạm đáy
Để ngăn hình vuông màu đỏ rơi mãi mãi, hãy dừng rơi khi chạm đáy khu vực trò chơi:
Ví dụ
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
}
}
Hãy tự mình thử »Tăng tốc
Trong trò chơi, khi có một lực kéo bạn xuống thì bạn phải có phương pháp để ép các thành phần đó tăng tốc lên.
Kích hoạt chức năng khi ai đó nhấp vào nút và làm cho hình vuông màu đỏ bay lên không trung:
Ví dụ
<script>function accelerate(n) {
myGamePiece.gravity = n;
}</script>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>
Hãy tự mình thử »Một trò chơi
Tạo một trò chơi dựa trên những gì chúng ta đã học được cho đến nay: