Link To Website

1. Presentation
2. User Experience (UX)
3. Flowchart
4. Wireframes
5. User Stories
6. Colors
7. Features
8. Testing
9. Bugs
10. Validation
11. Tools
12. Deployment
13. Credits
14. Update 1.1

• Shooter game in which you are supposed to hit the targets as they appear. You got 60 seconds to rack up as many points as possible.
• My main purpose of this site was to create an easy yet viable way to train your aim and muscle memory.
  • Aswell as make it possible for more people to train their aim no matter what equipment they are presented with.
• Made by me as part of an education to become an full-stacked-developer.
• Design wise my goal has been to create something that pleases the eyes and works well for the user.

As for user experience I went for a simple look.
A header, 2 buttons, a gamearea, score and timer. All the components used in this site to make it better and more comfortable for you the user.
As mentioned above you will find an game area with timer and score. The timer tells you how many seconds there is left on the round. Score tells the score... In this game area you will also see alot of target become visible as you hunt them down for glory. As soon as game is started an alert will pop up explaining the rules while pausing the game until the user decides to continue.
When a game ends an alert box will appear telling you how good score you got and how long you played for.

• It starts with the page being loaded and calling for the targets to be created based on screen width.
• As for the other you will be able to see what my plan started with below.
• flowchart
• Besides what can be seen above I have implemented some helper functions for changing buttons and resetting after games.

• Wireframes was made prior to updating the site.
• I wanted to use a wireframe because this makes it easier to envision the site and how to make it a reality.
• It was made using Uizard

• For header I choose to go with a dark purple color, I wanted a dark color to make it stick out.
• For game background I went with the classic black. This makes the targets appear much brighter and therefore easier to spot.
• The targets are red and I choose this color because it will really stand out against the black.
• If the stop button is active it displays with a bright red color representing danger/warning
• If the start button is active it displays with a light-purple color to show it is active. Matching the header.
• If the stop/start button is inactive it displays with a gray color to show that it is inactive.

• Header

  • Main purpose for the header is to introduce the user to the site.
  • Has a purple backgound color which I think goes along very well with the theme.

• Controls

  • Start button, linked to start game function and is disabled upon game start.
  • Stop button, linked to stop game function and is enabled upon game start.
  • If game hasn't been stopped before 60 seconds has passed, the game calls the stop function by itself.
  • Score
    • In the middle top of the gamewindow you can find your score. This increases each time you successfully hits a target.
    • For each score you get, targets visible time decreases with 10ms

• Game-Window

  • It is in this window the game will be played, all targets appear within this window.
  • Targets
    • Theese are created upon loading the window.
      • Depending on screen-size different amount of targets appear.

• Text

  • Just below game window you can find a small box of text explaining the game rules. (This has been changed to alertbox)

• Footer

  • Here you can find a link to my Github profile page. Opens in a new tab for better user experience.
  • You can also find information text and as written in footer the game will be improved later.

• Tested this site using responsiveness tools.
• Tested to work on phones, tablets and PC's
• Tested on phone (OnePlus 7 Pro) everything worked and looked neat.
• Page was tested in several different browsers including chrome, firefox and Microsoft Edge.
• I have manually tested that..
  • you can only start one game at a time
  • if a game has ended you are able to start a new one.
  • number of targets should always coincide with actual targets on screen.
  • targets do not appear outside of gamewindow
  • when target is hit score increases
  • timer is working and counting down
  • when timer reaches 0 game ends.
  • Upon starting game start button is disabled and stop button enabled
  • Upon ending game start button is enabled and stop button disabled

• Upon deploying the website I noticed that script and stylesheet was not being loaded as intended. I soon realised it had to do with my pathways not being correct. After adding "./" to all pathways it is working.
• Any bug reports can be sent to [email protected] for review.

• HTML
  • No Faults when runnning it through the WSC3 Validator.
    
• CSS
  • No Faults when runnning it through the Jigsaw Validator.
    
• JavaScript
  • One error found which exist cause I call the function from within the HTML.
    

• Gitpod was used during the process of making this website.
  • HTML5 was used for marking up the website.
  • CSS3 was used for styling the website.
  • JavaScript was used for the logic of my website.
• I used GitHub to deploy my website.
• I used FontAwesome Ver.5.15.4 for the github icon at the bottom of the page and the icon next to page name. (favicon)
• I used Stackoverflow to read and learn more about java while writing this.
• I also used W3Schools to read up about intervals and timeouts.
• I used Lighthouse to evaluate my website.
  

• To deploy this project follow steps below:
  • Go to repository
  • Click the green gitpod button
  • Make any desired changes too code or html
  • Save your repository
  • Locate your repository
  • Enter settings for your repository
  • Click pages tab on the navbar to the left
  • Select your branch from the drop-down menu
  • Deploy.
  • Deployed! You should now have a clickable link which should look like this "https://GITHUB_USERNAME.github.io/REPOSITORY_NAME/"

• For the "function scoreIncrement()" I borrowed code from our love maths project we did in school just prior to starting this portfolio project. (Credit goes to CodeInstitute)

• Added function to create targets based on screen size
• Better sized targets
• Phones have smaller sized targets, this to fit some more targets and make it more scaleable for smaller screens
• Buttons have feedback for user and shuts off depending on if game is started or not
• Added timer

• Add possibility for the user to select number of targets
• Add possibility to select how long targets appear
• Scoreboard to keep track of who has gotten the best score.
• Regional scoreboard to keep track of score in your closer proximity

• Buttons has gotten a touch up. Added JS to disable and change classes depending on game state.
• New timer can be seen under the score to better keep track of progress.
• Besides this it is a general touch up of how it used to look.
• Most of text has been put to alert boxes to clean up the looks of the site.

• Buttons has been manually tested both in-game and out of game.
• Game has been test run and after finished round. Player gets the wanted feedback.

• Before players could start several games at once, this has been resolved.
• No feedback for user, solved by adding timer and alerts after each game.
• Game ended too early, increased round time by 300ms
• stopGame(); sometimes ran it sequence twice, now controlled by an if statement.
• Container not fiting on some sizes, solved by adding more variants of number of targets.