Web Development

Rock, Paper or Scissors

Overview

Developed as a collaborative project within the Mayerfeld Practicum Program by a team of four developers, the Rock Paper Scissors Game is a browser-based, console-driven interactive application designed to execute a 5-round battle between a human player and an AI opponent. The primary objective was to engineer a clean, error-free game engine using pure Vanilla JavaScript through peer programming and code review. The project focuses on core programming principles—including randomized computer selections, case-insensitive string parsing, input validation loops, conditional outcome evaluation, and real-time score tracking—all communicated through an engaging, narrative-driven terminal experience.

The Challenge

Building a resilient, turn-based game engine within the browser console while working as a 4-person development team required managing strict logical flow, uniform code standards, and handling unpredictable user behavior. Key technical challenges included:
     - Randomized AI Decision Engine: Designing a fair, dynamic selection algorithm (computerPlay) that randomly generates "Rock", "Paper", or "Scissors" with equal probability.

     - Case-Insensitive Input Parsing: Normalizing user inputs to accept any capitalization variation (e.g., rock, ROCK, RocK) without breaking comparison logic.

     - Robust Input Validation & Error Handling: Ensuring invalid inputs (e.g., typos, empty values, or non-game selections) do not crash the application or generate console errors, forcing rounds to repeat until 5 valid hands are completed.

     - Stateful Game Engine: Tracking scores across 5 valid rounds, evaluating win/loss/tie scenarios, and dynamically declaring the overall champion upon session completion.

Our Approach

Working in a team of four, we divided the development process into modular functional blocks to guarantee clean execution, code consistency, and defensive programming:
     - Computer Selection Logic (computerPlay): Utilized Math.random() mapped to an array of choices to generate unpredictable AI moves.

     - Round Mechanics (playRound): Engineered a pure function that evaluates player choices against computer selections, returning structured result strings based on traditional Rock-Paper-Scissors rules. Applied string normalization (toLowerCase()) to process user input seamlessly.

Interactive Game Loop (game):
     - Built a central orchestrator function containing a stateful loop to execute a 5-round match:
     
     - Incorporated prompt() dialogs with clear instructions and narrative storytelling.

     - Applied validation guards: if a user enters an invalid choice or cancels, the engine alerts the user and repeats the specific round without advancing the round counter.

     - Logged real-time round feedback, live scores, and final match outcomes directly to the developer console.

     - Team Synergy & Code Review: Conducted joint debugging and peer code reviews to maintain clean ES6 standard practices and prevent runtime console errors across all edge cases.

Project Gallery

Results

Developed successfully within the Mayerfeld Practicum Program framework, the project delivered a bug-free, highly resilient console mini-game that perfectly met all assignment criteria while demonstrating strong Vanilla JavaScript fundamentals and team collaboration:
     - Flawless Algorithmic Logic: Successfully executed 5 valid rounds per session with precise score management and instant result determination.

     - Zero-Error Defensive Coding: Completely eliminated runtime exceptions by gracefully handling invalid user inputs and edge cases.

     - Engaging User Experience: Delivered responsive prompt interactions and informative console output, turning a simple console exercise into a fun, storytelling mini-game.

     - Collaborative Success: Achieved a clean, unified codebase through effective peer review and team problem-solving among all 4 members.

YEAR

2026

SERVICES

Web Design & Development
Interactive Experience
Collaborative Software Engineering

TOOLS & TECHNOLOGY

JavaScript

HTML5

VS Code

Git

GitHub

Chrome DevTools

Console API

TAGS

Web Development

Console Game

Game Mechanics

JavaScript

Algorithmic Logic

Functional Programing

Team Collaboration

Interested in a similar project?