Team Livin' La Vida Yoda's Game entry for the May the Force be with you Code Institute Hackathon, May 2023.
'This Is The Way' is a one-player game for large screens (not currently available for mobile devices - Patience, my young Padawan!) You play Grogu from 'The Mandalorian', facing off against Jawas and collecting frogs before reuniting with The Mandalorian. Click 'Play Music' to get the full 'Mandalorian' experience!
As a user I would like:
- Clear and concise instructions for the game
- To have consistent feedback on my progress throughout the game (e.g. lives remaining)
- To be able to move Grogu intuitively through the map
- A fun and original game experience with Mandalorian music and imagery
- Functionality to turn the music on/off
We took inspiration for our colour scheme from the planet Tatooine (specifically its iconic binary sunset!). Using Adobe Color we extracted a theme based on this image:
The following colours were selected:
Purple
Brown
Orange
Camel
Dusty Pink
We cross referenced the colors using Eight Shapes to test the contrast and made sure we used readable combinations throughout the website.
The Mandalorian font is well recognised for its distinctive strong angles and cutout of the Mandalorian in the character A.
We sourced the font Mandalore from dafonts and then converted the font to a WebFont Kit to allow the font to be used on our site using transfonter.
To make the heading 'pop' we have styled it using the text-shadow attribute in the css which gives the font a bit more depth, and also added text-stroke to provide an outline around the text.
Space Mono is an original fixed-width type family designed by Colophon Foundry for Google Design. It supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages.
'Monospace' is the back-up font for this site.
Imagery used throughout the site is based on Star Wars and the Mandalorian.
Grogu appears in his floating crib in the game.
As the game is based on the planet of Tattoine, the enemies chosen are the Jawa. (Alamite sprites were also created and may appear in future versions of the game)
Grogu's health boost is his favourite snack - a frog.
Sprite.png){kind=icon}
The Mandalorian who appears at the end of the level.
The background for the game was designed to reflect the inside of a sandcrawler vehicle.
Balsamiq was used to create our wireframes in the planning stage.
The site is comprised of two pages, the index page and the 404 page.
When the site is loaded the user will be shown the start overlay which gives the user the option of learning how to play, and a start button to start playing.
Once the player has completed the game, a message is displayed to let them know they were successful!
If the player loses the game, a message will be displayed to let them know the game is over.
Our favicon is an image of Grogu and he is displayed within the browser tabs and bookmarks bar.
- HTML
- CSS
- JavaScript
- Balsamiq - To create the wireframes
- Git - For version control
- GitHub - To store code
- TinyPNG - To compress images
- Favicon.io - To create the favicon
- Am I responsive - For site responsive images
- Shields.io - For badges used in README
- Kaboomjs - Game programming library
- Piskelapp - to create the sprites
- Photoshop - For the creation of sprites and game pieces
The site is deployed at GitHub Pages - This is the Way.
To Deploy the site using GitHub Pages:
- Login (or signup) to Github.
- Go to the repository for this project, kera-cudmore/this-is-the-way.
- Click the settings button.
- Select pages in the left hand navigation menu.
- From the source dropdown select main branch and press save.
- The site has now been deployed, please note that this process may take a few minutes before the site goes live.
A wiki page was created on the repository with instructions on how to fork and clone the project. View Wiki Page Here
These instructions were slightly amended from the amazing instructions on the Hackathon Git Labs Project.
Testing was ongoing throughout the entire build. We utilised Chrome developer tools whilst building to pinpoint and troubleshoot any issues as we went along.
During development we made use of google developer tools to ensure everything was working correctly and to assist with troubleshooting when things were not working as expected.
we utilised the console in the developer tools to work through small sections of JavaScript and ensure that the code was working, and also to troubleshoot where issues were.
W3C was used to validate the HTML on all pages of the website. It was also used to validate the CSS.
jshint was used to validate the JavaScript.
Thank you to the Code Institute and their Hackteam for putting on these amazing events, and to our families who put up with us disappearing for a few days to code like mad!