My blog
Building a Rock Paper Scissors Game with Next.js

Photo by Rahul Mishra on Unsplash

Building a Rock Paper Scissors Game with Next.js

Komen Nitchaphon's photo
Komen Nitchaphon
·

3 min read

Table of contents

Hey everyone! 👋 Today, I want to share my experience building a Rock Paper Scissors game using Next.js, Prisma, and TypeScript. I'll cover both the technical aspects and provide a user guide to help you understand how everything works.

System: Core Features & Implementation

1. Authentication & User Management

The game's foundation is built on a secure user management system that includes role-based access control. Let's look at the key components:

Role-Based Access

Users are categorized into two roles:

// User Schema
model User {
    id       String  @id @default(cuid())
    username String  @unique
    email    String  @unique
    password String
    role     String  @default("user")
    scores   Score[]
}

// Score Schema
model Score {
    id         String @id @default(cuid())
    userId     String
    user       User   @relation(fields: [userId], references: [id])
    points     Int    @default(0)
    totalGames Int    @default(0)
    wins       Int    @default(0)
}

This structure allows for:

  • Unique user identification

  • Score tracking

  • Game statistics

  • Admin privileges

2. Game Logic & Score Calculation

The core game mechanics are managed by a set of functions:

export const RPS_CHOICES = ['rock', 'paper', 'scissors'] as const;
export type RpsChoice = typeof RPS_CHOICES[number];

export function determineWinner(
    playerChoice: RpsChoice, 
    computerChoice: RpsChoice
): 'win' | 'lose' | 'draw' {
    if (playerChoice === computerChoice) return 'draw';

    if (
        (playerChoice === 'rock' && computerChoice === 'scissors') ||
        (playerChoice === 'paper' && computerChoice === 'rock') ||
        (playerChoice === 'scissors' && computerChoice === 'paper')
    ) {
        return 'win';
    }

    return 'lose';
}

Score calculation follows these rules:

  • Win: 3 points

  • Draw: 1 point

  • Loss: 0 points

3. Dashboard & Analytics

The dashboard provides real-time statistics:

type Stats = {
    totalGames: number;
    winRate: number;
    highestScore: number;
    rank: number;
};

These stats are automatically updated after each game, providing users with:

  • Current ranking

  • Win/loss ratio

  • Total games played

  • All-time high score

User Guide: Getting Started & Playing

Getting Started

  1. Account Creation

    • Visit the website

    • Click "Sign Up"

    • Provide:

      • Username

      • Email

      • Password

    • Account is created with default 'user' role

  2. Logging In

    • Enter username/password

    • System automatically loads your statistics

    • Access your personalized dashboard

Playing the Game

  1. Starting a Match

    • Navigate to the game page

    • You'll see three choices: Rock, Paper, Scissors

    • Interface shows your current stats

  2. Game Flow

    • Click your choice

    • Computer randomly selects its move

    • Winner is determined instantly

    • Points are awarded automatically

  3. Score Tracking Each game outcome affects your stats:

    • Victories (3 points): Climb the leaderboard faster

    • Draws (1 point): Steady progress

    • Losses (0 points): Opportunity to improve

Advanced Features

For Regular Users

  • View real-time leaderboard

  • Track personal statistics

  • Compare scores with others

For Administrators

  • Access user management panel

  • Edit user details

  • Monitor game statistics

  • Manage user roles

Technical Setup

The game is built with:

  • Next.js for the frontend

  • Prisma for database management

  • TypeScript for type safety

  • TailwindCSS for styling

Key features:

  • Responsive design

  • Real-time updates

  • Secure authentication

  • Data persistence

Feel free to try it out and let me know what you think! If you have any questions or suggestions, drop them in the comments below.

Web DevelopmentNext.js