HTML5: Sử dụng bàn phím
Giải phóng thời gian, khai phóng năng lực
Bàn phím là thiết bị không thể thiếu và là phương tiện rất quan trọng để thực hiện các chức năng của các ứng dụng tương tác với người dùng. Trong bài viết này, ta sẽ hướng dẫn cách bắt sự kiện bàn phím trong canvas và dùng nó để điều khiển góc xoay và hướng di chuyển của đối tượng đồ họa.
1. Bắt sự kiện bàn phím
Để bắt sự kiện này, bạn có thể đăng kí trực tiếp cho đối tượng window, tuy nhiên điều này sẽ gây ra những rắc rối khi trang của bạn có quá nhiều thành phần. Cách tốt nhất là đăng kí riêng cho canvas các hàm xử lý. Tuy nhiên, để canvas có thể focus được, bạn cần xác định thuộc tínhTabIndex của nó:
<canvas id=”canvas” width=”300′′ height=”200′′ tabindex=”1′′ style=”border: 1px solid;”></canvas>
Sau đó bạn đăng kí các sự kiện cần thiết cho canvas. Khi chạy trên trình duyệt, bạn cần phải click chuột vào canvas để nó nhận được focus trước khi thực hiện các thao tác bàn phím.
_canvas.onkeydown = canvas_keyDown;
function canvas_keyDown(e){
alert(e.keyCode);
}
Tham số event truyền vào hàm xử lý sẽ chứa các thuộc tính cần thiết để bạn xác định được phím nào được nhấn. Ở đây, bạn chỉ cần quan tâm đến thuộc tính keyCode lưu mã của phím được nhấn. Do các giá trị keyCode có kiểu số nên rất khó nhớ và kiểm tra, may mắn là ta tìm được trang “Javascript Keycode Enums” liệt kê sẵn các keyCode dưới dạng enum của một đối tượng.
Ta sửa lại một chút để tiện sử dụng hơn:
var Keys = {
BACKSPACE: 8,
TAB: 9,
ENTER: 13,
SHIFT: 16,
CTRL: 17,
ALT: 18,
PAUSE: 19,
CAPS_LOCK: 20,
ESCAPE: 27,
SPACE: 32,
PAGE_UP: 33,
PAGE_DOWN: 34,
END: 35,
HOME: 36,
LEFT_ARROW: 37,
UP_ARROW: 38,
RIGHT_ARROW: 39,
DOWN_ARROW: 40,
INSERT: 45,
DELETE: 46,
KEY_0: 48,
KEY_1: 49,
KEY_2: 50,
KEY_3: 51,
KEY_4: 52,
// ...
};
2. Kiểm tra trạng thái của nhiều phím
Một khó khăn của các sự kiện bàn phím trong javascript là chỉ có thể xác định được duy nhất một phím nhấn thông qua thuộc tính event.keyCode. Để có thể kiểm tra được trạng thái của nhiều phím được nhấn cùng lúc, ta phải lưu trạng thái của chúng lại khi sự kiện keyDown xảy ra và xóa trạng thái đó đi trong sự kiện keyUp.
var _keypressed = {};
function canvas_keyDown(e){
_keypressed[e.keyCode] = true;
}
function canvas_keyUp(e){
_keypressed[e.keyCode] = false;
}
3. Giới hạn các phím được bắt
Sử dụng phương pháp trên, bạn cần lọc các phím cần sử dụng để đối tượng _keypressed không lưu các giá trị không cần thiết. Một cách đơn giản nhất là sử dụng mảng để lưu keyCode của các phím này và kiểm tra trong các sự kiện bàn phím:
const AVAILABLE_KEYS =
[ Keys.UP_ARROW,
Keys.DOWN_ARROW,
Keys.LEFT_ARROW,
Keys.RIGHT_ARROW
];
function canvas_keyDown(e){
if(AVAILABLE_KEYS.indexOf(e.keyCode)!=-1){
_keypressed[e.keyCode] = true;
}
}
function canvas_keyUp(e){
if(_keypressed[e.keyCode]){
_keypressed[e.keyCode] = false;
}
}
Giải phóng thời gian, khai phóng năng lực