Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lgwarda/mondrian-blocks-logic-puzzle

Mondrian Blocks Logic Puzzle is a web-based game inspired by its physical counterpart. Strategically arrange blocks on an 8x8 grid, built with HTML, CSS, and JavaScript for intuitive interaction and responsive design. Ideal for puzzle fans seeking a logical challenge.
https://github.com/lgwarda/mondrian-blocks-logic-puzzle

drag-and-drop logic-puzzle-html-css-js mondrian-puzzle-game web-game

Last synced: 28 days ago
JSON representation

Host: GitHub
URL: https://github.com/lgwarda/mondrian-blocks-logic-puzzle
Owner: lgwarda
License: mit
Created: 2024-11-22T21:08:18.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2024-11-23T16:36:15.000Z (about 2 months ago)
Last Synced: 2024-11-23T17:20:31.734Z (about 2 months ago)
Topics: drag-and-drop, logic-puzzle-html-css-js, mondrian-puzzle-game, web-game
Language: JavaScript
Homepage: https://mondrian-blocks.surge.sh/
Size: 6.84 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

## **Mondrian Blocks Logic Puzzle**

### **Table of Contents**

1. [About the Project](#about-the-project)
2. [Gameplay Instructions](#gameplay-instructions)
3. [Features](#features)
4. [Built With](#built-with)
5. [Getting Started](#getting-started)
6. [Usage](#usage)
7. [Contributing](#contributing)
8. [License](#license)
9. [Acknowledgements](#acknowledgements)

---

### **About the Project**

The **Mondrian Blocks Logic Puzzle** is a web-based game inspired by the physical puzzle. It challenges players to arrange colored blocks on an 8x8 grid while respecting predefined fixed blocks. Each puzzle has only one solution, encouraging strategic thinking and problem-solving skills.

This project is built with **HTML**, **CSS**, and **JavaScript**, focusing on:

- Intuitive user interaction.
- Responsive design.
- Smooth drag-and-drop functionality.

---

### **Gameplay Instructions**

1. **Objective**: Fill the entire 8x8 grid using colored blocks (red, yellow, blue, and white) while keeping the fixed black blocks in place.
2. **How to Play**:
- Fixed black blocks are pre-positioned on the grid and cannot be moved.
- Drag and drop colored blocks from the tray onto the grid.
- Arrange the blocks to completely fill the grid. Each challenge has only one correct solution.
3. **Rules**:
- You cannot overlap blocks.
- You cannot place blocks on top of the black (fixed) blocks.

---

### **Features**

- **8x8 Grid**: A dynamic grid rendered using the HTML `` element.
- **Fixed Blocks**: Black blocks pre-positioned to set up the challenge.
- **Drag-and-Drop Interaction**: Intuitive placement of blocks using mouse or touch gestures.
- **Customizable Puzzles**: Easy to extend by modifying predefined block positions.
- **Responsive Design**: Works across desktop and mobile devices.

---

### **Built With**

- **HTML5**: For semantic structure and canvas rendering.
- **CSS3**: For styling and layout.
- **JavaScript**: For dynamic interactions and gameplay logic.

---

### **Getting Started**

To get a local copy up and running, follow these steps:

#### **Prerequisites**

- A modern web browser (Google Chrome, Firefox, Safari, etc.).

#### **Installation**

1. Clone the repository:
```bash
git clone https://github.com/lgwarda/Mondrian-Blocks-Logic-Puzzle.git
```
2. Navigate to the project directory:
```bash
cd Mondrian-Blocks-Logic-Puzzle
```
3. Open `index.html` in your browser to start playing:
```bash
open index.html
```

---

### **Usage**

- **Drag-and-Drop Gameplay**: Click and drag a colored block from the tray, then drop it onto the grid.
- **Reset the Game**: Refresh the browser to reset the board and start again.

---

### **Contributing**

Contributions are what make the open-source community amazing! If you'd like to contribute:

1. Fork the project.
2. Create a feature branch:
```bash
git checkout -b feature/AmazingFeature
```
3. Commit your changes:
```bash
git commit -m "Add some AmazingFeature"
```
4. Push to the branch:
```bash
git push origin feature/AmazingFeature
```
5. Open a pull request.

---

### **License**

Distributed under the MIT License. See `LICENSE.txt` for more information.

---

### **Acknowledgements**

- Inspired by the **Mondrian Blocks Puzzle** game.
- Built with the [OpenAI ChatGPT Assistant](https://openai.com/chatgpt/).