Work

Rock, Paper, Scissors, and More! - Project Showcase

JavaScript
React
CSS
Vite.js

An enhanced version of the classic Rock, Paper, Scissors game, including new variations and features for an elevated gaming experience.

An engaging and dynamic game interface showcasing Rock, Paper, Scissors, Lizard, Spock choices.

I’m excited to share the live version of this project. You can view it by clicking the button below:

View Live Project

🎮 Rock, Paper, Scissors, and More! 🌟

Welcome to my enhanced version of the classic Rock, Paper, Scissors game. This project was inspired by a challenge from Frontend Mentor, and I’ve used certain assets and ideas from them. I extend my heartfelt gratitude to Frontend Mentor for the inspiration and resources. 🙏

🎲 Current Features

🗿 Rock Paper Scissors ✂️

The timeless game where players choose between rock, paper, or scissors, with each choice defeating another:

  • 🗿 Rock crushes ✂️ Scissors
  • ✂️ Scissors cuts 📄 Paper
  • 📄 Paper covers 🪨 Rock

🪨 Rock Paper Scissors Lizard Spock 🖖

A popular variation that adds a new level of complexity and strategy to the original game. Despite being popularized by the television show “The Big Bang Theory,” where Sheldon Cooper uses it to settle disputes, its true origins trace back to 1995. Invented by Sam Kass and Karen Bryla, this variation was designed to reduce the chances of a tie, making decisions more interesting and less biased.

The game follows the same principles as Rock Paper Scissors but includes two additional gestures - Lizard and Spock, leading to the following outcomes:

  • ✂️ Scissors cuts 📄 Paper
  • 📄 Paper covers 🗿 Rock
  • 🗿 Rock crushes 🦎 Lizard
  • 🦎 Lizard poisons 🖖 Spock
  • 🖖 Spock smashes ✂️ Scissors
  • ✂️ Scissors decapitates 🦎 Lizard
  • 🦎 Lizard eats 📄 Paper
  • 📄 Paper disproves 🖖 Spock
  • 🖖 Spock vaporizes 🗿 Rock
  • 🗿 Rock crushes ✂️ Scissors

This addition not only enhances the game’s complexity but also its fun, allowing for a wider range of strategies and outcomes. It’s a testament to the game’s enduring appeal and its ability to adapt and evolve over time, making it a beloved choice for decision-making and entertainment across generations.

🚀 New Features and Game Modes

I’m thrilled to announce that I’m working on several exciting new features and game modes to elevate your gaming experience:

  • 🏆 Leaderboard Feature: Compete for the highest score and see your name on the leaderboard! This feature will require authentication to ensure scores are accurately attributed to players.

  • 🕹 Non-Authenticated Game Mode: Want to play without signing up? No problem! You can still enjoy the game and practice your skills, but scores won’t be uploaded to the leaderboard.

  • 🐉 Digimon Game Mode: Choose your Digimon team and battle against the computer. Pick typings wisely to gain the upper hand!

  • 🔥 Pokemon Game Mode: Assemble your Pokemon team and challenge the CPU. Strategy and knowledge of typings will be key to victory.

  • 🧠 Improved CPU Learning: I’m implementing a smarter CPU that learns from previous games. Expect a challenging opponent that adapts to your strategies!

  • 📱 Enhanced Responsiveness: Enjoy a seamless gaming experience on any device. I’m committed to making the game accessible and enjoyable for everyone.

🙌 Credits

This project was inspired by the Rock, Paper, Scissors challenge on Frontend Mentor. I’ve utilized certain assets and ideas provided by Frontend Mentor and extend my gratitude for their resources.

💻 Stay Tuned 🗿!

I’m working hard to bring these new features and game modes to you. Stay tuned for updates and get ready for an even more exciting gaming experience!

Happy gaming! 🎉🗿 🎮

💻 Technologies Used

This project is built using modern web development tools and libraries to ensure a high-quality user experience:

  • Vite.js 🚀: A blazing fast build tool for modern web projects, providing a smooth developer experience and optimized builds.

  • React.js ⚛️: A JavaScript library for building user interfaces, enabling dynamic and responsive web applications.

  • JavaScript 📜: The programming language of the web, used for creating interactive and dynamic content.

  • CSS 🎨: Used for styling the application, ensuring it is visually appealing and accessible across different devices and screen sizes.