Rock Paper Scissor Lesson

🎮 Rock Paper Scissors Game – Beginner’s Coding Notebook

Welcome! In this notebook, we’ll explore a fun Rock Paper Scissors game written in JavaScript.
Don’t worry if you’re new to coding — we’ll break it down step by step.

🟣 1. The Setup: HTML + JavaScript

This game is built with HTML (the page structure) and JavaScript (the logic).

• HTML is like the bones of the page.
• CSS (styles) is like the clothes and makeup.
• JavaScript is the brain that makes things interactive.

Here, our HTML creates a space on the page (<div> boxes and <canvas>), and JavaScript controls how the game looks and works.

🟢 2. The Purple Box (Instructions & Buttons)

The game shows a big purple box with instructions and buttons for Rock, Paper, and Scissors.

const instructionsHTML = `
  <h2>Rock Paper Scissors SHOOT!</h2>
  <p>Play the game from your browser console!</p>
  <p>Type playRPS("rock"), playRPS("paper"), or playRPS("scissors")</p>
`;

💡 This creates a message telling the player how to play.
The buttons each have an image (rock, paper, scissors). Clicking them shows a hint about what you can do in the console.

🟡 3. Highlighting a Choice

When you pick Rock, Paper, or Scissors, the game highlights your choice.

function highlightImage(id){
  ["rock-img","paper-img","scissors-img"].forEach(i=>{
    const el = document.getElementById(i);
    if(el) el.style.boxShadow = "";
  });
  const picked = document.getElementById(id);
  if(picked) picked.style.boxShadow = "0 0 30px 10px gold";
}

👉 This makes your chosen picture glow with a gold outline.

🔵 4. OOP (Object-Oriented Programming)

The code uses classes — these are blueprints for making objects.
Think of it like making cookies with a cookie-cutter: the class is the cutter, and each cookie is an object.

Example: BattleSprite Class

class BattleSprite {
  constructor(image, width, height, x, y){
    this.image = image;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
  }

  draw(ctx){
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
  }
}

This blueprint tells the computer how to draw an image (like Rock, Paper, or Scissors) on the canvas.

🟠 5. The Canvas (Animations!)

The canvas is like a digital painting surface where animations happen.

• Rock, Paper, and Scissors float on the screen.
• When a battle starts:
  • The winner moves forward and pulses.
  • The loser fades, shrinks, or spins.
  • A tie wiggles and pulses.

The render loop makes this happen continuously:

function render(){
  ctx.clearRect(0,0,battleCanvas.width,battleCanvas.height);

  // update + draw sprites
  Object.values(sprites).forEach(s=>{
    s.update();
    s.draw(ctx);
  });

  requestAnimationFrame(render);
}
render();

💡 requestAnimationFrame tells the computer to keep redrawing the screen smoothly (like a cartoon).

🟤 6. Game Logic

The actual game rules are here:

window.playRPS = function(playerChoice){
  const choices = ["rock","paper","scissors"];
  const computerChoice = choices[Math.floor(Math.random()*choices.length)];

  if(playerChoice === computerChoice){
    resultText = "Tie!";
  } else if(
    (playerChoice==="rock" && computerChoice==="scissors") ||
    (playerChoice==="paper" && computerChoice==="rock") ||
    (playerChoice==="scissors" && computerChoice==="paper")
  ){
    resultText = "You Win!";
  } else {
    resultText = "You Lose!";
  }
};

• The computer picks randomly.
• The code compares choices.
• It prints Win, Lose, or Tie.

🟣 7. Customizing with OOP

You can also change how Rock, Paper, and Scissors look by using special classes in the console.

class GameObject {
  constructor(id) {
    this.el = document.getElementById(id);
  }

  rotate(deg) { this.el.style.transform = `rotate(${deg}deg)`; }
  setBorder(style) { this.el.style.border = style; }
  setWidth(px) { this.el.style.width = `${px}px`; }
  setColor(color) { this.el.style.backgroundColor = color; }
  reset() { this.el.style = ""; }
}

For example:

rock.rotate(45);
paper.setBorder("6px solid pink");
scissors.reset();

This lets you hack the game’s appearance without touching the original code!

✅ Hack/Homework

Now that you’ve learned the basics, try this challenge:

👉 Challenge:
Make the background color of the purple box change whenever you win, lose, or tie.

Hints:

• Find the <div> with the purple box (container).
• Use container.style.background = "red"; (or green, yellow, etc.).
• Add this code inside the playRPS function when setting the result.

Extra Credit 🎯:
Make a scoreboard that keeps track of how many times you’ve won, lost, or tied.

✨ Congratulations! You’ve just explored a real interactive game built with HTML, CSS, and JavaScript, while also learning OOP basics, canvas animation, and game logic.