hura-docs/adman/docs/tutorial-minigame/5-game-page/code/template-demo.md

sidebar_position

sidebar_position
2

Dùng template mẫu

Template có sẵn giao diện và các chức năng cơ bản của Minigame. Dùng để kiểm tra dữ liệu bạn đã thêm trước đó.

• Ấn Dùng template mẫu để nạp template mẫu vào Game Page, sau đó ấn Cập nhật để lưu lại.
• Ấn Xem trước để xem giao diện hiện thị hiện tại.

:::tip

Sau khi Tạo template mẫu, bạn có thể copy toàn bộ code về Code Editor (VS Code, Sublime Text, Atom...) và chỉnh sửa và chạy ngay trên đó (với VS Code là Extension Live Server,...)

Sau khi hoàn thiện, quay lại Adman và sao chép lại code vào Game Page.

:::

Giao diện vòng quay - Canvas

:::caution

Vòng quay được vẽ bằng Canvas, phụ thuộc vào kích thước của Hình ảnh giải thưởng trên vòng quay - Pizza Piece 🍕

Ví dụ:

• 🍕 của bạn có chiều cao là 300, thì 300 này chính là bán kính vòng quay đó. Lúc này Canvas sẽ có chiều dài(width) và chiều cao(heigh) là 300 * 2 = 600.
• Trong Code Editor của Game Page, sử dụng tìm kiếm Ctrl + F với từ khóa Canvas để thay đổi lại width và height phù hợp với hiển thị ngoài giao diện.

// highlight-next-line
<canvas id="canvas" width="600" height="600" style="width:100%">
  <p style="{color: white}" align="center">
    Sorry, your browser doesn't support canvas. Please try another.
  </p>
</canvas>

:::

Kết quả

:::tip SUCCESS

Nếu bạn thấy giao diện như hình bên trên bao gồm (có thể bị lỗi giao diện 1 chút):

• Thời gian hết hạn: đúng ngày kết thúc đã cài đặt.
• Số người đang online: bằng 1, chính là bạn đang online.
• Vòng quay: hiển thị đúng và đủ các Hình ảnh giải thưởng vòng quay trong tab Cài đặt vòng quay.

Xin chúc mừng bạn, Minigame bước đầu đã hiển thị ngoài giao diện thành công. Việc tiếp theo là Lập trình giao diện đẹp và phù hợp hơn theo Thiết kế của bạn (HTML5, CSS3). Sau đó là Lập trình chức năng để Minigame hoạt động hoàn hảo (Javascript).

:::

:::danger ERROR

Nếu Minigame có lỗi vui lòng kiểm tra lại một số lỗi cơ bản sau:

• Minigame không chạy:
  • Kiểm tra tại tab Quy định chơi/Thời gian kết thúc: thời gian cần cài đặt sau thời điểm hiện tại.
  • Kiểm tra tại tab Thông tin cơ bản/Trạng thái game: tích Cho chạy chính thức.
• Vòng quay không hiển thị, hiển thị lỗi:
  • Kiểm tra tại tab Cài đặt vòng quay: cài đặt Hình ảnh vòng quay và đủ số lượng như thiết kế.

:::