Giter VIP home page Giter VIP logo

rock-paper-scissor's Introduction

Rock | Paper | Scissors | Spock | Lizard

A game based on rock paper scissors, but with a twist.

Credits

First of all, I want to give credit where credit is due. Some of the code snippets I have in my JS code have been taken and/or modified from DevEd's channel on youtube. I will provide a link to the video in this readme file, accompanied with comments in the JS file.

Link to Ed's video on rock paper scissors

Besides from that, I used google and stackOverFlow to find out what my code should look like.

Thanks Ed!

Purpose of this app

  • The site’s users want to play an online game that has elements of chance.
  • The site’s goal is to provide a fun experience playing rock, paper, scissors, but with some additions.
  • The game features two additional (but not optional) choices called "Spock" and "Lizard", which makes it a bit harder to win than the usual rules.

The game features two additional (but not optional) choices called "Spock" and "Lizard", which makes it a bit harder to win than the usual rules.

Development

The idea for this project had it's inception when I was reading through the CI assessment project ideas. I went with project example idea #1.

The first thing was to write the HTML. it consists of two main elements ('Main Page' and 'Game'), filled with subelements.

Main Page

screencapture-127-0-0-1-5500-index-html-2021-04-22-17_34_07

Game page

screencapture-127-0-0-1-5500-index-html-2021-04-22-17_34_22

Once I had my basic HTML structure setup, I started adding the CSS. Much trial and error here! I wanted to have everything on one single page so I had to put a class of 'hide' on all the elements I wanted to hide while writing the stylesheet.

Once the basics of the CSS were there, I started looking into the JS part.

The JS consists of functions to

  • hide
  • update
  • disable and change elements. What those functions are can be found in the JS file comments.

I then started finding bugs, errors, bad practice etc. So I started refactoring some of the HTML and CSS to be more flexible and accessible when writing in JS.

Last thing I did (but should have done earlier, I admit) was to add media queries for larger/smaller computer screens, and finally iPad and phone screens.

What I learned

Was the beauty of using functions, for pretty much everything! Without well though-out functions, this wouldn't be possible. I did struggle sometimes with the logic, but that's just part of the game.

rock-paper-scissor's People

Contributors

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