By Melody Lisa.
This is the documentation for Into the Woods - interactive javascript game. The site has been built using HTML5, CSS3 and Javascript for the Milestone 2 project for Code Institute's web development diploma.
- User Experience (UX)
- User Interface (UI) Design
- Features
- Future Implementations
- Accessibility
- Technologies Used
- Deployment & Local Development
- Testing
- Credits
This project was built as a milestone project on my Diploma in Web Application Development with Code Institute as a learning tool for interactive frontend development and my first project using JavaScript and so there was no specific client. However, in order to create a more professional product I treated it as a real-world application inspired by my own interest in RPG style gaming and storytelling. The goal was to create an interactive and user-friendly choose your own adventure demo for anyone who enjoys a good story and a bit of spooky fun.
- Play a simple adventure game that is fun and engaging.
- Be able to collect multiple endings by replaying the game.
- Create a game that is fun and engaging.
- Design the game to be visually appealing.
- Provide a responsive and accessible website.
- Create seamless interactivity that can't be accidentally broken by the user.
- I want to be able to easily navigate through the game.
- I want to be able to see the different endings I have discovered.
- I want to be able to see which items I have in my inventory.
Taking all of the above into account I decided that there needed to be only one page for the game. This would allow the user to focus on the game and not be distracted by other pages.
- Game Page: This will contain the whole game and will be the only page on the site. The game will be contained within a single container using text nodes to navigate the different parts of the story. The game will have three links above the game container that will allow the user to navigate to the inventory, endings and music.
As well as the main page there will be a custom 404 page that redirects users to the main page if the link is typed incorrectly.
As the site has only one page there will be no navigation route. The links at the top of the page will be used to navigate to the different sections of the game using modals.
All wireframes have been created with Figma.
Into the Woods Desktop Wireframe
Into the Woods Tablet Wireframe
Into the Woods Mobile Wireframe
Into the Woods Modals Wireframe
The wireframes featured here are the final versions of the wireframes. The original wireframes were created with the idea of having multiple game containers for the inventory and achievements sections. After some consideration I decided to use only one container and implement modals for the smaller sections. This would allow for more seamless styling for the game container.
Original Desktop Wireframe
Original Mobile Wireframe
In the original wireframes I wanted to implement a feature that would allow the user to click on the inventory and achievements icons to toggle the content in the secondary container. After some consideration I decided to use modals for these sections instead as it would allow for more seamless styling for the game container and would be more user friendly. Future versions of the site may allow for the achievements to be viewed on a different page completely with more space to play with the inventory section.
Fonts have been imported from Google Fonts.
-
The Pixelify Sans font has been used for the main title along with the main text used for the game. "Cursive" is the fallback font in case the browser doesn't import the font correctly. I chose this style of font as I believe it fits with the theme of the product. Letter spacing has been added to the game text for better readability.
-
The Zen Loop font has been used for the buttons. Sans-serif is the fallback font in case the browser doesn't import the font correctly. I chose this as it is a sleek font that doesn't make the buttons look too busy or bulky when there is more text within the options.
The colour scheme for the site was kept as simple as possible to avoid too much going on with the inclusion of the brown parchment background image. The main game container is black with reduced opacity. Text within the game container, modals and buttons is a silver/grey and text outside of the containers is black. The buttons and nav item hover effects across the game are red to contrast with the rest of the page to make them stand out. The linkedin and github icons have hover effects that change the colour of the icons to match the colours of their respective logos.
Main colour scheme for the site
Colour scheme images made with figma.
Favicon
The favicon for the site is a red circle with a white W. This is a simple design that is easy to recognise and matches the colour scheme of the site. The favicon was created using favicon.io.
Header
The header "Into the Woods" appears at the top of the page in all screen sizes.
Navbar
The navbar contains three icons that can be clicked to view the inventory, view achievements, and toggle music. The inventory and achievements icons open modals that contain the inventory and achievements text nodes. The music icon toggles the music on and off.
Game Container
About Section
Game
Item Specific Options
Endings
Credits
The game container appears in the center of the page and is where the game is played. The game container contains the about section, game, endings and credits text nodes.
-
The start game and about section are the first text nodes that the user can click when the page loads.
-
The game text nodes are where the user will make their choices and potentially collect items that will be shown within the inventory modal during gameplay.
-
An endings text node is opened when the game is completed which will be logged within the achievements modal and the credits text node can be opened from any ending.
Inventory Modal
The inventory modal can be opened at any time during gameplay and does not affect the game. The inventory modal contains the items that the user has collected during a playthrough. This will be cleared every time the user begins a new game as there is a section of the game that shows different options based on the inventory items the player has.
Achievements Modal
The achievements modal can be opened at any time during gameplay and does not affect the game. The achievements modal contains the endings that the user has collected over multiple playthroughs. This is not cleared every time the user begins a new game so that the user can see which endings they have collected.
Mobile View Modal
On mobile the grid layout of the game container is changed to a single column to make the list items easier to view on smaller screens.
Footer
The footer contains the copyright information and social media links. The social media links open in a new tab.
404 Page
The 404 page is a custom page that redirects the user to the main page if they type in an incorrect url.
-
The game text originally featured a typewriter effect that was removed due to the requirement of html within the text nodes. I would like to implement this in future versions of the site on certain text nodes or with refactoring of text nodes.
-
There was a plan early on in development to implement dynamic background images that would change depending on the text node that was being displayed. This was not achievable within the timeframe of the project, but is an option to look into in future versions of the site.
-
Due to the nature of the project I was unable to implement a save feature for the game. This is an option to look into in future versions of the site.
-
Due to the time constraints of the project the game itself is designed as a demo. I would like to implement a full game in future versions of the site.
-
I would like to implement a feature that shows more information about the achievements that the user has collected in future versions of the site. This could be done by adding a tooltip with some information about the ending when the user hovers over the achievment within the modal.
-
At this stage of development the 404 page loads only when the user types in an incorrect url to the main page. I would like to implement a 404 page that loads if the user clicks on any broken link within the site, including the modals.
-
After testing with accessibility tools I found that every new text node that is loaded, the screen reader will read the entire page again. I would like to implement a feature that will only read the new text node when it is loaded in future versions of the site.
Alternative text has been included for all images across the site.
Aria labels have been included for all links across the site with modals labelled by their headings.
The colours across the site have been kept simple with black text over the light parchment background and light grey text over the black game container. The buttons have a red background with light grey text to contrast with the rest of the page. The light grey text has been chosen over pure white to reduce harshness on the eyes while also maintaining a high contrast ratio.
The fonts used across the game have had letter spacing added to improve readability.
- HTML
- CSS
- Javascript
-
Bootstrap V5.3 - The framework for the website. Additional CSS styling was also implemented in style.css.
-
favicon - To create the favicon for the site.
-
Figma - For wireframes and other graphics in readme.
-
Font Awesome - For the iconography on the website.
-
Git - For version control.
-
Github - To save and store the files for the website.
-
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
-
JS Hint - To check the javascript code for errors.
-
Google Fonts - To import the fonts used on the website.
-
Pexels - For background image.
-
Pixabay - For music.
-
Red Ketchup - To convert background image to webp format.
-
Samsung Talkback - To test accessibility.
-
UI.dev - To show the site on a range of screen sizes.
-
W3C Markup Validation Service - To validate HTML and CSS code.
Github Pages was used to deploy the live website. The instructions to achieve this are below:
- Log in (or sign up) to Github.
- Find the repository for this project, into-the-woods.
- Click on the Settings link.
- Click on the Pages link in the left hand side navigation bar.
- In the Source section, choose main from the drop down select branch menu. Select Root from the drop down select folder menu.
- Click Save. Your live Github Pages site is now deployed at the URL shown.
To fork the into-the-woods repository:
- Log in (or sign up) to Github.
- Go to the repository for this project.
- Click the Fork button in the top right corner.
To clone the into-the-woods repository:
- Log in (or sign up) to Github.
- Go to the repository for this project.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Please see testing.md for all testing elements of this site.
-
Bootstrap: Code from this page was used and adapted to create the modals.
-
Math With Crab: Code from this project was used and adapted to create the music functionality.
-
Web Dev Simplified: Youtube: This walkthrough was used and adapted to create the game functionality.
- ChatGPT: Used to generate content for the game.
- Melody Lisa: All other content created by the developer.
-
Pexels: Used to source the background image for the site.
-
PixaBay: Used to source the music for the site.
-
UI.dev: Used to generate images that showcase the responsive design within the readme file.
-
Jubril Akolade - Mentor: For the encouragement and providing great insights into building my project.
-
Iris Smok - Cohort Facilitator: For hosting informative standup's and providing a great class atmosphere.
-
Irene Neville - Cohort Facilitator: For taking over the cohort during the final stages of the project and providing great insights into building my project.
-
Class June 2023: Everyone in my class channel on slack who is involved with the stand ups and group chat for contributing to the great atmosphere and supportive environment.
-
The wider slack community: For quick responses to various issues and questions I had at all stages of the project.
-
Friends and Family: For helping me to test my site on various devices and provide feedback.