Decrypt
Developer: Arron Beale
Table of Content
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
Project Goals
The goal of this project is to create a challenging and fun word guessing game.
User Goals
- To play a chance puzzle where you guess the word.
- To have a limited number of attempts determined by difficulty level.
- To be able to chhose a difficulty level.
- Replayable, fun and possibly addictive.
Site Owner Goals
- Provide a challenging and fun game.
- Provide various levels of difficulty to the player
- Provide an option for the player to contact.
- Provide compatability for different screen sizes.
User Experience
Target Audience
- Players with an interest in puzzle style games.
- Players who would like a challenge.
- Players who wish to pass the time.
- Players who enjoy chance games.
User Requirments and Expectations
- Accessibility and responsiveness.
- Controls to start and stop the game.
- A score for the player.
- A rules section to view game rules.
- Intuitive gameplay.
- An option to contact.
- An option to change difficulty.
User Stories
Player
- As a player, I would like to know how to play.
- As a player, I like to choose a difficulty.
- As a player, I would like to see my score.
- As a player, I would like it minimal, no overload on screen.
- As a player, I would like it to be fun.
- As a player, I would like it to be challenging.
- As a player, I would like replayability.
- As a player, I would like a variety of words to guess.
- As a player, I would like to see how many attempts I have.
Site Owner
- As the site owner, I would like the game to be challenging and fun.
- As the site owner, I would like a simplistic design.
- As the site owner, I would like different device size compatability.
- As the site owner, I would like a contact form.
- As the site owner, I would like to provide difficulty levels.
Design
Design Choices
The design I chose was an arcade feel as it was a game, I wanted to make the player feel like they were in an arcade. This alongside the background audio which the player can toggle on and off I hope achieves this aim.
Color
The colors I went with were green, white and black to match with the arcade background imae specifically the green neon lights in the image.
The black header and footer were chosen as arcades are dark places around the lights of the machines and the white text for good contrast.
The green I chose was a slightly different shade from the below image, rgb(85, 212, 53).
Fonts
The chosen font I decided on was Montserrat and sans-serif as a backup. Montserrat I felt gave the right character to the pages as I did not want any font that would take attention away from the actual game.
Structure
The structure of the site is built to give the game the primary focus, upon landing on the page you are welcomed by the game. This allows players who came to the site to play the game to start playing immediatly without the need to navigate unnecessarily.
- Home page lands the player directly to the game welcoming them and ready to play.
- Contact page has a feedback / contact form for players to leave feedback or get in touch. This is linked to the creators Gmail and all fields are required.
- 404 page is present for any navigation errors by the user that will allow them to return to the home page.
Wireframes
My original concept was a single page that would house everything such as the contact form, rules. It would have a countdown alongside the attempts. As the project advanced I removed the countdown as I began to feel it was unnecessary.
Wireframe Images
Technologies Used
Languages
- HTML
- CSS
- JavaScript
Frameworks and Tools
Features
There are currently 15 features across the deployed site.
Game
- Fully responsive on all screen sizes
- Located on home page
- Allows player to guess a five letter word
- User stories covered: 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1,
Logo
Logo
- Fully responsive on all screen sizes
- Located on all pages
- Allows easy navigation to the home page
- User stories covered: 12, 11, 4
Logo
Navigation Bar
- Fully responsive on all screen sizes
- Located on all pages
- Allows easy navigation to the home and contact page
- User stories covered: 12, 11, 4
Navigation bar
Footer
- Fully responsive on all screen sizes
- Located on all pages
- Allows easy navigation to creators LinkedIn and GitHub pages.
- User stories covered: 12, 11, 4
Footer
Welcome
- Fully responsive on all screen sizes
- Located on game page when player lands
- Welcomes player and describes the game
- User stories covered: 12, 11, 4, 1
Welcome
Rules
- Fully responsive on all screen sizes
- Located on game page when player clicks the rules button
- Tells the player the rules of the game
- User stories covered: 12, 11, 4, 1
Rules
Score
- Fully responsive on all screen sizes
- Located at the top of the game screen
- Shows the player their current score
- User stories covered: 12, 11, 4, 3
Score
Play / Stop
- Fully responsive on all screen sizes
- Located at the mid level of the game screen
- Allows player to start and stop game
- User stories covered: 12, 11, 4, 7
Play / Stop
Attempts
- Fully responsive on all screen sizes
- Located at the mid level of the game screen
- Shows the player their current attempts
- User stories covered: 12, 11, 4, 9
Attempts
Correct Word
- Fully responsive on all screen sizes
- Located at the top level of the game screen
- Shows the player the correct word on a win
- User stories covered: 12, 11, 4, 9, 5
Correct Word
Difficulty
- Fully responsive on all screen sizes
- Located at the bottom left level of the game screen
- Allows the player to choose a difficulty level
- User stories covered: 12, 11, 4, 9, 5, 6, 2, 14, 10
Difficulty
Used Letters
- Fully responsive on all screen sizes
- Located at the bottom left level of the game screen
- Allows the player to choose a difficulty level
- User stories covered: 12, 11, 4, 6, 10
Used Letters
Music
- Fully responsive on all screen sizes
- Located at the top right level of the game screen
- Allows the player to toggle game music on and off
- User stories covered: 12, 11, 4, 5,
Music
Contact
- Fully responsive on all screen sizes
- Allows the player to send a message or feedback to the owners Gmail
- User stories covered: 12, 11, 4, 13
Contact
404
- Fully responsive on all screen sizes
- Allows the user to be notified of a navigation error to a non existent page
- User stories covered: 12, 11, 4,
404
Validation
No errors were detected across all validation platforms.
javaScript Validation
Game
Contact
404
HTML Validation
Home
Contact
404
CSS Validation
style.css
Accessibility
Home
Contact
404 Page
Performance
Home
Contact
404
Performing Tests on Devices
The following devices were used in testing
- iPhone 5 (simulated / physical)
- iPad Air (simulated)
- Ipad Mini (simulated)
- Surface Pro 7 (simulated)
- Samsumg Galaxy A20 (Incompatible due to an issue with android virtual keyboard)
Browser Compatibility
The following browsers were used to test the site, no issues.
- Mozilla Firefox - compatible
- Google Chrome - compatible
- Microsoft Edge - compatible
- Inernet Explorer - incompatible
Testing User Stories
-
As a player, I would like to know how to play.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Welcome | Upon landing on the page there is a welcome box to briefly explain it is a word guess game | Once the page loads the welcome screen appears for the player | As expected |
| Rules | On the home page click the rules icon which is a question mark | Rules screen appears which contains the game rules for the player | As expected |
Images
-
As a player, I like to choose a difficulty.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Difficulty buttons | On the lower right there are three difficulty buttons, click button to choose difficulty | Clicking each difficulty will give the associated attempts, easy x 10, medium x 8, hard x 5 | As expected |
| Difficulty buttons | When game starts difficulty is hidden to stop player refreshing attempts mid game | Click start game, difficulty menu should disappear during game | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like to see my score.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Score | At the top of the game screen the score is displayed, as you win a round it will increase by one | Correctly guess the word and win, score increases by 1 | As expected |
| Score | At the top of the game screen the score is displayed, as you lose a round it will reset to zero | Use all attempts and lose, score is reset to zero | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like it minimal, no overload on screen.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Play / Stop | Click play button to start game, click stop icon to stop game | Game should start when play is clicked, game should end when stop is clicked | As expected |
| score | As you win or lose score will be adjusted, score area kept to a minimum | score increases on win, resets on lose | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like it to be fun.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Correct Word | Each round will generate a new five letter word from a list of the fifty most common five letter words in the English language, press play | A new word is generated for the player to guess | As expected |
| Used Letters | As the player uses an incorrect letter it is recorded in the used letters box, guess an incorrect letter | Incorrect letter should display in the used letters box | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like it to be challenging.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Difficulty buttons | Choose desired difficulty | If player chooses easy they will get ten attempts, medium they get eightr attempts and hard, five attempts | As expected |
| Attempts | limitewd number of attempts to guess | Choose a difficulty, play the game and incorrect guess will deduct an attempt, when it hits zero player loses | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like replayability.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Play / Stop | Play button will start a new game with a new word | Press play button and a new game will begin with a new word to guess | As expected |
| Difficulty buttons | Choose a desired difficulty to make the challenge easier or harder | Difficulty should increase or decrease depending on chosen difficulty | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like a variety of words to guess.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Correct word | Each game will generate a new word from a list of the most common five letter words | Start game, new word should generate | As expected |
| Future Feature | More words will be added to the word list in the future | Future Feature | Future Feature |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As a player, I would like to see how many attempts I have.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Attempts | As game progresses attempts will be visible on game screen | Play game, if a guess is wrong, attempts will decrease | As expected |
| Difficulty buttons | Choose a difficulty | Attempts will adjust to the selected difficulty | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As the site owner, I would like the game to be challenging and fun.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Difficulty buttons | Choose desired difficulty | If player chooses easy they will get ten attempts, medium they get eightr attempts and hard, five attempts | As expected |
| Attempts | limited number of attempts to guess | Choose a difficulty, play the game and incorrect guess will deduct an attempt, when it hits zero player loses | As expected |
| Game | Load into home page, find game and close welcome screen. Begin game | Game begins and player can now play | As expected |
Images
-
As the site owner, I would like a simplistic design.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Game | Visit home page and find the game | Find game with a simplistic minimal design to avoid any screen overload | As expected |
| Contact | Visit contact page and find the contact form | Find contact form with a simplistic minimal design to avoid any screen overload | As expected |
Images
-
As the site owner, I would like different device size compatability.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Navigation Bar | Responsive for all screen sizes greater than 293px x 553px | All item should be visible | As expected |
| Footer | Responsive for all screen sizes greater than 293px x 553px | All item should be visible | As expected |
| Welcome | Responsive for all screen sizes greater than 293px x 553px | All item should be visible | As expected |
| Game | Responsive for all screen sizes greater than 293px x 553px | All item should be visible | As expected |
Images
-
As the site owner, I would like a contact form.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact | Use navigation bar and click contact, fid contact form and submit name, email and message | This will send message to site owner via contact form | As expected |
| Footer | Social media links can be used as an alternative to contact form to get in touc with site owner | Links will bring you to site owners linkedIn and HitHub pages | As expected |
Images
-
As the site owner, I would like to provide difficulty levels.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Difficulty buttons | Choose desired difficulty | If player chooses easy they will get ten attempts, medium they get eightr attempts and hard, five attempts | As expected |
| Rules Button | Click on rules button, rules will be displayed explaining the difficulty levels for the player | Rules screen will appear | As expected |
Images
Bugs
| Bug | Fix |
|---|---|
| Used letters not wiping on new game | Function was not created correctly, modified function and bug was then fixed. |
| Opening guess correct, score not increasing. | I had to adjust the location of the code to check if guess was correct and it then began increasing the score |
| Attempts not resetting after game. | I had to add a function to check which mode was true and it would reset attempts accordingly |
| Correct letters from previous game carrying to new game. | Upon win I set startGame function to be called twice which wipes the letters carrying over. |
| Player could reset their attempts mid game | When game begins the difficulty buttons are hidden to stop player resetting attempts |
Deployment
The website was deployed to GitHub Pages via the following:
- From Github repository select settings
- Select pages from the left menu
- Select the master branch
- When the page refreshes you will see a message to notify you the site is now published
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
- 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
Media
- Audio track "Cyberpunk Street" provided by Ansimuz via soundcloud https://soundcloud.com/ansimuz/cyberpunk-street / www.patreon.com/ansimuz
- background image from Joey kwok @spideyjoey, https://unsplash.com/@spideyjoey
Code
- Fonts provided by - Google Fonts
- Font Awesome for the icons used on this project
Acknowledgements
Special thanks to the following:
- Code Institute for providing this learning platform.
- My Mentor Mo Shami for the valuable guidance and advice.
- CI Slack Community for assistance in any help or queries asked.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent