Hướng dẫn làm game Pacman với Gemini AI

Chắc hẳn tuổi thơ của rất nhiều game thủ đã từng gắn liền với trò chơi Pacman, cảm giác vừa chạy trốn ma, vừa tranh thủ ăn từng chấm nhỏ đầy hồi hộp. Sẽ càng tuyệt vời hơn nữa khi bạn chính là người mô phỏng lại tựa game huyền thoại đó bằng công cụ Gemini AI.

Trong bài viết sau đây, chúng ta sẽ cùng nhau bước vào một hành trình khá thú vị đó là xây dựng lại game Pacman theo cách hiện đại hơn, thông minh hơn hơn nhờ sự trợ giúp của Gemini AI. Không cần phải là lập trình viên kỳ cựu, chỉ cần bạn đủ tò mò và muốn thử thách bản thân một chút, mọi thứ đều có thể bắt đầu ngay lúc này.

Cách làm game Pacman với Gemini AI

Bước 1: Trước tiên, bạn hãy mở ứng dụng Gemini AI lên rồi nhập Prompt sau

Bạn là một Senior HTML5 Game Developer với 15 năm kinh nghiệm về JavaScript, Canvas API, Game Physics và Mobile Web Optimization.

Hãy tạo một game Pacman hoàn chỉnh bằng HTML, CSS và JavaScript thuần (không dùng framework), chạy trực tiếp trên trình duyệt.

MỤC TIÊU

Xây dựng một game Pacman hiện đại dựa trên gameplay của Pacman cổ điển.

Tham khảo:

https://www.edslap.com/amusements/Games/Pacman/pacman.html

Nhưng nâng cấp giao diện và trải nghiệm để chơi tốt trên:

Desktop
Mobile Android
iPhone
Tablet

Code phải nằm trong 3 file:

index.html
style.css
game.js

Không sử dụng thư viện bên ngoài.

GIAO DIỆN

Thiết kế theo phong cách:

Arcade Retro
Neon Glow
Dark Theme

Màu sắc:

Background: #000000
Wall: Neon Blue
Pacman: Vàng #FFD700
Ghost đỏ
Ghost hồng
Ghost xanh dương
Ghost cam

Hiệu ứng:

Glow effect
Shadow effect
Smooth animation
Particle effect khi ăn điểm
RESPONSIVE

Game phải tự động hoạt động trên:

Desktop:

Keyboard control

Mobile:

Touch control
Swipe control
Virtual D-Pad

Tablet:

Full responsive

Canvas tự scale theo kích thước màn hình.

Không bị méo hình.

Tỷ lệ luôn giữ chuẩn.

MÀN HÌNH GAME

Hiển thị:

TOP BAR

Score: 000000

High Score: 000000

Level: 1

Lives: ❤️❤️❤️

CENTER

Game Board

BOTTOM

Desktop:

Không hiện nút điều khiển

Mobile:

Hiện D-Pad

↑

← ● →

↓
BẢN ĐỒ

Tạo map dạng ma trận 2D.

Kích thước:

21 x 21 ô

Bao gồm:

Wall
Dot
Power Pellet
Empty Space
Ghost House
Teleport Tunnel trái/phải
PACMAN

Pacman phải có:

Animation mở miệng
Di chuyển mượt
Grid movement
Không xuyên tường

Tốc độ:

120 px/s

Điều khiển:

Desktop:

Arrow Keys

W A S D

Mobile:

Swipe

Virtual D-Pad

GHOST AI

Tạo 4 ghost:

Blinky (Đỏ)
Đuổi trực tiếp Pacman
Pinky (Hồng)
Chặn đầu Pacman
Inky (Xanh)
Di chuyển ngẫu nhiên có chiến lược
Clyde (Cam)
Vừa đuổi vừa chạy

Mỗi ghost có:

Animation
Movement system
Collision detection
POWER PELLET

Khi ăn Power Pellet:

Ghost:

Chuyển sang màu xanh
Chạy chậm hơn
Bị Pacman ăn được

Thời gian:

8 giây

Khi còn 2 giây:

Ghost nhấp nháy.

FRUIT SYSTEM

Ngẫu nhiên xuất hiện:

Cherry
Strawberry
Orange
Apple

Điểm:

Cherry = 100

Strawberry = 300

Orange = 500

Apple = 700

Fruit xuất hiện:

30 giây/lần

Biến mất sau:

10 giây

HỆ THỐNG ĐIỂM

Dot = 10

Power Pellet = 50

Ghost:

1st = 200

2nd = 400

3rd = 800

4th = 1600

Fruit theo giá trị riêng.

ÂM THANH

Tạo bằng Web Audio API.

Bao gồm:

Start sound
Eat dot
Eat ghost
Power mode
Death
Level clear
Game over

Có:

Mute Button

GAME STATES
Start Screen

Hiển thị:

PACMAN

Press Start

Playing
Pause
Level Complete
Game Over
Win Screen
LEVEL SYSTEM

Level tăng dần.

Mỗi level:

Ghost nhanh hơn
Ghost AI thông minh hơn
Fruit xuất hiện nhiều hơn

Level tối đa:

20

Sau level 20:

Loop difficulty.

SAVE DATA

Sử dụng LocalStorage.

Lưu:

High Score
Last Level
Sound Setting
PERFORMANCE

Yêu cầu:

60 FPS

Dùng:

requestAnimationFrame()

Tối ưu:

Không tạo object thừa
Object pooling
Collision tối ưu
ACCESSIBILITY

Hỗ trợ:

Keyboard only
Touch only
Screen resize
CODE QUALITY

Viết code theo cấu trúc:

class Game

class Pacman

class Ghost

class Fruit

class SoundManager

class InputManager

class UIManager

class MapManager

COMMENT

Comment đầy đủ cho từng module.

KẾT QUẢ ĐẦU RA

Xuất đầy đủ:

index.html
style.css
game.js

Không được rút gọn code.

Không được dùng pseudo-code.

Phải cung cấp mã nguồn hoàn chỉnh có thể chạy ngay sau khi copy vào VS Code.

Mỗi file hiển thị trong block code riêng biệt.

Bước 2: Sau đó, Gemini AI sẽ phân tích Prompt của bạn rồi tạo 3 file index.html, style.css và game.js. Bạn tải cả 3 file vào cùng 1 thư mục rồi mở file index.html lên để chơi thử

Bước 3: Bạn cần tiến hành chỉnh sửa và cải tiến game với các Prompt sau

hãy dịch toàn bộ sang ngôn ngữ việt với font chuẩn

màn hình chơi hơi ngắn nên bị thừa khoảng đen 2 đầu, tạo hình ma xấu (tham khảo mẫu)

ăn hết các chấm tròn nhưng không lên được level, bổ sung nút dừng chơi và chơi lại trên thanh menu