Tìm hiểu game framework Phaser qua việc làm một game infinite scrolling đơn giản
Phaser là một framework làm game HTML5 khá thú vị và dễ sử dụng. Bài viết này mình sẽ giới thiệu cách làm một game infinite scrolling đơn giản sử dụng framework này. Game của chúng ta bao gồm một nhân vật chạy xuyên suốt game và tránh các vật cản sinh ra ngẫu nhiên bằng cách nhảy qua chúng. Điều ...
Phaser là một framework làm game HTML5 khá thú vị và dễ sử dụng. Bài viết này mình sẽ giới thiệu cách làm một game infinite scrolling đơn giản sử dụng framework này.
Game của chúng ta bao gồm một nhân vật chạy xuyên suốt game và tránh các vật cản sinh ra ngẫu nhiên bằng cách nhảy qua chúng. Điều kiện kết thúc game duy nhất là nhân vật chạm vào vật cản. Nhân vật sẽ tăng tốc độ chạy theo thời gian, qua đó tăng độ khó cho trò chơi.
Bạn có thể tải mã nguồn tại đây.
Khởi tạo tài nguyên
Chúng ta cần khởi tạo một file html chính để render game và chứa link tham chiếu đến các tài nguyên cần thiết. Game cần sprite và code javascript, nên để tách bạch, cấu trúc thư mục của game sẽ như sau:
infinite-scrolling-demo
|__assets/
| // chứa sprite ở đây
|__src/
| // chứa code javascript ở đây
|__index.html
File index.html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Infinite scrolling demo</title> <script type="text/javascript" src="http://cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> </head> <body> </body> </html>
Để sử dụng framework Phaser thì chúng ta có thể tham chiếu thông qua thẻ script và đường link như trên hoặc tải framework về và tham chiếu đến, tương tự các file javascript thông thường.
Bắt tay vào code
Khởi tạo đối tượng game
Chúng ta sẽ khởi tạo một đối tượng Game của Phaser, đối tượng này cung cấp các hàm nạp tài nguyên, quản lý các trạng thái của game, chạy game loop (vòng lặp chính của game) và cung cấp rất nhiều tiện ích khác. Để dễ quản lý, chúng ta sẽ thực hiện việc khởi tạo này trong file main.js và tham chiếu file này trong index.html
index.html
<body> <script type="text/javascript" src="src/main.js"></script> </body>
main.js
var game = new Phaser.Game(600, 450, Phaser.AUTO, "");
600, 450 là chiều dài, rộng của vùng hiển thị game. Tham số thứ 3 là phương thức render, mặc định là Phaser.AUTO (tự động phát hiện), ngoài ra còn có các giá trị là Phaser.WEBGL (sử dụng webgl để render), Phaser.CANVAS (sử dụng canvas để render) và Phaser.HEADLESS (không render). Tham số thứ 4 là DOM element mà canvas hiển thị của game sẽ được chèn vào, mặc định là "", khi đó canvas sẽ được chèn vào body. Tất nhiên 2 tham số 3 và 4 có thể bỏ do sử dụng giá trị mặc định
