A fully functional, interactive game of Rock Paper Scissors built with JavaScript, featuring a striking design inspired by the popular Korean Netflix series, Squid Game.
A visual demonstration of the game interface and interaction. https://cooleditingx.github.io/odin-rps/index.html
The main interface where the player selects a move, featuring the game's themed aesthetic.
The Rock Paper Scissors project is a core exercise focused on building interactive web applications using pure JavaScript. While it serves to program the classic game logic and handle DOM manipulation, its design is heavily influenced by the visual identity of the global phenomenon, Squid Game.
The application pits the user against a randomized computer opponent over a series of rounds. The thematic elements, including custom fonts and simple, geometric visual cues, create a unique and engaging experience distinct from a typical RPS implementation.
Since this is a client-side web application, no servers or build environments are necessary.
-
Clone the Repository: Open your terminal or command prompt and clone the project:
git clone [https://github.com/cooleditingx/odin-rps.git](https://github.com/cooleditingx/odin-rps.git) cd odin-rps -
Open and Play: Locate the main HTML file (
index.htmlorgame.html) and open it directly in your web browser.open index.html # For macOS/Linux # OR start index.html # For Windows
- Click on one of the three options (Rock, Paper, or Scissors) to play a round.
- The game logic will calculate the winner of the round (Player vs. Computer).
- The score is automatically updated on the screen.
This implementation of Rock Paper Scissors includes the following features:
- 🎨 Squid Game Inspired Design: Utilizes a custom, minimalist design and color palette inspired by the Korean Netflix series.
- 🔪 Thematic Typography: Employs the included custom font (
Game of Squids) to enhance the theme. - 🤖 Randomized CPU Choice: The computer's move is determined randomly for an unpredictable challenge.
- 📊 Score Tracking: Displays the current score for both the player and the computer.
- 🎮 Game End Condition: Tracks the score until one player reaches a predetermined winning total, announcing the final victor.
This project was developed using the fundamental building blocks of front-end web development:
| Technology | Role |
|---|---|
| HTML5 | Defines the game structure and user interface elements. |
| CSS3 | Styles the game, including layout, colors, and visual presentation. |
| JavaScript (ES6+) | Handles all interactive game logic, scorekeeping, and DOM manipulation. |