Molecule Masher

• 

  The canvas element before starting

• 

  The board right after starting

• 

  The elements fill the grid as you play

• 

  The webpage from a wider view

Inspiration

The inspiration for this project came from similar games that focus on matching colors together to burst bubbles. Having seen programs like this and wanting to use this concept for education, I mashed together the idea of shooting bubbles that match each other with the formation of molecules using elements.

What it does

Our project takes the form of a website that with a few different sections. The introduction section is self-explanatory and merely introduces what the website aims to do. The rules section will explain how to play the game hosted on the website. The middle section is the bulk of the project and is the game itself. This is a canvas element that is manipulated to draw animations and allow for interaction. To play, you shoot randomly generated elements into a grid where they will slot into place. The goal is to build whatever molecule the game asks of you (this is displayed on the bottom right of the game space) using the elements that you shoot into the grid. Shooting elements builds score, with each molecule formed generating a bonus of score. The goal of the game is to build the highest score you can before your grid fills up resulting in a game over.

How we built it

This project was built using HTML, CSS, and JavaScript. The HTML and CSS are primarily just for laying out and styling the page, while the JavaScript is responsible for the game logic and the workings of the canvas element. This is the where the bulk of our work lies, as we had to build the grid and game space, allow for collision between elements and their surroundings, program the actual firing of elements, and more while managing the rendering of each of these objects on each frame.

Challenges we ran into

There were definitely a few challenges that our team ran into while building this project. We had limited experience in using canvas, so there was definitely a learning curve there. Along with this, some of the more advanced logic that involved detecting when a molecule had formed and clearing molecules were hurdles in our progress.

Accomplishments that we're proud of

Overall, we are fairly proud of accomplishing this entirely within canvas without the use of any framework and very few other HTML elements in general. The game itself also functions exactly as intended, and so we are proud of the logic and JavaScript that we used to get this working. In addition, the website styling was also successful as well and maintains a modern look.

What we learned

Throughout this experience, we learned a lot about JavaScript. As mentioned before, our canvas knowledge was extremely limited, and getting used to manually rendering each line in the scene definitely took some getting used to. On the flip side, it was a great learning experience and by the end we had completely adjusted to utilizing JavaScript in this manner.

What's next for Molecule Masher

The next thing that we would have planned for Molecule Masher would be to plan out a functioning mobile mode, as this has not been tested as of today. On top of this, we would add additional difficulties to either make the game a bit easier or to bring in more elements / compounds into the fold. The last change that would be prioritized would be continued to polish the look of the website and game to make it look more well suited for a classroom setting.

Built With

• css
• html
• javascript