---
sidebar_position: 5
---

# Game Page (Template)

Để hiển thị Minigame ngoài giao diện website ta cần phải **Lập trình Template (HTML5, CSS3, JavaScript)**.

![Minigame Template 1](./img/minigame-startup-gamepage-1.png)

## Thanh hỗ trợ

Chuyển sang tab **Game Page**, ngay phía dưới là 1 **Thanh hỗ trợ** chữ xanh bao gồm:

### Xem lịch sử

Xem lại các phiên bản đã chỉnh sửa gần nhất của Template chứa các thông tin cơ bản như:

- Phiên bản
- Người cập nhật
- Thời gian
- Lựa chọn

![Minigame Template 2](./img/minigame-startup-gamepage-2.png)

:::tip

Khi bạn không may gặp vấn đề như bị Xóa nhầm, Lưu nhầm, Code lỗi... Hãy vào **Xem lịch sử**, chọn **Xem nội dung** để lấy lại bản lưu Template trước đó.
**Lưu ý chỉ hiển thị bản lưu của 10 phiên bản gần nhất**.

:::

### Xem trợ giúp

Hiện thị **2 dòng code bắt buộc phải có** đối với mỗi Minigame, đó là khai báo:

```jsx
<script>const GAME_ID = 'O4z25JLzP9';</script>
<script id="hura-am-main" src="https://static.gleecdn.com/am/v1/aman.bundle.js?id=EVjpMnXO"></script>
// highlight-start
/* O4z25JLzP9 là ID Minigame */
/* EVjpMnXO là ID Thư viện Adman */
// highlight-end
```

- **ID Mingame:** mỗi 1 game sẽ có 1 id khác nhau.
- **ID Thư viện Adman:**

  - Với mỗi tài khoản quản trị là tài khoản Adman gốc **đầu tiên**, không tính các tài khoản phụ được thêm sau.
  - Tất cả Mini game đều chung 1 id thư viện Adman.

### Thư viện files

Tổng hợp các file ảnh đã tải lên, bao gồm:

- **Thư viện chung:** tải và lưu trữ các file chung của toàn bộ Minigame.
- **File riêng:** tải và lưu trữ các file riêng của mỗi Minigame.

Để tìm hiểu thêm vui lòng vào **[Thư viện files](/docs/tutorial-adman/files-library)**.

### Dùng template mẫu

Là Template cơ bản chứa toàn bộ **CODE CORE** của Minigame. Tuy nhiên chỉ chủ yếu là phần **Hiển thị vòng quay** và **Tính năng cơ bản (Javascript - Jquery)** chứ không có phần giao diện hoàn chỉnh.

Từ Template mẫu ta có thể phát triển thêm giao diện và các tính năng mở rộng dựa trên những gì cung cấp sẵn từ 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.

## Lập trình Game Page

:::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`,...)

:::

:::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** &#127829;

Ví dụ:

- &#127829; 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`.
- Tìm kiếm trong **khu vực viết code của Game Page**, tìm kiếm `Ctrl + F` từ khóa `Canvas` để thay đổi lại `width` và `height` phù hợp.

```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>
```

:::

![Minigame Template 3](./img/minigame-startup-gamepage-3.png)

:::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

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](/docs/tutorial-minigame/step-2.md)**: 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](/docs/tutorial-minigame/step-1.md)**: 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](/docs/tutorial-minigame/step-3.md)**: cài đặt `Hình ảnh vòng quay` và đủ số lượng như thiết kế.

:::
