Here are the features included in the finished product:
- 5 Puzzles, each featuring multiple solutions and detailed feedback on incorrect solutions
- 3 unlockable Challenges, some with solutions, and some without
- Detailed instructions on how to play the game
- Support for iPad and iPod Touch (Theoretically)
- Includes the following topics: Connected Graphs, Vertex Degrees, Cycles, and Bipartite Graph
Some challenges I faced along the way:
- Writing algorithms to check solutions was especially hard. Since I wanted to allow for multiple solutions, I couldn't just compare answers to stock solutions. Instead, I wrote algorithms to test whether graphs were connected or bipartite, and then used these functions to provide feedback in the game. The bipartite algorithm in particular was challenging, and I had to go through multiple iterations before I was confident that my it worked the way I wanted it to.
- I had limited space in the game to explain topics and puzzles clearly, and it was especially challenging choosing the right words to make my message easy to understand. I had my family and friends playtest the game and give feedback, which I then used to improve upon my explanations.
- Although I coded methodically, I did not comment sufficiently until the very end, which made my code very convoluted. Going forward, I want to make commenting second nature, so that I don't end up with a jumbled mess in the later stages.
Here is the link for the game! I made it using codeheart.js, so to play the game simply open the play.html file in any web browser.
https://www.dropbox.com/s/1wj2ixmhh9h7xns/Constellations.zip
Good luck to the rest of you; I'm looking forward to trying everyone's games!
--Philippe Demontigny
That is beautiful and clever!
ReplyDeleteI put it at
http://graphics.williams.edu/hosted/constellations/
You can bookmark it on iOS to play full screen on a tablet. I upgraded play.html to the latest version before uploading as well.
I had a hard time with the controls...when I dragged up from the bottom of the screen, about half the time, it placed another star. I then couldn't delete that extra star, and hard to restart! I suggest just keeping the controls on screen.
If you make the selection region for a star be the entire star, then there is no need to have two tools--simply drawing a line between stars is distinct from drawing a new star. That allows you to reduce the UI to submit, reload, and back, at which point you can leave the controls on screen for simplicity.
I just played a bunch more. This game is great! I enjoyed playing it once I got the hang of the controls. It really succeeds as graph theory made fun.
ReplyDeleteA little more feedback on the UI will really make the gameplay shine by eliminating the frustration for the first-time player. If you want to polish, some things that I'd do:
* While drawing a line, SHOW the line being drawn
* Tell the user that lines can be removed by drawing them again
* When someone completes a puzzle, take them back to the puzzle screen (you can use setTimeout to delay this if you don't want to manually time it)
* Use a different background and star color on the puzzle screen--it isn't obvious that you've gone back if your constellation looked similar.
* Needs soothing music :)
* If you want to keep the two-tool interaction mode, then:
- show a visual indicator of the active tool on screen
- make it easier to switch--don't require me to swipe up
- make a bigger dead zone on the bottom of the screen, so that I don't accidentally place stars while trying to access the controls
- if I tap on a star again, delete it instead of drawing a second one that overlaps it
The instructions say that stars can be moved and deleted, which is a good design...so you should probably ignore large pieces of my advice and debug either why I'm having trouble (playtest) or why the code doesn't do that (if it isn't user error).
DeleteMaybe the instructions should be accessible from inside the game as well, or summarized under the tools, e.g.: "STAR: tap to draw or delete, drag to move" under the star.