https://github.com/riascho/rockpaperscissorsgame

The classic Rock-Paper-Scissors Game with a twist! 😛
https://github.com/riascho/rockpaperscissorsgame

html-css-javascript

Last synced: about 1 month ago
JSON representation

The classic Rock-Paper-Scissors Game with a twist! 😛

• Host: GitHub
• URL: https://github.com/riascho/rockpaperscissorsgame
• Owner: riascho
• Created: 2024-02-04T18:53:07.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-03T21:19:18.000Z (10 months ago)
• Last Synced: 2024-11-29T19:09:23.152Z (about 1 month ago)
• Topics: html-css-javascript
• Language: JavaScript
• Homepage: https://mariaremote.github.io/RockPaperScissorsGame/
• Size: 97.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rock Paper Scissors Game 

This simple Rock-Paper-Scissor Browser Game I built using this [Youtube Tutorial](https://youtu.be/1yS-JV4fWqY). 

You can play my version [HERE](https://mariaremote.github.io/RockPaperScissorsGame/).

![Screenshot of Game](screenshot.png)

## Description

The user has a selection of hand emojis at the top to choose from. 

Once clicked, the computer's choice will be revealed and the game history will be displayed below highlighting the winning hand. 

Simultaneously there is a score for each player that keeps track of their victories. 

## My Spin on this

- An additional `Spock` hand that shows up randomly (25% chance) and can beat all other hands. The computer will play this hand also at the same probability. 

- A "fade-out" in the game history to only ever shows the last `5` games played

## Issues

When trying to build the "fade-out" of the game history, my approach was to simply remove the last child items through their index.

However, since the game history is added in pairs, I need to remove two children at the same time also.

Currently I am exploring the following solutions: 

- set an additional class attribute for the "last-children" and then remove these collectively with `querySelectorAll('.last-children')`

- using the CSS grid container itself to limit the display of rows (overflow will simply be hidden)

## Solution

This is one of the classic OMG moments, where the solution just hits you like a hammer.

I was correct with removing the last child items through their index, but all I had to do is to keep the same index as the order of the children changed, in order to remove the correct pair of hands from the history. 

Hence by calling the `.removeChild` function twice, but with the same index I make sure the sequence of child-removal is guaranteed. 

```

function cleanUpBottom(){

    history.removeChild(history.children[12])

    history.removeChild(history.children[12])

}

```

This was a logical obstacle to overcome more than a programmatic. ✌😇