Làm game 2D với Javascript thuần (phần 5)

Bài viết này được dịch dựa trên nguồn sau đây.

DEMO : https://jsfiddle.net/erajpypL/

OK. Thể là xong game, bạn có thể nghỉ ngơi. Phần tiếp theo này mình chỉ là nghịch thêm một chút cho vui thôi. Ở đây mình sẽ cho thêm một control mouse.

LẮNG NGHE SỰ KIỆN MOVE CHUỘT

Listen sự kiện di chuyển chuột thì lại dễ hơn bên ấn vào key. Chúng ta chỉ cần một sự kiện mousemove.

document.addEventListener("mousemove", mouseMoveHandler, false);

DI CHUYÊN TẤM VÁN TƯƠNG ỨNG VỚI VIỆC DI CHUYỂN CHUỘT

Chúng ta sẽ update vị trí của tấm ván tương ứng với vị trí tọa đọ của pointer (con trỏ chuột).

function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth/2;
    }
}

Trong hàm này, đầu tiên chúng ta sẽ xem xet biên relativeX, biến này được tính bằng giá trị của vị trí tọa độ ngan của chuột trừ cho giá trị offset. Giá trị này chính là khoảng cách giữa phần cạnh viên bên trái của canvas và viewpoint.

CHO PLAYER MỘT SỐ LẦN CHƠI NHẤT ĐỊNH

"Mấy mạng" chẳng hạn. Bạn sẽ cho mỗi player vài mạng cho nó chơi thỏa thích rồi nó sẽ nghiện game của bạn ..

var lives = 3;

function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
}

Đấy, ở đây thay vì xong game ngay lập tức. Chúng ta sẽ chỉ trừ đi mạng của nó cho đến khi mạng về 0. Và tất nhien bạn cần chú ý reset lại vị trí của bóng và tấm ván khi mà player chơi lại mạng mới.

Trong draw() , thay 2 đoạn code dưới

alert("GAME OVER");
document.location.reload();

thành phần thế này.

lives--;
if(!lives) {
    alert("GAME OVER");
    document.location.reload();
}
else {
    x = canvas.width/2;
    y = canvas.height-30;
    dx = 2;
    dy = -2;
    paddleX = (canvas.width-paddleWidth)/2;
}

TĂNG CHẤT LƯỢNG RENDER

requestAnimationFrame() sẽ giúp browser render game tôt hơn là nhwunxg hàm như kiểu setInterval(). Thay hàm sau :

setInterval(draw, 10);

bằng

draw();

Sau đó, dưới cùng của hàm draw() (chú ý trước khi đóng ngoặc nhé, đừng cho ra ngoài hàm) , cho thêm đoạn code này.

requestAnimationFrame(draw);

Hàm này sẽ cho phép trình duyệt tự quyết định tỉ lệ render frame như thế nào cho hợp lý. Và animation sẽ nuột hơn.

GAME OVER !!!!!