This project was inspired by Langton's Ant, an automaton with simple rules that nonetheless generates rich, complex patterns, going as far as to be Turing-complete.

What it does

Breadcrumbs is a game taking place on a rectangular grid. The objective of this game is to help our ant reach the green tile in the bottom right. When the ant steps on a white tile, it will move forward and turn right; on grey, it will turn left. However, if it steps on a red tile, it will perish.

How we built it

  • Started off with webpack, which takes our modules and packages them into 4 static assets for our webpage to load.
  • Decided to use Javascript, HTML and CSS as they are the fundamental building blocks for a good webpage.
  • Used the React library to manage local state and easily update and mount our data to the webpage.
  • Included LocalStorage as the high score was needed to remember previous scores on the client-side to make it more interactive.

Challenges we ran into

  • Whenever the ant reached the end of the matrix (pre-set table size) it would leave the bounds of the matrix. Fixed by having the ant "bounce" off of the edge.
  • The user would be able to modify the board while the game was running. Fixed with a boolean acting as a lock variable. Technically you can still modify the board after a "step" which can still produce unexpected results.
  • Refactoring code base for readability and following guidelines

Accomplishments that we're proud of

  • Store information on the client side
  • Turn the direction of the ant as it detects new tiles.
  • Added actions to all the buttons.
  • Ability to toggle tiles from white/black
  • Combine data and visualization to create an interactive game with win conditions.

What we learned

  • State management in React
  • Storing information on the client
  • Updating and Mounting in React
  • Package components and modules to be displayed on the web

What's next for BreadCrumbs

  • Difficulty Slider (control number of red tiles that spawn)
  • Number of total tiles
  • Alternative tiles that have alternative actions
  • Websockets for two-player mode with collision utilities and actions.

Built With

Share this project: