The Last Wordbender / Anagram Atlantis

This web application is for a series of fun and interactive word games. An immersive experience is created by tying the game in with a narrative around Ayo, a mysterious figure of unknown origin titled as "The Last Wordbender".

User experience

User Stories

As a site owner, I want the game to be visually appealing to attract visitors to the site to play the game.
As a site owner, I want the game to be sufficiently challenging to provide a challenge to the site users and a rewarding experience.
As a site owner, I want the game to be educational and mentally stimulating to provide a valuable experience to the site users.
As a site user, I want the game to be interactive and provide an enjoyable experience.
As a site user, I want the game to be challenging and provide a rewarding experience.
As a site user, I want to be able to achieve a score so that I can compare my score to others.

Strategy Plane

The goal of the web application is to provide a series of challenging word games to the user to provide a challenging and rewarding experience to the site users. The first word game to be released is an anagram game which will challenge the user to provide the correct word from a scrambled version of the word provided by the game.

The goal for the visitors of the web application is to enjoy the word games provided and to strive to achieve the highest score possible.

Scope Plane

The landing page will provide navigation to the word games.

The first word game to be released and developed is Anagram Atlantis. Site users will be able to play an interactive anagram word game and test themselves at different difficulty levels.

Structure Plane

The landing page will present the various word games and be the first page the site users interact with.

Once the Anagram Atlantis game is selected, it will take you to a home screen for the anagram game. Site users will be able to select sound on and off, select difficulty level, find out how to play the game and launch the start of the game when they are ready.

The game will provide different level of difficulty depending on whether easy, medium or hard is selected.

Skeleton Plane

In the gameplay, there will be a 30 second timer will be provided for each anagram and users will have to enter the right answer into the input field and submit their answer. If the answer is correct then this will add to their score and there will also be additional points awarded depending on how quickly the question is answered.

The Anagram Atlantis home page will have modals that will appear on interaction showing the users high scores and explaining how to play the game.

Surface Plane

Colour scheme

The colour scheme of the landing page is grey, black and orange which provide a contrast.

The colour scheme of the Anagram Atlantis game is blue, purple and white which are complementary.

Typography

The font used is Fondamento from Google Fonts.

Imagery

There is no significant imagery used throughout the website.

The landing page background is dark and plain representative of the unknown origin of the character, the Last Wordbender. In the Anagram Atlantis navigation screen and gameplay screen then a underwater background is used with imagery of statues to represent the underwater realm of Yemoja.

Wireframes

Landing Page Wireframe - Original Updated
Anagram Start Game Screen Wireframe - Original Updated
Game Play Screen Wireframe - Original Updated
High Scores Screen Wireframe - Original Updated

Features

Responsive and functional on all device sizes
Interactive

Technologies Used

HTML5
CSS3
Javascript

Frameworks, Libraries and Programs Used

Bootstrap 4.5.2 - Bootstrap was used to assist with the styling and responsiveness of the website
Git - Git was used for version control by utilising the Gitpod terminal to commit to Git and push to Github.
Github - Github was used to store the project code and to host and display the project in Github Pages.
Balsamiq - Balsamiq was used to create the wireframes to provide a guide for the design.

Testing

The W3C Markup Validator and W3C CSS Validator were used to validate every page of the project to avoid any syntax errors.

W3C Markup Validator - issues on anagram_atlantis.html and issues on index.html page.
W3C CSS Validator - issue on style.css file

Beautifytools.com utilised to validate Javascript code for each page:

User Stories Testing

As a site owner, I want the game to be visually appealing to attract visitors to the site to play the game.

On landing page options are clear and stand out with the anagram game option being a contrast to the darker theme of the landing page. The anagram game home screen has bold and vibrant colours which are appealing.

As a site owner, I want the game to be sufficiently challenging to provide a challenge to the site users and a rewarding experience.

There are 3 difficulty levels the user can select from in the anagram home page. The hard difficulty is challenging and even as the creator of the anagrams going back in after some time not looking at those anagrams and trying to solve them was a challenge.

As a site owner, I want the game to be educational and mentally stimulating to provide a valuable experience to the site users.

The game provides a wide variety of words and definitions for the user to learn through solving of the anagrams.

As a site user, I want the game to be interactive and provide an enjoyable experience.

Transitions in and out between the anagram home game and gameplay screen provide an interactive experience. The game is challenging and going back to try and get all the anagrams provides an enjoyable experience.

As a site user, I want the game to be challenging and provide a rewarding experience.

There are 3 difficulty levels the user can select from in the anagram home page. The hard difficulty is challenging and even as the creator of the anagrams going back in after some time not looking at those anagrams and trying to solve them was a challenge.

As a site user, I want to be able to achieve a score so that I can compare my score to others.

Upon finishing the game, you are given a score and the amount of anagrams you got right. In future features there would be a high scores and leaderboard functionality to enable more interactive comparison of high scores between users.

Interactive Testing

Selected the different difficulty levels and checked it was showing me the anagrams from the relevant set of anagrams for that difficulty
Clicked start game and checked it would transition to the gameplay screen.
Click home button to check it would take me back to the anagram home page.
Once the game was starting, I clicked restart button to check it would restart the game.
Clicked start game and saw the timer started and that when timer went to 15 seconds it went to yellow and when it went to 5 seconds it went to red. Also upon the next anagram it was reset back to green.
Completed the game and checked that the end of game pop up appeared and gave the score and number of correct anagrams.
Checked the score and number of correct anagrams was right by going through multiple runs of the game and answering differing amounts of anagrams right or wrong.

Further Testing

The game was tested on Google Chrome, Safari and Firefox.
The game was tested on laptop, Iphone and Samsung Galaxy S8.
A large amount of testing was done to ensure all links across pages are working correctly.
A friend, who is a fullstack developer, was asked to review the site and documentation to point out any bugs or user experience issues.
Feedback and testing provided by friends and family.

Fixed Bugs/Issues

I fixed an issue where if users used capital letters in their answer then it was being considered wrong by the game logic. I utilised .toLowerCase() function to resolve this issue.
I fixed an issue where users would input their answer and press enter but the text field wouldn't clear. I created function clearInput() to resolve this.

Known Bugs/Issues

Using Lighthouse report found that performance is only rated a 76.
There is a known issue where if you finish the game then it doesn't restart the game subsequently and you have to refresh the page.
There is a known issue where the game only goes through nine anagrams that you have to answer instead of the intended ten. Issue to do with the updating of the anagramCount being duplicated by unclear from review on how to resolve.

Future Features

If given more time and further development of skills then I would suggest these features to be added:

The main future features is to develop and release the other three word games: Crossword Cornucopia, Hangman Heights and Riddle Rapture.
Perform detailed coded and automated testing of the Javascript game logic
Resolve all known bugs and issues
Produce a high score function so that users of the game can see their previous high scores and attempt to beat it to add engagement and replayability to the game
Incorporate sound into the game with the ability to turn the sound on and off at the user's discretion
Produce a leaderboard that can store the highest of an user's score and compare it to other users to add competitiveness

Deployment

GitHub Pages

The project was deployed to GitHub pages using the following steps:

Log into GitHub and locate the GitHub Repository.
At the top of the Repository, locate the Settings button on the menu.
Scroll down the Settings page until you locate the GitHub pages section.
Under "Source", click the dropdown called "None" and select "Master Branch".
The page will automatically refresh.
Scroll back down through the page to locate the now published site link in the GitHub Pages section.

Forking GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make amendments without changing the original respository using the following steps:

Log into GitHub and locate the GitHub Repository.
At the top of the Repository just above the Settings button on the menu, select the "Fork" button.
You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

Log into GitHub and locate the GitHub Repository.
Click the Code button next to the Gitpod button.
You will get a small dropdown titled Clone with the HTTPS option already selected.
To clone the repository using HTTPS, copy the link.
Open Git Bash.
Change the current working directory to the location where you want the cloned directory to be made.
Type 'git clone', and then paste the link you copied in Step 4.
Press Enter. Your local clone will be created.

Credits

Code

Bootstrap4 - The Bootstrap library used throughout the project to make site responsive using the Bootstrap Grid System.

Media

Written Content

All written content produced by developer.

Acknowledgements

My Mentor for helpful feedback.
Code Institute tutors Johann and Michael for technical assistance on Javascript code.
Feedback from Adnan Ahmed "AAAdnan".
Feedback from Tim Davey

code-institute-submissions / the_last_wordbender_ms2_project Goto Github PK

the_last_wordbender_ms2_project's Introduction