Ricochet Robots

'What's better than a robot? Four robots! 11/10' - NY Times

Comment

Inspiration

Ricochet Robots is the strategy game that fueled our passion for puzzles and quick-thinking problem solving. We decided to make this game because we both wished that the over-the-table play could be done remotely -- this 'training' program is the first step in that process, enabling the user to practice their pathfinding on a virtual board.

What it does

Like mentioned before, the game is a 'training program' for the board game Ricochet Robots. It seeks to mimic over-the-table play by enabling the user to practice their path-finding -- the central component of the game -- in a randomly-generated setting that mimics the boards used in official play. The user is able to enjoy full single-player functionality of the real Ricochet Robots right from their pocket or laptop.

How we built it

ReactRicochet was built with Node.js and React, with a linked Express backend that was unfortunately unable to be utilized, as multiplayer play was beyond the scope of a 36 hour hackathon. The game was built by initially conceptualizing the board representation, then simultaneously developing gameplay while building textures that would be more distinguishable on screen. Finally, the game was passed through a light QA process with close friends who attempted (and succeeded) in breaking it, revealing critical bugs in the process.

Challenges we ran into

The decision to use object-oriented programming in designing this react-based project was an enlightening one, in that it revealed the difficulties of using object-orientation in JavaScript alongside a functional-component based language like modern React. Communicating different properties over different instances of classes was exceedingly difficult when compared to C++ or Java, and, while it worked in the end, it taught us a valuable lesson -- stick to the guns that the language is best at.

Accomplishments that we're proud of

  • Designing a collection of pretty suave board textures
  • Implementing keyboard interfacing with minimal to no lag caused by attached event handlers in JavaScript
  • Optimizing a board generation algorithm that (we think) feels pretty close to the original game, with a far larger variety
  • Hosting it on an SSL-Secured website so we can feel safe playing it from anywhere (https://zolyo.me/ricochet)

What we learned

React is wonderful as a functional component based language -- we learned not to try and forcefully integrate this with native JavaScript object orientation (yes, we thought THAT was a good idea...) With both of us having limited exposure to modern React, we both had a wonderful time learning the core concepts of the framework. Reuben especially got a pretty hefty introduction to the framework, while he taught me some critical concepts in the field of texture design.

What's next for Ricochet Robots

The next step is to communicate the board state to a database upon every change, and thus enable users to play against one another remotely. This final piece of the puzzle is what we lacked, and if we can manage it, it will turn the project into a full-blown success.

Share this project:

Updates