ROAD TO WORLD CUP – Game Documentation

1

Tổng quan sản phẩm

ROAD TO WORLD CUP là game web 2D thuộc thể loại arcade casual, lấy ý tưởng từ hành trình chinh phục chiếc cúp vô địch World Cup. Người chơi sẽ đồng hành cùng nhân vật cầu thủ vượt qua từng khoảng trống giữa các trụ, giống như đang tiến từng bước trên “con đường đến với chiếc cúp vàng”.

⚽

Lối chơi đơn giản

Một thao tác chính: giữ để kéo thanh, thả để thanh rơi. Dễ hiểu nhưng đòi hỏi căn thời gian chính xác.

🏆

Chủ đề World Cup

Nền bóng đá, logo, cúp vàng, cầu thủ và bóng bay tạo không khí thể thao rực rỡ.

🧠

DOM-Based

Nhân vật, trụ, thanh gỗ, điểm số, menu đều là HTML elements được JavaScript điều khiển.

2

Asset nổi bật trong game

Các hình ảnh chính được dùng để tạo phong cách World Cup: logo, nhân vật, nút Play, nút Restart, bảng hướng dẫn, bóng bay và cột/trụ.

logo.png

messi.png

ronaldo.png

play.png

restart.png

howtoplay.png

swap.png

balloon.png

column.png

3

Chạy game nhanh

Cách mở trên máy tính

1

Mở thư mục dự án trong VS Code.

2

Kiểm tra có đủ index.html, css/style.css, js/script.js, img/.

3

Chạy bằng Live Server hoặc mở trực tiếp index.html trên trình duyệt.

4

Nhấn PLAY, giữ chuột để kéo thanh và thả chuột để thanh rơi xuống.

Lệnh/kiểm tra nhanh

ROAD-TO-WORLD-CUP/
├─ index.html
├─ css/style.css
├─ js/script.js
└─ img/

# Mở bằng Live Server
# Hoặc double click index.html

Ghi nhớ: bản hiện tại không cần cài Unity, Phaser, Three.js, Canvas engine hay Node.js để chạy.

4

Cấu trúc dự án

ROAD-TO-WORLD-CUP/ ├─ index.html # Khung giao diện, menu, popup, gameplay area ├─ css/ │ └─ style.css # Layout, animation, responsive, platform, stick ├─ js/ │ └─ script.js # Input, logic, render DOM, score, restart └─ img/ ├─ 10600816_41524.png # Background chính ├─ logo.png # Logo ROAD TO WORLD CUP ├─ play.png # Nút Play ├─ restart.png # Nút Restart ├─ swap.png # Nút chọn nhân vật ├─ balloon.png # Particle/bóng bay ├─ column.png # Cột/trụ tùy chỉnh └─ character/ ├─ messi.png └─ ronaldo.png

index.html

Chứa cấu trúc DOM: preloader, level modal, particles, menu, logo, hướng dẫn, nút play, popup chọn nhân vật, score, restart và vùng gameplay.

style.css

Quản lý giao diện, animation, hero idle, particle, score glow, platform, stick, responsive và hiệu ứng button.

script.js

Bộ xử lý chính: tạo trụ, sinh khoảng cách, kéo/thả thanh, kiểm tra thắng/thua, chọn nhân vật, tính điểm, restart.

5

Kiến trúc tổng quan

Sơ đồ mô tả quá trình từ input người chơi đến hình ảnh hiển thị trên màn hình.

Luồng xử lý chính

Layer 1Input

Layer 2Game Logic

Layer 3Data State

Layer 4Transform

Layer 5Render

Layer 6Output

6

Logic gameplay chính

1

InputNgười chơi giữ chuột/chạm để bắt đầu kéo thanh.

2

Stick GrowthThanh gỗ tăng chiều cao liên tục theo thời gian giữ.

3

Stick RotateThả tay → thanh ngừng tăng và xoay ngang.

4

Distance CheckSo sánh đầu thanh với vị trí trụ tiếp theo.

5

Score / FallĐạt thì cộng điểm, không đạt thì rơi xuống.

6

RestartHiện nút chơi lại và reset dữ liệu khi cần.

Mini mô phỏng đúng logic: chạm mặt trụ = qua

Mini mô phỏng kiểm tra khoảng cách

Kéo thanh bên dưới để thay đổi độ dài. Nếu đầu thanh sau khi đổ chạm vào mặt trụ tiếp theo thì nhân vật qua. Nếu chưa tới hoặc vượt quá trụ thì thua.

Chiều dài thanh: 320 px

Đang kiểm tra...

Mép trái trụ tiếp theo ≤ đầu thanh gỗ ≤ Mép phải trụ tiếp theo

Chưa tới
Đầu thanh nằm trước trụ.

Đạt
Đầu thanh nằm trên mặt trụ.

Vượt quá
Đầu thanh đi quá mép phải.

Tạo trụ

CreateWall() tạo trụ bằng div và thanh gỗ bằng div con.

let _wall = document.createElement("div")
let _Wood = document.createElement("div")
_wall.appendChild(_Wood)
myn.appendChild(_wall)

Kéo thanh

ClickDown() dùng setInterval để tăng style.height của thanh.

_interval = setInterval(() => {
  _getTagWalls[_flagWalls].children[0].style.height = `${_valueClickMouse++}px`
}, 0);

Thả thanh

ClickUp() dừng interval và xoay thanh 90 độ.

clearInterval(_interval)
stick.style.transition = "0.3s"
stick.style.transform = "rotate(90deg)"

Điều kiện đạt

Về ý tưởng: đầu thanh sau khi đổ phải nằm trong vùng mặt trụ tiếp theo.

Mép trái trụ tiếp theo ≤ đầu thanh gỗ ≤ Mép phải trụ tiếp theo

7

Tùy chỉnh game

Đổi nhân vật

Sửa mảng _heroCar trong script.js, thêm ảnh, width, height và tên nhân vật.

{
  img: "url('img/character/messi.png')",
  w: "110px",
  h: "110px",
  test: "messi"
}

Đổi background

Sửa mảng back trong script.js để thay ảnh nền.

const back = [
  "url('img/10600816_41524.png')"
]
document.body.style.backgroundImage = back[0]

Đổi bóng bay

Thay file img/balloon.png hoặc sửa đường dẫn trong hàm createParticles().

particle.src = "img/balloon.png"
particle.classList.add('particle')

Gợi ý : đặt tên file ngắn, không dấu, không khoảng trắng. Ví dụ: messi.png, ronaldo.png, play.png, restart.png.

8

Giao diện trong game

Màn hình nền World Cup

Bảng hướng dẫn

Nút Play

Nút Restart

Giao diện	Thành phần chính	Mục đích thiết kế
Màn hình chính	Logo, Play, Cách chơi, chọn nhân vật, nền World Cup	Giúp người chơi hiểu nhanh tên game và thao tác bắt đầu.
Popup chọn nhân vật	Danh sách Messi/Ronaldo, nút đóng X	Tạo cá nhân hóa mà không chuyển trang.
Gameplay	Nhân vật, trụ, thanh gỗ, score, bóng bay	Tập trung vào nhiệm vụ ước lượng khoảng cách.
Game Over	Nhân vật rơi, nút Restart	Cho phép chơi lại nhanh theo kiểu arcade casual.

9

Lỗi thường gặp và cách xử lý

Ảnh không hiện

Kiểm tra tên file, thư mục và đường dẫn. Nếu code ghi img/play.png thì file phải nằm đúng trong thư mục img/.

Màn hình trắng

Mở DevTools Console để xem lỗi JS. Kiểm tra các phần tử như .main, .ball, .play có tồn tại trong HTML không.

Nhân vật lệch khỏi trụ

Kiểm tra ball.style.left, kích thước nhân vật trong _heroCar và vị trí trụ hiện tại.

Spam click làm lỗi thanh

Nên thêm biến khóa input, chỉ cho kéo thanh khi đang ở trạng thái được phép chơi.

Bóng bay quá nhiều

Nếu gọi particle nhiều lần, thêm animationend để xóa phần tử sau khi bay xong.

Restart bị lỗi trạng thái

Cần reset đồng bộ: điểm, mảng trụ, vị trí nhân vật, thanh gỗ, container và input.

10

Câu hỏi thường gặp

Game có dùng Canvas không?

Không. Bản hiện tại dùng HTML elements + CSS + JavaScript để hiển thị và điều khiển game.

Có thể đổi trụ thành ảnh không?

Có. Có thể dùng background-image cho phần tử trụ, nhưng cần giữ thanh gỗ là phần tử con riêng để không bị ảnh hưởng khi xoay.

Có thể thêm nhân vật mới không?

Có. Thêm ảnh vào thư mục character và thêm một object mới vào mảng _heroCar.

Vì sao chưa ghi High Score?

Bản hiện tại mới lưu điểm trong phiên chơi. Nếu muốn lưu điểm cao nhất, cần thêm localStorage.