📄 Software Requirement Document

Project Title: Quiz Racing Game (Desktop Browser Based)

1. Project Overview

The Quiz Racing Game is an educational browser-based interactive game designed for desktop users.

The player controls a car on a 4-lane road. The goal is to select (touch) only the correct options based on a given question (e.g., "Touch all Software Components").

The game combines:

  • Education
  • Reflex-based interaction
  • Visual engagement

The application must run in modern desktop browsers (Chrome, Edge, Firefox).

2. Target Platform

  • Desktop Web Browser
  • Responsive for minimum screen width: 1024px
  • No mobile support required (optional enhancement)

3. Technology Stack (Preferred)

Frontend:

  • HTML5
  • CSS3
  • JavaScript (ES6+)
  • Canvas API or Phaser.js (recommended)

Backend (Optional but recommended):

  • PHP
  • MySQL (for storing scores and leaderboard)

4. Game Flow

4.1 Start Screen

Features:

  • Input field: Student Name (Required)
  • Question selection (Dropdown OR random selection)
  • Start Game Button

Validation: Student name cannot be empty.

4.2 Game Screen

Layout:

  • Vertical 4-lane road
  • Car positioned at bottom center
  • Student name displayed on flag above car
  • Score display at top
  • Timer display at top
  • Current question displayed at top

5. Core Game Mechanics

5.1 Car Control

  • Arrow Left → Move to left lane
  • Arrow Right → Move to right lane
  • Movement restricted to 4 fixed lanes
  • Smooth animation between lanes

5.2 Question Logic

At the start of each game, example questions:

  • Touch all Software Components
  • Touch all Hardware Components
  • Touch all Input Devices
  • Touch all Output Devices

The question remains visible during gameplay.

5.3 Object Spawning

  • Objects appear at top of screen
  • Move downward toward the player
  • Spawn every 1.5–2 seconds
  • Each object randomly assigned: Lane (1–4), Label text, Category type

Example object structure:

{
  label: "Keyboard",
  category: "hardware"
}

5.4 Collision Detection

When car lane == object lane and object vertical position reaches car level:

  • If object category == question category: Increase score (+10), Play correct sound, Visual effect (green flash)
  • Else: Decrease score (-5) or reduce life, Red flash effect

6. Game Rules

  • Game duration: 60 seconds (configurable) OR 3 lives system (configurable)
  • Game ends when: Timer reaches zero OR Lives become zero

7. Scoring System

  • Correct Answer: +10
  • Wrong Answer: -5

Final Score displayed on Game Over screen.

8. End Screen

Display:

  • Student Name
  • Final Score
  • Time survived
  • Restart Button
  • Save Score Button (if backend enabled)

Optional: Leaderboard button.

9. Visual Requirements

  • 2D top-down racing style
  • Smooth animation
  • Clean educational theme
  • Bright but not distracting colors
  • Car must have: Small flag above it, Student name written on flag

10. Audio Requirements

Optional but recommended:

  • Background music (loop)
  • Correct answer sound
  • Wrong answer sound
  • Game over sound

11. Performance Requirements

  • Must run at minimum 60 FPS
  • No lag during object spawning
  • Efficient collision detection

12. Data Storage (Optional Backend)

If backend implemented:

Database Table: scores

Fields: id (INT, PK), student_name (VARCHAR), score (INT), date_time (DATETIME)

Features:

  • Save score after game
  • Display Top 10 leaderboard
  • Sort by highest score