HTML Tetris Game Code: Build Your Own Tetris Game

<html>
<head>
    <title>Tetris Game Code Example</title>
    <style type="text/css">
        body {
            background-color: black;
        }
<pre><code>    #game {
        width: 300px;
        height: 600px;
        margin: 0 auto;
        background-color: #ddd;
        border: 5px solid #666;
        position: relative;
    }

    .tetromino {
        width: 30px;
        height: 30px;
        position: absolute;
        border: 1px solid #999;
        background-color: #999;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="game"></div>
    <script type="text/javascript">
        // Create the game area
<pre><code>    const game = document.getElementById('game');

    const context = game.getContext('2d');

    const row = 20;
    const col = 10;
    const sq = 30;
    const empty = 'black';

    // Draw the board

    function drawBoard() {
        for (let r = 0; r &lt; row; r++) {
            for (let c = 0; c &lt; col; c++) {
                context.fillStyle = empty;
                context.fillRect(c * sq, r * sq, sq, sq);
            }
        }
    }

    drawBoard();

    // Tetrominoes

    const pieces = [
        [Z, 'red'],
        [S, 'green'],
        [T, 'yellow'],
        [O, 'blue'],
        [L, 'purple'],
        [I, 'cyan'],
        [J, 'orange']
    ];

    // Generate pieces

    let p = 0;
    let currentPiece;

    function randomPiece() {
        let r = pieces[p][0];
        currentPiece = new Piece(pieces[p][1]);

        p = (p + 1) % pieces.length;

        return r;
    }

    // Create piece

    function Piece(color) {
        this.color = color;

        this.tetromino = randomPiece();

        this.activeTetromino = this.tetromino[0];

        this.x = 3;
        this.y = 0;
    }

    // Draw the piece

    Piece.prototype.draw = function() {
        for (let r = 0; r &lt; this.activeTetromino.length; r++) {
            for (let c = 0; c &lt; this.activeTetromino.length; c++) {
                if (this.activeTetromino[r][c]) {
                    context.fillStyle = this.color;
                    context.fillRect(this.x + c * sq,
                        this.y + r * sq,
                        sq, sq);
                }
            }
        }
    }

    // Move the piece

    Piece.prototype.move = function(dir) {
        this.x += dir;
        if (this.collision(dir)) {
            this.x -= dir;
        }
    }

    // Collision detection

    Piece.prototype.collision = function(dir) {
        for (let r = 0; r &lt; this.activeTetromino.length; r++) {
            for (let c = 0; c &lt; this.activeTetromino.length; c++) {
                if (!this.activeTetromino[r][c]) {
                    continue;
                }
                let newX = this.x + c + dir;
                let newY = this.y + r;

                if (newX &lt; 0 || newX &gt;= col || newY &gt;= row) {
                    return true;
                }
            }
        }
        return false;
    }

    // Draw the piece

    let piece = new Piece();

    piece.draw();
&lt;/script&gt;
</code></pre>
</body>
</html>