Animationv1.0.0~15 KB (gzip)

Pathfinding Maze

Name: Pathfinding Maze
Brand: Tiệm Công Nghệ
SKU: pathfinding-maze
Availability: InStock

Mê cung neon vẽ được, nơi BFS, Dijkstra, A* và tìm kiếm tham lam đua nhau tới đích từng bước

Miễn phíMiễn phí

Định dạng

.zip · HTML / CSS / JS · v1.0.0

Miễn phí — không cần tài khoản hay email. Luôn là bản mới nhất.

Đang chạy trực tiếp

Hình ảnh

Giới thiệu

Một mê cung bạn vẽ lên được, và bốn thuật toán tìm đường bạn ngồi xem chúng suy nghĩ. Biên lan ra từng ô như gợn sóng, mỗi ô đã thăm mang một màu theo thứ tự được chạm tới, và khi tìm thấy đích thì đường đi tự vẽ ra thành một vệt sáng. Tô thêm bùn, kéo đích sang chỗ khác, rồi xem A* chọn lối khác — hoặc đặt hai thuật toán cạnh nhau và cho chúng đua trên cùng một bàn.

Làm cho bài giảng, slide và video: bước nào cũng có chú thích dễ hiểu và dòng pseudocode tương ứng sáng lên, còn giao diện neon trên nền mực vẫn rõ khi chiếu lên màn và khi quay lại.

BFS, Dijkstra, A* và tham lam best-first, kèm bộ đếm cho thấy chúng khác nhau ở đâu
BFS và A* khớp hoàn toàn trang miễn phí Grid Pathfinding: cùng thứ tự ô kề, cùng cách phá hoà, cùng lúc dừng
Mê cung và tường ngẫu nhiên có seed, quay lại lần hai vẫn y hệt
Mọi màu, bo góc và thời gian đều là CSS custom property
Không cần cài gì: một file CSS và một script, hoặc một component React

Tính năng · 10

Bốn thuật toán: BFS, Dijkstra, A* (Manhattan) và tham lam best-first
Vẽ và xoá tường, tô bùn tốn 5 khi đi qua, kéo thả điểm đầu và đích
Sinh mê cung có seed (recursive backtracker) và tường ngẫu nhiên: cùng seed, cùng bàn
Biên lan ra như gợn sóng, ô đã thăm đổi màu theo thứ tự, đường đi tự vẽ ra ở cuối
Chế độ so sánh: hai thuật toán chạy song song trên cùng một bàn, số tốt hơn được gắn sao
Trình phát: chạy, dừng, từng bước, tua, tốc độ 0.5×–4×, pseudocode sáng theo bước và chú thích dễ hiểu
Bộ đếm: số ô đã thăm, biên, độ dài và chi phí đường đi, số bước
Sửa mê cung đã giải xong là đường đi tính lại ngay
BFS và A* khớp từng dòng với trang miễn phí Grid Pathfinding
Bản HTML/CSS/JS thuần và bản React (dùng được với Next.js), không phụ thuộc thư viện

Cách dùng

Gắn stylesheet và script một lần, rồi thêm data-pathfinding-maze vào một phần tử rỗng. Toàn bộ mê cung — thanh công cụ, bàn, pseudocode, bộ đếm và trình phát — được dựng bên trong nó:

HTML

<link rel="stylesheet" href="pathfinding-maze.css" />
<script src="pathfinding-maze.js" defer></script>

<div data-pathfinding-maze data-pathfinding-algorithm="astar" data-pathfinding-mud="0.06"></div>

<div data-pathfinding-maze data-pathfinding-algorithm="bfs" data-pathfinding-compare="dijkstra"
     data-pathfinding-layout="random" data-pathfinding-autoplay="false"></div>

Tuỳ chọn qua data attribute (data-pathfinding-…):

Attribute	Mặc định	Tác dụng
`-algorithm`	`astar`	`bfs`, `dijkstra`, `astar` hoặc `greedy`
`-compare`	tắt	Thuật toán thứ hai chạy song song trên cùng bàn; để trống = Dijkstra (BFS khi đấu với Dijkstra)
`-cols`, `-rows`	`31`, `17`	Kích thước bàn theo ô, mỗi chiều 5–99
`-layout`	`maze`	Bàn lúc đầu: `maze`, `random` (tường ngẫu nhiên) hoặc `empty`
`-seed`	`7`	Seed của mê cung và tường ngẫu nhiên: cùng seed, cùng bàn
`-mud`	`0`	Tỉ lệ ô trống được tô bùn khi sinh bàn, 0–0.5
`-speed`	`1`	0.25–4 (menu có 0.5×, 1×, 2×, 4×)
`-autoplay`	bật	Tự chạy khi tải trang — không bao giờ khi bật `prefers-reduced-motion`; `"false"` để chờ bấm Chạy
`-loop`	tắt	Chạy lại từ đầu khi hết

Mê cung thêm vào sau khi trang đã tải: PathfindingMaze.init(container), hoặc PathfindingMaze.createPathfindingMaze(element, { algorithm: "dijkstra" }) — cả hai trả về một hàm để gỡ mê cung ra. PathfindingMaze.traceSearch(board, "astar") trả về chính các khung hình, nếu bạn muốn tự vẽ theo cách của mình.

Chép PathfindingMaze.tsx, pathfinding-maze.css và thư mục core vào dự án:

JSX

import { PathfindingMaze } from "./PathfindingMaze";

<PathfindingMaze algorithm="astar" mud={0.06} />
<PathfindingMaze algorithm="bfs" compare="dijkstra" layout="random" seed={16} autoplay={false} />

Prop mang tên các attribute ở trên (compare nhận cả true). Mọi prop khác được chuyển xuống <div> gốc (className, id, aria-label…). Đổi một prop là mê cung được dựng lại từ đầu. React 18 hoặc 19.

Component bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Server chỉ gửi một khung rỗng; mê cung được dựng trên trình duyệt. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Đặt các biến sau trên .pathfinding-maze (hoặc class của bạn):

Biến	Đổi gì
`--maze-ink`, `--maze-cell`	Nền màn hình của bàn và các ô trống
`--maze-wall`, `--maze-wall-top`	Tường (dải màu từ trên xuống)
`--maze-mud`, `--maze-mud-dots`	Bùn và các đốm trên bùn
`--maze-frontier`	Ô đang chờ trên biên
`--maze-visited-from`, `--maze-visited-to`	Làn sóng ô đã thăm: màu đầu, màu cuối
`--maze-current`, `--maze-path`	Ô đang được thăm, vệt đường đi
`--maze-start`, `--maze-goal`, `--maze-danger`, `--maze-best`	Điểm đầu, đích, "không có đường", số tốt nhất khi so sánh
`--maze-text`, `--maze-muted`, `--maze-accent`, `--maze-accent-2`	Chữ, chữ phụ, viền focus và nút chạy
`--maze-surface`, `--maze-border`, `--maze-blur`	Lớp kính quanh bàn
`--maze-radius`, `--maze-cell-radius`, `--maze-gap`	Bo góc và đường kẻ giữa các ô
`--maze-font`, `--maze-mono`	Phông chữ, và phông của pseudocode
`--maze-duration`, `--maze-ripple`, `--maze-path-draw`, `--maze-ease`	Tốc độ các chuyển động nhỏ, gợn sóng khi thăm ô, đường đi vẽ ra

Màu dùng light-dark(): tự theo color-scheme của trang. Khi bật prefers-reduced-motion, mọi hiệu ứng và chuyển cảnh đều tắt: khung hình đổi ngay, đi từng bước vẫn được.

Hỏi về sản phẩm này

Chưa chắc có hợp dự án của bạn? Cứ hỏi — câu trả lời lấy từ chính trang này.

Lịch sử phiên bản

1.0.0First release15 thg 10, 2026Mới nhất
Plain HTML/CSS/JS and React builds of an editable maze that animates BFS, Dijkstra, A* and greedy best-first step by step, with mud, a seeded maze generator, side-by-side compare, pseudocode, keyboard and reduced-motion support.
Bản sửa lỗi và tính năng mới đều có ngay ở nút tải này — file tải về luôn là bản mới nhất.