Giter VIP home page Giter VIP logo

mp2-1's Introduction

Bullmastiff Memory Game

Devices picture This page has been created for the needs of my second milestone project as a Full Stack software developer student of the Code Institute.


Table of Contents

  1. UX

  2. Features

  3. Wireframes

  4. Technologies used

  5. Testing

  6. Deployment

  7. Credits


UX

This game is meant to be fun, but also develop your memory skills at the same time. Mostly intended for children, but people of all ages can play it. More advanced players can start at more difficult levels, and enjoy themselves while giving their memory a little bit of a workout.

The following user stories have been identified:

  1. As a user, I want the home screen to be visually appealing, making me want to try the game.
  2. As a user, I want to be able to start the game easily.
  3. As a user, I want to be able to choose a difficulty level.
  4. As a user, I want to be provided with instructions on how to play the game.
  5. As a user, I want to be able to restart the game without going back to the home page.
  6. As a user, I want to know if I lose or win the game.
  7. As a user, I want to have fun.
Back to Top

Features

Existing Features

Home Page

  1. Section "CHOOSE GAME LEVEL" where you can pick a level of difficulty. There are three levels: "EASY", "MEDIUM" and "HARD". All of them will take you to a different page where you can start the game after clicking on "CLICK TO PLAY" or "BACK TO CHOOSE GAME LEVEL" to go back and pick a different level.

  2. Section "How To Play" will toggle after clicking on the instructions.

Game Page

After clicking "CLICK TO PLAY" the game starts. You have the option to go back to "CHOOSE GAME LEVEL"by clicking the button "BACK" or "RESET" to start from the beginning. Every page has two music buttons: "ON" and "OFF".

Back to Top

Wireframes

Desktop index.html

Desktop index16.html

Desktop index20.html

Desktop index24.html

Ipad index.html

Ipad index16.html

Ipad index20.html

Ipad index24.html

Mobile index.html

Mobile index16.html

Mobile index20.html

Mobile index24.html

The wireframes were made using Moqups

Back to Top

Technologies Used

Language

  • HTML - standard language used to create this page.
  • CSS - standard language that describes the style of HTML.
  • Javascript - standard language for game functions.
  • Bootstrap CDN - used as the core structuring layout for the application, ensuring mobile-first design and screen size fluidity.
  • Github - used to host the repository.
  • JQuery - used to simplify DOM manipulation.

Tools Used

  • Google Fonts - to style the website fonts.

Testing

The project was tested on development tools in Google Chrome and the responsiveness of mobile devices and Ipads was also tested.

  • Moto G4
  • Galaxy S5
  • Pixel 2
  • Pixel 2XL
  • Iphone 5/SE
  • Iphone 6/7/8
  • Iphone 6/7/8Plus
  • IphoneX
  • Ipad
  • Ipad Pro
  • Surface Duo
  • Galaxy Fold

The first of the testing steps was on W3C Markup Validation and W3C CSS validation with no errors found.

The second testing step was http://ami.responsivedesign.is/, which has been used to see how the site performs on different devices and their viewports. All pages, links, icons performed as expected on all devices. I also used it to create the all-devices.jpg at the top of this Readme file.

The third step was testing by the Slack community, my mentor from the Code Institute and my friends and family.

Testing consists of finding any errors that could reveal incorrect operation of the website during its use. The website was also tested on private mobile devices like Iphone 7, Samsung A20 and Ipad 7.

All problems related to the functioning of the site have been resolved.

Back to Top

Deployment

My website is hosted on GitHub Pages, follow the instructions:

GitHub Pages Navigate to my Github repository - https://github.com/Maras00/MP2 Click on the settings tab at the top of the page. Scroll down to the GitHub Pages section. Change the source to master branch. After selecting master branch the page will refresh. Scroll down to the GitHub Pages section and a green box saying "your site is published at" will appear. Click the link to go to the published website.

You can view the deployed website here - https://maras00.github.io/MP2/

Git Clone Navigate to my Github repository - https://github.com/Maras00/MP2 Click the green drop down that says clone or download. To clone with HTTPS copy the URL in the box. https://github.com/Maras00/MP2.git Open up your preferred IDE (Integrated Development Environment) Change the directory to the location you want the clone to be made. Type git clone and then paste the copied URL from step 3. Press Enter and your local clone will be created.

Back to Top

Credits

Content

Media

  • The images for game cards were copied from Google Gallery
  • The image on Home Page is from my own gallery.
  • The sounds were download from Sound1,Sound2
  • Music was downloaded from Music

Acknowledgements

Back to Top

mp2-1's People

Contributors

maras00 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.