Cách tạo game Line 98 với Gemini AI

Nếu bạn từng dành hàng giờ liền để chơi Line 98 trên máy tính thì chắc hẳn sẽ hiểu cảm giác vừa giải trí vừa gây nghiện của nó. Nhưng sẽ thú vị hơn nhiều nếu thay vì chỉ chơi, bạn có thể tự tay tạo ra một phiên bản Line 98 của riêng mình với sự trợ giúp của Gemini AI

Trong bài viết này, GameVui sẽ hướng dẫn bạn từng bước để biến ý tưởng thành một game Line 98 chạy được thật sự, vừa học vừa làm, vừa khám phá cách AI có thể trở thành một người đồng đội cực kỳ thông minh trong hành trình lập trình của bạn.

Hướng dẫn tạo game Line 98 với Gemini AI

Bước 1: Trước tiên, bạn hãy mở ứng dụng Gemini AI rồi nhập Prompt sau để nó tạo một game Line 98 chơi thử

Bạn là một Senior Full Stack Game Developer có hơn 15 năm kinh nghiệm phát triển HTML5 Game.

Hãy tạo hoàn chỉnh một game web lấy cảm hứng từ Line 98 Classic.

Mục tiêu

Xây dựng một game chạy hoàn toàn trên trình duyệt, không cần backend.

Game phải mượt, đẹp, responsive và có thể deploy ngay lên Vercel hoặc Netlify.

Không sử dụng asset có bản quyền.

Toàn bộ source code phải được tạo đầy đủ.

Không được viết code mẫu hay pseudo code.

Phải là source code hoàn chỉnh.

Công nghệ

Sử dụng:

HTML5
CSS3
JavaScript ES6+

Không dùng jQuery.

Ưu tiên:

Canvas API

hoặc

React + Vite

Nếu dùng React:

Functional Components
Hooks
Context (nếu cần)

Không dùng thư viện game engine.

Không dùng Phaser.

Không dùng PixiJS.

Gameplay

Game giống Line 98 cổ điển.

Bàn cờ

Kích thước:

9 x 9

Tổng cộng:

81 ô.

Mỗi ô có thể chứa:

trống
1 quả bóng
Màu bóng

Có 7 màu:

đỏ
xanh dương
vàng
xanh lá
tím
cam
hồng

Mỗi màu dùng gradient đẹp.

Có hiệu ứng bóng 3D.

Khởi tạo

Khi bắt đầu game:

Random 3 quả bóng.

Không được trùng vị trí.

Luật di chuyển

Người chơi:

Click chọn bóng.

Sau đó click ô trống.

Chỉ được phép di chuyển nếu tồn tại đường đi.

Đường đi:

BFS (Breadth First Search)

Không được đi xuyên bóng khác.

Nếu không có đường đi:

Hiện animation rung nhẹ.

Không di chuyển.

Animation di chuyển

Khi bóng di chuyển:

animation 200ms
easing
mượt
Sau mỗi lượt

Nếu KHÔNG tạo được hàng:

Random thêm 3 bóng mới.

Nếu bàn cờ gần đầy:

Chỉ sinh số bóng còn đủ chỗ.

Preview

Luôn hiển thị trước:

3 quả bóng sẽ xuất hiện ở lượt tiếp theo.

Preview nằm cạnh bàn cờ.

Điều kiện xóa

Nếu có:

=5 bóng cùng màu

Theo:

ngang
dọc
chéo trái
chéo phải

Thì:

Xóa toàn bộ.

Nếu có 6

7

8

9

...

cũng xóa hết.

Combo

Nếu cùng lúc có nhiều line:

Xóa tất cả.

Điểm

Ví dụ:

5 bóng = 10 điểm

6 = 15

7 = 22

8 = 30

9 = 40

Combo:

x1.5

Hiển thị animation:

+10

+30

Combo x2

Hiệu ứng

Khi xóa:

scale down
fade out
particle
Thuật toán

Viết rõ:

Pathfinding

Breadth First Search.

Tối ưu.

Detect line

Quét:

4 hướng:

ngang
dọc
chéo \
chéo /

Không lặp.

Không kiểm tra dư.

Random

Spawn ngẫu nhiên.

Không spawn vào ô đã có bóng.

UI

Thiết kế hiện đại.

Theme:

Dark.

Màu:

#10131A

Glassmorphism.

Bo góc.

Shadow.

Layout

Desktop:

Score

Best Score

Next Balls

Game Board

Buttons

Mobile:

Responsive.

Board luôn nằm giữa.

Buttons

New Game

Undo

Pause

Resume

Restart

Sound ON/OFF

Music ON/OFF

Fullscreen

Popup

Game Over

Hiển thị:

Score

Best Score

Play Again

Hiệu ứng

Hover

Click

Glow

Particle

Bounce

Fade

Scale

Transition

Âm thanh

Move

Select

Remove

Combo

Game Over

Button

Có mute.

Local Storage

Lưu:

Best Score

Current Game

Sound Setting

Theme

Có thể tiếp tục chơi khi reload.

Responsive

Desktop

Laptop

Tablet

Mobile

Không vỡ layout.

Accessibility

Keyboard support.

Tab.

Enter.

Space.

ARIA Label.

Hiệu năng

60 FPS.

Không memory leak.

Không render thừa.

Không tạo object không cần thiết.

Clean Code

Tách module rõ ràng.

Ví dụ:

Board

Ball

GameManager

Renderer

AudioManager

StorageManager

PathFinding

ScoreManager

AnimationManager

UIManager

Utils

Constants

Config

Cấu trúc thư mục

Hiển thị đầy đủ:

src/

components/

styles/

assets/

utils/

hooks/

constants/

public/

...

Hiệu ứng nâng cao

Bóng có:

shadow
highlight
reflection

Khi chọn:

Pulse animation.

Khi hover:

Glow.

Thuật toán nâng cao

Sau mỗi lượt:

Kiểm tra line.
Nếu có:

Xóa.

Tính điểm.

Không spawn.

Nếu không:

Spawn 3 bóng.

Kiểm tra line mới.

Nếu có:

Tiếp tục xóa.

Game Over

Nếu không còn ô trống.

Popup hiện ngay.

Tối ưu UX

Animation không gây lag.

Click nhanh vẫn ổn.

Không bị double click bug.

Không bị spawn lỗi.

Không bị duplicate.

Chất lượng code

Code phải:

chuẩn production
có comment
dễ đọc
dễ mở rộng
theo SOLID
không dùng biến toàn cục
Kết quả mong muốn

Gemini phải tạo:

toàn bộ source code
đầy đủ file
đầy đủ CSS
đầy đủ JavaScript
đầy đủ React code (nếu chọn React)
không bỏ sót file
có hướng dẫn chạy
có hướng dẫn build
có hướng dẫn deploy Vercel
có README.md hoàn chỉnh

Mục tiêu cuối cùng là tạo ra một game web hoàn chỉnh với trải nghiệm tương đương Line 98 cổ điển nhưng có giao diện hiện đại, hiệu ứng mượt, mã nguồn sạch, dễ bảo trì và sẵn sàng đưa vào môi trường production.

Bước 2: Bạn hãy chụp lại giao diện game Line 98 cổ điển rồi nhập Prompt sau yêu cầu Gemini thiết kế tương tự

hãy thiết kế lại giao diện giống với game Line 98 cổ điển (tham khảo màu sắc bảng, các quả bóng, hiệu ứng khi xếp 5 quả bóng thành hàng)

Bước 3: Gemini sẽ tạo file index.html để bạn tải về và click chuột phải chọn Open With/Google Chrome để chơi trên máy tính