Marios Reboot

Introduction

Our mission for this project was to celebrate the great pixel games of old. We would do this by giving the user the chance to relive play a version of the most favourite pixel game out of all of them in Super Mario.

Contents

• Introduction
• UX
  • Colour Scheme
  • Typography
• User Stories
• Wireframes
• Features
• Tools & Technologies Used
• Testing
• Agile Development Process
• Credits

UX

User Experience

Our platform offers users the chance to relive the favourtie pixel game in playing a version of Super Mario. The user gets the chance to really enjoy their gaming time, relive the feeling of playing their old games, beat their own score and just enjoy gaming.

The Ideal User

• Somone who enjoys retro gaming.
• Someoe who enjoys SUper Mario.
• Somone who enjoy gaming and wants to have fun.

Site Goals

• To provide the user the opportunity to play a version of Super Mario.
• To provide the user the chance to enjoy themselves playing retro games.

Colour Scheme

We've used CSS for the colours and used colours from the original super mario game to make it feel authentic.

we've used coolors.co to generate our colour palette.

Typography

This was borrowed from the original super mario retro theme.

User Stories

Landing Page

• As a user, I should be able to figure out what a site is about in 7 seconds.

Wireframes

To follow best practices, wireframes were developed to help with development. We've used Balsamiq to design our site wireframes.

Desktop:

Landing Page	Game Page	Memory Game Page

Contact Page	About Page

Back to top

Features

• Landing Page

  • This page clearly welcomes you to the website. You will also realise what is the purpose for this site.

  

• Mario Game Page

  • This page takes the form of the game. Here the user has the chance to play the mario game.

  

• Memory Game Page

  • This page takes the form of the memory game. Here the user has the chance to play the memory game.

  

• About Page

  • This page gives the users the chance to see who the Mario Minions are.

  

• Contact Page

  • The contact page is for users to submit messages about anything to do with the Mario's Reboot game to the developers.

  

• Thank You Page

  • The thank you page is to say thank you to users for getting in touch.

  

• Navbar

  • Navbar is present so that the user can navigate around the site.

  

• Footer

  • Footer is present at the bottom of the page and has links to external pages.

  

• Error Page

We have included error handling for error 404 pages:

• Images

We have included the following images in the project:

Image	Screenshot
About Title
Title
Contact Link
Developers Link
Homepage Link
Start Link
Bricks

Back to top

Tools & Technologies Used

• used for version control. (git add, git commit, git push)
• used for secure online code storage.
• used as a cloud-based IDE for development.
• used as a local IDE for development.
• used for the main site content.
• used for the main site design and layout.
• used for user interaction on the site.
• used for creating wireframes.

Back to top

Testing

Code Validation

HTML

We have used the recommended HTML W3C Validator to validate our HTML files.

Page	W3C URL	Screenshot
Landing Page	url
Game Page	url
Contact Page	url
About Page	url
Thank You Page	url
Error Page	url

CSS

We have used the recommended CSS Jigsaw Validator to validate our CSS files.

File	Jigsaw URL	Screenshot
about.css	url
game.css	url
memory.css	url
reset.css	url
style.css	url

JAVASCRIPT

We have used the recommended JShint Validator to validate our JS file.

File	Screenshot	Notes
loader.js	to follow	to follow
main.js	to follow	to follow
SpriteSheet.js	to follow	to follow

Bugs

Back to top

Agile Development Process

Agile Methodology

Our project uses Agile methodology, a framework that enables us to respond to the unpredictability of building software through incremental, iterative work cadences, known as sprints. This approach fosters adaptability and encourages a rapid and flexible response to change, which is vital in the dynamic environment of software development.

At the start of each sprint, our team engages in sprint planning to set the direction for our upcoming work, involving prioritization of the product backlog to address the most critical tasks first, defining clear sprint goals aligned with project milestones, and assigning tasks based on expertise and workload. Throughout development, we navigate trade-offs between scope, quality, time, and resources to maintain a balance between delivering high-quality work efficiently and managing priorities. Adopting Agile methodologies allows us to remain adaptable and focused, ensuring we meet user needs while striving for excellence.

Through this process, user stories, issues, and tasks were planned, then tracked on a daily basis using the basic Kanban board.

GitHub Issues

GitHub Issues served as an Agile tool.

It also helped with iterations on a daily basis.

scrren shots of open and closed issues here

Collaboration Tools

The team used Slack where we had two meetings per day and to message in for quick collaboration purposes and Github projects to track ideas, User Stories, Bugs and Time plan.

The Team used Slack team channel Canvas to ensure everyone stayed updated on project progress and discussions.

Back to top

Deployment

The live deployed application can be found deployed on GitHub pages.

Deployment to GitHub Pages

This project was deployed on GitHub pages using the following steps:

• From the project's repository, go to the settings tab.

• From the left-hand-menu, select the pages tab.

• Select the Main branch from under the Source section dropdown and click Save.

• After a few minutes, a message will display to indicate a successful deployment and provide a Live link.

Local Deployment

GitHub

First a new reposiotry was created in github then this project can be cloned or forked in order to make a local copy on your own system.

Once the project is cloned or forked, in order to run it locally you will need to use the command 'npm run start' to start the app.

Version Control

For version control the following steps were made:

• If any changes were made to the Gitpod or VS Code project.

• First files were made ready for commit with command - 'git add filename or git add .' second option to add all files.

• To commit the changes using the following command - git commit -m "This is my commit" Note the brief description at the end of the command to make you aware of what changes have occurred.

• To then move the changes to GitHub, use the following command - git push your branch name.

• Create a pull request in GitHub which another member can then approve.

Cloning

You can clone the repository by following these steps:

• Navigate to the repository you choose to clone in your GitHub.

• Clicking on the arrow of the green button named "Code" at the top of the file.

• Then select "Local" then under local select "HTTPS" and then copy that URL.

• Navigate to your code editor and within the terminal change the directory to the location you wish to clone the repository to.

• Type "git clone" and paste the copied HTTPS link from GitHub.

• Press enter and git will clone the repository to your local machine.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Forking

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 owner's repository. You can fork this 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.

• Click the create button, once clicked, you should now have a copy of the original repository in your own GitHub account!

Back to top

Credits

Content

Source	Location	Notes
Mario Code Challenge	JavaScript	Used for learning and inspiration.
Mario Js Vanilla	JavaScript	Used for learning and inspiration.
Super Mario Python	Research	Used for learning and inpiration.
Mario js-dos	JavaScript	Used for learning and inspiration.
Super Mario em js	Research	Used for learning and inspiration.

Media

Source	Location	Notes
Favicon	Favicon	Created by ineedicons
Mario Retro Font	Fonts	Created by mariowiki
canva	Images	canva

Acknowledgements

A big thank you to all fellow team members for their great work:

Team Member	Role	GitHub
Amy	Presentation, Frontent	Github
Fernando	Game Development, Design	GitHub
Meghana	Wireframes, Frontend	Github
Sam	Documentation, Frontend	Github
Vernell	Scrum Lead, Deployment, Project Setup, Epics, Agile	Github

We also used our slack channel canvas to great effeciency for meetings, notes and tables so people were aware of their tasks.

Back to top