Trần Thị Thu HiềnGiới thiệu
Chuyển động trong game là những hình ảnh nối tiếp nhau xuất hiện, làm cho người chơi có cảm giác như nhân vật đang thật sự chuyển động. Nếu số lượng hình ảnh càng nhiều thì nhân vật có chuyển động càng mượt mà.
Khai báo game
Như đã giới thiệu ở trên, chương trình sau sẽ mô phỏng 1 chú chim đang bay với chuyển động đập cánh.
<!DOCTYPE html>
<html>
<head>
<script>
class Eagle {
constructor(srcUrl) {
this.frameId = 0;
this.frameCount = 28;
this.loaded = false;
this.x = 0;
this.y = 0;
this.width = 250;
this.height = 222;
this.img = new Image();
this.img.src = srcUrl;
this.img.onload = () => {
this.loaded = true;
};
this.eagleCanvas = document.getElementById("eagleCanvasId");
this.eagleContext = this.eagleCanvas.getContext("2d");
}
#update() {
this.frameId++;
this.frameId = this.frameId % this.frameCount;
}
#draw() {
this.eagleCanvas.width = this.eagleCanvas.width;
this.eagleContext.drawImage(
this.img,
this.frameId * this.width,
0,
this.width,
this.height,
this.x,
this.y,
this.width,
this.height
);
}
run() {
if (this.loaded === false) return;
this.#update();
this.#draw();
}
}
function init() {
eagle = new Eagle("eagle.png");
setInterval(run, 1000.0 / 60);
}
function run() {
eagle.run();
}
</script>
</head>
<body onload="init();">
<canvas id="eagleCanvasId" width="730" height="335"></canvas>
</body>
</html>Giải thích code trong <script>
Các thuộc tính vẽ và mô tả về chú chim sẽ được viết trong class Eagle
- Đường dẫn đến hình.
- Số khung hình: trong ví dụ này thì ta có 28 khung, tương đương với 28 trạng thái của chú chim đang bay.
- Khung đang hiển thị.
- Chiều dài.
- Chiều rộng.
- Vị trí chú chim đang bay trên màn hình.
Đoạn code sau hiện thực phần khai báo thuộc tính của chú chim:
class Eagle {
constructor(srcUrl) {
this.frameId = 0;
this.frameCount = 28;
this.loaded = false;
this.x = 0;
this.y = 0;
this.width = 250;
this.height = 222;
this.img = new Image();
this.img.src = srcUrl;
this.img.onload = () => {
this.loaded = true;
};
this.eagleCanvas = document.getElementById("eagleCanvasId");
this.eagleContext = this.eagleCanvas.getContext("2d");
}
}Tiếp theo, định nghĩa phương thức update() và draw() cho nhân vật. Để mô tả nhân vật cần thực hiện 2 việc:
- Trong 28 trạng thái của chú chim, tính toán làm sao cho từng trạng thái xuất hiện lần lượt và khi kết thúc 28 trạng thái thì trở lại trạng thái đầu tiên.
- Tiến hành vẽ mỗi khi 1 trạng thái được cập nhật.
Đoạn code sau hiện thực phương thức update() và draw():
#update() {
this.frameId++;
this.frameId = this.frameId % this.frameCount;
}
#draw() {
this.eagleCanvas.width = this.eagleCanvas.width;
this.eagleContext.drawImage(
this.img,
this.frameId * this.width,
0,
this.width,
this.height,
this.x,
this.y,
this.width,
this.height
);
}
run() {
if (this.loaded === false) return;
this.#update();
this.#draw();
}Tích hợp vào HTML
Chương trình chính đăng ký trong sự kiện onload của body, tiến hành khởi tạo mọi thứ bao gồm canvas để vẽ, hình ảnh của chú chim và các thông tin cần thiết, khởi chạy update() và draw(), cả 2 phương thức này được gom chung trong phương thức Eagle.run().
Tải project hoàn chỉnh
Tải project hoàn chỉnh bên dưới và chạy bằng trình duyệt file index.htm
