Rock-Paper-Scissors-Game

KO | EN

gitlite — search

#nextjs #javascript #kotlin #automation #docker #framework #php #json #ai #nlp

Rock-Paper-Scissors-Game

(★ 10)

An engaging 3D Rock Paper Scissors game built with HTML, CSS, and JavaScript, featuring real-time scoreboards, dynamic battle arenas, victory confetti particles, and a dark/light mode toggle switch.

파일 탐색기

ZIP 다운로드

index.html
paper.png
README.md
rock.png
rps-preview.png
scissors.png
script.js
style.css

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

An engaging, scoreboard-powered **Rock Paper Scissors** game built with **HTML5, CSS3, and JavaScript**. Challenge the computer in real-time with an upgraded 3D glassmorphism user interface, centered header alignments, interactive battle arena, victory confetti particles, and a **Dark/Light Mode** toggle switch.

---

## 🚀 Features

- **Dark & Light Mode Switcher:** Easily toggle between dark and light themes with a single click[cite: 11].
- **Centered Layout & Header:** Perfectly centered game title, subtitle, and message status box for a balanced UI[cite: 11].
- **Dynamic Battle Arena:** Instantly displays what you and the computer selected side-by-side with animated shake effects[cite: 11].
- **Victory Particle Confetti:** Celebrates your wins with dazzling confetti animations using canvas-confetti[cite: 11].
- **Smart Computer Move & Scoreboard:** Real-time scoring and random choice generator for fair gameplay[cite: 11].

---

## 🛠️ Tech Stack

- **HTML5:** Structured the game choices, battle display arena, header, and theme switcher[cite: 11].
- **CSS3:** Styled custom glass cards, 3D shadows, keyframe animations, and theme variables[cite: 11].
- **JavaScript (ES6):** Implemented comparative logic, random choice generator, theme toggling, and confetti triggers[cite: 11].

---

## 📸 Demo

![Game Preview](https://raw.githubusercontent.com/amirsohail100/Rock-Paper-Scissors-Game/main/rps-preview.png)

---

## 📂 Project Structure

```text
├── index.html      # Scoreboard, battle arena, header, and theme toggle
├── style.css       # 3D interactive animations, dark/light themes, and glassmorphism
└── script.js       # Round checking, scoring logic, theme switcher, and confetti effects
```

Rock-Paper-Scissors-Game

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Rock-Paper-Scissors-Game

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README