Hi! Alex here.
Yesterday I coded Hue Hunt, a color-based game for designers. Due to having shared hosting and no SSH facility, I unfortunately could not upload the project, since it is purely based on the PHP framework Symfony 2.
Still, this page is here to give you a good insight! And technical details as well.
Enjoy!
The Game
Hue Hunt, a "game for hawk-eyed designers", is about finding the exact HSL values of a random color as quickly as possible.
Each URL matching the pattern /h/s/l, like /230/45/23, is bound to the corresponding color: here HSL(230, 45%, 23%). The player navigates through the colors by browsing their HSL values.
The game UI displays the current color, and the target color.
When the player finally enters values that are close enough to the target color, it's a win!
Starting page
The starting page displays an introduction and a reminder on the meaning of the HSL color scale with examples. The player enters a username and clicks the Play button to start the game.
Game page
When first landing on a game page with a URL matching the pattern /h/s/l, a random avatar is generated. The shots counter is set to 0 and the player sees both colors: the target in a small square, and the current color as the background color of a bigger area.
The player can then type a new URL with better HSL values and get help from the hint given on the right of the UI.
The endgame is fine tuning for the designer, trying to match colors through HSL values.
Win page
The player can see a history of all the colors encountered on the way, and how many shots the player took to find the right HSL values.
A Back to Start button links back to the start page for a new game.
Technical details
Framework
Hue Hunt is based on PHP framework Symfony 2.
Templating
The game is rendered by Symfony2's default templating engine: Twig.
The 2-levels deep architecture is based on a classic base.hmtl.twig skeleton, overriden in files such as start/start.html.twig for specific purposes.
Routing
The routes and their corresponding controllers were all defined in routing.yml
/start
/{h}/{s}/{l}
/game
Session variables
The game uses the following session variables:
'username'
'shots'
'win'
'avatarBaseHue'
'history'
'targetH'
'targetS'
'targetL'
'currentH'
'currentS'
'currentL'
The session variables are set on /start and $history is populated all along the way with HSL values of colors.
Each access to /start resets the session variables.
Hint and target
The player wins if the chosen HSL values are close enough to the target HSL. The distance to the target is defined this way:
// Target distance
$deltaH = ($session->get('targetH') - $h) / 3.6;
$deltaS = $session->get('targetS') - $s;
$deltaL = $session->get('targetL') - $l;
// Target reached
if (abs($deltaH) < 1 && abs($deltaS) < 3 && abs($deltaL) < 3) {
$session->set('win', TRUE);
// Redirect to /win
return $this->redirectToRoute('win');
}
If the target is not reached, the game will have to display a hint.
The hint is shaped to be the most helpful. For instance if the player is very far from the target's Hue - farther than by how much the S or L values differ - then the clue will be on how to change H the right way.
CSS
The design is purposely simple and neat.
Flexbox positioning has been chosen for the layout with home-made classes such as .flexrow and .flexcol, invoked when needed.
The color system for backgrounds is naturally HSL.
Dynamic styling
The game is very front-endish, for it is its purpose.That's why there is a need for the back-end PHP to pass color arguments to the front-end, e.g. /200/80/20 has to display a dark blue.
CSS snippets are found directly in Twig. Here is an example:
{% block stylesheets %}
{{ parent() }}
<style type='text/css'>
#insight {
background: hsl({{currentH}}, {{currentS}}%, {{currentL}}%);
}
</style>
{% endblock %}
This technique is used for custom avatars, the target color and the current color.
Final word
This game, however not hosted for sad technical reasons, allowed me to play around with Symfony 2 components.
Hue Hunt is a sort of Serious Game, for it definitely improves one's ability to associate colors with their HSL values.
I am considering to release a playable version with JavaScript framework Angular.js.
A version based on the RGB color scale might come out as well!