This is a game that I've been planning since October and started building in January. See my game design document.
Check out the deployed (although not completely done) site here.
There will be many levels with the earlier/easier with whole numbers and smaller boards and the later ones possibly including fractions, mixed numbers, and decimals.
The target Age Range is 5th - 7th grade but it will also have some levels that are accessible to 3rd & 4th grade and would be a great activity to build number sense for older grades as well. I was very inspired by Stick and Split when planning this game. This would be a great game to play after mastering Stick and Split because the concepts build on Stick and Split but my game requires some more complex mathematical thinking. Specifically, this game is designed to build learners intuition around the properties of operations (the distributive, associative, and commutative properties) by presenting them with increasingly complex puzzles which these concepts to transform the puzzle pieces into the necessary shapes.
Here are some other items on my to do list for this project:
Priority Fixes and Features
- Make the shift after a rotation that causes a piece to be un-aligned with the grid more graceful/animated.
- Make the original piece disappear as soon as it's being dragged in the air.
- Handle case where a rotation causes a piece to go partly off the board.
- Handle UX for a piece that is too tall or too long to fit on the board
- Detect and prevent/handle collisions between pieces.
Features to Add Later
- Add animation for collisions
- Add animations to reset function
- Deselect puzzle pieces on clickAway with a custom hook
- Add distributive property functionality
- Add a win screen/ message
- Add something to hint to the user that they can click the pieces to see the possible actions.
- Add limits to the UI to show how many actions the user can use
- Add limits to the level json and import them through context
Much Later or Possibly not at all
- Set up system to allow for fractional side lengths
- Add sound effects for collisions and piece placements
Bugs to Fix
- Sometimes there is an empty border and it appears the actual piece is displaced but it's border is still there. Upon inspection of the CSS the motion.div from rectangle was mysteriously getting a transform3d style from somewhere(?) so I used !important to set transform3d to 0px in all directions as a temporary fix.
- Layout issues on mobile caused by pieces being on top or underneath the board.