#Game #Seminar #JavaScript
1. Cài đặt VSCode, tiện ích Live Server
Tải và cài đặt VSCode (công cụ để viết, chạy code) ở link sau: https://code.visualstudio.com/download (các bạn tùy chọn theo đúng hệ điều hành ở trên máy tính của mình nha.
Sau khi cài đặt xong, mở VSCode lên -> click chọn icon biểu tượng các viên gạch (mục Extension – tiện ích mở rộng) ở bên thanh sidebar phía trên, bên trái màn hình VSCode như hình minh họa dưới đây -> tìm kiếm tiện ích Live Server (tiện ích giúp mở trình duyệt trang Web từ khung code của VSCode và cập nhật tự động khi chúng ta lưu file code) -> nhấn chọn Install để cài đặt.
2. Tạo cấu trúc dự án
Tạo một folder dưới máy tính cá nhân của bạn, đây sẽ là nơi chúng ta xây dựng mã nguồn dự án, đặt tên cho folder chính là tên dự án luôn (Ví dụ: galaxy-guardians) -> copy đường đường dẫn tới thư mục mới tạo trên thanh địa chỉ của thư mục đó (copy phần url mình gạch chân đỏ như hình dưới đây)
Mở VSCode, chọn File -> Open Folder, paste đường dẫn đã copy ở bước trên vào URL địa chỉ của folder như hình bên dưới đây để trỏ đường dẫn tới thư mục dự án đã tạo ở bước trước đó.
Tạo các thư mục và tập tin như hình minh họa ở bên dưới đây để xây dựng cấu trúc cho dự án.
Các thư mục và tập tin ở trong kiến trúc dự án này có nghĩa như sau:
- assets/images: đây là nơi chứa các file hình ảnh các nhân vật trong dự án game của chúng ta.
- assets/sounds: đây là nơi chứa các file hình ảnh sử dụng trong dự án game của chúng ta.
- constants: chứa các file để định nghĩa ra các hằng số, để tái sử dụng nhiều nơi các dự án.
- controllers: chứa các file để điều khiển các đối tượng, xử lý tương tác giữa các đối tượng trong dự án.
- entities: chứa các file để định nghĩa các đối tượng sẽ sử dụng trong dự án.
- .gitignore: file khai báo các file/folder không cần thiết/sẽ bỏ qua khi đẩy code lên github.
- index.html: file HTML để khai báo thẻ canvas để vẽ gameboard, khai báo CSS để định dạng font chữ, canh chỉnh bố cục, màu sắc chung cho gameboard và chèn file index.js vào dự án.
- index.js: file javascript chính để khai báo tất cả hoạt động của game và vẽ lên khung canvas đã định nghĩa bên file index.html của dự án.
- README.md: file ghi chú các lưu ý, hướng dẫn sử dụng của dự án.
3. Thêm các tài nguyên vào cho dự án
Lần lượt thêm các tài nguyên hình ảnh, âm thanh trong link sau: https://drive.google.com/drive/folders/1ARUolnxSpYgA0QCwE4Fvvpf8nMB4_eD0?usp=share_link vào cho dự án.
4. Tạo bảng điều khiển chơi game bằng canvas
Sử dụng thẻ <canvas id=”game”> để tạo khung nền cho trò chơi -> thêm một chút đổ bóng cho khung nền canvas bằng thuộc tính box-shadow -> nhúng một cặp thẻ <script type=”module” src=”index.js”></script> để chèn file javascript vào thẻ index.html để bắt đầu tạo giao diện của game trên khung canvas.
Thêm CSS cho tên của game nằm trong thẻ <h1> và căn giữa màn hình tên game.
Thêm CSS cho phần <body> của trang web theo bố cục flexbox để phần khung nền của game nằm trên nền xám trắng, căn giữa khung nền canvas và căn chỉnh chiều cao của khung nền tương thích với màn hình game của thẻ canvas.
Thêm hình nền cho khung điều khiển chơi game canvas và bắt đầu vẽ background ấy với phương thức setInterval(game, 1000/60) tức là tốc độ render lại khung nền game là 1000/60 miliseconds.
5. Tạo các đối tượng trong game
5.1. Tạo lớp kẻ thù (Enemy) trong game để tạo một binh đoàn nhiều đối tượng con quái vật ngoài dải ngân hà đang muốn chiếm đánh dải ngân hà của chúng ta mà mỗi đối tượng quái vật sẽ có các thuộc tính (tọa độ x/y, chiều rộng/cao của quái vật) và các phương thức (vẽ, di chuyển, xét va chạm của quái vật)
5.2. Tạo lớp viên đạn (Bullet) trong game để tạo một đối tượng viên đạn để bắt quái vật mà mỗi đối tượng viên đạn sẽ có các thuộc tính (tọa độ x/y, chiều rộng/cao của quái vật, vận tốc của viên đạn, màu sắc của viên đạn) và các phương thức (vẽ, di chuyển, xét va chạm của viên đạn)
5.3. Tạo lớp người chơi (Player) trong game để tạo đối tượng người chơi để tương tác với quái vật mà mỗi đối tượng người chơi sẽ có các thuộc tính (canvas, vận tốc, điều khiển viên đạn, tọa độ x, y, độ rộng, cao của đối tượng người chơi, chèn 2 thuộc tính lắng nghe sự kiên bấm/nhả phím của đối tượng người chơi) và các phương thức (vẽ, di chuyển, xét va chạm các vách tường, xử lý 2 sự kiện bấm/nhả các phím mũi tên trái/phải, thanh space)
6. Tạo file chứa hằng số cho dự án
Tạo biến hằng MovingDirection là một biến kiểu đối tượng để chứa các hướng di chuyển của binh đoàn quái vật lần lượt sẽ đi từ trái sang phải, từ phải xuống dưới theo lề bên phải, từ phải sang trái và từ trái xuống dưới theo lề bên trái.
7. Tạo các file điều khiển các đối tượng trong dự án
7.1. Tạo lớp BulletController để điều khiển các đối tượng viên đạn với các thuộc tính (canvas, số lượng viên đạn nhiều nhất đồng thời, màu viên đạn, âm thanh mỗi viên đạn phát ra) và các phương thức (vẽ các viên đạn, xét viên đạn va chạm quái vật, bắn đạn bay ra khỏi đối tượng người chơi)
7.2. Tạo lớp EnemyController để điều khiển các đối tượng quái vật với các biến (sơ đồ khởi tạo đội hình quái vật, danh sách các dòng, hướng di chuyển hiện tại, tốc độ theo trục x, tốc độ theo trục y, tốc độ mặc định theo trục x, tốc độ mặc định theo trục y,… của lớp điều khiển quái vật) và các thuộc tính (canvas, điều khiển đạn của quái vật, điều khiển đạn của người chơi, âm thanh quái vật dính đạn chết và tạo các quái vật của lớp điều khiển quái vật) và các phương thức (vẽ, xác định va chạm giữa đạn người chơi và quái vật, bắn đạn lửa,…của lớp điều khiển quái vật)
8. Khởi tạo các controller điều khiển đối tượng
Mở file index.js, khởi tạo các Controller điều khiển đối tượng (BulletController, EnemyController), đối tượng Player và viết các chức năng (game, checkGameOver, displayGameOver) để điều khiển, tương tác các đối tượng trong game.
9. Chạy thử và kiểm tra game đã hoạt động hay chưa
Sau khi làm game xong, chúng ta sẽ có một cửa sổ màn hình chơi game như hình minh họa dưới đây -> khởi động game và test thử xem game đã hoạt động ổn áp chưa nha các bạn.
Chúc các bạn một buổi làm game vui vẻ nhé!
