Make Your Game - Tetris

A classic Tetris game implementation using vanilla JavaScript and DOM manipulation, built without any frameworks or canvas library.

Overview

This project is a browser-based Tetris game that demonstrates understanding of game loops, DOM manipulation, CSS animations, and performance optimization using requestAnimationFrame. The game follows the classic Tetris gameplay where players arrange falling tetrominoes to complete horizontal lines.

Features

Gameplay

• Classic Tetris Mechanics: All 7 standard tetrominoes (T, O, L, J, S, Z, I shapes)
• Piece Movement: Left, right, down movement with arrow keys
• Rotation: Clockwise rotation with collision detection
• Hard Drop: Instantly drop piece to bottom with spacebar
• Line Clearing: Complete horizontal lines are cleared with scoring
• Game Over Detection: Game ends when pieces stack to the top

User Interface

• Score Display: Real-time score tracking (13 points per line cleared)
• Timer: Elapsed game time counter
• Start Menu: Initial game start screen
• Pause Menu:
  • Resume game option
  • Restart game option
• Game Over Screen: End game display with restart option

Controls

Key	Action
← Arrow Left	Move piece left
→ Arrow Right	Move piece right
↓ Arrow Down	Move piece down (soft drop)
↑ Arrow Up	Rotate piece clockwise
Space	Hard drop (instant drop)
Escape	Pause/Resume game

Visual Features

• Color-coded Tetrominoes: Each piece type has distinct colors
• CSS Animations:
  • Drop animation for falling pieces
  • Rotation animation for line clears
• Grid Display: 20x10 classic Tetris grid
• Visual Feedback: Active pieces vs. fixed pieces styling

Technical Implementation

Architecture

make-your-game/
├── index.html      # HTML structure
├── style.css       # Styling and animations
└── game.js         # Game logic and rendering

Game Loop

The game uses requestAnimationFrame for smooth 60 FPS rendering:

function gameLoop(timestamp) {
    updateTimer(timestamp);
    if (gameover) { /* handle game over */ }
    if (pause) return;

    if (time > dropInterval) {
        moveDown();
        dropStart = timestamp;
    }
    requestAnimationFrame(gameLoop);
}

Grid System

• Grid Size: 20 rows x 10 columns
• Cell States:
  • 0: Empty cell
  • 1: Active (falling) piece
  • 2: Fixed (placed) piece

Tetrominoes

All 7 standard Tetris pieces implemented as 2D arrays:

Shape	Name	Pattern
T	T-shape	[[0,1,0],[1,1,1]]
O	O-shape (Square)	[[1,1],[1,1]]
L	L-shape	[[1,0,0],[1,1,1]]
J	J-shape	[[0,0,1],[1,1,1]]
S	S-shape	[[0,1,1],[1,1,0]]
Z	Z-shape	[[1,1,0],[0,1,1]]
I	I-shape (Line)	[[1,1,1,1]]

Collision Detection

The game validates moves before execution:

• Boundary checking (left, right, bottom walls)
• Collision with fixed pieces
• Rotation collision with wall kick fallback

Rendering

• Initial Render: initGrid() creates DOM elements
• Update Render: renderGrid() updates cell classes without recreating DOM
• Efficient Updates: Only modifies cells that change state

Performance Optimization

DOM Optimization

• Single DOM creation on init
• Class-based updates instead of DOM recreation
• Minimal reflows through batched updates

Animation

• CSS animations for visual effects
• requestAnimationFrame for game loop
• Timestamp-based timing for consistent speed

Rendering Strategy

• Grid state stored in JavaScript array
• DOM updated only on state changes
• Fixed elements styled with CSS classes

Game Configuration

Parameter	Value	Description
ROWS	20	Grid height
COLUMNS	10	Grid width
dropInterval	400ms	Piece drop speed
scoreInc	13	Points per line

How to Play

1. Open index.html in a web browser
2. Click "Start" to begin the game
3. Use arrow keys to move and rotate pieces
4. Complete horizontal lines to score points
5. Avoid stacking pieces to the top
6. Press Escape to pause the game

Compliance with Requirements

Core Requirements

Requirement	Status	Notes
Pre-approved game type	✅	Tetris
Plain JavaScript/DOM	✅	No frameworks
No canvas library	✅	DOM-based rendering
requestAnimationFrame	✅	Used in game loop

Performance Requirements

Requirement	Status	Notes
60 FPS target	✅	requestAnimationFrame implementation
Minimal layer usage	✅	Efficient DOM structure
Smooth animations	✅	CSS animations

Gameplay Features

Requirement	Status	Notes
Timer/Clock	✅	Elapsed time display
Score/Points	✅	Line clear scoring
Lives remaining	⚠️	N/A for Tetris (single life)

Pause Menu

Requirement	Status	Notes
Continue option	✅	Resume button
Restart option	✅	Restart button
Frame rate maintained	✅	Game loop pauses cleanly

Controls

Requirement	Status	Notes
Keyboard-only controls	✅	Arrow keys + Space + Escape
Smooth motion	✅	Immediate response
No key spamming required	✅	Single keypress actions

File Structure

index.html

• Basic HTML5 structure
• Game board container
• Script and stylesheet links

style.css

• Grid and cell styling
• Animation keyframes (drop, rotate)
• Menu styling (pause, start, game over)
• Responsive button styles

game.js

• Game state management
• Tetromino definitions and colors
• Grid initialization and rendering
• Movement and rotation logic
• Collision detection
• Line clearing mechanics
• Pause/Start/Game Over menus
• Game loop with timing

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge

Known Limitations

1. No piece preview (next piece display)
2. No hold piece functionality
3. No level progression (speed increase)
4. No high score persistence
5. No sound effects
6. No ghost piece (drop preview)

Future Enhancements

• Add next piece preview
• Implement hold piece feature
• Add progressive difficulty (faster drops)
• Local storage for high scores
• Sound effects and music
• Ghost piece indicator
• Mobile touch controls
• Multiplayer mode

Performance Testing

To verify 60 FPS performance:

1. Open Chrome DevTools (F12)
2. Go to Performance tab
3. Record during gameplay
4. Check for consistent frame timing (~16.67ms)

Alternatively:

1. Open DevTools
2. Press Ctrl+Shift+P
3. Type "Show FPS"
4. Monitor FPS counter during gameplay

Screenshots

Start Screen

Gameplay

Game Over

License

This project is part of the Zone01 curriculum and is intended for educational purposes.

Authors

Developed as part of the Make Your Game project at Zone01 Oujda.

• Hamza Boutaleb - GitHub
• Yassine Omari - Co-developer
• Khalid El Amrani - Co-developer