DEV Community

Cover image for Rock, Paper, Scissors Game
TD!
TD!

Posted on

2

Rock, Paper, Scissors Game

In this project, you'll create a simple Rock, Paper, Scissors game using HTML and CSS. This project is perfect for beginners to practice structuring a basic webpage, styling it with CSS, and understanding simple interactions without JavaScript.


🌟 Project Overview

Features

  • Three Choices: Rock πŸͺ¨, Paper πŸ“„, and Scissors βœ‚οΈ.
  • User-Friendly Interface: Interactive buttons to choose a move.
  • Basic Styling: Clean design with hover effects for buttons.
  • Outcome Display: Simple text to show the chosen move (no JavaScript logic).

πŸ“‚ File Structure

rock-paper_scissors/
β”‚-- index.html    ← The HTML structure
β””-- styles.css    ← The CSS styling
Enter fullscreen mode Exit fullscreen mode

🧠 Key Concepts for Learning

  1. HTML Elements:

    • Buttons: Used for selecting Rock, Paper, or Scissors.
    • Divs and Headings: Structure the layout for easy readability.
  2. CSS Styling:

    • Button Styling: Create interactive buttons with hover effects.
    • Layout: Use Flexbox and text alignment for a centered layout.
    • Box Shadows: Add depth to the container for a modern look.
  3. Responsive Design:

    • The game container adjusts to different screen sizes with max-width.

πŸ› οΈ How to Run the Project

  1. Create the Files:

    • Create index.html and styles.css in the same folder.
    • Copy the code into their respective files.
  2. Open index.html in Your Browser:

   open index.html
Enter fullscreen mode Exit fullscreen mode
  1. Play the Game:
    • Click on "Rock πŸͺ¨", "Paper πŸ“„", or "Scissors βœ‚οΈ".
    • The text below will display your chosen move.

🌟 Enhancements to Try

  • JavaScript Logic: Add JavaScript to compare user choices against a computer-generated choice and display the winner.
  • Score Counter: Track the number of wins, losses, and ties.
  • Animations: Add CSS animations when a button is clicked.
  • Dark Mode: Create a toggle switch for a dark mode theme.

View project on GitHub

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs