Giter VIP home page Giter VIP logo

macannadev-dinosaur-game.pp2_'s Introduction

Dinosaur Seek

View the live project here.

Dinosaur Seek is a card matching game designed for dinosaur enthusiasts

User Experience (UX)

  • User story

    1. I want to play a game and have fun

    2. I want to learn about dinosaurs

    3. I want to have a score so I can challenge friends

  • Design

    • Typography

      • I have decieded to use the font type Immortal as it has an archaic aesthetic.
    • Images

      • The images have chosen are for the dinosaurs contain text underneatth thme which allows the user to learn whilst playing .
      • The backside of the card images used contains bones which remind people of dinosaurs, in keeping with the theme.
      • The front and back are desingned to ressemble playing cards

Features

  • Timer- The timer has tow purposes, the first is to limit the time the user has to finish the game which creates a challenge and the second is that it is used to generate the users score.
  • Flip counter lets the user know how many flips it takes them to completet the game, this also contributes to the score.
  • Play button- The game will not start until the play button is pressed.
  • Game over- When the timer run out the game is over.
  • Victory- When the user wins they are offered an input to send their to their email.

Languages Used

Frameworks, Libraries & Programs Used

  1. 1001 FONTS:

    • 1001 FONTS were used to download Immortal font and upload it to the the fonts folder.
  2. Git:

    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  3. GitHub:

    • GitHub is used to store the projects code after being pushed from Git.
  4. Tinypng:

    • Tinypng allowed me to compress the images, which allowed the website to load faster, increasing its performance rating.

Testing

Code Validation

The W3C Markup Validator and W3C CSS Validator Services were used to validate the project.

Lighthouse testing

The website was tested for both mobile and desktop in three browsers

Testing User Stories from User Experience (UX) Section

  1. I want to play a game and have fun.

    • The game functions as game we usually play should.

    • The game is challenging, but not too challenging, the user can win and score high with effort.

  2. I want to learn about dinosaurs

    • Each front side contains and image of a different dinosaur.

    • Each front side has a name underneath the image which helps the user remememer their complicated names

  3. I want to have a score so I can challenge friends

    • When the user wins they have the option to enter their email and recive the score they have achieved.They can send this to their frinds as proof of their victory!

Further Testing

  1. Email JS

    • Filled in email field and sent to user.

    • Checked accuracy of score

Deployment

To deploy a website on GitHub Pages, follow these steps:

  1. Go to the repository page

  2. Click on settings icon in the top of the page

  3. Find "GitHub Pages" section

  4. Click on the "Source" dropdown menu

  5. Select "master branch" option

  6. A green success message should appear in the "GitHub Pages" section with the link to the live preview of the project.

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
    • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
  3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
  4. Under "Source", click the dropdown called "None" and select "Master Branch".
  5. The page will automatically refresh.
  6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

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...

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

  1. Log in to GitHub and locate the GitHub Repository
  2. Under the repository name, click "Clone or download".
  3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
  4. Open Git Bash
  5. Change the current working directory to the location where you want the cloned directory to be made.
  6. Type git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
  1. 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.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

images

Code

Acknowledgements

  • My Mentor for Antonio Rodriguez for helpful advice on what to do and what not to do.

macannadev-dinosaur-game.pp2_'s People

Contributors

macannadev 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.