MERN 스택 학습 31일차

Hello Dev Community! 👋

It is officially Day 31 — stepping straight into my second month of documented full-stack engineering! Fresh off the 30-day milestone yesterday, I decided to keep the engineering momentum high by building a classic browser game: Rock, Paper, Scissors using HTML5, CSS3, and vanilla JavaScript.

After mastering API integration yesterday, today was about refinement—handling dynamic score states, tracking user choices, and creating a clean automated opponent engine.

🛠️ The Core Logic Architecture

To make the game interactive and clean, I divided the code structure into distinct logical components:

1. Capturing User Selection

I assigned the choices (rock, paper, scissors) to clickable image/div nodes in the layout. Instead of writing repetitive lines, I used a forEach array loop to attach an addEventListener("click", ...) to each choice, pulling the user’s explicit selection instantly via DOM attributes.

2. The Computer’s Automated AI Brain

Since a computer cannot pick words, I mapped out an array of strings: ["rock", "paper", "scissors"]. I then utilized JavaScript’s math utility library to generate a randomized index number:

javascript
const genCompChoice = () => {
    const options = ["rock", "paper", "scissors"];
    const randIdx = Math.floor(Math.random() * 3);
    return options[randIdx];
};

Enter fullscreen mode Exit fullscreen mode