TP011

Chữ Việt

App học tiếng Việt: 29 khối chữ cái và 5 dấu thanh có vật lý thật — bấm để nghe đọc, cuộn tới thì các khối tự bay lên ghép thành “CHỮ VIỆT” với dấu đặt đúng chỗ.

Điểm nổi bật

34 khối chữ & dấu thanh rơi, va chạm, lăn bằng vật lý thật
Bấm vào khối: khối nảy lên và đọc to bằng giọng tiếng Việt
Chế độ ghép chữ: khối bay lên xếp từ, dấu thanh đúng vị trí trên/dưới
Nút “lắc hộp chữ”, gói học cho phụ huynh, song ngữ VI/EN

Three.js
cannon-es
Motion
Vite
Physics
Interactive
Kids
Speech

Trong gói tải về

Toàn bộ source code template (chạy bằng Vite, build ra web tĩnh — host ở bất kỳ đâu)
PROMPT.md — prompt để dựng lại / mở rộng trang bằng AI builder
README.md — hướng dẫn chạy & tuỳ biến (chính là nội dung bên dưới)

Landing page song ngữ (VI/EN) cho app học tiếng Việt: khối chữ cái và dấu thanh có vật lý thật, bấm để nghe đọc, tự bay lên ghép từ.

Chạy thử

Cần Node.js 18+.

npm install
npm run dev       # mở http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/ — upload lên hosting bất kỳ

Mặc định trang mở tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html            Khung trang
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép giao diện + hiệu ứng Motion
src/scene.js          Khối chữ (cannon-es), ghép từ, bấm nảy
src/style.css         Giao diện (màu, font, bố cục)
src/i18n.js           Bộ chuyển ngôn ngữ (data-i18n)
src/ui-motion.js      Hiệu ứng chữ & cuộn dùng chung
PROMPT.md             Prompt dựng lại trang bằng AI builder

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css`
Bảng chữ, dấu thanh, màu khối	`ALPHABET`, `TONES`, `COLORS` trong `src/scene.js`
Từ để ghép	`WORDS` trong `src/main.js` (chữ + dấu) và các nút `data-word`
Giọng đọc	hàm `say()` trong `src/main.js` (Web Speech, vi-VN)
Trọng lực, độ nảy	`gravity`, `restitution` trong `src/scene.js`

Ghi chú

Giọng đọc dùng Web Speech API có sẵn trong trình duyệt; chất lượng giọng tiếng Việt tuỳ hệ điều hành.
Thư viện vật lý: cannon-es (MIT). "Chữ Việt" là thương hiệu minh hoạ.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).