- 🌊 Giới thiệu
- ✨ Tính năng nổi bật
- 🎯 Mục tiêu dự án
- ⚙️ Công nghệ sử dụng
- 🚀 Cách chạy dự án
- 🎮 Hướng dẫn sử dụng
- 🖼️ Ảnh minh họa
- 🔧 Cấu trúc dự án
- 👥 Thành viên nhóm
- 📝 Changelog
- 🧾 License
- 🌟 Ghi công
Water Pouring Simulator là một ứng dụng mô phỏng tương tác quá trình rót nước từ bình vào cốc, được xây dựng hoàn toàn bằng HTML5 Canvas, CSS3 và Vanilla JavaScript mà không sử dụng thư viện bên ngoài.
Dự án tập trung vào việc mô phỏng vật lý thực tế như:
- 🌀 Hiệu ứng sóng nước động (animated water waves)
- ⚖️ Chuyển nước giữa các vật chứa (liquid transfer)
- 📐 Góc nghiêng tự động của bình khi rót
- 📏 Cốc đo có vạch chia chính xác (1000ml với 10 vạch chia)
- 🎨 Giao diện hiện đại với gradient và glassmorphism
- ✅ Thiết kế hiện đại với gradient màu xanh dương chủ đạo
- ✅ Glassmorphism effect (backdrop-filter) cho panel và overlay
- ✅ Responsive design - hoạt động tốt trên desktop và mobile
- ✅ Smooth animations với cubic-bezier transitions
- ✅ Toast notification hướng dẫn người dùng lần đầu
- ✅ Help panel modal chi tiết với SVG illustrations
- ✅ Kéo thả (Drag & Drop) bình và cốc để di chuyển
- ✅ Rót nước tự động khi bình nghiêng đúng góc và vị trí
- ✅ Hiệu ứng sóng nước thời gian thực (sine wave animation)
- ✅ Thêm/xóa cốc động (tối đa 5 cốc)
- ✅ 2 loại cốc:
- 🥤 Cốc thường (dung tích tùy chỉnh)
- 📏 Cốc đo 1 lít (có vạch chia 0-1000ml)
- ✅ Chuyển đổi đơn vị ml ↔ lít (riêng biệt cho từng đối tượng)
- ✅ Ẩn/hiện thông tin đơn vị đo hàng loạt hoặc từng cốc
- ✅ Settings panel với các tùy chỉnh:
- Mức nước hiện tại
- Dung tích tối đa
- Đơn vị đo (ml/lít)
- Hiển thị/ẩn thông tin
- Bật/tắt vạch chia (cốc đo)
- ✅ Tự động tính toán góc nghiêng dựa trên vị trí cốc
- ✅ Tốc độ rót điều chỉnh theo đơn vị đo (ml nhanh hơn lít)
- ✅ Giới hạn dung tích - dừng rót khi cốc đầy
- ✅ Kiểm tra điều kiện trước khi rót:
- Bình phải ở bên phải cốc
- Góc trái trên bình phải cao hơn cạnh trên cốc
- Bình phải nghiêng đủ góc (> 10°)
- ✅ Highlight cốc đang được rót bằng viền xanh
- ✅ Sử dụng PNG sprites cho bình và cốc (empty/full)
- ✅ Clip mask rendering cho hiệu ứng nước thực tế
- ✅ Gradient water effect với màu xanh dương
- ✅ Animated water stream khi rót (gradient + sine wave)
- ✅ Vạch chia chính xác trên cốc đo (dựa trên tỷ lệ pixel thực tế)
-
Giáo dục STEM: Giúp học sinh tiểu học hiểu về:
- Khái niệm thể tích và dung tích
- Chuyển đổi đơn vị đo (ml ↔ lít)
- Nguyên lý rót nước (góc nghiêng, vị trí, trọng lực)
-
Kỹ thuật lập trình:
- Thực hành HTML5 Canvas API
- Xử lý drag & drop trên cả desktop và mobile
- Quản lý state phức tạp với JavaScript
- Thiết kế UI/UX hiện đại với CSS3
-
Trải nghiệm người dùng:
- Giao diện trực quan, dễ sử dụng
- Phản hồi thời gian thực
- Hướng dẫn chi tiết cho người dùng mới
| Công nghệ | Phiên bản | Mô tả |
|---|---|---|
| HTML5 | - | Structure và Canvas API |
| CSS3 | - | Styling với Flexbox, Grid, Animations |
| JavaScript (ES6+) | - | Logic mô phỏng và xử lý sự kiện |
| Canvas 2D Context | - | Rendering đồ họa và animations |
| LocalStorage API | - | Lưu trạng thái tutorial |
| Touch Events API | - | Hỗ trợ mobile touch |
- ❌ Không dùng jQuery, React, Vue
- ❌ Không dùng Three.js, PixiJS
- ✅ 100% Vanilla JavaScript
# Clone repository
git clone https://github.com/NguyenNhan209/Water-pouring-simulator.git
# Di chuyển vào thư mục dự án
cd Water-pouring-simulator
# Mở file index.html bằng trình duyệt
# Windows:
start index.html
# macOS:
open index.html
# Linux:
xdg-open index.html# Cài đặt Live Server (nếu chưa có)
npm install -g live-server
# Chạy server
live-server🌐 Demo online: https://nguyennhan209.github.io/Water-pouring-simulator
- Kéo bình nước sang bên phải cốc
- Đặt bình cao hơn cốc (góc trái trên bình phải cao hơn cạnh trên cốc)
- Bình sẽ tự động nghiêng và rót nước
- Click vào bình để kích hoạt chế độ rót (với cốc mới tạo)
- Nhấn "+ Cốc thường" để thêm cốc bình thường
- Nhấn "📏 Cốc đo 1L" để thêm cốc có vạch chia
- Tối đa 5 cốc cùng lúc
- Xóa cốc trong ⚙ Cài đặt → chọn cốc → 🗑 Xóa
- Điều chỉnh dung tích và mức nước của bình/cốc
- Chuyển đổi đơn vị giữa ml và lít
- Ẩn/hiện thông tin đơn vị đo trên màn hình
- Bật/tắt vạch chia trên cốc đo 1L
- Kéo thả bình và cốc để di chuyển vị trí
- Nhấn "↺ Reset" để khởi động lại
- Nhấn "✓ Áp dụng" trong Cài đặt để lưu thay đổi
Giao diện chính với bình nước và cốc
Hiệu ứng rót nước với sóng động
Panel cài đặt chi tiết
Water-pouring-simulator/
│
├── index.html # File HTML chính (bao gồm CSS và JS inline)
├── README.md # File này
└── LICENSE # Giấy phép GPL v3.0
- HTML/CSS/JS: ~1600 dòng (trong 1 file)
- Total size: ~500KB (chưa nén)
| Họ tên | Vai trò | Trường | |
|---|---|---|---|
| Nguyễn Nhân | Lập trình chính, Thiết kế giao diện, Mô phỏng vật lý | Trường Tiểu học Nguyễn Trãi | nguyennhan24912@gmail.com |
| Phạm Hồng Khanh | Ý tưởng dự án, Thiết kế đồ họa, Kiểm thử | Trường Tiểu học Nguyễn Trãi | phamhongkhanh200586@gmail.com |
- ✅ Mô phỏng rót nước cơ bản
- ✅ Drag & drop bình và cốc
- ✅ Hiệu ứng sóng nước động
- ✅ Settings panel với tùy chỉnh chi tiết
- ✅ 2 loại cốc: thường và cốc đo
- ✅ Chuyển đổi đơn vị ml/lít
- ✅ Toast notification và help panel
- ✅ Responsive design cho mobile
- ✅ Lưu trạng thái vào LocalStorage
- 🔜 Thêm âm thanh rót nước
- 🔜 Chế độ thử thách (đổ đúng lượng nước)
- 🔜 Thêm nhiều loại cốc khác nhau
- 🔜 Export/Import cấu hình
This project is licensed under the GNU General Public License v3.0.
Copyright (C) 2025 Nguyễn Nhân, Phạm Hồng Khanh
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
Xem chi tiết tại LICENSE file.
- ✅ Sử dụng tự do cho mục đích học tập và nghiên cứu (không thương mại)
- ✅ Sửa đổi và phân phối với điều kiện giữ nguyên license
- ✅ Mã nguồn mở - phải công khai code khi phân phối
- ❌ Không bảo hành - sử dụng với trách nhiệm riêng
- Trường Tiểu học Nguyễn Trãi
- Thành phố Hải Phòng, Việt Nam
- Năm thực hiện: 2025
- Email: nguyennhan24912@gmail.com
- GitHub: @NguyenNhan209
💬 "Code is like water — it flows, adapts, and reflects creativity."
Made with ❤️ by Nhân & Khanh
If you found this project useful, please consider giving it a ⭐️!