Developer: Gustaaf Milzink
- Project Goals
- User Experience
- User Stories
- Design
- Technologies Used
- Features
- Validation
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
The goal of this project was to create a website where the user can play a few simple games to pass time.
- Play one or more simple games to pass time.
- Provide fully responsive and accessible website.
- Provide several easily understood games to choose from.
- Apply visually appealing design.
- Provide an intuitive way to navigate the website.
- Anyone who wants to have fun playing a game with easily understood mechanics.
- Intuitive navigation.
- Easily understood game mechanics.
- Clean presentation that aides users understanding of game mechanics.
- Links that work as expected.
- Website needs to function on any device.
- A way to contact the developer to give feedback.
- I want to choose between several games.
- I want to easily understand the rules of the different games.
- I want clear feedback when I win or lose a game.
- I want to be able to play the games on any device.
- I want to be able to get in touch with the developer.
- I want confirmation that I filled out the contact form correctly.
- I want the user to be able to choose between Rock Paper Scissors, A quiz and a Hangman game.
- I want user to easily understand the different games.
- I want my game to provide clear feedback to the user.
- I want the user to not have to use the back button when they receive a 404 error.
- I want user to be able to send me a message and provide feedback.
The colour scheme consists of mostly neutral colours the Dark grey background providing clear contrast for the lighter text colour.
- Yellow and white are used to show when an element has been clicked.
- Red and green are used to provide clear recognizable feedback to the user about the different win/lose states of the games.
- Minor variations of the basic gray tints are used to provide feedback on the keyboard for the Guillotine game.
- Colourscheme was tested for contrast using WebAIM (https://webaim.org/resources/contrastchecker/).
The 'Roboto' font is used to display all the main content across the site. It was chosen for readability and aesthetics. A simple straightforward font that works well with the colour scheme.
The websites main structure has been kept simple and clear without any unnecesary elements to avoid clutter and improve accessibillity.
- The site consist of the following five pages:
- Welcome screen pointing users to the game selection in the header and the contact link in the footer.
- A page containing the 'Rock Paper Scissors' game.
- A page containing the 'Quizit' game.
- A Page containg the 'Guillotine' (hangman) game.
- A page containing a contact form.
- A custom 404 page.
Index
Rock Paper Scissors
Quizzit
Guillotine
Contact
404
- HTML
- CSS
- JavaScript
- Blender Was used to create logo's and game images.
- Gimp Was used to crop/resize/convert images.
- Krita Was used to highlight cerain sections of images.
- Swatcher Was used to construct the colour scheme.
- EmailJS Was used to send email from the contact form.
- Favicon.io Was used for making creating the websites favicons.
- Google Fonts Was used to implement the 'roboto' font.
- Chrome dev tools Where used for debugging and testing performance.
- WC3 Validator, Jigsaw W3 Validator, JShint where used to validate HTML, CSS and Javascript code respectively.
- Wave Validator was used to confirm accesabillity.
The website consists of five pages containing 9 seperate features.
- featured on all pages.
- contains links to the available games.
- user stories covered: 1, 7
Header image
- featured on all pages.
- contains links to the contact page.
- user stories covered: 5, 11
Footer image
- shown when user first loads the website.
- displays a welcome message and points user to the links in the header and footer.
- user stories covered: 1, 7, 11
Home image
- loads when the user clicks the appropriate icon in the header.
- Displays an intuitively laid out interface for playing a "rock paper scissors" game.
- Interactive elements have darker text against a light background to stand out. (This is consisitent throughout all three games.)
- once the user clicks 'start' a countdown is displayed
- once the countdown hits 'Go!' the user can then choose: Rock, Paper or Scissors. The site will then simulate the opponents choice en the outcome will be evaluated.
- Score section at the bottom of the screen keeps track of wins/losses.
- user stories covered: 2, 3, 8, 9
Rock Paper Scissors, pre-game
Rock Paper Scissors, win
Rock Paper Scissors, draw
Rock Paper Scissors, lose
- loads when the user clicks the appropriate icon in the header.
- Displays an intuitively laid out interface for playing a simple quiz.
- Interactive elements have darker text against a light background to stand out. (This is consisitent throughout all three games.) -Once the user clicks the "riddle me" button the site presents a simple riddle and populates the buttons at the bottom possible answers.
- The button that displays the correct answer is different everytime a particular riddle is displayed.
- The incorrect answers options are different every time a particular riddle is displayed.
- Once the user has selected an answer they can
- user stories covered: 2, 3, 8, 9
Quizzit, pre-game
Quizzit, riddle shown
Quizzit, guess correct
Quizzit, guess incorrect
- loads when the user clicks the appropriate icon in the header.
- Displays an intuitively laid out interface for playing a simple hangman type game.
- Interactive elements have darker text against a light background to stand out. (This is consisitent throughout all three games.)
- As soon as the page loads the user is presented with a game in progress.
- The user can select letters from the virtual keyboard to try and guess the word.
- The keyboard visually represents wich letters have been guessed and wether they where right or wrong. Green borders for correct guesses and red for incorrect ones.
- Every correct guess fills in the appropriate letters in the space below the main image until the entire word is guessed and the game is won.
- Every incorrect guess progresses a sequence of images displayed in the center of the screen until the guillotine drops and the game is lost.
- Once the round is lost or won the keyboard will dissapear so no new letters can be chosen until the game is reset.
- The 'reset' button clears the game and generates a new word.
- user stories covered: 2, 3, 8, 9
Guillotine start
Guillotine mid-game
Guillotine win
Guillotine lose
- Loads when the user clicks the contact icon in the footer.
- Displays a simple form with wich the user can send and email to the developer by entering their name, email adress and a short message.
- The form will submit only when all three fields have been filled out.
- Once the user submitss their message the submit button will change it text content to 'working' to inform the user that their request is being processed.
- Once the message has been sent the user is presented with confirmation.
- user stories covered: 5, 11
Contact (form)
Contact (working)
- Loads once the user has succesfully submitted a message.
- Shows a short message thanking the user for completing the form and presents a link back to Home page.
- user story covered: 6
Contact (confirmation)
- Custom 404 page loads when the user tries to navigate to a non-existing url.
- The user is presented with a short apology and a link back to the homepage.
- user story covered: 10
404 page
The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass without errors or warnings.
index.html
rps.html
quizzit.html
guillotine.html
contact.html
404.html
The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. All CSS passed without errors.
whole page
style.css
JSHint JavaScript Validation Service was used to validate the Javascript files. No problems where reported.
A single warning was generated for contact.js flagging "emailjs" as an undefined variable. This is part of the Emailjs integration and refers to the emailjs specific script wic is loaded by contact.html before loading contact.js
rps.js
quizzit.js
guillotine.js
contact.js
WAVE accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages passed with 0 errors or alerts.
index.html
rps.html
quizzit.html
guillotine.html
contact.html
404.html
Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website.
index.html
rps.html
quizzit.html
guillotine.html
contact.html
404.html
The website was tested on the following devices:
- Samsung A40 smartphone
- HP 14s-fq0050nd AMD Ryzen 3 3250U 14" laptop
- Generic Desktop PC
Testing with Google Chrome Develepor Tools Device Toggling reveals that the site remains functional and esthetically consistent across all devices.
The website was tested on the following browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Egde
- I want to choose between several games.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Homepage | Look for information on how to select a game | See welcome message | Works as expected |
| Header | Click link to select a game | User is brought to appropriate page | Works as expected |
screenshot
- I want to easily understand the rules of the different games.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Clear colour scheme | Observe screen for possible interractions | Notice interactive elements distinct from background | Works as expected |
Screenshot
Screenshot
Screenshot
- I want clear feedback when I win or lose a game.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Visual feedback from game systems | Win/Lose game | Get clear feedback | Works as expected |
| Win/lose counters | Look for score counters | Find counters at bottom of screen | Works as expected |
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
- I want to be able to play the games on any device.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Responsive Design | Load website on mobile device | Content scales appropriately | works as expected |
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
- I want to be able to get in touch with the developer.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer | Click contact link | Navigate to contact page | Works as expected |
| contact page | Navigate to contact page | Find contact form | Works as expected |
Screenshot
Screenshot
- I want confirmation that I filled out the contact form correctly.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| contact page | Fill out contact form | Receive confirmation | Works as expected |
Screenshot
- I want the user to be able to choose between Rock Paper Scissors, A quiz and a Hangman game.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Homepage | Look for information on how to select a game | See welcome message | Works as expected |
| Header | Click link to select a game | User is brought to appropriate page | Works as expected |
screenshot
screenshot
screenshot
screenshot
- I want the user to easily understand the different games.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Clear colour scheme | Observe screen for possible interractions | Notice interactive elements distinct from background | Works as expected |
Screenshot
Screenshot
Screenshot
- I want my game to be fully responsive and provide feedback
|Visual feedback from game systems|Win/Lose game|Get clear feedback| Works as expected| |Win/lose counters|Look for score counters|Find counters at bottom of screen|Works as expected|
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
- I want the user to not have to use the back button when they receive a 404 error.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Custom 404 page | Navigate to non existent url | Display custom 404 page | Works as expected |
screenshot
- I want user to be able to send me a message and provide feedback.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer | Click contact link | Navigate to contact page | Works as expected |
| contact page | Navigate to contact page | Find contact form | Works as expected |
Screenshot
Screenshot
- Currently the form will allow submission if all fields are filled out and the value of the email field resembles an email adres: [abcdef]@[abcdef]. This allows for incomplete/incorrect email adresses to be used.
- Possible solution: Implement actual validation to confirm the entered email adress.
The website was deployed using GitHub Pages by following these steps:
- Go to the GitHub repository and navigate to the Settings tab.
- Scroll down and select Pages in the menu on the left.
- For the source select Branch: main
- The page will refresh after some time and a message wil be displayed: "Your site is published at https://g-milzink.github.io/CI_PP2_GS/
You can for fork the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right hand corner
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory to be
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
- All logos and images created by G.Milzink
Code to send email from form using emaijs taken (and adapted) from tutorial:
- "Contact Form with Email Js | Send Emails using JavaScript through Email Js | Email Js Tutorial"
- by ALTERCODES
- https://www.youtube.com/watch?v=5EZsRnJpUNU&t=1s&ab_channel=ALTERCODES
I would like to take the opportunity to thank:
- My mentor Mo Shami for his feedback, advice, guidance and support.
- My partner Geertje van der Zalm for her support, inspiration and patience.
- My mother Anne Rijsdijk and her husband Mickel Pereira for helping me persue this dream.
- Anyone who spends time on the internet making tutorials, awnsering questions or otherwise helping others to learn.