Re(flex) - Flex your reflexes

Re(flex) is a game that will test the users reflexes, but not in the conventional way. We are used to waiting for red light to turn green to press a button to measure our reflexes, but this game will measure your reflexes to let go of a key at a specified time. There is something psychologically different to pressing a key at a specified time versus letting go of a key at a specified time.

This game will be for adults and children alike, and it will provide a fun game that helps sharpen your reflexes (and possibly flex them) to your family, friends and colleagues.

Features

Existing Features

• Header

  • The header will be placed up top of the page and aligned to center. Re(flex) will be displayed with a fun font.
  • The name of the game reveals that it has to do with reflexes, and your chance to flexing them to others.

• Game Area

  • This section will have a different colored background and contain the game itself.
  • It will provide a random number that is the goal of the game.
  • The counter will start as the user presses down a key and will stop once the user releases the key.
  • Once the user has released the key, the result is logged and a new randomly generated goal will be shown.
  • Dependant of the result (a margin of 0,2 seconds) will display the counter with a green background if user succeeds or a red background if the user doesn't succeed.

• Reset game button

  • At the bottom of the game area there will be a button to click on if the user would like to reset the game.

• Footer

  • A footer will be fixed on the bottom displaying the rules of the game in short sentences.

Future Features

• In the future I would like to add sound effects to the game to make it more fun.

UX

User Stories

• As as user, I would like to play a game.
• As a user, I would like to test my reflexes.
• As a user, I would like to reset the game.
• As a user, I would like to contact the developer when something is not working.

Design

Fonts

• I used Google Fonts for finding a fun font.

Colour schema

• I used ColorSpace for finding a good looking colour palette to #FFFFFF.

Icons

• I used Font Awesome to get a nice Facebook icon to the footer.

Testing

Credits

function runTimer

• var i = 0; // a counter which is displayed every 100ms
  
   // create interval which fires the callback every 100ms.
   // `interval` holds the interval ID, which is later used to clear the
   // interval (stop calling the callback)
  var interval = setInterval(function() { 
  
    text.innerHTML = i++; // write `i` and increment
    
    // if `i` is grater than 100 then clear the interval (stop calling the callback)
    if (i > 100) clearInterval(interval);
  }, 100);
  
  
  

• Borrowed from user @ Stack Overflow Sebastian Kaczmarek