Giter VIP home page Giter VIP logo

rock-on--paper-scissors's Introduction

Rock (On), Paper, Scissors

Introduction

Rock (On), Paper, Scissors was created as a fun take on the traditional game of Rock, Paper, Scissors, while sticking to the same core concepts as the original. The game is a user vs computer simulation and offers the user the choice of 3 variables; Rock (On), Paper or Scissors. The script I've written randomly selects one of the 3 options on the computers behalf. The rules are simple, Rock (On) blunts Scissors, Paper covers Rock (On) and Scissors cut Paper. The user will score 1 point for every winning selection, the computer scores 1 point for every winning random selection and neither opponent scores a point if it's a tie. The winner of the game is determined by whoever reaches 15 first.

The live site can be accessed here.

Responsive Design

Design

Color Pallete

  • The two main colours used are #FFFCFF and #1B2F33
  • I chose these colours as I knew they'd meet accessibility guidelines and I personally liked them.

Typography

  • The Fredoka One font is used throughout with Sans-Serif as the backup.
  • I chose Fredoka One because it had a casual, playfullness about it.

Initial Concept

  • The initial concept was designed first to structure the layout of the content and media that was envisaged.
  • I had originally wanted to include a best of 15 scoreboard but unfortunately had to limit this due to time constraints.

Features

This section covers the features used for the website to function seemlessly, ensuring accessibility requirements are achieved at the same time.

Existing Features

Header

  • I designed the Header to be large and to the point so that it would immediately grab the users attention and explain what the site is offering.

Game Area

  • The Game Area consists of a description of what the user should do, 3 options to chose from in the form of buttons and the text "Who will win..."
  • I kept the design simple, again, to ensure the user knew exactly what to expect from the offset.

Score Area

  • The Score Area provides a score board that changes depending on the result of the users selection. For every win, the user recieves 1 point. For every loss, the computer receives 1 point, and for every draw, the score remains the same.
  • In addition to this, upon selecting an item, the users image will change to match, as will the randomly selected computer image. Depending on win, lose, or draw, the text will change to tell the user what the result was.

Footer

  • The Footer includes the rules of the game for those that aren't already aware.

Validator Testing

HTML

  • No errors were found when passing through the official W3C Validator

CSS

JS

Accessibility

  • My site scored the maximum score of 100 on Google Lighthouse

Bugs

  • There were no bugs found at the time of final deployment

Deployment

The site was deployed to GitHub pages using the following steps...

  • While in the GitHub repository, go to the settings tab
  • In the "Source Section", select "Master Branch
  • Select Pages
  • In the source section drop-down menu, chose the Main Branch and save

Credits

General

Specific

rock-on--paper-scissors's People

Contributors

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