Simple HTML Tetris Game

This is a basic implementation of Tetris using HTML, CSS, and JavaScript.

HTML Structure

The HTML structure consists of a main container with a grid of square divs that represent the game board.

<div class='container'>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
    <div class='grid'></div>
</div>

CSS Styling

The CSS styling is used to create the game board and the tetromino shapes.

.container {
    width: 300px;
    height: 600px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.grid {
    width: calc(100% / 10);
    height: calc(100% / 20);
    border: 1px solid black;
}

.shape {
    position: absolute;
    width: calc(100% / 10);
    height: calc(100% / 20);
    border: 1px solid black;
}

JavaScript Functionality

The JavaScript code handles the game logic and user input.

const grid = document.querySelector('.container');
let squares = Array.from(document.querySelectorAll('.grid'));
const width = 10;

// Define the tetromino shapes
const shapes = [
    [1, width + 1, width * 2 + 1, 2],
    [0, width, width + 1, width * 2 + 1],
    [1, width, width + 1, width + 2],
    [0, 1, width, width + 1],
    [1, width + 1, width * 2 + 1, width * 3 + 1]
];

// Generate a random tetromino shape
let currentShape = shapes[Math.floor(Math.random() * shapes.length)];

// Draw the tetromino shape on the game board
function draw() {
    currentShape.forEach(index => {
        squares[currentPosition + index].classList.add('shape');
    });
}

// Undraw the tetromino shape from the game board
function undraw() {
    currentShape.forEach(index => {
        squares[currentPosition + index].classList.remove('shape');
    });
}

// Move the tetromino shape down the game board
function moveDown() {
    undraw();
    currentPosition += width;
    draw();
}

// Move the tetromino shape left on the game board
function moveLeft() {
    undraw();
    const isAtLeftEdge = currentShape.some(index => (currentPosition + index) % width === 0);
    if (!isAtLeftEdge) currentPosition -= 1;
    if (currentShape.some(index => squares[currentPosition + index].classList.contains('taken'))) {
        currentPosition += 1;
    }
    draw();
}

// Move the tetromino shape right on the game board
function moveRight() {
    undraw();
    const isAtRightEdge = currentShape.some(index => (currentPosition + index) % width === width - 1);
    if (!isAtRightEdge) currentPosition += 1;
    if (currentShape.some(index => squares[currentPosition + index].classList.contains('taken'))) {
        currentPosition -= 1;
    }
    draw();
}

// Rotate the tetromino shape on the game board
function rotate() {
    undraw();
    currentShapeIndex++;
    if (currentShapeIndex === currentShape.length) {
        currentShapeIndex = 0;
    }
    currentShape = shapes[currentShapeIndex];
    draw();
}

// Add event listeners for user input
document.addEventListener('keydown', event => {
    if (event.keyCode === 37) {
        moveLeft();
    } else if (event.keyCode === 38) {
        rotate();
    } else if (event.keyCode === 39) {
        moveRight();
    } else if (event.keyCode === 40) {
        moveDown();
    }
});

// Start the game
let currentPosition = 4;
let currentShapeIndex = 0;
draw();

That's it! You now have a working Tetris game using HTML, CSS, and JavaScript.

To enhance this basic game further, you can consider adding features like:

• Game Over: Detect when the game board is filled and display a game over message.
• Score: Implement a scoring system to track the player's progress.
• Level System: Introduce increasing difficulty levels as the game progresses.
• Next Piece Preview: Show the player the next tetromino shape that will fall.
• Sound Effects: Add sound effects for actions like placing a piece or clearing a line.
• User Interface: Create a UI with buttons for controls and displaying the score and level.
• Responsive Design: Make the game work well on different screen sizes.