Cách tạo game nối ống nước với ChatGPT

Chắc có không ít game thủ đã từng dành hàng giờ đồng hồ chỉ để tìm cách hoàn thành những thử thách trong tựa game "gây nghiện" Nối ống nước. Điều thú vị là giờ đây, bạn không cần phải là một lập trình viên chuyên nghiệp để tạo ra một trò chơi tương tự như vậy.

Chỉ với ChatGPT và một vài câu lệnh đúng cách, bạn đã có thể lên ý tưởng, viết code, chỉnh sửa giao diện và hoàn thiện một game nối ống nước của riêng mình.

Trong bài viết này, GameVui sẽ hướng dẫn từng bước tạo game Nối ống nước từ con số 0 bằng ChatGPT, giúp quá trình làm game trở nên nhanh hơn, dễ hơn và thú vị hơn rất nhiều.

Hướng dẫn tạo game nối ống nước với ChatGPT

Bước 1: Trước tiên, bạn hãy mở ứng dụng ChatGPT lên rồi nhập prompt sau để nó tạo game Nối ống nước

Tạo một game HTML5 hoàn chỉnh (chỉ 1 file index.html) sử dụng HTML + CSS + JavaScript thuần, không dùng framework.

Game lấy cảm hứng từ Pipe Mania / Pipe Connect nhưng gameplay giống Flow Free: người chơi nối các đầu ống nước cùng màu.

Yêu cầu chung
Chỉ tạo 1 file index.html.
Không dùng thư viện ngoài.
Responsive trên PC và điện thoại.
Hỗ trợ chuột và cảm ứng.
Chạy offline.
Code có comment rõ ràng.
Giao diện

Nền game mang phong cách công nghiệp.

nền màu xanh thép
ô vuông kim loại
hiệu ứng bóng nhẹ
bo góc đẹp

Kích thước bảng:

6 cột × 6 hàng

Tổng 36 ô.

Mỗi ô vuông.

Game luôn căn giữa màn hình.

Chỉ hiển thị đầu ống

Khác với Flow Free thông thường.

Trên bảng KHÔNG có sẵn các đoạn ống.

Chỉ có các đầu nối.

Đầu nối là hình tròn lớn.

Đường kính khoảng 70% ô.

Có viền kim loại.

Có lỗ ống ở giữa.

Có hiệu ứng bóng.

Ví dụ màu:

🔴 đỏ

🟡 vàng

🟢 xanh lá

🔵 xanh dương

🟣 tím

🟠 cam

⚪ trắng

🟤 nâu

Người chơi

Người chơi:

nhấn chuột vào đầu ống
giữ chuột
kéo

hoặc

chạm ngón tay
kéo

Đường nối sẽ được vẽ theo ngón tay.

Đường đi chỉ đi ngang hoặc dọc.

Không đi chéo.

Mỗi lần đi sang ô kế bên.

Hiệu ứng đường ống

Khi kéo:

hiện ống nước thật.

Không chỉ là line.

Ống gồm:

thân ống tròn
khúc cua
đầu nối

Ống có:

hiệu ứng bóng
ánh sáng
viền đậm

Nhìn giống game Pipe Mania.

Luật chơi

Chỉ nối hai đầu cùng màu.

Nếu nối sai màu:

không cho phép.

Không đi chéo.

Không đi ra ngoài bảng.

Không đi xuyên ô đã bị màu khác chiếm.

Có thể đè lên chính đường của màu đang kéo.

Nếu kéo quay lại:

ống bị xóa theo.

Nếu kéo đụng đầu còn lại cùng màu:

đường hoàn thành.

Sau đó khóa đường.

Muốn sửa:

chạm vào đường đó.

Đường bị mở khóa.

Cho phép nối lại.

Điều kiện thắng

Thắng khi:

mọi cặp màu đều nối xong
toàn bộ 36 ô đều được phủ kín bởi các đường.

Hiện popup:

LEVEL COMPLETE

Có nút:

Next Level

Level

Tổng cộng:

5 level.

Độ khó tăng dần.

Level 1

3 cặp màu.

Đường ngắn.

Rất dễ.

Level 2

4 cặp màu.

Có vài khúc cua.

Level 3

5 cặp màu.

Đường dài hơn.

Level 4

6 cặp màu.

Có nhiều giao cắt cần suy nghĩ.

Level 5

7 cặp màu.

Khó.

Bắt buộc phủ kín toàn bộ bảng.

Dữ liệu level

Level lưu dưới dạng mảng.

Ví dụ:

const levels = [
{
pairs:[
{
color:"red",
a:[0,0],
b:[5,5]
},
...
]
}
]

Game tự sinh bảng từ dữ liệu.

Thanh trên

Hiển thị

LEVEL 1 / 5

Moves

Time

Nút:

Restart

Home

Hiệu ứng

Kéo:

ống lớn dần.

Có animation.

Hoàn thành:

đầu ống sáng lên.

Ống phát sáng nhẹ.

Có hiệu ứng nước chạy trong ống.

Animation nước chạy liên tục.

Âm thanh

Có hiệu ứng:

click

connect

undo

win

Có nút:

Sound On/Off.

Mobile

Hỗ trợ:

touchstart

touchmove

touchend

Không bị cuộn trang khi kéo.

Canvas sắc nét trên màn hình Retina.

Responsive

PC:

bảng khoảng

650×650.

Điện thoại:

chiếm khoảng 90vw.

Ô luôn vuông.

Kiến trúc code

Viết thành các class:

class Game
class Board
class Cell
class Pipe
class LevelManager
class SoundManager
class UI
Thuật toán

Sử dụng:

DFS hoặc BFS

để:

kiểm tra đường hợp lệ
cập nhật đường
kiểm tra thắng

Mỗi ô lưu:

{
row,
col,
pipeColor,
endpoint,
visited
}
Hiệu ứng vẽ

Đường ống không phải chỉ là line.

Mỗi đoạn gồm:

ống ngang

ống dọc

khúc cua

đầu nối

Tự chọn sprite bằng hướng:

up

down

left

right

Ví dụ:

up + right

=> khúc cua

left + right

=> ống ngang

up + down

=> ống dọc
Chất lượng đồ họa

Dùng CSS Gradient để tạo:

ống kim loại.

Ví dụ:

linear-gradient(...)

Có:

highlight
shadow
inner shadow
border

Không dùng ảnh PNG.

Vẽ hoàn toàn bằng CSS hoặc Canvas.

Hiệu ứng thắng

Popup đẹp:

⭐ LEVEL COMPLETE ⭐

Hiển thị:

Time

Moves

3 sao:

⭐⭐⭐ nếu dưới số bước chuẩn

⭐⭐ nếu trung bình

⭐ nếu nhiều bước

Có nút:

Next Level

Restart

Yêu cầu cuối

Toàn bộ game phải hoạt động ngay khi mở index.html.

Không còn TODO.

Không còn placeholder.

Không thiếu level.

Không cần tài nguyên bên ngoài.

Mã nguồn sạch, dễ đọc, tối ưu và hoàn chỉnh như một game HTML5 thương mại nhỏ.

Bước 2: Ban đầu, giao diện mà ChatGPT tạo ra sẽ chưa đẹp. Vì thế, bạn có thể chụp một giao diện game Nối ống nước mà bạn thấy đẹp rồi tải lên và yêu cầu nó tham khảo rồi tạo giống như vậy

tham khảo giao diện sau, hãy thiết kế một giao diện gần giống như vậy

Bước 3: Sau đó, bạn có thể chỉnh sửa cho game trở nên hoàn chỉnh hơn như

dịch toàn bộ ngôn ngữ sang tiếng Việt với font chuẩn, bỏ biểu tượng chiếc loa vì không có âm thanh

ống nước chưa đẹp, logic nối chưa đúng lắm (nối được 2 ống cùng màu nhưng không  thể kín được ô trên màn hình)

Bước 4: ChatGPT sẽ tạo một file index.html duy nhất, bạn hãy click chuột phải rồi chọn Open With/Google Chrome để mở file này lên để chơi.