Skip to content

jamie2210/CI_MS2_DCG

BranchesTags

Repository files navigation

DC Games

(Developer: Jamie Letts)

Mockup image

Live webpage

This is the website for DC Games, it is designed to be responsive and accessible on all devices. It consists of 2 games, a hangman game, and a multiple-choice quiz. Both games are themed around the animated comic of Batman.

Table of Content

  1. Project Goals
    1. User Goals
    2. Site Owner Goals
  2. User Experience
    1. Target Audience
    2. User Requirements and Expectations
    3. User Stories
  3. Design
    1. Design Choices
    2. Colours
    3. Fonts
    4. Structure
    5. Wireframes
  4. Technologies Used
    1. Languages
    2. Frameworks and Tools
  5. Features
  6. Testing
    1. HTML Validation
    2. CSS Validation
    3. JavaScript Validation
    4. Accessibility
    5. Performance
    6. Device testing
    7. Browser compatibility
    8. Testing user stories
  7. Bugs
  8. Deployment
  9. Credits
  10. Acknowledgements

Project Goals

Primary goal is to provide a user-friendly, fun, and good-looking interactive website which offers the game Hangman and a multiple-choice quiz.

User Goals

  • Play both games that are fun and engaging.
  • Easily find the rules of each game.
  • Easily get in touch via a contact form.

Site Owner Goals

  • Create a website with entertaining games.
  • Create visually appealing designs throughout.
  • Easy navigation throughout.
  • Provide a fully responsive and accessible design.

Developer Goals

  • A clean design that stands out and catches the users attention.
  • A website that responds correctly on all devices where design and effectiveness is not hindered on any device.
  • An easy to navigate website with clear pathways to specific pages such as rules, each game, home, and contact.

User Experience

Target Audience

  • Ages 8 to 12.
  • It is specific to those who have an in interest in DC comics, particularly Batman.

User Requirements and Expectations

  • A simple and intuitive navigation system.
  • Quickly and easily find relevant information.
  • Links and functions that work as expected.
  • Good presentation and a visually appealing design regardless of device used.
  • Easy to follow the games and rules.
  • Simple content that the user can follow and understand.
  • An easy way to contact the developer for feedback.
  • Accessibility.

User Stories

Site User (General)

  1. I want to easily understand the rules of each game.
  2. I want to easily navigate to my chosen game.
  3. I want the games to be fun, enjoyable, and easy to understand.
  4. I want to know how I did at the end of each game.
  5. I want a means to contact the developer and have confirmation the message has been sent.
Hangman
  1. I want to play the game both by clicking the mouse and using the keyboard.
  2. I want to know which letters I’ve used already.
  3. I want to know how many guesses I have left.
  4. I want the gallows image to add on sections of the hangman each time a letter is guessed incorrectly.
  5. I see to my score of wins vs losses.
Quiz
  1. I want to know how much time is left to answer the question.
  2. I want to know which answer is correct if answered incorrectly.
  3. I want to know the answer if I run out of time.
  4. I want to see my score at the end.
  5. I want to easily play again or quit once I have finished.

Site Owner

  1. I want the user to get a genuine feel this is a DC Batman themed site.
  2. I want the user to easily understand and play the games.
  3. I want both games to be fully responsive.
  4. In hangman, the phrases / words are limited, so to increase the difficulty and longevity of the game, the word will not be revealed if guessed incorrectly.
  5. I want the user to be able to contact me for any reason they feel fit.
  6. I want the user to come to a 404 page and be automatically re-directed to the home page should they enter an invalid url.
  7. I want the user to have a link to my work via my Github repositories.

Design

Design Choices

The design has been influenced by the comics like keeping the buttons square and grey to present comments in comic books. Each game has been designed around the colours and personality of the characters in the comics.

Colours

DC uses a specific blue which is used sparingly throughout the website.

Batman colours are predominantly black and yellow.

Both The Riddler and Joker are themed by purples and greens.

Colours Used

Fonts

Google fonts were used to import the ‘Anton’ font used with a sans-serif fallback throughout the website:

I chose this font as it stood out to me as a strong and bold font that represented Batman well. It is also easy to read which is good for the target audience.

Structure

The page is structured in a user friendly and visually appealing way. Upon arriving the user will see a simple display with clear instructions to what the site offers and where to find the rules of each game.

The website consists of four separate pages with rules and result modals:

  • A homepage with a with clear navigation to the games and rules.
  • The Batman Hangman game page
  • The Riddler’s Quiz game page.
  • A contact page with a form that will directly send messages to the developer.
  • Modals with the rules of each game.
  • There is also a 404 page that directs the user back to the home.

Wireframes

Home
Batman Hangman
The Riddler’s quiz
The Rules
Contact
404

Technologies Used

Languages

Frameworks and Tools

Features

The page consists of four pages and eleven features.

Home Page

DC Logo and introduction

  • Upon arriving to the site a welcome modal pops up.
  • It details where to find the games, the rules and contact information.
  • The rules are modals accessed by clicking the '?' symbols.
  • The logo is DC's official logo.
  • User stories covered: 1, 2, 3, 5, 16 & 17.
Intro
Home Page

Navigation Buttons & Character Images (Navigation buttons featured on all pages)

  • Both the Batman and Riddler characters are that of The Batman animated series, which the games are based on.
  • Navigation buttons are featured on all pages; they all have squared edges to represent sections and comments of a comic.
  • Link to each game and the home page.
  • It allows users to easily navigate through the website.
  • The buttons are animated depending on which page they are on, matching the themes.
  • User stories covered: 2, 5, & 16.
Buttons & Characters
Buttons & Characters

Rules Modal

  • Clicking the question mark under the selected character will bring up the rules for that game.
  • User stories covered: 1.
Rules Modal

Footer (displayed on all pages)

  • Featured on all pages.
  • Details who the developer is, a link to Github and contact page.
  • User stories covered: 5, 20 & 22.
Footer

Batman Hangman

Game Function & Game Screen

  • Consists of empty gallows, empty score, and number of wrong guesses left.
  • Letter keys for entry guesses, allows user to use either mouse or keyboard for entries.
  • If the letter is guessed correctly the letter is revealed in replace of the '_'
  • If the phrase is guessed correctly a modal is presented confirming the win with the total number of wins and losses.
  • If the letter is guessed incorrectly the hangman image increases as does the number of wrong guesses.
  • If the phrase is guessed incorrectly a modal is presented confirming the loss with the total number of wins and losses.
  • On pressing a letter, it is highlighted yellow and then greyed out once used, it cannot be used again.
  • Reset button resets the game but keeps track the total wins and losses until page is refreshed.
  • The theme of the game is Batman and The Joker, and all colours, wording and design are based on the animated series.
  • A comical element has been added to the results modal which is light-hearted fun. For each win and loss both characters have 5 different phrases which are randomly selected each time and play on the characters personality.
  • User stories covered: 6, 7, 8, 9 10, 16, 18 & 19.

Win Modal

  • Displays current score, wins v losses.
  • Close Button that resets the game.
  • User stories covered: 4, 10 & 19.

Lose Modal

  • Displays current score, wins v losses.
  • Close Button that resets the game.
  • User stories covered: 4, 10 & 19.
Game Screen
Win Modal
Lose Modal

The Riddler’s Quiz

Game Function & Game Screen

  • Start Button.
  • Navigation buttons.
  • The game is themed in the colours of The Riddler, green and purple.
  • Game modal is presented once start button is pressed.
  • Game consists of a timer, time bar and multiple choice questions the user can click or tab to and press enter to select.
  • When a question is answered correctly it is highlighted in green with a tick icon.
  • When a question is answered incorrectly it is highlighted in black with a cross icon and the correct answer is displayed.
  • At the end of the game the score is tallied and revealed in a modal.
  • A comical element has been added to the results modal which is light-hearted fun. Dependning the score The riddler's phrase will change.
  • User stories covered: 3, 11, 12 & 13.

Results Modal

  • Displays score.
  • Replay button that resets the game.
  • Quit button that refreshes the page.
  • User Stories covered: 4, 14 & 15.
Game Screen
Game Modal
Results Modal

Contact Form Page

  • Allows user to directly contact the developer
  • Alert box pops up when message has been sent successfully.
  • User stories covered: 5 & 20.
Contact Form

404

  • Explains to the user they have landed on an unrecognised page.
  • It automatically returns the user back to the home page after 10 seconds, detailed by a count down.
  • There is also a home button should the user wish to use it.
  • User Stories covered: 21.
404 Page

Testing

HTML Validation

The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with no errors.

index.html results

hangman.html results

quiz.html results

contact.html results

404.html results

CSS Validation

The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. When pasting in my index url 16 Parse Errors are flagged, all linked to Bootstrap as well as 286 warnings.

style.css results

When validating just my own custom CSS file it passes with no errors and flagged three warnings using pointer-events twice used and 1 warning for the google fonts import used.

style.css

JavaScript Validation

JSHint JS Validation Service was used to validate the Javascript files. No significant issues were found. One undefined Variable found in quiz.js for the questions variable used as it's linked to a separate file.

OnClick buttons were flagged as unused, but /* exported */ feature was used to remove the flags as they are called in the html files.

index.js
hangman.js
questions.js
quiz.js
contact.js
404.js

Accessibility

The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors apart from quiz.html that has 3. They are all contrasting errors to which I disagree with, the white on purple to me is perfectly visible and matches the colour scheme so have chosen to leave it as it is.

index.html results

hangman.html results

quiz.html results

contact.html results

404.html results

Performance

Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website. All results scoring 95 or above.

index.html
hangman.html
quiz.html
contact.html
404.html

Performing tests on various devices

The website was tested on the following devices:

  • MacBook Pro
  • iPad Tablet
  • Google Pixel 5
  • iPhone 12

In addition, the website was tested using Google Chrome Developer Tools device toggle option for all available device options.

Browser compatibility

The website was tested on the following browsers:

  • Google Chrome
  • Apple Safari
  • Mozilla Firefox

Testing user stories

Site User (General)

  1. I want to easily understand the rules of each game.
Feature Action Expected Result Actual Result
'?' Icon Click either '?' icon Modal pops up explaining rules of choses game Works as expected
Find Rules

  1. I want to easily navigate to my chosen game.
Feature Action Expected Result Actual Result
Button Click button Takes user to chosen game Works as expected
Find Buttons

  1. I want the games to be fun, enjoyable and easy to understand.
Feature Action Expected Result Actual Result
'?' Icon Click either '?' icon Modal pops up explaining rules of choses game Works as expected
Button Click button Takes user to chosen game Works as expected
In-game Play Games are easy to follow, pleasing on the eye and fun In-game play Work as expected
Score Modal Finish each game Humorous modal pops up displaying score. Works as expected
Find Rules
Find Buttons
Play Hangman
Play Quiz

  1. I want to know how I did at the end of each game, and easily play again.
Feature Action Expected Result Actual Result
Score Modal Finish each game Humorous modal pops up displaying score. Works as expected
Play Again Finish game Close modal, game resets, score is tallied. Works as expected
Hangman Score
Quiz Score Modal

  1. I want a means to contact the developer and have confirmation the message has been sent.
Feature Action Expected Result Actual Result
Email Icon Click Icon Takes user to contact page Works as expected
Find Contact Form

Hangman

  1. I want to play the game both by clicking the mouse and using the keyboard.
Feature Action Expected Result Actual Result
Keyboard Test Use mouse & keyboard Key should highlight when pressed / clicked down then disable after Works as expected
Find Keyboard

  1. I want to know which letters I’ve used already.
Feature Action Expected Result Actual Result
Keyboard Test Use mouse & keyboard Key should highlight when pressed / clicked down then disable after Works as expected
Find Keyboard

  1. I want to know how many guesses I have left.
Feature Action Expected Result Actual Result
Guesses Left Select incorrect key Guess left display increases by one Works as expected
Find Guesses Left

  1. I want the gallows image to add on sections of the hangman each time a letter is guessed incorrectly.
Feature Action Expected Result Actual Result
Gallows Image Select incorrect key Gallows image adds body part Works as expected
Find Gallows

  1. I want to see to my score of wins vs losses.
Feature Action Expected Result Actual Result
Main screen Win or lose game Score is updated Works as expected
Result Modal Win or lose game Score is displayed Works as expected
Find Score
Find Results Modal

Quiz

  1. I want to know how much time is left to answer the question.
Feature Action Expected Result Actual Result
Countdown Timer & Bar Start game Countdown timer and time bar are displayed Works as expected
Find Timer / Bar

  1. I want to know which answer is correct if answered incorrectly.
Feature Action Expected Result Actual Result
Highlight correct answer Select incorrect option Correct answer is displayed Works as expected
Find Correct Answer

  1. I want to know the answer if I run out of time.
Feature Action Expected Result Actual Result
Highlight correct answer Let time run out Correct answer is displayed Works as expected
Find Out Of Time

  1. I want to see my score at the end.
Feature Action Expected Result Actual Result
Quiz Finish Modal Finish Quiz Score is tallied Works as expected
Find Finish Modal

  1. I want to easily play again or quit once I have finished.
Feature Action Expected Result Actual Result
Quiz Finish Modal Finish Quiz Restart and Quit buttons displayed Works as expected
Find Restart / Quit

Site Owner

  1. I want the user to get a genuine feel this is a DC Batman themed site.
Feature Action Expected Result Actual Result
Batman Theme Display pages All colours and imagery are that of DC's Batman animated series Works as expected
Find Theme

  1. I want the user to easily understand how to play the games.
Feature Action Expected Result Actual Result
'?' Icon Click either '?' icon Modal pops up explaining rules of choses game Works as expected
Find Rules

  1. I want both games to be fully responsive.
Feature Action Expected Result Actual Result
Responsiveness Test in google developer Adjusts to each device correctly Works as expected
Find Responsive Home Page
Find Responsive Hangman
Find Responsive Quiz

  1. In hangman, the phrases / words are limited, so to increase the difficulty and longevity of the game, the phrase will not be revealed if guessed incorrectly.
Feature Action Expected Result Actual Result
Score Modal Finish each game Score displayed but he hidden phrase is not Works as expected
Find Score Modal

  1. I want the user to be able to contact me for any reason they feel fit.
Feature Action Expected Result Actual Result
Email Icon Click Icon Takes user to contact page Works as expected
Find Contact Form

  1. I want the user to come to a 404 page and be automatically re-directed to the home page should they enter an invalid url.
Feature Action Expected Result Actual Result
404 Page Enter invalid url 404 page is displayed, countdown timer returns user to home page Works as expected
Find 404

  1. I want the user to have a link to my work via my Github repositories.
Feature Action Expected Result Actual Result
Github Icon Click Icon Takes user to repository page for the game Works as expected
Find Github

Bugs

Hangman

  1. Each time a key on the board selected an incorrect word two mistakes were added instead of one. The checkLetter function was called in both the keydown and keyup event listeners. By removing it in one fixed the issue.

  2. During testing when using some iPhones all the button styling was off. This is down to using default button stlying. To fix I added my own styling to match that of the chrome default.

iPhone Default
iPhone Fix
- This caused more errors, when I added a #000000 color class to the buttons to prevent the blue default as it stopped the default disabled display from working. To work around the issue, I added a 0.5 opacity to the disabled class which fixed the issue as it then clearly indicates which buttons were are disabled. 
        .button-keys:disabled {
            opacity: 0.5;
        }
  1. I really wanted my 'Reset' button to change yellow on 'keydown' like it does with a mouse click, my first attempt isolated the enter to key to only work on the reset button. This had a negative effect on the other buttons and affected accessibility as enter no longer worked on any other buttons. I then ran into issues with the event listeners being constantly active once called on which caused the 'Reset' button to constantly flash yellow if enter was pressed. This was eventually fixed by adding removeEventListener functions if enter is pressed when the reset button was not targeted.
        function removeEventListeners() {
            document.removeEventListener('keydown', keyDown);
            document.removeEventListener('keyup', keyUp);
        }
        if(!keyDownButton || !keyUpButton) {
            removeEventListeners();
            }

Quiz

  1. When the user selected an answer the timer continued to tick down and if it then reached 0 the function was called to display the right wrong or answer, which were already on display as an answer was already clicked. This caused the game to display icons twice and looked messy. It was fixed by adding the clearInterval function to the answerSelected function once one had been clicked, resulting in the timer freezing until the next question button is clicked.

  2. When the user clicked restart the question number was not reset, so the game displayed 10 out 10 questions instead of 1 out 10. To fix this I reset the question number to 1 in the restart function.

  3. Issue with the display not covering the full screen on certain screen dimensions, particularly long / tall iPads in google developer tools. Fixed by adding a specific vh height to the title in media queries.

Media Query commands
        @media screen and (max-width:920px) {
            #hangman-title {
            height: 40vh;
            }
        }

Deployment

The website was deployed using GitHub Pages by following these steps:

  1. In the GitHub repository navigate to the Settings tab.
  2. On the left-hand menu select Pages.
  3. For the source select Branch: main.
  4. After the webpage refreshes automatically you will see a ribbon on the top saying: "Your site is published at https://jamie2210.github.io/CI_MS2_DCG/index.html.

You can for fork the repository by following these steps:

  1. Go to the GitHub repository.
  2. Click on Fork button in upper right-hand corner.

You can clone the repository by following these steps:

  1. Go to the GitHub repository .
  2. Locate the Code button above the list of files and click it.
  3. Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard.
  4. Open Git Bash.
  5. Change the current working directory to the one where you want the cloned directory.
  6. Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY).
  7. Press Enter to create your local clone.

Credits

Images and logos not referenced below are owned or created by the developer.

All images used have a free licence for personal use.

Media

Images taken from Clipartmax;






Images taken from pngimg;



Images taken from Free Vector;


Images taken from Vecteezy;



Images taken from freepik;

Code

  • The Javascript for Sweet Alert email submit response was taken from the Sweet Alert guide.

  • Guidance was taken from this tutorial Useful Prgrammer to add tab answer function to quiz answer selection and question icons.

  • Stack Overflow was used throughout for hints, tips and tricks.

  • w3schools was used for a better undertstanding of set intervals and timers.

  • MDN helped me understand removeEventListeners further.

  • Inspiration and guidance for hangman was taken from Simon Suh hangman Game tutorial on youtube.

  • Inspiration and guidance for a quiz with a timer was taken from Ali Aslan quiz tutorial on youtube.

Acknowledgements

I would like to take the opportunity to thank;

  • My mentor, Mo Shami, for his excellent feedback, advice support and guidance throughout.
  • Tutor support from Code Institute for their swift response.
  • The slack community of coders for immediate and helpful response.
  • WAES College and my Tutor Michael for their support and help throughout.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages