Animationv1.0.0~17 KB (gzip)

Sorting Race

Name: Sorting Race
Brand: Tiệm Công Nghệ
SKU: sorting-race
Availability: InStock

Sáu thuật toán sắp xếp đua nhau trên cùng một bộ dữ liệu — mỗi nhịp một thao tác, về đích nhận huy chương

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

Thuật toán sắp xếp nào nhanh nhất? Cho chúng đua là biết. Sáu thuật toán kinh điển nhận đúng cùng một dãy cột đã xáo và xuất phát cùng lúc. Mỗi nhịp, mỗi làn đi đúng một nước — một phép so sánh, một lần hoán đổi hoặc một lần ghi — nên thứ bạn thấy chính là số thao tác thật. Với dữ liệu xáo trộn, merge sort thường giành vàng, quick và heap sort bám sát phía sau; đổi sang "gần như đã xếp" thì insertion sort vượt lên bỏ xa tất cả, còn bubble sort vẫn miệt mài khi bục trao giải đã kín chỗ.

Trông như một buổi tường thuật thể thao phủ đèn neon: bảng tỉ số và đồng hồ trực tiếp, mỗi làn một màu áo, cột sáng lên khi được so sánh và trượt qua nhau khi hoán đổi, huy chương trao ngay khi về đích, bảng xếp hạng đổi chỗ liên tục, và băng rôn vinh danh kèm pháo giấy — "Merge sort wins! 2.7× fewer operations than Bubble sort". Làm ra để dùng trong bài giảng, slide, blog và video.

Bốn kịch bản — ngẫu nhiên, gần như đã xếp, đảo ngược, ít giá trị khác nhau — cho thấy mỗi thuật toán mạnh, yếu ở đâu
16, 32 hoặc 64 cột; seed giúp mọi cuộc đua lặp lại được, "Dữ liệu mới" rút bộ tiếp theo
Bấm vào một làn để theo dõi mã giả từng dòng, với chú thích nói rõ vừa có chuyện gì
Chạy, dừng, từng bước, tua và đổi tốc độ — một trình phát điều khiển tất cả các làn
Mọi màu, font, kích thướ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

Bubble, insertion, selection, merge, quick và heap sort cùng chạy trên đúng một dãy số đã xáo
Công bằng từ gốc: mỗi làn chỉ làm một phép so sánh, hoán đổi hoặc ghi mỗi nhịp, nên thứ tự về đích chính là số thao tác thật
Bộ đếm, tiến độ và bảng xếp hạng chạy trực tiếp; huy chương vàng, bạc, đồng và băng rôn vinh danh khi về đích
Bốn kịch bản (ngẫu nhiên, gần như đã xếp, đảo ngược, ít giá trị khác nhau), 16 / 32 / 64 cột và nút “Dữ liệu mới” theo seed
Tự chọn tay đua; bấm vào một làn để dò theo mã giả từng dòng, kèm chú thích dễ hiểu
Một trình phát điều khiển mọi làn: chạy, dừng, từng bước, tua, tốc độ 0.5×–4×, lặp lại tuỳ chọn
Bản HTML/CSS/JS thuần và bản React (dùng được với Next.js), đủ sáng và tối
Không phụ thuộc thư viện, dưới 18 KB sau gzip

Cách dùng

Gắn stylesheet và script một lần, rồi thêm một phần tử có data-sorting-race:

HTML

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

<div class="sorting-race" data-sorting-race></div>

<div class="sorting-race" data-sorting-race
     data-scenario="reversed" data-size="16" data-lanes="bubble,insertion,quick"
     data-seed="4821" data-speed="0.5"></div>

Tuỳ chọn qua data attribute: data-scenario (random, nearly-sorted, reversed, few-unique; mặc định random), data-size (16, 32, 64; mặc định 32), data-lanes (chọn trong bubble, insertion, selection, merge, quick, heap, cách nhau bằng dấu phẩy hoặc khoảng trắng; mặc định cả sáu), data-seed (1–99999; cùng seed thì cùng dữ liệu), data-speed (0.5, 1, 2, 4), data-loop (cờ: về đích xong thì chạy lại) và data-autoplay (bật sẵn, không bao giờ tự chạy khi giảm chuyển động; data-autoplay="false" để chờ bấm Play). Nội dung đặt sẵn trong phần tử sẽ hiện cho tới khi script dựng xong cuộc đua.

Cuộc đua thêm vào sau khi trang đã tải: SortingRace.init(container) — hàm này trả về một hàm để gỡ ra. SortingRace.get(element) trả về bộ điều khiển của cuộc đua: play(), pause(), toggle(), stepForward(), stepBack(), seek(tick), reset(), newData(seed?), state() và destroy(). SortingRace.createSortingRace(element, options) dựng trực tiếp một cuộc đua; options của nó nhận thêm texts để dịch chữ trên các nút ({ play: "Chạy", pause: "Dừng", … }).

Chép SortingRace.tsx, sorting-race.css và thư mục core vào dự án:

JSX

import { SortingRace } from "./SortingRace";

<SortingRace />
<SortingRace autoplay={false} scenario="nearly-sorted" size={64} lanes={["insertion", "merge", "quick"]} seed={7} speed={2} loop />
<SortingRace onReady={(race) => (raceRef.current = race)} texts={{ play: "Chạy" }} />

Các prop chính là các tuỳ chọn ở trên (lanes là một mảng); đổi prop nào thì cuộc đua được dựng lại. onReady trao cho bạn đúng bộ điều khiển như SortingRace.get. Các prop khác của <div> (className, id, aria-*, style) được gắn vào phần tử bọc ngoài. 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. 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 .sorting-race (hoặc class của bạn):

Biến	Đổi gì
`--race-bubble`, `--race-insertion`, `--race-selection`, `--race-merge`, `--race-quick`, `--race-heap`	Màu áo của từng tay đua
`--race-compare`, `--race-swap`, `--race-pivot`	Cột đang được so sánh, cột đang hoán đổi hoặc được ghi, đường pivot
`--race-gold`, `--race-silver`, `--race-bronze`	Huy chương
`--race-bg`, `--race-surface`, `--race-surface-strong`, `--race-border`	Nền, các tấm kính, viền
`--race-text`, `--race-muted`, `--race-accent`, `--race-accent-2`, `--race-ring`, `--race-live`	Chữ, màu nhấn, viền focus, nhãn trực tiếp
`--race-radius`, `--race-lane-radius`	Bo góc của cả khung và từng làn
`--race-track-height`, `--race-bar-gap`	Chiều cao vùng cột, khe giữa các cột (tính theo bề rộng một cột)
`--race-font`, `--race-font-display`, `--race-font-mono`	Font chữ thường, chữ tiêu đề và chữ số
`--race-duration`, `--race-ease`	Thời gian trượt dài nhất của một cột (không bao giờ quá một nhịp) và kiểu chuyển động

Màu dùng light-dark(): tự theo color-scheme của trang. Khi hẹp dưới 560px, các làn xếp hai cái một hàng và gọn lại. Khi bật prefers-reduced-motion, không có gì chuyển động và không tự chạy; đi từng bước vẫn như thường.

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: six sorting algorithms race one operation per tick on the same seeded data, with live counters, medals, standings, pseudocode and a full player.
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.

AnimationSắp xếp
Bubble Sort Animation
Bản tương tác của video ngắn: các cột bắt chéo khi đổi chỗ, đuôi đã sắp xếp dài dần và cú thoát sớm
Miễn phí
AnimationSắp xếp
Quick Sort Animation
Sắp xếp nhanh từng bước: phần tử chốt, hai con trỏ của Hoare và ngăn xếp gọi hàm luôn nông
Miễn phí