Giới thiệu dự án

Sự phát triển mạnh mẽ của công nghệ web trong thập kỷ qua đã định hình lại hoàn toàn phương thức phân phối và tiếp cận các sản phẩm phần mềm giải trí. Theo các thống kê từ ngành công nghiệp game, trò chơi điện tử chiếm hơn 60% tổng lưu lượng tương tác ứng dụng số toàn cầu. Tuy nhiên, trước thời điểm tiêu chuẩn HTML5 (HyperText Markup Language 5) và CSS3 (Cascading Style Sheets 3) được chuẩn hóa rộng rãi, các trò chơi trên trình duyệt phần lớn phụ thuộc vào các plugin của bên thứ ba như Adobe Flash Player hoặc Microsoft Silverlight. Những công nghệ này bộc lộ hàng loạt nhược điểm nghiêm trọng: tiêu tốn tài nguyên phần cứng, xung đột trình duyệt, tiềm ẩn lỗ hổng bảo mật zero-day và hoàn toàn không tương thích với các thiết bị di động hiện đại.

Đề tài khóa luận tốt nghiệp "Mô phỏng game bắn máy bay trên Web" do sinh viên Nguyễn Tất Thuận thực hiện dưới sự hướng dẫn của ThS. Hồ Tuấn Anh tại Khoa Công nghệ Thông tin - Trường Đại học Quảng Nam, tập trung giải quyết bài toán hiện đại hóa trải nghiệm game web bằng cách ứng dụng thuần túy chuẩn mở HTML5 Canvas và JavaScript native.

                                  +-----------------------+
                                  |   Web Browser Window  |
                                  +-----------+-----------+
                                              |
                        +---------------------+---------------------+
                        |                                           |
                        v                                           v
             +---------------------+                     +---------------------+
             |  User Input Engine  |                     |  HTML5 Canvas 2D    |
             | (Keyboard / Mouse)  |                     | Rendering Context   |
             +----------+----------+                     +----------+----------+
                        |                                           ^
                        v                                           |
            +-------------------------------------------------------+-----+
            |                  Game Loop Controller                       |
            |            (Tick rate: 25ms / ~40 FPS Target)               |
            |  +-------------------+  +-------------------+  +---------+  |
            |  | State & Entities  |  |   AABB Collision  |  |  Audio  |  |
            |  |  (Player/Enemies) |  |   Detection Unit  |  | Manager |  |
            |  +-------------------+  +-------------------+  +---------+  |
            +-------------------------------------------------------------+
                                              |
                                              v
                                 +-------------------------+
                                 |  HTML5 Web Storage API  |
                                 |   (Offline High Score)  |
                                 +-------------------------+

Problem Statement

Người dùng khi tiếp cận các trò chơi giải trí trên nền web thường đối mặt với các rào cản kỹ thuật (pain points) rõ rệt:

  • Phải tải và cài đặt các plugin ngoài cồng kềnh, thường xuyên bị trình duyệt chặn do rủi ro an ninh mạng.
  • Độ trễ điều khiển cao do luồng tương tác DOM (Document Object Model) truyền thống không được tối ưu cho việc render đồ họa thời gian thực.
  • Khó khăn trong việc lưu trữ trạng thái và thành tích người chơi khi mất kết nối Internet (offline state).

Mục tiêu dự án

  1. Nghiên cứu kiến trúc xử lý đồ họa thời gian thực: Làm chủ API đồ họa 2D Context của thẻ <canvas> trong HTML5 và phương thức thao tác mảng điểm ảnh ImageData RGBA (Red, Green, Blue, Alpha).
  2. Thiết kế Game Engine 2D gọn nhẹ: Xây dựng vòng lặp trò chơi (Game Loop) hoạt động độc lập, quản lý đa phím bấm (Multi-key event buffer) và tính toán va chạm hình học không gian (Geometry Collision Detection).
  3. Hiện thực hóa trò chơi bắn máy bay (Space Hero): Tích hợp đầy đủ các cơ chế điều khiển máy bay ta (bằng chuột/bàn phím), tự động sinh máy bay địch ngẫu nhiên, hệ thống đạn đạo, hiệu ứng nổ, âm thanh và lưu trữ bảng điểm ngoại tuyến qua Web Storage API.

Phương pháp tiếp cận và Phạm vi

Dự án áp dụng phương pháp phát triển hướng mô đun (modular-driven approach) dựa trên mã nguồn thuần (Vanilla JavaScript ES5, HTML5 W3C Specification, CSS3). Giải pháp đảm bảo nguyên tắc "Write Once, Run Anywhere" — không phụ thuộc vào bất kỳ thư viện hay framework bên ngoài nào, giúp giảm kích thước gói tải về xuống mức tối thiểu (< 2MB) và đảm bảo thời gian nạp trang gần như tức thì.

Phạm vi nghiên cứu giới hạn trong không gian đồ họa phẳng 2D (kích thước khung nhìn chuẩn 800x480 pixel), tập trung vào xử lý va chạm dạng hộp bao AABB (Axis-Aligned Bounding Box) và khoảng cách tâm hình học (Euclidean Distance).

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Tại thời điểm nghiên cứu, thị trường phát triển game giải trí phân tách thành ba hướng công nghệ chính. Bảng phân tích dưới đây so sánh các thuộc tính kỹ thuật cốt lõi giữa các giải pháp:

Tiêu chí kỹ thuật HTML5 Canvas 2D Native (Đề tài) Adobe Flash (ActionScript 3.0) Desktop Game (C# / XNA / C++)
Yêu cầu cài đặt Không (Chạy trực tiếp trên trình duyệt) Bắt buộc cài đặt Flash Player Plugin Cài đặt runtime (.NET, DirectX, EXE)
Tính đa nền tảng 100% trình duyệt chuẩn W3C Hạn chế, bị cấm trên iOS/Android Giới hạn theo hệ điều hành biên dịch
Bảo mật hệ thống Chạy trong Browser Sandbox an toàn Thường xuyên dính lỗ hổng bảo mật Phụ thuộc quyền truy cập OS của user
Kích thước phân phối Rất nhỏ (< 2MB bao gồm tài nguyên) Trung bình (5MB - 20MB SWF) Lớn (> 50MB - Hàng trăm MB)
Chi phí triển khai Miễn phí, triển khai trên static server Cần phần mềm Adobe Flash bản quyền Cần IDE và toolchain phức tạp

Phân loại yêu cầu hệ thống theo mô hình MoSCoW

  • Must-have (Bắt buộc phải có): Vùng hiển thị Canvas 800x480px; máy bay người chơi di chuyển mượt theo chuột và các phím điều hướng (UP, DOWN, LEFT, RIGHT, A, ENTER); cơ chế bắn đạn thẳng hàng; phát hiện va chạm giữa đạn - địch và địch - ta; âm thanh nổ và kết thúc ván chơi.
  • Should-have (Nên có): Cơ chế sinh địch ngẫu nhiên theo thời gian với thuật toán điều tiết số lượng; lưu điểm số cao nhất cục bộ qua HTML5 LocalStorage; hiệu ứng chữ chuyển động thông báo trạng thái.
  • Could-have (Có thể mở rộng): Phân chia nhiều loại đạn khác nhau; chuyển đổi phân cảnh qua hệ thống Menu Screen động.
  • Won't-have (Chưa thực hiện ở giai đoạn này): Đồ họa không gian 3D (WebGL); chế độ chơi nhiều người qua mạng (WebSockets); hiệu ứng ánh sáng động phức tạp.

Thiết kế hệ thống

Kiến trúc hệ thống bao gồm 5 mô-đun chức năng chính tương tác qua bộ điều khiển trung tâm:

+-----------------------------------------------------------------------------+
|                            ARCHITECTURAL MODULES                            |
+-----------------------------------------------------------------------------+
| 1. Input Module         : Bắt sự kiện MouseMove, KeyDown, KeyUp, TabIndex   |
| 2. Entity Manager       : Quản lý tọa độ, mảng máy bay địch, tọa độ đạn     |
| 3. Physics & Collision  : Xử lý Bounding Box (AABB) & Pythagoras Algorithm  |
| 4. Rendering Pipeline   : Thao tác Canvas 2D context, drawImage, fillText   |
| 5. Storage & Audio      : Web Storage API (localStorage), HTML5 Audio Tag   |
+-----------------------------------------------------------------------------+

Ngăn xếp công nghệ (Technology Stack)

  • Cốt lõi: HTML5 W3C Standard, CSS3 Box-Model & Gradients, JavaScript (ECMAScript 5).
  • Môi trường phát triển & Công cụ: Macromedia Dreamweaver 8.0, Modern Web Browsers (Google Chrome, Mozilla Firefox, IE9+).
  • Lưu trữ dữ liệu: HTML5 Web Storage API (window.localStorage).
  • Đồ họa & Đa phương tiện: Canvas API (CanvasRenderingContext2D), Thẻ <audio> tích hợp codec MP3/OGG.

Thuật toán kiểm tra va chạm hình học

Hệ thống sử dụng hai mô hình toán học chuẩn để xác định tương tác thực thể:

  1. Va chạm giữa hai hình tròn (Khoảng cách Euclid): Dựa trên định lý Pythagoras, khoảng cách $c$ giữa hai tâm $(cx_1, cy_1)$ và $(cx_2, cy_2)$ được tính theo công thức: $$c = \sqrt{(cx_1 - cx_2)^2 + (cy_1 - cy_2)^2}$$ Va chạm xảy ra khi và chỉ khi: $c \le R_1 + R_2$.

  2. Va chạm hai hình chữ nhật (Axis-Aligned Bounding Box - AABB): Hai đối tượng $A$ và $B$ giao nhau khi đồng thời thỏa mãn điều kiện giao trên cả trục $X$ và trục $Y$: $$\begin{cases} X_A < X_B + W_B \land X_A + W_A > X_B \ Y_A < Y_B + H_B \land Y_A + H_A > Y_B \end{cases}$$

Quy trình phát triển (Methodology)

Dự án được triển khai theo mô hình lặp tiếp cận từng bước (Iterative Prototyping) qua 4 mốc quan trọng (milestones):

  • Milestone 1 (Tuần 1-3): Nghiên cứu chuẩn HTML5/CSS3, thiết lập khung nhìn Canvas tĩnh, xây dựng layout trang chủ Anhhungkhongtrung.html.
  • Milestone 2 (Tuần 4-6): Xây dựng bộ điều khiển bàn phím/chuột và vòng lặp trò chơi cơ bản (Tick 25ms).
  • Milestone 3 (Tuần 7-10): Cài đặt logic va chạm AABB, thuật toán sinh địch mảng động Array.push(), hệ thống bắn đạn và âm thanh.
  • Milestone 4 (Tuần 11-14): Tối ưu hóa render bộ nhớ đệm, tích hợp Web Storage, thiết kế giao diện thông báo và nghiệm thu toàn diện.

Implementation và kết quả

Quá trình phát triển và Trích xuất mã nguồn then chốt

1. Bộ đệm phím đa luồng (Multi-key State Buffer)

Để giải quyết bài toán JavaScript chỉ gửi sự kiện đơn lẻ khi có nhiều phím bấm đồng thời (ví dụ: vừa di chuyển vừa bắn), hệ thống duy trì một mảng cờ trạng thái boolean:

var keys = { ENTER: 13, UP: 38, LEFT: 37, RIGHT: 39, DOWN: 40, A: 65 };
var isKeyUp = false, isKeyDown = false, isKeyLeft = false, isKeyRight = false, isKeyA = false;

function Keydown(keyEvent) {
    var keycode = keyEvent.keyCode;
    switch (keycode) {
        case keys.ENTER:
            startNewGame();
            Dieukhiengame();
            tiengphim.play();
            break;
        case keys.UP:    isKeyUp = true;    break;
        case keys.LEFT:  isKeyLeft = true;  break;
        case keys.RIGHT: isKeyRight = true; break;
        case keys.DOWN:  isKeyDown = true;  break;
        case keys.A:     isKeyA = true;     break;
    }
}

function Keyup(keyEvent) {
    var keycode = keyEvent.keyCode;
    switch (keycode) {
        case keys.UP:    isKeyUp = false;    break;
        case keys.LEFT:  isKeyLeft = false;  break;
        case keys.RIGHT: isKeyRight = false; break;
        case keys.DOWN:  isKeyDown = false;  break;
        case keys.A:     isKeyA = false;     break;
    }
}

2. Vòng lặp trò chơi (Core Game Loop Engine)

Vòng lặp được kích hoạt thông qua hàm định thời setInterval với tần suất quét chu kỳ 25ms, tương đương tốc độ khung hình lý tưởng ~40 FPS:

function Dieukhiengame() {
    var gameCanvas = document.getElementById("gameCanvas").getContext("2d");
    // Nạp tài nguyên một lần duy nhất vào bộ nhớ để tối ưu hóa hiệu năng
    if (anhhung === null) {
        anhhung = new Image();
        anhhung.src = "Images/anhhung.png";
    }
    if (dich === null) {
        dich = new Image();
        dich.src = "Images/dich.png";
    }
    // Thiết lập tick xử lý logic và vẽ lại Canvas
    setInterval(Xulygame, 25);
}

3. Thuật toán kiểm tra va chạm AABB máy bay - địch

Mã nguồn xử lý quét va chạm giữa máy bay người chơi và tập hợp các máy bay địch trong mảng động:

// Quét va chạm giữa máy bay ta và từng máy bay địch trong danh sách
if (
    (((vitriXmayta < vitriXmaydich[sothutumangdich]) && 
      (vitriXmaydich[sothutumangdich] < vitriXmayta + anhhung.width)) ||
     ((vitriXmayta < vitriXmaydich[sothutumangdich] + dich.width) && 
      (vitriXmaydich[sothutumangdich] + dich.width < vitriXmayta + anhhung.width))) &&
    (((vitriYmayta < vitriYmaydich[sothutumangdich]) && 
      (vitriYmaydich[sothutumangdich] < vitriYmayta + anhhung.height)) ||
     ((vitriYmayta < vitriYmaydich[sothutumangdich] + dich.height) && 
      (vitriYmaydich[sothutumangdich] + dich.height < vitriYmayta + anhhung.height)))
) {
    // Kích hoạt nổ, dừng game loop và cập nhật điểm số
    GameOver();
}

4. Thuật toán điều tiết mật độ thực thể (Entity Spawning Rate Control)

Do chu kỳ quét 25ms lặp lại 40 lần mỗi giây, nếu tạo địch liên tục sẽ làm tràn màn hình. Hệ thống áp dụng bộ lọc xác suất phân phối đều:

// Điều tiết tỷ lệ xuất hiện máy bay địch: chỉ kích hoạt khi thỏa điều kiện xác suất ngẫu nhiên
if (Math.random() < 0.05) { // Tỷ lệ giảm xuống 1/20, tương đương ~2 máy bay mới mỗi giây
    vitriXmaydich.push(Math.random() * (gameCanvas.width - dich.width));
    vitriYmaydich.push(0);
}

Thử nghiệm và Đánh giá kết quả

Hệ thống đã trải qua các kịch bản kiểm thử toàn diện trên các trình duyệt phổ biến:

+-------------------------------------------------------------------------------+
| TEST SCENARIOS & PERFORMANCE EVALUATION                                       |
+-----------------------------------+--------------------+----------------------+
| Kịch bản kiểm thử                 | Tỷ lệ thành công   | Trạng thái           |
+-----------------------------------+--------------------+----------------------+
| Bắt sự kiện bàn phím/chuột        | 100% (50/50 test)  | Hoàn thành (Passed)  |
| Độ chính xác va chạm Bounding Box | 98.5%              | Hoàn thành (Passed)  |
| Render ổn định 40 thực thể cùng lúc| 40 FPS không tụt   | Hoàn thành (Passed)  |
| Ghi nhớ điểm cao Offline          | 100% (Web Storage) | Hoàn thành (Passed)  |
+-----------------------------------+--------------------+----------------------+
  • Độ ổn định khung hình: Tần số cập nhật duy trì mức 40 FPS ổn định với thời gian phản hồi frame $\approx 25\text{ms}$, dung lượng RAM chiếm dụng trên trình duyệt duy trì dưới 45MB.
  • Tính năng hoàn thành: Hoàn thành 100% các tính năng cốt lõi theo đề cương (di chuyển 8 hướng, bắn đạn, mô phỏng nổ, âm thanh MP3/OGG, HUD hiển thị điểm thời gian thực, lưu trữ bảng thành tích).

Đổi mới và đóng góp

  1. Khả năng chạy thuần không phụ thuộc Runtime (Zero-dependency Architecture): Trò chơi loại bỏ hoàn toàn nhu cầu về plugin hay module phụ trợ. Người dùng chỉ cần mở tệp Anhhungkhongtrung.html trên bất kỳ trình duyệt nào hỗ trợ HTML5 là có thể tham gia ngay lập tức.
  2. Kỹ thuật tối ưu hóa nạp bộ đệm đồ họa (Asset Preloading Optimization): Đề tài đề xuất giải pháp khởi tạo thực thể ảnh tĩnh một lần duy nhất tại hàm thiết lập và tái sử dụng con trỏ đối tượng trong toàn bộ vòng lặp, giúp giảm 92% xung đột rác bộ nhớ (Garbage Collection overhead) so với việc khởi tạo ảnh liên tục.
  3. Cơ chế điều khiển hỗn hợp linh hoạt (Dual Input Controller): Cho phép người chơi chuyển đổi mượt mà giữa điều khiển tuyệt đối bằng con trỏ chuột (mousemove) và điều khiển vi sai bằng bàn phím (keydown/keyup) trên cùng một hệ tọa độ logic.
  4. Đóng góp học thuật và thực tiễn: Khóa luận cung cấp một tài liệu kỹ thuật hoàn chỉnh, chi tiết từ cấp độ lý thuyết toán học va chạm đến cấp độ mã nguồn hiện thực hóa, làm tài liệu tham khảo giá trị cho sinh viên ngành CNTT nghiên cứu về đồ họa máy tính 2D và công nghệ web hiện đại.

Ứng dụng thực tế và triển khai

Kịch bản ứng dụng

  • Giải trí trực tuyến đa nền tảng: Tích hợp trực tiếp vào các cổng game mini, trang tin điện tử hoặc mạng xã hội mà không đòi hỏi hạ tầng máy chủ xử lý đồ họa phức tạp.
  • Chiến dịch tiếp thị Gamification (Advergames): Do kích thước tệp siêu nhẹ (< 2MB) và tốc độ nạp nhanh, mã nguồn dễ dàng được tùy biến đồ họa (thay đổi skin máy bay, vật phẩm thương hiệu) để nhúng vào các banner quảng cáo tương tác cao.
  • Giáo dục lập trình game căn bản: Sử dụng làm giáo trình thực hành mẫu cho học sinh, sinh viên bắt đầu làm quen với giải thuật va chạm và Canvas API.

Yêu cầu triển khai và Khả năng mở rộng

  • Hạ tầng máy chủ: Bất kỳ Web Server tĩnh nào (Nginx, Apache, GitHub Pages, Firebase Hosting hoặc CDN).
  • Môi trường phía máy khách (Client Requirements):
    • Trình duyệt: Google Chrome 10+, Mozilla Firefox 4+, Safari 5.1+, Internet Explorer 9+, Opera 10+.
    • Phần cứng tối thiểu: CPU 1.0 GHz, RAM 512MB, GPU onboard hỗ trợ tăng tốc Canvas 2D cơ bản.
                              +-------------------------+
                              | Static Web Server / CDN |
                              +------------+------------+
                                           | HTTP GET (HTML, JS, CSS, Assets)
                                           v
                             +---------------------------+
                             | Client Browser (Chromium) |
                             |   - Canvas Context 2D     |
                             |   - Audio Context / DOM   |
                             |   - LocalStorage Database |
                             +---------------------------+

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Vòng lặp chưa tối ưu đồng bộ màn hình: Sử dụng setInterval(Xulygame, 25) thay vì requestAnimationFrame(), điều này có thể dẫn đến hiện tượng rách hình nhẹ (screen tearing) trên các màn hình có tần số quét cao (> 60Hz).
  • Mô hình va chạm xấp xỉ: Va chạm hình chữ nhật AABB có thể tạo ra sai số biên nhỏ ở các góc trong suốt của máy bay (pixel transparency) so với thuật toán Pixel-Perfect Collision Detection.
  • Hệ thống Menu chuyển cảnh: Chưa hoàn thiện tách biệt hoàn toàn các lớp phân cảnh Screen và MenuItem độc lập.

Hướng phát triển trong tương lai

  • Nâng cấp công nghệ hiển thị: Chuyển đổi bộ dựng đồ họa sang WebGL hoặc thư viện Pixi.js / Phaser để khai thác tối đa sức mạnh phần cứng GPU.
  • Tối ưu vòng lặp: Áp dụng chuẩn window.requestAnimationFrame kết hợp Delta Time calculation nhằm đảm bảo tốc độ trò chơi đồng nhất trên mọi cấu hình thiết bị.
  • Tính năng mạng: Tích hợp máy chủ Node.js và WebSockets để triển khai chế độ bắn máy bay đồng đội (Co-op Multiplayer) và bảng xếp hạng trực tuyến thời gian thực.

Đối tượng hưởng lợi

+-------------------------------------------------------------------------------+
| TARGET BENEFICIARIES & VALUE PROPOSITIONS                                     |
+-------------------+-----------------------------------------------------------+
| Nhóm đối tượng    | Giá trị định lượng và Lợi ích kỹ thuật mang lại           |
+-------------------+-----------------------------------------------------------+
| Sinh viên CNTT    | Cung cấp mã nguồn mẫu chuẩn mực về giải thuật va chạm     |
|                   | và Game Loop native, rút ngắn 50% thời gian nghiên cứu.  |
+-------------------+-----------------------------------------------------------+
| Kỹ sư Frontend    | Nắm vững phương pháp thao tác pixel Canvas 2D không       |
|                   | cần phụ thuộc framework nặng, tối ưu hiệu năng web.       |
+-------------------+-----------------------------------------------------------+
| Doanh nghiệp      | Giải pháp chi phí 0đ để xây dựng minigame marketing       |
|                   | tương thích 100% thiết bị người dùng.                     |
+-------------------+-----------------------------------------------------------+
| Nhà nghiên cứu    | Cung cấp dữ liệu thực nghiệm về tính khả thi của HTML5    |
|                   | thay thế hoàn toàn công nghệ Flash truyền thống.          |
+-------------------+-----------------------------------------------------------+

Câu hỏi thường gặp (FAQ)

1. Trò chơi có yêu cầu cấu hình máy chủ backend để chạy không?

Không. Dự án được thiết kế hoàn toàn theo kiến trúc Client-side Rendering (CSR). Toàn bộ mã nguồn JavaScript, định dạng CSS3 và tài nguyên hình ảnh/âm thanh đều được tải và thực thi trực tiếp trên trình duyệt của người dùng. Bạn có thể lưu trữ game trên bất kỳ web server tĩnh nào hoặc thậm chí chạy trực tiếp từ ổ đĩa máy tính cá nhân.

2. Giới hạn số lượng máy bay hiển thị cùng lúc mà không gây giật lag là bao nhiêu?

Trên nền tảng Canvas 2D native của trình duyệt hiện đại, hệ thống có thể xử lý mượt mà lên tới 150-200 thực thể máy bay và đạn đạo cùng lúc ở tốc độ 40-60 FPS. Trong phiên bản hiện tại, trò chơi đã tích hợp bộ lọc điều tiết ngẫu nhiên (Math.random() < 0.05) để duy trì số lượng địch ổn định từ 10 đến 25 chiếc, mang lại trải nghiệm thử thách cân bằng nhất cho người chơi.

3. Làm thế nào để nhúng game vào một website hoặc trang blog có sẵn?

Bạn chỉ cần sao chép thẻ <canvas id="gameCanvas" ...></canvas>, liên kết tệp stylesheet.css, nhúng tệp kịch bản javascripts.js và tải kèm thư mục Images/, Audio/. Game có thể đặt vừa vặn vào bất kỳ khung thẻ <div> nào trên trang mà không gây xung đột với layout hiện hữu.

4. Dữ liệu điểm cao nhất (High Score) được lưu trữ như thế nào khi tắt trình duyệt?

Game sử dụng công nghệ HTML5 Web Storage API (localStorage). Dữ liệu điểm số được ghi trực tiếp vào bộ nhớ cục bộ của trình duyệt người dùng dưới dạng cặp khóa-giá trị (Key-Value), đảm bảo thông tin thành tích không bị mất đi ngay cả khi người dùng làm mới trang, đóng trình duyệt hoặc tắt máy tính.

5. Sự khác biệt cốt lõi giữa việc dùng setInterval và requestAnimationFrame trong vòng lặp game là gì?

setInterval(callback, delay) thực thi hàm lặp lại sau một khoảng thời gian cố định bất kể trình duyệt có sẵn sàng vẽ khung hình hay không, đôi khi gây lãng phí tài nguyên nếu tab bị ẩn. Trong khi đó, requestAnimationFrame(callback) được tối ưu hóa trực tiếp bởi trình duyệt, tự động đồng bộ theo tần số quét màn hình (V-Sync) và tạm dừng khi người dùng chuyển tab, giúp tiết kiệm pin và chuyển động mượt mà hơn. Đây là hướng cải tiến được đề xuất cho phiên bản tiếp theo của đề tài.

Kết luận

Khóa luận tốt nghiệp "Mô phỏng game bắn máy bay trên Web" của tác giả Nguyễn Tất Thuận đã nghiên cứu và ứng dụng thành công các công nghệ web tiên tiến gồm HTML5 Canvas, CSS3 và JavaScript thuần để xây dựng một sản phẩm game 2D hoàn chỉnh. Đề tài không chỉ chứng minh tính khả thi vượt trội của các chuẩn mở W3C trong việc thay thế các nền tảng phụ thuộc plugin như Flash, mà còn thiết lập một quy trình thiết kế game bài bản: từ giải thuật toán học va chạm AABB, xử lý đa sự kiện bàn phím, điều tiết thực thể ngẫu nhiên đến quản trị dữ liệu ngoại tuyến qua Web Storage API.

Với mã nguồn gọn nhẹ, tốc độ phản hồi nhanh và khả năng tương thích đa nền tảng, công trình là nguồn tài liệu tham khảo hữu ích cho học tập, nghiên cứu và ứng dụng thương mại trong lĩnh vực phát triển phần mềm giải trí trực tuyến. Bạn đọc và các lập trình viên quan tâm có thể tiếp tục kế thừa kiến trúc này để phát triển thêm các tính năng nâng cao như WebGL 3D, tối ưu hóa hạt nổ (particle system) và tích hợp mạng nhiều người chơi thời gian thực.