Html5 và Canvas (Phần cuối)

Bài đăng này đã không được cập nhật trong 8 năm

Trong phần này ta đã biết được việc tạo các ảnh chuyển động theo 1 quy luật và cũng hiểu bản chất các bước để trình duyệt tạo ra các ảnh động đó. Tiếp đến bài hôm nay chúng ta sẽ đi đến việc tương tác từ các thiết bị vào trong Canvas. Ở đây là chuột và bàn phím.

Tổng quan

Về cơ bản, đầu vào từ người dùng của HTML liên quan đến việc sử dụng một hệ thống xử lý sự kiện được xây dựng trong các trình duyệt kể từ những ngày đầu tiên mà trình duyệt hỗ trợ JavaScript; Html5 không có xử lý nào đặc biệt cho việc tương tác người dùng với trình duyệt vì thế chúng ta hoàn toàn có thể sử dụng javascript để xử lý các tương tác đó một cách chủ động.

Bắt sự kiện tương tác từ thiêt bị ngoại vi

Sự kiện từ bàn phím

Ở trong bài này ta chỉ quan tấm đến việc di chuyển do đó ta chỉ cần biết các sự kiện khi bấm vào các phim mũi tên.

$(document.body).on('keydown', function(e) {
    switch (e.which) {
        // Phím mũi tên trái
        case 37:
            console.log('left arrow key pressed!');
            break;

        // Phims mũi tên phải
        case 39:
            console.log('right arrow key pressed!');
            break;
    }
});

Ví dụ trên đây ta có thể hình dung được việc tiếp nhận tương tác từ bàn phím. Đâu tiên là sẽ bắt sự kiện ấn phím. Sau đó bắt được giá trị của phím bấm từ đó ta sẽ biết được đang bấm phím nào. Ở đây 37 và 39 là mã hóa cho biết phím mũi tên trái hay phải.

Sự kiện từ chuột

Về sự kiện chuột chủ yếu ta quan tâm đến vị trí của chuột trong Canvas. Rất hay ho là jQuery có thể xác định vị trí của chuột và lấy điểm gốc là bất kỳ object nào ta chọn đến. Như vậy có nghĩa ta có thể tính tương tác của chuột mà không cần phải quan tâm đến Canvas để ở đâu trong trình duyệt, vì gốc (0,0) tọa độ luôn sẽ là góc trên cùng bên trái của Canvas.

var canvas = $('#my_canvas');

// Tính toán vị trí của canvas so với trình duyệt

var canvasPosition = {
    x: canvas.offset().left,
    y: canvas.offset().top
};

canvas.on('click', function(e) {

    //Bắt vị trí chuột so với canvas

    var mouse = {
        x: e.pageX - canvasPosition.x,
        y: e.pageY - canvasPosition.y
    }
});

Đoạn code trên ta sẽ luôn nhận được tọa độ chuột đang ở đâu trong canvas.

Chặn các tương tác khác

Khi làm 1 game hay nhiều ứng dụng, ta luôn không muốn có bắt kỳ các phím khác nào ảnh hưởng đến game như click chuột, hay bấm vài phím đặc biệt nào đó. Để loại bỏ đi các tương tác này ta có thể dùng preventDefault() và trả về là false. Ví dụ như ta không cho click chuột trong canvas thì làm như dưới đây:

canvas.on('click', function(e) {
    e.preventDefault();

    var mouse = {
        x: e.pageX - canvasPosition.x,
        y: e.pageY - canvasPosition.y
    }

return false;
});

Tiến hành làm trò chơi

Trò chơi này ta sẽ bắt sự kiện chuột hoặc bấm phím mũi tên và xử lý khi có tương tác đó. Ở đay khi ta nhận được 1 tương tác ví dụ như di chuột hoặc mũi tên thì ta cần xác định đối tượng trong Canvas và xem nó có nằm trong giới hạn cho phép hay không. Trong game này ta xử lý các bước như sau:

Lắng nghe người dung có tương tác trong vùng Canvas
Khi có sự kiện thì sẽ truyền thông tin cho các đối tượng của Canvas về tọa độ của chuột lúc đó.
Tại từng thời điểm sẽ kiểm tra xem có sự tiếp xúc với đối tượng giới hạn hay không.

var gameObjectArray = [
	new gameObject(0, 0, 200, 200),
	new gameObject(50, 50, 200, 200),
	new gameObject(500, 50, 100, 100)
];

canvas.on('click', function(e) {
    var mouse = {
        x: e.pageX - canvasPosition.x,
        y: e.pageY - canvasPosition.y
    }

    for (var i=0; i < gameObjectArray.length; i++) {
        gameObjectArray[i].handleClick(mouse);
    }
});

Ở đây ta bắt sự kiện khi click chuột và lưu các tọa độ của chuột đó. Sau đó kiểm tra xem vị trí chuột có nằm trong vùng giới hạn của đối tượng mong muốn hay không ở đoạn code sau.

function gameObject(x, y, width, height) {
    var self = this;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    $(canvas).on('handleClick', function(e, mouse) {

        if (self.x < mouse.x &&
            self.x + self.width > mouse.x &&
            self.y < mouse.y &&
            self.y + self.height > mouse.y) {

        }
    });
}

Tại đây ta bắt được sự kiện chuột cũng như tọa độ, từ đó có thể xử lý các đối tượng khác trong Canvas

Kết luận

Trong bài này, bạn đã học cách xử lý các sự kiện bàn phím và chuột và cách hủy bỏ hành vi trình duyệt không mong muốn. Đồng thời chúng ta tìm hiểu qua về việc tương tác với chuột trong Canvas.

HTML5 Canvas