Puzzle Game

• 

  Puzzle game interface

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Puzzle Game

What Inspired Me

The inspiration for this project came from my interest in logic-based puzzle games that challenge the mind rather than rely on speed or luck. Games where the player has to stop, think, and plan each move always felt more meaningful to me. While playing similar pipe-connection puzzle games, I realized how simple rules can create deep logical challenges. This motivated me to create my own version of a logic tile game where users rotate tiles to connect a path from a starting point to a goal. I wanted to design something fun, interactive, and at the same time educational.

What I Learned

This project helped me learn and improve many important skills. I gained a better understanding of how game logic works and how user actions can affect the system in real time. I learned how to:

Manage a grid-based layout

Apply logical conditions to check correct connections

Use JavaScript to control rotations, moves, and game state

Design a clean and user-friendly interface

I also learned how small logical mistakes can break the entire game flow, which taught me to test and debug carefully.

How I Built the Project

I built this project using HTML, CSS, and JavaScript. HTML was used to create the structure of the game board, while CSS handled the design, colors, and animations. JavaScript was used to implement the main game logic, such as tile rotation, move counting, timer handling, and win condition checking.

Each tile has predefined connection directions, and when a tile is rotated, its connection points change. The system checks whether all adjacent tiles connect properly from the START tile to the GOAL tile.

From a logical perspective, the completion condition can be expressed as:

Level Complete={True, if a continuous path exists from Start to Goal False, otherwise Level Complete={ True, False, ​

if a continuous path exists from Start to Goal otherwise ​

This approach helped me think in terms of conditions and rules rather than only visual design.

Challenges I Faced

One of the main challenges was checking whether all tiles were connected correctly, especially after multiple rotations. Another challenge was designing levels that were not too easy but also not impossible to solve. Handling user interactions smoothly while keeping the game responsive was also difficult at times.

I solved these problems by breaking the logic into smaller parts, testing each feature separately, and improving the code structure. These challenges significantly improved my problem-solving and logical thinking skills.

Final Thoughts

This project was a valuable learning experience that combined creativity with logic. It strengthened my understanding of interactive web development and gave me confidence to work on more advanced projects in the future. Most importantly, it taught me that even simple ideas can become powerful when built with clear logic and thoughtful design.

Built With

• bootstrap
• chormedevtools
• css
• cssgrid
• font-awesome
• github
• githubpage
• html5
• javascript
• vscode
• webbrowser