https://github.com/venkat-0706/cricket-feild
This code creates an interactive cricket field using Konva.js, allowing users to add and drag players with editable labels while enforcing movement boundaries and player limits.
https://github.com/venkat-0706/cricket-feild
canvas-api css drag-and-drop frontend-development html interactive-ui javascript jquery jquery-touch-events konvajs
Last synced: about 2 months ago
JSON representation
This code creates an interactive cricket field using Konva.js, allowing users to add and drag players with editable labels while enforcing movement boundaries and player limits.
- Host: GitHub
- URL: https://github.com/venkat-0706/cricket-feild
- Owner: venkat-0706
- License: mit
- Created: 2025-03-05T14:22:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-05T14:31:31.000Z (over 1 year ago)
- Last Synced: 2025-03-05T15:30:28.069Z (over 1 year ago)
- Topics: canvas-api, css, drag-and-drop, frontend-development, html, interactive-ui, javascript, jquery, jquery-touch-events, konvajs
- Language: HTML
- Homepage: https://venkat-0706.github.io/Cricket-Feild/
- Size: 5.86 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cricket Field Interactive UI
This project creates an interactive cricket field using Konva.js, allowing users to add, drag, and rename players while enforcing movement constraints and player limits.
## Features
- **Interactive Player Placement:** Users can click on the field to add players dynamically.
- **Draggable Players:** Players can be repositioned using drag-and-drop functionality.
- **Editable Player Names:** Double-clicking a player's label opens a text box to rename them.
- **Movement Constraints:** Players have restricted movement areas to ensure realistic positioning.
- **Player Limits:** Users can add up to 11 players to maintain proper team structure.
- **Background Field Image:** A cricket field image is used as the background for a realistic experience.
## Technologies Used
- **Konva.js** – Handles rendering and interactive graphics.
- **jQuery** – Manages event handling for click and drag operations.
- **jQuery Touch Events** – Enhances touch support for mobile devices.
## How to Use
1. Open `index.html` in a browser.
2. Click on the field to add blue players (up to 11).
3. Drag players to reposition them within the allowed boundaries.
4. Double-click a player's label to edit their name.
5. Enjoy customizing your interactive cricket field!
## File Structure
- `index.html` – Main file containing the cricket field and interactive logic.
- `img/blankField.png` – Background image of the cricket field.
- External libraries: Konva.js, jQuery, jQuery Touch Events (loaded via CDN).
## Future Enhancements
- Add different player types with unique colors and roles.
- Implement a save/load feature to preserve player positions.
- Improve touch interactions for a smoother mobile experience.
- Introduce team management options (e.g., removing players, reassigning roles).
## Dependencies
- Konva.js
- jQuery
- jQuery Touch Events