Simons Keyboard

after playing numerous simon says games i came to the conclusion that they where all to similar and to easy, so i set out to make something harder with a slightly diffrent look to it while keeping the base game the same. The reason behind using a keyboard was quite simple becasue quite like simon says you have keys that make noise except there is more of them wich can be used to in crease the difficulty. To ensure it is still fun for everyone i made it so that you can choose the amount of notes you would like to use so it can be like normal simon says with just for keys or quite a bit harder with 7 notes.

UX

Main goal, keep it simple looking and straight forward. you can tell what button does what by looking at it the keyboard is modeld after a real keyboard just one octave instead of seven.

Most players are familiar with the game of simon says. i have had several friends and family members test the game for me to give feedback on the looks and gameplay to make sure it was pleasing to the eye and make sure there was nothing too confusing in it.

wireframe:

initial sketch

final design

Features

• the option to choose how many keys are in use

4 simple buttons labeld with the numbers 4 trough 7 notes to make it simple and easy to select how many you would like to use

• the color coding of the keys

each key has its own unique color to make sure you can play the game without any sound and making it easier to tell them apart in case you press wrong

• all keys lighting up when selecting the wrong key

to help out so you can see wich key it was seposed to be and wich color is where

• diffrent sound effects per key

to ensure that each key is easy to tell apart by listening they are all notes from A to G from a keyboard in the same order they would apear on one

Technologies used

everything has been programmed on AWScloud9

I have used the teko font from the GoogleFonts API

other than that its all base html, css and javascript

Testing

the code has been checked and validated with

• W3C html validator
• W3C CSS validator

the website itself was tested by myself and friends of mine to ensure that the colors and sound lined up perfectly with a click and when the computer is pressing them.

Deployment

I have live deployed my project only on Github

1. On Github navigate to sneachda/portfolio-milestone-1
2. From the menu at the top click on settings
3. Scroll down to the GitHub pages section
4. Under Source section click on dropdown menu and select Master Branch as your GitHub pages publishing source.
5. Select save.

there is no diffrences between the develepoment and the deployed version of the website

Credits

all coding for javascript done by me

special thanks to my mentor maranatha for helping me with my coding problems

sound files from freesound from user pinkyfinger

CSS piano base inspiration taken from https://codepen.io/Eliteware/pen/wDHIC