MK: 123456
[email protected]
MK: 123456
Link demo : https://hoccungbe.vercel.app/
🎮 GAME HỌC ĐỌC - ĐÁNH VẦN TIẾNG VIỆT CHO TRẺ EM
📌 TỔNG QUAN DỰ ÁN
Ứng dụng giáo dục tương tác giúp trẻ em 3-7 tuổi học đọc, đánh vần tiếng Việt thông qua game ghép chữ vui nhộn. Kết hợp công nghệ giọng nói tự động, hệ thống phần thưởng hấp dẫn và mini-game Candy Crush để tạo động lực học tập.
✨ TÍNH NĂNG CHÍNH
-
Game Ghép Chữ Tương Tác:
-
5 cấp độ khó tăng dần (từ 2-10 chữ cái)
-
Hệ thống chữ nhiễu thông minh
-
Drag & drop đơn giản cho trẻ em
-
Gợi ý tự động sau 2 giây
-
Giọng Đọc Tiếng Việt Tự Nhiên:
-
Web Speech API - Google Vietnamese Voice
-
Đọc từng chữ cái khi kéo
-
Đọc từ/câu hoàn chỉnh
-
Âm thanh chúc mừng khi đúng
-
Mini-Game Candy Crush:
-
Phần thưởng sau khi học
-
Match-3 mechanics đầy đủ
-
Cascade & combo system
-
30 moves, mục tiêu 1000 điểm
-
Hint system tự động
-
Hệ Thống Quản Lý:
-
Dashboard phụ huynh theo dõi tiến độ
-
Admin panel với analytics chi tiết
-
Biểu đồ thống kê theo thời gian
-
Quản lý người dùng
-
Gamification:
-
Hệ thống sao ⭐ và xu 🪙
-
Cửa hàng mua nhân vật
-
Streak (chuỗi đúng liên tiếp)
-
Sticker collection
-
Backend & Database:
-
Supabase PostgreSQL
-
Authentication system
-
Realtime sync
-
Analytics tracking
🎯 ĐỐI TƯỢNG SỬ DỤNG
-
Trung tâm giáo dục mầm non
-
Phụ huynh có con 3-7 tuổi
-
Giáo viên tiểu học
-
Startup EdTech
-
Nhà phát triển muốn customize
💻 CÔNG NGHỆ SỬ DỤNG
|
Phần |
Công nghệ |
|
Frontend |
HTML5, CSS3, Vanilla JavaScript (ES6+) |
|
Backend |
Supabase (PostgreSQL + Auth + Realtime) |
|
Audio |
Web Speech API + Audio Files |
|
Animation |
CSS Animations + Canvas API |
|
Storage |
LocalStorage + Supabase Database |
📦 CẤU TRÚC THỨ MỤC
gamestva/
├── index.html # Trang chính
├── auth.html # Đăng nhập/đăng ký
├── candy-crush.html # Mini-game
├── admin.html # Admin dashboard
├── parent-dashboard.html # Dashboard phụ huynh
├── main.js # Logic game chính (2944 dòng)
├── candy-crush.js # Logic Candy Crush
├── supabase-config.js # Cấu hình backend
├── analytics-service.js # Tracking & analytics
├── difficulty-system.js # Hệ thống độ khó
├── styles.css # Styling chính
├── sounds/ # Thư mục âm thanh
│ ├── chinhxac.wav
│ └── saidapan.wav
└── docs/ # 70+ file tài liệu .md
🚀 TÍNH NĂNG NỔI BẬT
-
Không cần framework: Pure JavaScript, dễ customize
-
Responsive 100%: Hoạt động mượt trên mọi thiết bị
-
PWA Ready: Cài đặt như app native
-
Offline Support: LocalStorage backup
-
SEO Friendly: Semantic HTML
-
Performance: Tối ưu tốc độ load
-
Accessibility: Hỗ trợ người khuyết tật
-
Multi-language Ready: Dễ dàng thêm ngôn ngữ
📊 THỐNG KÊ DỰ ÁN
-
📄 150+ files source code
-
📝 70+ files tài liệu hướng dẫn
-
💾 ~5MB tổng dung lượng
-
⏱️ 3-6 tháng phát triển
-
🧪 30+ test files đầy đủ
🎁 BONUS TẶNG KÈM
-
✅ Video hướng dẫn setup (15 phút)
-
✅ File Supabase schema SQL
-
✅ PowerShell scripts tự động
-
✅ Test files đầy đủ
-
✅ Debug guides chi tiết
-
✅ Deployment checklist
⚡ YÊU CẦU HỆ THỐNG
-
Browser: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
-
Node.js: 14+ (chỉ cho development)
-
Supabase account (free tier OK)
-
Hosting: Netlify/Vercel/GitHub Pages (miễn phí)
📞 HỖ TRỢ
Mua source code bao gồm:
-
✉️ Email support: 30 ngày
-
🐛 Fix bugs: Miễn phí trong 30 ngày
-
📚 Tài liệu: Cập nhật liên tục
-
🔄 Updates: Theo yêu cầu (phí riêng)
⚠️ LƯU Ý
-
Source code bán không giới hạn domain
-
Được phép customize tùy ý
-
Không được bán lại source code
-
Credit gốc không bắt buộc nhưng đánh giá cao
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
📖 HƯỚNG DẪN CÀI ĐẶT CHI TIẾT
BƯỚC 1: DOWNLOAD & GIẢI NÉN
-
Download file ZIP từ link đã cung cấp
-
Giải nén vào thư mục bất kỳ (VD: C:\gamestva)
-
Mở thư mục bằng VS Code hoặc editor yêu thích
BƯỚC 2: SETUP SUPABASE (5 PHÚT)
-
Truy cập supabase.com và đăng ký miễn phí
-
Tạo project mới (chọn region gần nhất)
-
Vào Settings → API, copy:
-
Project URL
-
Anon Public Key
-
Mở file supabase-config.js, thay đổi:
const SUPABASE_URL = 'YOUR_PROJECT_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
-
Vào SQL Editor, chạy file supabase-analytics-tables.sql
BƯỚC 3: CHẠY LOCAL (TÙY CHỌN)
Cách 1: Live Server (VS Code)
-
Cài extension "Live Server"
-
Right-click index.html → Open with Live Server
-
Truy cập http://localhost:5500
Cách 2: Python Server
cd gamestva
python -m http.server 8000
# Truy cập http://localhost:8000
Cách 3: Node.js (đã có server.js)
npm install
node server.js
# Truy cập http://localhost:3000
BƯỚC 4: DEPLOY LÊN HOSTING
Option A: Netlify (Khuyến nghị - Miễn phí)
-
Đăng ký netlify.com
-
Kéo thả thư mục vào Netlify Drop
-
Đợi 1-2 phút → Nhận link https://your-site.netlify.app
-
Cấu hình domain riêng (nếu có)
Option B: Vercel
npm i -g vercel
cd gamestva
vercel
# Follow prompts
Option C: GitHub Pages
-
Push code lên GitHub repo
-
Settings → Pages → Source: main branch
-
Truy cập https://username.github.io/gamestva
BƯỚC 5: CẤU HÌNH NÂNG CAO
Thay đổi nội dung game:
-
Từ vựng: Sửa word-data-optimized.js
-
Câu: Sửa sentence-data.js
-
Độ khó: Sửa difficulty-system.js
-
Màu sắc: Sửa styles.css
Thêm âm thanh:
-
Thêm file .wav vào thư mục sounds/
-
Sửa celebration-sounds.js để load file mới
Tắt Supabase (chỉ dùng LocalStorage):
-
Uncomment dòng trong index.html:
<script src="disable-supabase-sync.js"></script>
BƯỚC 6: TEST & DEBUG
-
Mở test-simple.html để test cơ bản
-
Mở test-audio-simple.html để test âm thanh
-
Mở test-supabase-connection.html để test database
-
Check console (F12) xem có lỗi không
🆘 XỬ LÝ LỖI THƯỜNG GẶP
Lỗi: Không có giọng đọc
-
Đọc file BAT-BUOC-GIONG-VIET.md
-
Cài Google Chrome (có giọng Việt tốt nhất)
-
Bật quyền microphone trong browser
Lỗi: Supabase 504
-
Đọc file FIX-504-ERROR-GUIDE.md
-
Kiểm tra API key đúng chưa
-
Chạy lại SQL schema
Lỗi: Mobile không scroll
-
Đọc file MOBILE-SCROLL-FIX-GUIDE.md
-
Clear cache browser
-
Test trên Chrome mobile
📚 TÀI LIỆU THAM KHẢO
-
README.md - Tổng quan dự án
-
DEPLOY-CHECKLIST.md - Checklist deploy
-
HUONG-DAN-*.md - 70+ file hướng dẫn chi tiết
-
FIX-*.md - Hướng dẫn fix lỗi
-
TEST-*.md - Hướng dẫn test
✅ HOÀN TẤT
Sau khi hoàn thành các bước trên, bạn đã có:
-
✅ Website chạy online
-
✅ Database Supabase hoạt động
-
✅ Giọng đọc tiếng Việt
-
✅ Mini-game Candy Crush
-
✅ Admin & Parent dashboard
Thời gian setup: 15-30 phút
Cần hỗ trợ? Email: [email protected]