Adventure Call

Greetings traveller!

This is a text adventure game similar to Dungeons and Dragons based on scottish tv comedy program maker Limmy's 'Adventure Call' sketch series. The game can bring up different answer options based on what items you have picked up. Can you make it all the way to the end for a special treat?

To go to the live site click here

UX

User Stories

• As a user/player of the game I want to have a fun experience with some pay off at the end.
• As a user/player of the game I want some kind of personalisation of my experience so that I can feel more connected to what is going on.
• As a fan of fantasy/role playing games I want references to the tropes associated with these games.
• As a fan of the original limmy sketch I want to have references to the show so that it will make the game more fun.

See separate Testing.md file for information on how these user stories were tested here

Wireframes

Basic wireframes for this project were created using Balsamiq and you can find a link to the balsamiq project file (right click on the button and save file) here

Wireframes Pictures Repository

Colour Scheme

The colour scheme of brown/grey/gold/black used was based on the Adventure Call logo from Limmy's show. This was used as the logo for the screen and the colours on the screen where influenced by this. Coolors was used to find the exact matches. The brown colour was amended slightly for the buttons to be darkerthan the logo brown and thus create higher contrast. This action created a higher contrast between foreground and background colours to improve accessability from vision impaired users.

The container for the questions was made a slightly darker grey to match the skull used for the death screens.

Features

Welcome Screen

• User is welcomed by Falconhoof. A familiar character for fans of the show.

Name input box

• allows all users to enter their name and returns an error message if no name is entered

The game itself

• Brings up questions and answers for the player based on what items the player is holding and shows how long the game has taken so far in real time. Players answer questions in the hope fo making it to the end of the game without dying.

End Screen

• A final screen with a personalised greeting and an animated treat for any users making it to the end including the time it's taken to complete the game. This screen gives the option to start all over again from the very beginnning.

Timer

• A timer which counts up how long the player has been playing for and displayed the time taken if the player completes the game.

Technologies Used

HTML5 for the structure of the website

CSS 3 for the look of the website

Javascript for the logic of the game. To manipulate the HTML and CSS on the screen.

jQuery To manipulate the HTML and CSS on the screen.

JShint To validate javscript code.

Coolors For help with colours and colours scheme.

PicResize For image formatting.

Webformatter For formatting HTML, CSS and javascript code.

Asana for project management

Balsamiq Wireframes for creating Wireframes for initial visual development

Gitpod for writing and testing code.

GitHub for storing code.

Google Fonts for fonts used in the project.

Google Chrome Development Tools for testing code on various device sizes during development and debugging.

Troy to test website on different device types and sizes

Google Lighthouse for testing code health, accessibility, speed and search engine optimisation

Testing

See separate Testing.md file here

Deployment

Using Github Pages

In the GitHub Repository from the project (https://github.com/markj0hnst0n/AdventureCall)

1. Click the 'Settings' Tab.
2. Scroll Down to the Git Hub Pages Heading.
3. Select 'Master Branch' as the source.
4. The Page will reload 'Settings' again.
5. Scroll to GitHub pages heading and there will now be a clickable link (https://markj0hnst0n.github.io/AdventureCall/)
6. Click this link for the live deployed page

Run Locally

In the GitHub Repository from the project (https://github.com/markj0hnst0n/AdventureCall)

1. Click Clone or Download
2. Copy Git URL from the dialogue box
3. Open your developement editor of choice and open a terminal window in a directory of your choice
4. Use the 'git clone' command in terminal followed by the copied git URL
5. A clone of the project will be created locally on your machine

Credits

Content

Written content by Mark Johnston

Media

Image for page logo found here

Image of Falconhoof for Welcome Screen found at offical bbc youtube channel here

Moonlit Meadow image found here

Cartoon wizard image found here

Ending Fireworks gif found here

Influences

First and forements Limmy the creater of the Adventure Call sketches. Please seek him out if you're not familiar!

The inspiration behind the code of the game is from this youtube video

Debugging vid which helped me massively

Using Nodes in the DOM

Value from textbox input

How to center an absolute element

Hover Effect

let, var, const usage

Adding Event listener for enter key in jQuery

Timer js by Tomasz Bubała found here

Acknowledgements

Thanks to the following people for making the project happen:

• My Mentor Antonija Šimić
• The Code Institute Slack Community specifically SamFixG, Lucyjpjones and Sean Mc for testing the site.
• The Code Institute tutors and instructional material. Tutor Stephen for his pep talk. Tutor Miklos for his perserverance. Tutor Xavier for his excellent resources.
• My Wife Joanna Johnston for her (constructive) criticism and understanding when I lock myself away in the attic for hours on end