From the How To Play Page you are able to navigate to:

• The Start Screen

From the Game Over Page you are able to navigate to:

• The Start Screen

You able to use these buttons either with a mouse, the keys used in the game (that are mapped to the ScriptBoy buttons) and the buttons on the ScriptBoy (actual buttons only work on touchscreen)

• Input your name - Controlled by validation so that names use letters and are within a certain size.
• Play with or without music - There is a main theme song which loops; a rendition of the Korobeiniki Russian folk song.
• Scoreboard - Showing level and score.
• Next pentomino preview - so player can plan their moves.
• Ghost pentomino - You can see where your current pentomino is going to land based on it's current trajectory.
• Move pentomino left and right.
• Rotate pentomino clockwise and counter-clockwise.
• Increase pentomino fall speed.
• Make pentomino drop instantly
• Pause game
• Mute

• Game over screen - Displays the players name, score and the board as it was when the game goes to a fail state. Players can then navigate back to the start screen.

1. Unitended game over state - You can move a pentomino to the side of the board before it's showing and 'hook' it on one of the edges.
2. Pentomino ghost consistency - Pentomino ghost is a lighter colour for 1 game step and then becomes the consistent colour that I've set.
3. Pentomino preview - Pentomino preview display blocks at different sizes, this should be standardised.
4. Text glitch - When the select button is pressed there is an odd text glitch on the start button text.
5. Cycling through menu items with keys or d-pad is cycling through hidden buttons.
6. Pressed a button on the gameOverScreen plays the game over sound.
7. Left and Right sound isn't played for each movement when keys are held down, or pressing in quick succession. This is also the case when rotating the pentomino quickly.

• Start Menu not being hidden and Game Area not being displayed - Change = to - so that the const is using the proper variable name.
• Start Menu would show again after briefly showing game area - Remove the form tag, as I didn't actually need to input a form but just need the name input for validation and end screen.
• gameCanvas wasn't being captured - Change the ID captured from gameCanvas to board, which was the ID on the HTML Canvas tag.
• pentominoPosition variable couldn't be found - Fixed spelling on variable.
• Scope issue with gameBoard variable - Remove Let inside the function as it was already declared at the top of my script which gives it a global scope.
• Pentominoes weren't showing on the board - I gave the pentominoes a colour where the cells were being drawn.
• Keys weren't being found - Change keycode to strings of keys.
• Game over state due to pentominoes not moving - In the gameStep function I changed the pentomino generation to only happen when it can't move down anymore. I also added a boolean value to movePentomino so that gameStep knows whether the pentomino was moved successfully.
• fastFallSpeed would only be active for a short time - Add a currentSpeed variable, along with a boolean to check if the down key is pressed down or not. If it is pressed down then the currentSpeed is changed to fastFallSpeed.
• Pentominoes weren't showing well on background - Change all main colours to be a dark shade of greyscale.
• moveSound is looped when the space is held down to rotate - Add a boolean (flag) to check whether the sound has been played on the key press.
• Spacebar had wrong flag name - Renamed flag to the variable name set at the top.
• Pentominoes were placed off screen - Set the game canvas to fit within the size of the game screen based on the aspect ratio.
• Off screen pentomino triggered game over state - Change the isValidPosition function to not check blocks above the board, but then check if one is placed and hit's the top line.
• Screen wasn't on top of the other elements - Change #screen to have position:relative as position:static doesn't work with z-index.
• Some audio wasn't playing correctly - Change boolean value in startGame function to soundStatus and then store that vlaue in the startGame variable.
• Delay on fastFallSpeed - I added the gameStep function within the key down controls so that these effects are instant.
• dropPentomino can be held down - This would cause frustrating gameplay, so I added a flag isShiftKeyDown.
• 404 error with sound icon images - Removed / from the file path so that the images loaded correctly.
• Sound would play when vame validation failed - Removed some code that starts playing the music when the Play with Sound button is pressed.

All HTML passed the w3C HTML Validation.

All CSS passed the w3C CSS Validation.

All JS passed the JSHint validation.

I used WAVE Web Accessibility Evaluation Tool and it passed with 0 errors.

I also used Google Lighthouse and it was in the high greens for performance, accessbility and best practises.

Expected - When the site loads, the start screen should be presented. It should have an input, Play with Sound button, Play without Sound button & How to Play Button displayed on the screen. At the bottom right of the screen should be a sound off icon as the isSoundOn flag initially set to False. Below the screen should be the physical buttons. Testing - Tested the feature by loading the app. Result - The feature responded as expected.

Expected - Inputting a name shorter than 3 characters or using numbers should throw up a relevant error. If both errors are met, then both errors should be displayed and the game shouldn't start. Testing - Tested the feature by inputting a name shorter than 3 characters and inputting non-letters. Result - The feature responded as expected.

Expected - The music should loop Testing - Tested the feature by playing the game. Result - The feature responded as expected.

Expected - Gameover screen should display the inputted name, Final Score, Final Level and a Start Screen button. In the background the gameboard should be displayed as it was before the user entered the gameover state. Testing - Tested the feature by hitting the top of the game board which triggers the gameover state. Result - The feature responded as expected.

Expected - Keys shouldn't be active in this screen. Testing - Tested the feature by pressing/touching keys. Result - There is a bug related to sound (See Known Bug 6), so it seems like the keys are still active.

I have deployed this website on GitHub Pages. To do this yourself, follow the steps below:

1. Log in to your GitHub account and navigate to the repository you wish to deploy.
2. Click on the "Settings" tab.
3. In the left-hand navigation menu, click on the "Pages" button.
4. Under "Source", click on the dropdown that says "None" and then select "main".
5. Wait for a few seconds and the page should automatically refresh.
6. In GitHub Pages, you can see the link to your published site.

To make a clone of this repository, follow these steps:

1. Login to your GitHub account.
2. Go to the repository by visiting the link: Charlie McGoldrick Github - Pentifall Repo.
3. Click the "Code" button and then use the copy button next to the link to copy the link.
4. In your IDE of choice, open a new terminal and use the following clone command: git clone <https://github.com/CharlieMcGoldrick/ci-ms2-pentifall>.
5. You will now have a copy of the repository in you local version.

To fork this repository, follow these steps:

1. Log in to your GitHub account.
2. Go to the repository you want to fork, which is located at: Charlie McGoldrick Github - Pentifall Repo.
3. In the top-right corner of the repository page, click on the "Fork" button
4. GitHub will prompt you to select where you want to fork the repository. Choose your personal account or organization.
5. Wait for the forking process to complete. Once it's done, you will be redirected to your forked repository under your GitHub account.

NOTE: Any changes pushed to the main branch automatically show up on the website.

The following credits are used to inspire colour ideas, create the favicon, source royality free sound or inspire techniques used in this project.

• W3Schools Used to learn more about CSS and Javascript
  • Flexbox Used to reinforce objects.
  • Arrays Used to reinforce knowledge on arrays.
  • Objects Used to reinforce knowledge pn objects.
• MDN Web Docs Used to learn more about Javascript.
  • Arrow Function expression Learned about Arrow Functions expressions.
  • Switch Statements Reinforced knowledge about switch statements.
  • Ternary Operator Reinforced knowledge about ternary operators.
  • KeyboardEvent Reinforced knowledge about a KeyboardEvent.
• Kevin Powell Helpful CSS tips.
  • calc() lets you do some real CSS magic Used for some inspiration with CSS calc, which I used for the height and width of the ScriptBoy.
• Free Code Camp To learn JavaScript.
  • Learn JavaScript - Full Course for Beginners No specific code used, but I went through this to reinforce what I learnt from Code Institute.
• Am I Responsive? Used to create mock-ups for various screen sizes.
• Color Space Used to create colour palette.
• Dynamic Drive Used to create favicon.
• Pixabay Use for royality free sounds.

• Thank you to Katherine Evans for creating a Viola and Piano rendition of the Korobeiniki folk song.
• Thank you to my mentor; Graeme Taylor and Code Institute (including the Slack community), for the great support, advice, and guidance.
• Thank you to my friends and family for their patience and understanding whilst working on this project.