Git Product home page Git Product logo

milestone-project-two-17's Introduction

Rock Paper Scissors Lizard Spock!

This is a website where you can play the classic game of Rock, Paper, Scissors with 2 extra options (Lizard and Spock) and new rules added for them. The user can choose wheter to play the classic game (just rock, paper and scissors) or the scaled up version (rock, paper, scissors, lizard, spock).

Responsive mockup

Features

The website is structured in 3 pages:

First page

This is the first page after opening the site. The user can see the title and will be able to choose between two difficulties by pressing on one of the images shown.

index page

Second page and Third page

The second page is the easy diffculty of the game and the third page is the hard difficulty.

easy difficulty hard difficulty

Title and change diffculty

  • This page contains the title and a button to change diffculty.

  • Both send the user to the first page.

How to play area

  • How to play text and info logo.

  • The user need to hover over the text and logo to make a popup appear that contains the rules of the game

  • The popup appears in the middle of the page after hover and dissapears when the user stops hovering.

The rules for the easy diffculty

The rules for the hard diffculty

Game area

  • The game area consists in two boards, one for the user and one for the computer.

  • This is where the game plays. The user will easly recognize the different the icons he has to choose to play.

  • After the user clicks on an option the other ones dissapear

  • On the computer side happens the same thing but randomly

  • The two boards are compared and then an alert pops up with the result of the round and the scores are incremented accordingly to the winner

  • After one of the scores reached 3 points an alert will appear that decides the game winner and the page will reload.

Testing

Bugs

There are no bugs to report.

Validator Testing

  • HTML
  • CSS
  • Javascript
    • Some errors were returned when passing both js files through the official Jshint validator that still remain.
      • The following metrics were returned for script.js:

        • There are 23 functions in this file.
        • Function with the largest signature take 0 arguments, while the median is 0.
        • Largest function has 30 statements in it, while the median is 2.
        • The most complex function has a cyclomatic complexity value of 10 while the median is 1.
      • The following metrics were returned for script2.js:

        • There are 43 functions in this file.
        • Function with the largest signature take 0 arguments, while the median is 0.
        • Largest function has 78 statements in it, while the median is 1.
        • The most complex function has a cyclomatic complexity value of 26 while the median is 1.

Accessibility

I ran a lighthouse accessibility test from the chrome dev tools and these are the results:

Deployment

  • The site was deployed to GitHub pages. The steps to deploy are as follows:
    • In the GitHub repository, navigate to the Settings tab.
    • Click on the pages option from the left side list.
    • From the branch section drop-down menu, select the Master Branch.
    • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://cosminpop356.github.io/milestone-project-two/

Credits

Media

  • All the icons for the options of the game were taken from PNG Wing and then cut by me.

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.