/codegym.vn/ - 74
Mã nguồn tham khảo:
https://github.com/codegym-vn/introduction-to-programming-
with-javascript/tree/dev/chapter-03/08-luyen-tap-voi-chuoi
Bài 9: Sự kiện bàn phím
Mục tiêu:
Luyện tập xử lý sự kiện bàn phím.
Mô tả:
Di chuyển hình ảnh nhân vật Nobita lên, xuống, sang trái, sang phải sử dụng các phím
tương ứng. Việc này được thực hiện bằng cách thay đổi thuộc tính tọa độ của thẻ khi
xử lý event.
Hình 3.5: Minh hoạ sự kiện bàn phím
Hướng dẫn:
Bước 1: Chèn ảnh nobita.png vào tài liệu html
1. <img id
=
"nobita" src
=
"images/nobita.png" style
=
"position
:
absolute
;
left
:
0
;
top
:
0
;
" height
=
"100" width
=
"80"/>
Bước 2: Xây dựng các hàm xử lý khi nhấn phím lên
1.
function
upArrowPressed
()
{
2.
let
element
=
document
.
getElementById
(
"nobita"
);
3. element
.
style
.
top
=
parseInt
(
element
.
style
.
top
)
-
5
+
'px'
;
4.
}
Bước 3: Xây dựng các hàm xử lý khi nhấn phím xuống
1.
function
downArrowPressed
()
{
2.
let
element
=
document
.
getElementById
(
"nobita"
);
3. element
.
style
.
top
=
parseInt
(
element
.
style
.
top
)
+
5
+
'px'
;
4.
}
Bước 4: Xây dựng các hàm xử lý khi nhấn phím sang trái
1.
function
leftArrowPressed
()
{
2.
let
element
=
document
.
getElementById
(
"nobita"
);
3. element
.
style
.
left
=
parseInt
(
element
.
style
.
left
)
-
5
+
'px'
;
4.
}
Bước 5: Xây dựng các hàm xử lý khi nhấn phím sang phải
