[7 ngày] Tạo game vui vẻ cùng AI

Mới chỉ một tuần kể từ khi bắt đầu tạo webgame dựa trên D&D5e cùng với Perplexity.AI.

Hôm nay, thay vì tập trung vào nội dung, chúng tôi đã dành nhiều thời gian hơn để cải thiện kiến trúc bên trong nhằm tạo ra một trò chơi vững chắc hơn.

★ Sử dụng Canvas nhiều lớp

Thay vì sử dụng một Canvas duy nhất, chúng tôi đã chia thành 3 Canvas riêng biệt (background, ui, character).

Bằng cách này, thay vì vẽ lại toàn bộ, hệ thống chỉ cần cập nhật lại các phần cần thiết rồi gộp lại,

nên (AI cho biết) sẽ giúp cải thiện hiệu suất tổng thể. ㅎㅎ

Và điều tôi học được lần này là nếu không sử dụng save, restore trong thao tác Canvas, các yếu tố sẽ ảnh hưởng lẫn nhau,

nên nếu muốn thể hiện chính xác trên Canvas, hãy sử dụng save và restore.

★ Thay đổi sang phương thức ESM

Trước đây, tất cả các file js được tải trong html bằng <script>, nhưng khi mã được phân tách, js ngày càng tăng lên...

Vì vậy, ban đầu, tôi định sử dụng require.js (vì hồi tưởng lại kiến thức cũ), nhưng AI đã hướng dẫn tôi một công nghệ tiên tiến hơn.

Nhờ đó, tôi đã sửa đổi thành công sang phương thức ESM. Giờ đây, cho dù mã tăng lên bao nhiêu,

Chỉ cần khai báo main.js bằng module như trên trong index.html. Trông đẹp mắt hơn rồi.

Sau khi cải thiện cấu trúc tổng thể theo cách này, tôi đã có thể thêm các chức năng sau:

★ Thêm tính năng tương tác với cơ sở vật chất

Khi vào cơ sở vật chất, các lựa chọn sẽ xuất hiện trong cửa sổ hội thoại và người chơi có thể tương tác bằng cách nhấp chuột (hoặc chạm).

Đây sẽ là chức năng cơ bản khi thêm nhiều hệ thống khác trong tương lai. Tuy nhiên, trong quá trình thêm chức năng, đã xuất hiện nhiều lỗi và cần sửa đổi,

nhưng giờ đây mọi thứ đã hoạt động tốt nên OK.

Giờ đây, các lựa chọn xuất hiện trong cửa sổ hội thoại và hoạt động bình thường khi được nhấn. Vị trí hiển thị khu vực ở trên cũng chính xác.

Và trong trận chiến, hiệu ứng được hiển thị như sau tùy thuộc vào kết quả tấn công!

Nếu trúng, sẽ hiển thị Hit! Nếu chí mạng, sẽ hiển thị Critical! Hôm qua điều này vẫn chưa hoạt động tốt, nhưng giờ thì... hứ hứ hứ..

Nhìn chung, sau khi sắp xếp lại mã và cải thiện cấu trúc, các chức năng đã được triển khai hoạt động đúng như mong đợi.

Vì tất cả hình ảnh được tải trước khi bắt đầu trò chơi, nên màn hình tải cũng được hiện thị như hình bên dưới.

Nói sao nhỉ... Giờ đây, nó có cảm giác giống như một trò chơi hơn rồi.

Tôi nghĩ công việc dọn dẹp và xây dựng nền tảng cơ bản đã hoàn tất, vì vậy tôi sẽ bắt đầu thực hiện bước tiếp theo.

Trước tiên, tôi sẽ thực hiện hệ thống phép thuật dành cho các lớp pháp sư, các hành động bổ sung dành cho lớp đạo tặc và chiến binh, rồi

các sự kiện được kích hoạt trong quá trình khám phá, nhiệm vụ, nghỉ ngơi, giao dịch vật phẩm và kịch bản thông qua tương tác trong làng, v.v...

Ồ... Dường như vẫn còn rất nhiều việc phải làm!?

Nhưng dù sao thì cũng rất vui khi được cùng AI tiến về phía trước.

Địa chỉ thử nghiệm: https://ggoban.com/d2ng/

Địa chỉ Github: https://github.com/d2ng/