Welcome to the versatile web project where you can both entertain yourself with an engaging jigsaw puzzle game and utilize powerful tools to professionally and easily customize and process your images!
Main interface of the website / Giao diện chính của trang web
This README is available in English and Vietnamese. The Vietnamese version is available in the expandable section below.
This project was created with a dual purpose:
- Entertainment: To provide moments of relaxation and intellectual challenge through a jigsaw puzzle game featuring diverse image sets.
- Utility: To offer online image processing tools, enabling users to easily perform common image editing tasks without needing to install complex software.
We believe that the combination of entertainment and utility will provide a unique and beneficial experience for users.
The website includes the following standout features:
- Intuitive Gameplay: Click to rotate puzzle pieces 90 degrees and drag-and-drop them into the correct position on the 3x3 game board.
- Diverse Image Sets: Choose from multiple image sets with various themes.
- Two Game Modes:
- Classic Mode: Play without a time limit; a timer will record your completion time.
- Countdown Mode: Challenge yourself to complete the puzzle within a set time limit (20-60 seconds).
- Reference Image: A complete original image is always available for reference during gameplay.
- Result Notifications: Displays a congratulatory message upon winning or a notification when time runs out.
-
Crop Image to Square (1:1):
- Perfect for creating avatars, social media thumbnails, or any image requiring a square aspect ratio.
- Upload any image, preview it, and intuitively adjust a square selection area.
- Easily drag-and-drop to move and resize the selection area, ensuring the 1:1 ratio is always maintained.
- Preview the result and download the cropped square image.
-
Split Image into Grid (e.g., 3x3):
- Divide a large image into multiple smaller, equal pieces in a customizable grid format (rows x columns).
- Ideal for creating jigsaw puzzle pieces, unique grid photo effects for Instagram or Pinterest, or breaking down large images for easier sharing.
- Upload an image, enter the desired number of rows and columns, and the tool will automatically cut and allow you to download each piece.
-
Resize Image Dimensions:
- Easily adjust the width and height of your images in pixels.
- "Lock Aspect Ratio" Option:
- If checked, entering one dimension will automatically calculate the other to maintain the original aspect ratio, preventing distortion.
- If unchecked, you can freely enter both width and height.
- Preview and download the resized image, very useful for specific dimension requirements.
- HTML5: The foundational structure of the web pages.
- CSS3: Styling, visual formatting, animations, and layout.
- JavaScript (ES6+): Handles all the logic for the jigsaw puzzle game (rotation, drag-and-drop, timer, win/lose conditions, puzzle set switching) and the image processing tools (cropping, grid splitting, resizing on HTML canvas).
- jQuery: A JavaScript library used to simplify DOM manipulation and event handling.
- Bootstrap (Version 4 or 5): A CSS/JS framework that aids in building responsive UIs and provides pre-built components.
| Main Page | Game Interface | About Page |
|---|---|---|
 |
 |
 |
| Square Crop Tool | Grid Split Tool | Resize Tool |
 |
 |
 |
- Open the
index.htmlfile in your web browser to access the homepage. - From the homepage, you can navigate to:
- Play Game: To start challenging yourself with the jigsaw puzzles.
- Image Tools: To use the square crop, grid split, or resize features.
- Other pages like About, Contact.
- Follow the specific instructions on each page to use the features.
The website supports switching between Vietnamese (VI) and English (EN) to provide the best experience for a wider audience. Your language preference will be saved for future visits.
Ideas for improvements, bug reports, or contributions are welcome! Please [Open an Issue on GitHub (if applicable)] or contact the author directly via the information in the "Author" section.
This project is licensed under the [MIT License]. See the LICENSE file for more details.
- Trần Hữu Đạt
Thank you for exploring the Jigsaw Puzzle Game & Image Processing Tools project! We hope you find it useful and have fun.
► Phiên bản Tiếng Việt (Nhấn để Mở rộng)
Dự án này được tạo ra với mục đích kép:
- Giải trí: Mang lại những giây phút thư giãn và thử thách trí tuệ thông qua trò chơi xếp hình với các bộ ảnh đa dạng.
- Tiện ích: Cung cấp các công cụ xử lý ảnh trực tuyến, giúp người dùng dễ dàng thực hiện các tác vụ chỉnh sửa ảnh thông thường mà không cần cài đặt phần mềm phức tạp.
Chúng tôi tin rằng sự kết hợp giữa giải trí và tiện ích sẽ mang lại trải nghiệm độc đáo và hữu ích cho người dùng.
Trang web bao gồm các tính năng nổi bật sau:
- Lối chơi Trực quan: Nhấp chuột để xoay các mảnh ghép 90 độ và dùng thao tác kéo-thả (drag-and-drop) để đưa chúng vào đúng vị trí trên bảng chơi 3x3.
- Nhiều bộ ảnh Đa dạng: Lựa chọn từ nhiều bộ ảnh với các chủ đề khác nhau.
- Hai Chế độ Chơi:
- Chế độ Cổ điển: Chơi không giới hạn thời gian, một bộ đếm giờ sẽ ghi lại thời gian bạn hoàn thành.
- Chế độ Đếm ngược: Thử thách bản thân hoàn thành câu đố trong một khoảng thời gian giới hạn (20-60 giây).
- Ảnh tham chiếu: Một hình ảnh gốc hoàn chỉnh luôn có sẵn để tham khảo trong quá trình chơi.
- Thông báo Kết quả: Hiển thị thông báo chúc mừng khi chiến thắng hoặc thông báo khi hết giờ.
-
Cắt Ảnh Thành Hình Vuông (1:1):
- Hoàn hảo để tạo ảnh đại diện (avatar), ảnh thu nhỏ cho mạng xã hội hoặc bất kỳ hình ảnh nào yêu cầu tỷ lệ vuông.
- Tải lên bất kỳ ảnh nào, xem trước và điều chỉnh vùng chọn hình vuông một cách trực quan.
- Dễ dàng kéo-thả để di chuyển và thay đổi kích thước vùng chọn, đảm bảo tỷ lệ 1:1 luôn được duy trì.
- Xem trước kết quả và tải về hình ảnh vuông đã cắt.
-
Cắt Ảnh Thành Lưới (ví dụ: 3x3):
- Chia một ảnh lớn thành nhiều mảnh nhỏ bằng nhau theo định dạng lưới tùy chỉnh (hàng x cột).
- Lý tưởng để tạo các mảnh ghép cho trò chơi xếp hình, hiệu ứng ảnh lưới độc đáo cho Instagram hoặc Pinterest, hoặc chia nhỏ ảnh lớn để dễ dàng chia sẻ.
- Tải lên một ảnh, nhập số hàng và cột mong muốn, công cụ sẽ tự động cắt và cho phép bạn tải về từng mảnh.
-
Thay đổi Kích thước Ảnh:
- Dễ dàng điều chỉnh chiều rộng và chiều cao của ảnh theo đơn vị pixel.
- Tùy chọn "Khóa Tỷ lệ Khung hình":
- Nếu được chọn, việc nhập một chiều sẽ tự động tính toán chiều còn lại để giữ nguyên tỷ lệ gốc, tránh làm méo ảnh.
- Nếu không được chọn, bạn có thể tự do nhập cả chiều rộng và chiều cao.
- Xem trước và tải về ảnh đã thay đổi kích thước, rất hữu ích cho các yêu cầu về kích thước cụ thể.
- HTML5: Cấu trúc nền tảng của các trang web.
- CSS3: Tạo kiểu, định dạng trực quan, hoạt ảnh và bố cục.
- JavaScript (ES6+): Xử lý toàn bộ logic cho trò chơi xếp hình (xoay, kéo-thả, đếm giờ, điều kiện thắng/thua, chuyển đổi bộ ghép hình) và các công cụ xử lý ảnh (cắt, chia lưới, thay đổi kích thước trên HTML canvas).
- jQuery: Một thư viện JavaScript được sử dụng để đơn giản hóa việc thao tác DOM và xử lý sự kiện.
- Bootstrap (Phiên bản 4 hoặc 5): Một framework CSS/JS giúp xây dựng giao diện người dùng đáp ứng (responsive) và cung cấp các thành phần dựng sẵn.
| Trang chính | Giao diện Trò chơi | Trang Giới thiệu |
|---|---|---|
|
|
|
| Công Cụ Cắt Ảnh Vuông | Công Cụ Cắt Ảnh Lưới | Công Cụ Thay Đổi Kích Thước |
|
|
|
- Mở tệp
index.htmltrong trình duyệt web của bạn để truy cập trang chủ. - Từ trang chủ, bạn có thể điều hướng đến:
- Play Game: Để bắt đầu thử thách bản thân với các câu đố xếp hình.
- Image Tools: Để sử dụng các tính năng cắt vuông, chia lưới hoặc thay đổi kích thước.
- Các trang khác như Giới thiệu, Liên hệ.
- Làm theo hướng dẫn cụ thể trên mỗi trang để sử dụng các tính năng.
Trang web hỗ trợ chuyển đổi giữa tiếng Việt (VI) và tiếng Anh (EN) để mang lại trải nghiệm tốt nhất cho nhiều đối tượng người dùng. Lựa chọn ngôn ngữ của bạn sẽ được lưu lại cho những lần truy cập sau.
Mọi ý tưởng cải tiến, báo cáo lỗi hoặc đóng góp đều được chào đón! Vui lòng [Mở một Issue trên GitHub (nếu có)] hoặc liên hệ trực tiếp với tác giả qua thông tin trong mục "Tác giả".
Dự án này được cấp phép theo [Giấy phép MIT]. Xem tệp LICENSE để biết thêm chi tiết.
- Trần Hữu Đạt
Cảm ơn bạn đã khám phá dự án Trò chơi Xếp hình & Công cụ Xử lý Ảnh! Hy vọng bạn thấy nó hữu ích và có những giây phút vui vẻ.