Hand Cricket Game (JavaScript)

A browser-based interactive Hand Cricket game built using HTML, CSS, and JavaScript. The game simulates a batting vs computer system where each click represents a cricket move, and the computer responds with random logic.

---

Play this game -> Website URL

Features

• Player vs Computer hand cricket gameplay
• Batting and bowling phases
• Score tracking for both player and computer
• LocalStorage-based win history tracking
• Animated UI interactions for inputs and table clicks
• Out detection system
• Special events for boundaries (4) and sixes (6)
• Dynamic target updates for computer innings
• Confetti celebration on win
• Game over detection and result display overlay

---

Game Rules

• Player selects a number from the table (1–6 or DOT)

• Computer generates a random number (1–6)

• If both numbers match → player is OUT

• Otherwise:

  • Player batting: runs are added to player score
  • Computer batting: runs are added to computer score

• DOT ball has special logic:

  • Player batting → penalty (-2 runs)
  • Computer batting → +2 runs

---

Game Flow

1. Player starts batting
2. Player clicks number inputs from table
3. Computer generates random response
4. Scores update dynamically
5. When player gets out → computer starts batting
6. When computer gets out → result is calculated
7. Winner is declared based on score comparison

---

DOM Structure Overview

The game interacts with multiple DOM elements:

• Score display:

  • Player score (pscr)
  • Computer score (cscr)

• Inputs:

  • Player move input (hum_inp)
  • Computer move input (com_inp)

• Scoreboard:

  • Player wins (allysc)
  • Computer wins (allcsc)

• Overlay system for game events

• Game status display (gs, ps)

• Cricket table (table)

---

Core Logic

Game State

• isPlayerBatting: Tracks current turn
• gameOver: Stops further gameplay after result

---

Main Event Listener

Handles click on table cells:

• Reads player move
• Generates computer move (random 1–6)
• Checks for OUT condition
• Updates score or switches innings

---

Score Handling

• Adds runs based on player/computer state
• Handles DOT ball logic
• Triggers animations for score updates
• Shows celebration for 4s and 6s

---

Out Handling

• If player is out:

  • Switch to computer batting

• If computer is out:

  • Compare scores
  • Declare winner or draw
  • Update localStorage win counters
  • Hide game board

---

Game Over Conditions

• Computer overtakes score during chase
• Computer is out in second innings
• Player is out and innings completed

---

Visual Effects

• Input scale animation on selection
• Score highlight effects (success, danger, primary)
• Overlay popup system for events
• Confetti animation on win
• Smooth transitions for UI elements

---

Persistent Storage

Uses localStorage:

• allysc → Player total wins
• allcsc → Computer total wins

These values persist even after page reload.

---

Functions Overview

• handleScore() → Updates scores based on game logic
• handleOut() → Handles innings switch and game end
• checkGameOver() → Validates win conditions
• showCelebration() → Displays 4/6 animations
• createConfetti() → Win animation effect
• updateTargetMessage() → Shows required runs for computer
• animateInput() → UI interaction effects

---

Technologies Used

• HTML5
• CSS3 (animations + transitions)
• Vanilla JavaScript (DOM + logic)
• LocalStorage API