I’ve had a day off studying today. Yesterday I improved the look of my good/bad game and loaded into a place that I could share with other people on the course. I centred a fixed width div with a border and rounded corners, gave that a background colour, changed the faces to free pngs with transparent backgrounds. On the code side I added code to reset the random number on clicking the input box so could do it any number of times with different names.
The reactions time game still needs something to draw it to an end, but it looks prettier. I was thinking of how to make it so that you have a fixed number of attempts and then the output is some statistics – fastest time, slowest time, average time. I thought that would be a challenge to figure out how to do it. Also it seems unsatisfactory to just keep getting the time and then it disappear, so each time could be added to an Array and then output. Things to ponder on. This is what it looks like:
The shape is square or circle randomly, the colour and position are also random. I suppose the size could also vary within a range but that would be complicated. It also strikes me that you need to exclude colours that are the same or close to your background which would not be visible, so maybe a thin 1 px black border would save that issue. The other issue is what size to make your box to fit all screens or how to make it responsive so it varies according to the device it is being viewed on. I looked at someone else’s version of the game and their play area was too big and half of it was below the fold on my laptop screen.
If you want to have a look at the games in action these are temporary links: