spock-rock game with Javascript

 

Rock-paper-scissors-lizard-spock game is a more complicated game. The rule below:

CODE Github

DEMO

HTML

Game is in the game-container.

Player-container includes score ,choice text and five selectable icon with onclick event.

computer container is the same pattern. but no event .

Whenever reset,it's time to run the resetAll() function.

And the result text shows everytime run event.

CSS

game container : width and height.

set the header border-radius seperately.

delete last icon margin-right to make all the icons in one line.

selected style added,because it's a class name,it won't work if add on the id name.

For responsive screen(big screen and small screen),give styles.

JAVASCRIPT

import module if want to use.comment here.

select all the DOM

all the choices are the rules object.

when click the icon, the select() function runs. 

With Switch to find out which is been selected , then change the sytle and the text.

With random() which can generate 0-1 number. divide by 5 selections,each section means one choice.

Then display the computer choice and also style chanage.

When player and computer compares, the score and message text change.

Falling animation Confetti.js 

When won,startConfetti()

When lost or tie,stopConfetti(),removeConfetti()

Reset the score,choice and text when click the reset button and also initial at the page refresh.

combine all the function in checkResult(), and call it at select() function at first.

reset init when load.