Frontend Mentor - Rock, Paper, Scissors solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the game depending on their device's screen size
• Play Rock, Paper, Scissors against the computer

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: GitHub Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vanilla Javascript

What I learned

I learned how to add sounds as well as creative animations to provide extra fun to the game:

function playWoosh() {
        let woosh = new Audio("whoosh.mp3")
        woosh.play()
    }

    function playSlot() {
        let slot = new Audio('Slot.mp3')
        slot.play()
    }

    function playBassDrop() {
        let bassDrop = new Audio('Bass Drop.mp3')
        bassDrop.play()
    }

    function playSuccess() {
        let success = new Audio('short-success.mp3')
        success.play()
    }

    function playLoss() {
        let loss = new Audio('ooh-123103.mp3')
        loss.play()
    }

    function playTie() {
        let tie = new Audio('failure-drum.mp3')
        tie.play()
    }

async function genCPU() {
        playSlot()
        for (let i = 0; i < 24; i++) {
            cpuClone = active[Math.floor(Math.random() * 3)].cloneNode(true)
            lightUpRight.appendChild(cpuClone)
            cpuClone.style.position = 'static'
            cpuClone.style.transform = 'translate(0%, 0%)'
            cpuClone.style.cursor = 'default'

            if (i != 23) {
                await delay(120)
                cpuClone.remove()
            }
        }
        cpuClone.style.transition = '300ms'
        whoWins()
    }

Continued development

I want to continue pushing my knowledge for things like probabilities, math equations, and localstorage.

Useful resources

• ChapGPT - This helped me when I'm trying to find out why something might not be working.

• w3schools - This site helps remind me of things I have forgotten.

Author

• Github - Rnsnceman
• Frontend Mentor - @rnsnceman
• Instagram - @yurikoller