Disk intersection game

Here’s a small puzzle/game that I made, using a simple geometric concept. You can try it here: disk intersection game. The game idea is loosely inspired by the game planarity, but it is also significantly different.

disk game screenshot

There are some disks, and you can move them around arbitrarily (drag with the mouse). The goal is to make all of them “good”. When a disk is “good”, its color turns to green. The other colors indicate different levels of “badness”, as shown in the legend to the right. With some experimentation you can probably discover what you need to do to achieve this, but here is an explanation of the idea:

There is a hidden “model”, created randomly, which you need to discover. The model determines how the disks need to be interconnected, meaning which pairs of disks have to intersect each other (overlap with each other). If you “realize” this model, by moving the disks in such a position as to intersect each other in the required way, you win the game. The colors of the disks indicate how far the current configuration is from the correct model. This is computed as follows: if a certain disk should intersect disk A and no other disks, but instead it intersects disk B and C, and it doesn’t intersect A, then its “badness” is 3, so it has the color corresponding to the number 3. In other words, “badness” shows how many errors there are due to a given disk. When the “badness” of all disks is 0, you have solved the puzzle.

If you find the color codes hard to recognize, you can click the “#” button, and the “badness” will appear as a number. You can also ask for help three times during the game. Clicking the help button will display the model that has to be realized (i.e. the connections between the disks, shown as lines). There are easy and hard games, in a hard game the model tends to be more complicated, therefore harder to discover.

Try the disk intersection game.

Remarks:

  • I came up with the idea for the game, while working on a problem related to unit disk graphs. This is the first iteration of the game, so probably the gameplay and the design could be significantly improved. If you have any suggestions, please let me know in the comments.
  • There is nothing special about disks here, maybe other intersection graphs would make more interesting (or more challenging) games.
  • One reason I wrote the game, besides wanting to try out the idea, was to get familiar with HTML5 Canvas – in the future I’d like to make another, somewhat more complex game. As this was my first encounter with Canvas, and because I wrote the game in one sitting (~3 hours), the implementation is a bit rough around the edges. Please let me know if you find any bugs or if you have suggestions.

3 comments ↓

#1 Erik R. on 02.27.13 at 6:17 pm

Very interesting! After three easy games, I’d say it’s not particularly fun, but it’s definitely interesting, perhaps most so as a programming exercise.

#2 Pavan on 03.12.13 at 5:08 pm

Very cool idea! I played a few times and it definitely gets more challenging as the number of disks per sub-graph increase.

Have you looked at d3js.org for implementing something like this? It seems to be primarily for visualization, but I’m sure you could write a game with it!

It’s interesting to analyze from a combinatorics point of view of what would be the optimal solving strategy in some sense.

It’s also interesting for me as a potential experimental tool in cognitive science to study how we infer hidden relations between objects. For instance, you could create an “observe” condition where the disks are moving around randomly and changing colors according to the hidden rules. This old experiment may be vaguely relevant/ loosely inspiring: http://vimeo.com/34904883

#3 Vinicius Gusmao on 05.21.13 at 9:28 pm

Very nice! Congrats for the game and the blog. I’ll get my own BookBox now. :-)

Cheers,
Vinicius

Leave a Comment