0
\$\begingroup\$

My latest project is a Rock Paper Scissors Game that I made in The Odin Project course. It's a web version, made with HTML, CSS and JS. I would appreciate to read your opninions, especially with regards to the JS.

The Game to play: https://amina-mari.github.io/rock-paper-scissors/

The HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <header class="header">
        <h1 class="header__title">Rock Paper Scissors!</h1>
    </header>
    <main>
        <section class="rules">
            <h2>Rules</h2>
            <ul class="rules__list">
                <li class="rules__item">Rock beats Scissors</li>
                <li class="rules__item">Paper beats Rock</li>
                <li class="rules__item">Scissors beats Paper</li>
            </ul>            
        </section>
        <section class="game">
            <h2 class="game__choose">Choose:</h2>
            <button class="game__button" data-option="1">
                <figure class="game__figure">
                    <div>
                        <img class="game__figure--img" src="images/icons8-rock-80.png" alt="">
                    </div>
                    <figcaption class="game__figure--figcaption">Rock</figcaption>
                </figure> 
            </button>
            <button class="game__button" data-option="2">
                <figure class="game__figure">
                    <div>
                        <img class="game__figure--img" src="images/icons8-paper-64.png" alt="">
                    </div>
                    <figcaption class="game__figure--figcaption">Paper</figcaption>
                </figure>
            </button>
            <button class="game__button" data-option="3">
                <figure class="game__figure">
                    <div>
                        <img class="game__figure--img" src="images/icons8-cutting-96.png" alt="">
                    </div>
                    <figcaption class="game__figure--figcaption">Scissors</figcaption>
                </figure>
            </button>
            <div class="game__scores">
                <button class="game__scores--button">Scores</button>
            </div>
        </section>
    </main>
    <footer class="footer">
        <p class="footer__content">Made with <img class="footer__img" src="images/icons8-heart-100.png" alt=""> by Mariana Amina</p>
    </footer>
    <script src="scripts/main.js"></script>
</body>
</html> 

The JS code:

/*  
    - Wait for button press
        - If button is pressed
            - Add 1 to number of matches
            - Make a random choice to beat the user choice
            - Show the result in a new div
                - If the user wins, add 1 to the score
                - If the user draws, add 1 to draws
                - If the user loses, add 1 to loses
            - Ask if the user want to play again
                - If it is true, go back to line 2
                 
    Future Tasks: 
        - Translate to Portuguese
        - Add Multiplayer Mode
*/


// function showComputerOption(computerOption) {
//     let arrayOptions = ["Rock", "Paper", "Scissors"];
//     alert("Computer choosed " + arrayOptions[computerOption - 1]);
// }

let scoresButton = document.querySelector('.game__scores--button');

scoresButton.addEventListener('mousedown', showScores);

let divScores = document.createElement('div');
divScores.classList.add('game__scores--div');

let scoresCloseButton = document.createElement('button');
let scoresCloseButtonImg = document.createElement('img');
scoresCloseButtonImg.setAttribute('src', 'images/close.png');
scoresCloseButton.appendChild(scoresCloseButtonImg);

scoresCloseButton.addEventListener('mousedown', function() {
    divScores.classList.add('game__scores--closed');
});


let divWins = document.createElement('div');
let winsPara = document.createElement('p');
winsPara.textContent = "Wins";
let winsCount = document.createElement('p');

divWins.appendChild(winsPara);
divWins.appendChild(winsCount);


let divDraws = document.createElement('div');
let drawsPara = document.createElement('p');
drawsPara.textContent = "Draws";
let drawsCount = document.createElement('p');

divDraws.appendChild(drawsPara);
divDraws.appendChild(drawsCount);


let divLoses = document.createElement('div');
let losesPara = document.createElement('p');
losesPara.textContent = "Loses";
let losesCount = document.createElement('p');

divLoses.appendChild(losesPara);
divLoses.appendChild(losesCount);


divScores.appendChild(scoresCloseButton);
divScores.appendChild(divWins);
divScores.appendChild(divDraws);
divScores.appendChild(divLoses);

let matchNumber = 0;
let score = 0;
let computerScore = 0;
let draws = 0;

// Div to show match result

let divGame = document.querySelector(".game");
let matchResult = document.createElement("div");
matchResult.classList.add("game__result");

let paraResult = document.createElement('p');

let closeButton = document.createElement('button');
let closeImg = document.createElement("img")
closeImg.setAttribute('src', 'images/close.png');
closeButton.appendChild(closeImg);

let divUserChoice = document.createElement('div');
let paraUserChoice = document.createElement('p');
paraUserChoice.textContent = "User Choice";
divUserChoice.appendChild(paraUserChoice);


let figUserChoice = document.createElement('figure');
let imgUserChoice = document.createElement('img');
let figcaptionUserChoice = document.createElement('figcaption');
figUserChoice.appendChild(imgUserChoice);
figUserChoice.appendChild(figcaptionUserChoice);

divUserChoice.appendChild(figUserChoice);


/* img src and figcaption textContent is setted in the showWinLoseDraw function */

let divCPUChoice = document.createElement('div');
let paraCPUChoice = document.createElement('p');
paraCPUChoice.textContent = "Computer Choice";
divCPUChoice.appendChild(paraCPUChoice);

let figCPUChoice = document.createElement('figure');
let imgCPUChoice = document.createElement('img');
let figcaptionCPUChoice = document.createElement('figcaption');
figCPUChoice.appendChild(imgCPUChoice);
figCPUChoice.appendChild(figcaptionCPUChoice);

divCPUChoice.appendChild(figCPUChoice);

let paraVersus = document.createElement('p');
paraVersus.classList.add('versus')
paraVersus.textContent = "VS";

matchResult.appendChild(closeButton)
matchResult.appendChild(paraResult);
matchResult.appendChild(divUserChoice);
matchResult.appendChild(paraVersus);
matchResult.appendChild(divCPUChoice);

closeButton.addEventListener('click', function(event){
    event.currentTarget.parentNode.classList.add('game__result--closed');
})

/*
<div>
    <p>User Choice</p>
    <figure>
        <img>
        <figcation></figcaption>
    </figure>
</div>

<p>VS</p>

<div>
    <p>Computer Choice</p>
    <figure>
        <img>
        <figcation></figcaption>
    </figure>
</div>
*/

function showWinLoseDraw(option, computerOption) {
    
    if (option == 1) {
        figcaptionUserChoice.textContent = "Rock";
        imgUserChoice.setAttribute('src', "images/icons8-rock-80.png");
        if (computerOption == 2) {
            figcaptionCPUChoice.textContent = "Paper";
            imgCPUChoice.setAttribute('src', "images/icons8-paper-64.png");
            paraResult.textContent = 'Oh no, you lose';
            computerScore++;
        }
        else if (computerOption == 3) {
            figcaptionCPUChoice.textContent = "Scissors";
            imgCPUChoice.setAttribute('src', "images/icons8-cutting-96.png");
            paraResult.textContent = 'Yay! You won!';
            score++;
        }
        else {
            figcaptionCPUChoice.textContent = "Rock";
            imgCPUChoice.setAttribute('src', "images/icons8-rock-80.png");
            paraResult.textContent = 'It\'s a draw';
            draws++;
        }
    }
    else if (option == 2) {
        figcaptionUserChoice.textContent = "Paper";
        imgUserChoice.setAttribute('src', "images/icons8-paper-64.png");
        if (computerOption == 1) {
            figcaptionCPUChoice.textContent = "Rock";
            imgCPUChoice.setAttribute('src', "images/icons8-rock-80.png");
            paraResult.textContent = 'Yay! You won!';
            score++;
        }
        else if (computerOption == 3) {
            figcaptionCPUChoice.textContent = "Scissors";
            imgCPUChoice.setAttribute('src', "images/icons8-cutting-96.png");
            paraResult.textContent = 'Oh no, you lose';
            computerScore++;
        }
        else {
            figcaptionCPUChoice.textContent = "Paper";
            imgCPUChoice.setAttribute('src', "images/icons8-paper-64.png");
            paraResult.textContent = 'It\'s a draw';
            draws++;
        }
    }
    else {
        figcaptionUserChoice.textContent = "Scissors";
        imgUserChoice.setAttribute('src', "images/icons8-cutting-96.png");
        if (computerOption == 1) {
            figcaptionCPUChoice.textContent = "Rock";
            imgCPUChoice.setAttribute('src', "images/icons8-rock-80.png");
            paraResult.textContent = 'Oh no, you lose';
            computerScore++;
        }
        else if (computerOption == 2) {
            figcaptionCPUChoice.textContent = "Paper";
            imgCPUChoice.setAttribute('src', "images/icons8-paper-64.png");
            paraResult.textContent = 'Yay! You won!';
            score++;
        }
        else {
            figcaptionCPUChoice.textContent = "Scissors";
            imgCPUChoice.setAttribute('src', "images/icons8-cutting-96.png");
            paraResult.textContent = 'It\'s a draw';
            draws++;
        }
    }
    divGame.appendChild(matchResult);
}

function showScores() {
    if(divScores.classList.contains('game__scores--closed')){
        divScores.classList.remove('game__scores--closed');
    }
    winsCount.textContent = score;
    drawsCount.textContent = draws;
    losesCount.textContent = computerScore;
    divGame.appendChild(divScores);
}


let buttons = document.querySelectorAll('.game__button')
 
buttons.forEach(button => button.addEventListener('mousedown', rockPaperScissors));

function rockPaperScissors(event) {
    matchNumber++;
    let buttonPressed = event.currentTarget;
    let option = buttonPressed.getAttribute('data-option');
    let computerOption = parseInt((Math.random() * 2).toFixed(0)) + 1;
    if(matchResult.classList.contains('game__result--closed')){
        matchResult.classList.remove("game__result--closed")
    }
    showWinLoseDraw(option, computerOption);


    // if (checkValidOption(option)) {
    //     matchNumber++;
    

    //     showComputerOption(computerOption);
    //     showWinLoseDraw(option, computerOption);

    //     if (confirm("Wanna play again?")) {
        //         rockPaperScissors();
    //     } else {
    //         showScores();
    //     }
    // } else {
    //     alert("You need to enter a valid option.")
    // }
}

The CSS code:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500&display=swap');
* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', serif;
}

.header {
    background-color: lightseagreen;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 5px solid rgb(119, 119, 119);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.header__title {
    padding: 20px;
    color: white;
    font-size: 2.5rem;
    font-family: 'Montserrat Alternates';
    font-weight: 500;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rules {
    width: 50%;
    text-align: center;
    background-color:rgb(255, 215, 163);
    border-radius: 10px;
}

.rules__list {
    list-style-type: none;
    padding: 0;
    font-size: 1.2rem;
}

.game {
    width: 70%; 
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.game__choose {
    flex-basis: 100%;
    font-size: 1.2rem;
}

.game__button {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    border: 5px solid rgb(119, 119, 119);
    border-radius: 10px;
    outline: none;
    background-color:rgb(255, 215, 163);
    transition: all 0.4s;
    font-weight: 500;
}

.game__button:hover {
    cursor: pointer;
    border-color: rgb(75, 75, 75);
    background-color: rgb(255, 184, 92);
}

.game__button:active {
    top: 5px;
}

.game__figure {
    height: 100%;
    margin: auto;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.game__figure > div {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game__figure--img {
    min-width: 70%;
    min-width: 70%;
}

.game__figure--figcaption {
    font-size: 20px;
}

.game__scores {
    flex-basis: 100%;
}

.game__scores--button {
    position: relative;
    width: 300px;
    height: 50px;
    border: 5px solid rgb(119, 119, 119);
    border-radius: 10px;
    outline: none;
    background-color:rgb(155, 253, 248);
    transition: all 0.4s;
    font-weight: 500;
    font-size: 20px;
}

.game__scores--button:hover {
    cursor: pointer;
    border-color: rgb(75, 75, 75);
    background-color: rgb(55, 190, 184);
}

.game__scores--button:active {
    top: 5px;
}

.game__scores--div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: white;
    border: 5px solid rgb(119, 119, 119);
    border-radius: 10px;
    top: 12.5%;
    position: fixed;
    width: 70%;
    height: 75%;
    padding: 20px;
    overflow-y: auto;
}

.game__scores--div button {
    position: absolute;
    width: 40px;
    top: 20px;
    right: 20px;
    background-color: transparent;
    border: none;
    outline: none;
    opacity: 0.7;
}

.game__scores--div button:hover {
    cursor: pointer;
    opacity: 1;
}

.game__scores--div button img {
    width: 100%;
}

.game__scores--div div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 200px;
    height: 200px;
    border: 5px solid rgb(119, 119, 119);
    border-radius: 10px;
    background-color:rgb(255, 215, 163);
    font-weight: 500;
    font-size: 20px;
}

.game__scores--closed {
    display: none;
}


.game__result {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: white;
    border: 5px solid rgb(119, 119, 119);
    border-radius: 10px;
    top: 12.5%;
    position: fixed;
    width: 70%;
    height: 75%;
    padding: 20px;
    overflow-y: auto;
}

.game__result > p {
    flex-basis: 100%;
    margin-bottom: 20px;
    font-size: 20px;
}

.game__result .versus {
    flex-basis: 25%;
    font-size: 3rem;
    color: rgb(119, 119, 119);
    font-weight: bold;
}

.game__result button {
    position: absolute;
    width: 40px;
    top: 20px;
    right: 20px;
    background-color: transparent;
    border: none;
    outline: none;
    opacity: 0.7;
}

.game__result button:hover {
    cursor: pointer;
    opacity: 1;
}

.game__result button img {
    width: 100%;
}

.game__result > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 250px;
    height: 250px;
    border: 5px solid rgb(119, 119, 119);
    border-radius: 10px;
    outline: none;
    background-color:rgb(255, 215, 163);
    font-weight: 500;
    font-size: 20px;
}

.game__result div p {
    font-size: 20px;
}

.game__result img {
    width: 100px;
}

.game__result--closed {
    display: none;
}

.footer {
    text-align: center;
    font-size: 1.2rem;
}

.footer__img {
    font-family: monospace;
    width: 25px;
    vertical-align: bottom;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.