https://github.com/ilvoo/dfs-game
A JavaScript-based game grid system where symbols are randomly placed on the grid. Players can interact by removing connected groups of identical symbols. The grid's customization allows for adjusting column and row counts, providing a flexible gaming experience.
https://github.com/ilvoo/dfs-game
browser-game css es6 frontend-development game-development grid-system html interactive-games javascript web-development web-games
Last synced: 2 months ago
JSON representation
A JavaScript-based game grid system where symbols are randomly placed on the grid. Players can interact by removing connected groups of identical symbols. The grid's customization allows for adjusting column and row counts, providing a flexible gaming experience.
- Host: GitHub
- URL: https://github.com/ilvoo/dfs-game
- Owner: ilvoo
- License: mit
- Created: 2023-11-14T11:29:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-25T15:53:08.000Z (over 1 year ago)
- Last Synced: 2023-11-25T16:30:45.853Z (over 1 year ago)
- Topics: browser-game, css, es6, frontend-development, game-development, grid-system, html, interactive-games, javascript, web-development, web-games
- Language: JavaScript
- Homepage: https://dfs-game.vercel.app
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Game Grid
This is a simple implementation of a game grid system using JavaScript. The code creates a grid-based game where symbols are randomly placed on the grid, and players can interact by removing connected groups of identical symbols.
## Getting Started
### Prerequisites
- Make sure you have a modern web browser that supports ES6 JavaScript features.
### Usage
1. Clone the repository or download the files.
2. Open `index.html` in your web browser.
Alternatively, integrate the provided classes (`Coordinates`, `GameItem`, `Game`) into your existing web application or project to use the game grid system.
## How to Use
### Initializing the Game
To create a game instance, instantiate the `Game` class with optional parameters for the number of columns, rows, and the HTML container ID:
```javascript
const game = new Game(6, 7, "#gameContainer");
```
### Interacting with the Game
- **Clicking on Cells**: Clicking on non-empty cells in the grid will identify and remove connected groups of identical symbols.
### Customization
- Adjust the number of columns and rows in the game grid by passing different values to the `Game` class constructor.
- Modify the symbols used in the game by changing the `GAME_SYMBOLS` array in the code.
## Code Structure
### `Coordinates` Class
Represents the coordinates of a cell in the game grid.
### `GameItem` Class
Represents an element in the game grid, holding a symbol and managing its properties.
### `Game` Class
Manages the game grid, including grid generation, rendering, interaction, and symbol removal logic.
## Contributing
Contributions are welcome! Feel free to submit issues or pull requests for any enhancements or bug fixes.
## License
This project is licensed under the [MIT License](LICENSE).