70 lines
3.1 KiB
Markdown
70 lines
3.1 KiB
Markdown
|
---
|
||
|
|
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 <button className="btn btn-add">Dùng template mẫu</button> để nạp template mẫu vào **Game Page**, sau đó ấn <button className="btn btn-submit">Cập nhật</button> để lưu lại.
|
||
|
|
- Ấn <button className="btn btn-add">Xem trước</button> để 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.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
// 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](../../policy)**: 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](../../startup)**: 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](../../4-wheel.md)**: cài đặt `Hình ảnh vòng quay` và đủ số lượng như thiết kế.
|
||
|
|
|
||
|
|
:::
|