🎮 Tetris Game

A modern, browser-based Tetris game built with vanilla JavaScript and Go. Features include real-time scoring, customizable themes, persistent leaderboards, and smooth gameplay mechanics.

📋 Table of Contents

• 🎮 Tetris Game
  • 🎯 Overview
  • ✨ Features
  • 🛠 Technologies
    • Backend
    • Frontend
    • Data Storage
  • 📦 Installation
    • Prerequisites
    • Steps
  • 🎲 How to Play
    • Scoring
  • 📸 Game Screenshots
    • Welcome Screen
    • Gameplay
  • 🎮 Game Controls
    • Buttons
  • 📁 Project Structure
  • 🏗 Architecture
    • Game Components
    • Backend Architecture
    • Communication Flow
  • 🤝 Contributing
    • Ideas for Contributions

🎯 Overview

This project is a fully functional Tetris game. It demonstrates modern web development practices, combining a Go backend for server-side logic and WebSocket communication with a vanilla JavaScript frontend for game mechanics and rendering.

✨ Features

• Classic Tetris Gameplay: All standard Tetris mechanics including piece rotation, line clearing, and gravity
• Real-time Scoring System: Track your score with persistent storage
• Global Leaderboard: View top scores from all players with pagination
• Customizable Themes: Choose from 6 different color schemes (Orange, Red, Green, Violet, Blue, Cyan)
• Time-based Challenges: 180-second game sessions with countdown timer
• Game Controls: Pause, resume, and restart functionality
• Responsive Design: Clean, modern UI that works across different screen sizes
• WebSocket Communication: Real-time data synchronization between client and server
• Persistent Data: Scores saved in JSON format for permanent record-keeping

🛠 Technologies

Backend

• Go - Server-side application and WebSocket handler
• Gorilla WebSocket - WebSocket implementation for real-time communication
• Go Templates - HTML templating

Frontend

• Vanilla JavaScript (ES6+) - Game logic and DOM manipulation
• HTML5 Canvas/DOM - Game rendering
• CSS3 - Styling and animations
• WebSocket API - Client-side real-time communication

Data Storage

• JSON - Score persistence

📦 Installation

Prerequisites

• Go (version 1.16 or higher)
• A modern web browser (Chrome, Firefox, Safari, or Edge)

Steps

1. Clone the repository

   git clone <repository-url>
   cd make-your-game

2. Install Go dependencies

   go mod download

3. Run the server

   go run main.go

4. Open your browser

   Navigate to http://localhost:8080

The game should now be running and ready to play!

🎲 How to Play

1. Click the Start button to begin a new game
2. Tetrominoes (game pieces) will fall from the top of the board
3. Use keyboard controls to move and rotate pieces
4. Complete horizontal lines to clear them and earn points
5. The game ends when pieces stack to the top or the timer runs out (180 seconds)
6. Enter your name to save your score to the leaderboard

Scoring

• Clear lines to earn points
• The more lines you clear at once, the higher your score
• Try to beat your personal best and climb the leaderboard!

📸 Game Screenshots

Welcome Screen

The welcome screen with color theme options and game controls

Gameplay

Active gameplay showing the Tetris board, falling pieces, and score tracking

🎮 Game Controls

Key	Action
← (Left Arrow)	Move piece left
→ (Right Arrow)	Move piece right
↓ (Down Arrow)	Soft drop (move piece down faster)
Space	Hard drop (instantly drop piece)
↑ (Up Arrow) or W	Rotate piece clockwise
P	Pause game
R	Restart game

Buttons

• Start: Begin a new game
• Pause: Pause the current game
• Resume: Continue a paused game
• Restart: Start a fresh game (resets score and timer)
• View Scores: Check the global leaderboard

📁 Project Structure

make-your-game/
├── main.go                 # Go server and WebSocket handler
├── go.mod                  # Go module dependencies
├── go.sum                  # Go module checksums
├── index.html              # Main HTML file
├── score.json              # Persistent score storage
├── README.md               # Project documentation
├── script/
│   ├── init.sh            # Initialization script
│   └── push.sh            # Deployment script
└── statics/
    ├── style.css          # Main stylesheet
    ├── images/            # Game assets
    │   ├── background.jpg
    │   ├── down.png
    │   ├── left.webp
    │   ├── right.svg
    │   └── up.png
    └── js/                # JavaScript modules
        ├── main.js        # Main game loop and event handlers
        ├── Tetrominos.js  # Tetromino class and shapes
        ├── board.js       # Game board logic
        ├── gamePanel.js   # Game panel management
        ├── scoreManager.js # Score tracking and persistence
        ├── timeManager.js # Timer functionality
        └── learn.js       # Tutorial/learning features

🏗 Architecture

Game Components

1. Tetromino System (Tetrominos.js)

   • Defines all 7 standard Tetris pieces (I, O, T, S, Z, J, L)
   • Handles piece rotation, movement, and collision detection
   • Manages piece rendering and deletion

2. Board Management (board.js)

   • Maintains the game grid state
   • Checks for completed lines
   • Handles line clearing and board updates

3. Game Panel (gamePanel.js)

   • Manages overall game state
   • Coordinates between different game components
   • Handles game over conditions

4. Score Manager (scoreManager.js)

   • Tracks current score
   • Communicates with backend via WebSocket
   • Manages leaderboard display

5. Time Manager (timeManager.js)

   • 180-second countdown timer
   • Pause/resume functionality
   • Game end trigger

Backend Architecture

The Go server (main.go) provides:

• HTTP Server: Serves static files and HTML templates
• WebSocket Handler: Real-time bidirectional communication
• Score Persistence: Reads/writes to score.json
• Leaderboard API: Retrieves and ranks player scores

Communication Flow

Client (Browser) ←→ WebSocket ←→ Server (Go)
                                    ↓
                              score.json

🤝 Contributing

Contributions are welcome! If you'd like to improve the game:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Ideas for Contributions

• Add difficulty levels (faster gravity at higher levels)
• Implement ghost piece preview
• Add sound effects and background music
• Create mobile touch controls
• Add multiplayer functionality
• Implement next piece preview
• Add special power-ups

---

⭐ Star this repository if you found it helpful! ⭐

Made with ❤️ from 🇸🇳