Dot Game

Created for

code challenge

Completed

2018

What I did

  • design
  • development

Tools

  • Sketch
  • HTML
  • Sass
  • JavaScript + jQuery

In the Wild

Live Project on Glitch
Project on Github

I set out to build a game based on a prompt

The prompt for this code challenge states "The goal of this exercise is to create a game. In the game, dots move from the top to the bottom of the screen. A player tries to click on the dots, and receives points when they are successful." There are additional guidelines and build instructions that I used as a starting point for my game, but I wanted to put something extra into it.

I designed the game UI/UX

I searched for game console inspiration on Dribbble (and beyond) and gave a lot of attention to the UI. I felt the visual hierarchy of items in the console should be:

  1. Score - because it changes and it's what the player will be watching as they play
  2. Start/Pause button - because this function is essential for the user to have control over their game
  3. Speed slider - this control isn't necessary for the game to function but is nice to have
  4. Start over link - I put this underneath/near the start/pause button because it's a related function, and it's nice to have because it prevents the user from having to refresh the page themselves
Color indecisiveness led to user customization option

I wanted the console to have an inverse color theme (dark background) with a pop of color. I couldn't decide which pop of color I liked best so I gave the user the ability to choose. It was fun and easy to implement the CSS variables with Sass and jQuery. I gave my game the tagline "choose your color adventure" to further promote this option to the user and because it sounds on-brand with gaming jargon.

mockup

See the live project on Glitch and go behind the scenes of the game on Github.

← back