The aim behind this project is to demonstrate my skills in the following areas:
-
Design, develop and implement a dynamic Frontend web application using HTML, CSS and JavaScript.
-
Implement Frontend interactivity, using core JavaScript, JavaScript libraries and/or Application Programming Interfaces (APIs).
-
Test an interactive frontend web application throughout the development, implementation and deployment stages.
-
Deploy an interactive Frontend web application to a Cloud platform.
-
Demonstrate and document the development process through a version control system such as GitHub.
-
-
-
As a first time visitor, I want to be able to clearly understand the purpose of the site.
-
As a first time visitor, I want to be able to understand the rules of the game.
-
As a first time visitor, I want to play the game.
-
-
- As a returning visitor, I want to be able to play a different character.
-
- As a frequent user, I want to be able to see my high score.
-
-
-
#fafafa
-
#555555
-
#660000
-
#910000
-
#850000
-
#146600
-
#f4df5e
-
These are the main colours used throughout the project, and contrast was checked between the different colours using a Contrast Grid.
-
- Two fonts are used throughout the project, Acme is used for all main text and buttons. With Rock Salt being used for headings. Sans Serif as the fallback font in case for any reason the font is not being imported into the site correctly.
-
- Imagery is especially important in this project, the log is designed to be inviting and also depicting what the game is based around. The background image for each section was chosen because it offers a nice theme and does not distract the user from the games main components. On larger screens the body has a more complex background, chosen to bring some colour to the page, while still not distracting the user from game elements, and helps tie the whole theme together.
To organize and streamline the development process, I created wireframes for this project, to help me during the development process and to prevent scope creep.
Below are links to each wireframe page of the project, created to cover both Mobile and Desktop versions.
- Responsive on all device sizes
- Interactive elements
-
- Font Awesome was used for button icons, specifically on audio control elements. These icons were used for aesthetic and UX purposes.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the projects code after being pushed via Git.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
Testing has been documented separately, please see the Testing documentation linked below:
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), 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.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with 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 URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
- All code was written and validated by the developer
-
Boss and Player character images from OpenGameArt:
- "Cute Boss Monsters" by Justin Nichol licensed CC-BY 3.0, CC-BY 4.0.
-
Music from OpenGameArt:
-
Battle Theme A - "The Battle Of Darkness" by Fato_Shadow licensed CC-BY 3.0. CC-BY-SA 3.0, GPL 3.0 GPL 2.0.
-
Battle Theme B - "Orchestral Battle Music" by Zefz licensed CC-BY-SA 3.0 GPL 3.0.
-
Battle Theme C - "Battle in the winter" by Jobromedia licensed CC-BY 3.0, GPL 3.0, CC-BY 3.0.
-
Battle Theme D - "Colossal Boss Battle Theme" by Matthew Pablo licensed CC-BY 3.0.
-
Battle Theme E - "Battle Theme A" by cynicmusic licensed CC0.
-
Death Theme - "Death Is Just Another Path" by Otto Halmén licensed CC-BY 3.0. OGA-BY 3.0.
-
Victory Theme - "Lively Meadow (Victory Song)" by Matthew Pablo licensed CC-BY 3.0.
-
Victory Fanfare - "Lively Meadow (Victory Fanfare)" by Matthew Pablo licensed CC-BY 3.0.
-
-
SFX from OpenGameArt:
- Dice Roll 1-4 - "Wooden dice on wooden table roll" by Wuzzy licensed CC0.
-
Backgrounds from OpenGameArt:
- Body Background - "3 Parallax Backgrounds" by Mobile Game Graphics licensed GPL 3.0.
- Section Background - "Seamless Wall" by GrumpyDiamond licensed CC0.
-
Dice Images from OpenGameArt:
- Dice Side Images - "Dice" by JamesWhite licensed CC0.
-
Dice Logo from PNGITEM:
- Dice Logo - "Transparent Gold Dice Png" by Umatiya Said
-
My Mentor for continuous helpful feedback.
-
Tutor support at Code Institute for their support.