HTML Tetris Game: Simple Implementation and Code

<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
    body {
        background-color: #FFCB05;
    }

    canvas {
        border: 1px solid #FFCB05;
        background-color: #FFCB05;
    }

    .game-container {
        margin: 50px auto;
        padding: 20px;
        background-color: #FFBEF3;
        width: 400px;
        border-radius: 5px;
    }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById('tetris');
        var ctx = canvas.getContext('2d');
        var score = 0;

        var rowCount = 20;
        var columnCount = 10;

        var blockSize = 20;
        var borderSize = 2;

        var fieldColor = '#FFFDBF';
        var borderColor = '#FFBEF3';

        function drawField() {
            ctx.fillStyle = fieldColor;
            ctx.fillRect(0, 0, columnCount * blockSize, rowCount * blockSize);

            ctx.strokeStyle = borderColor;
            // draw field border
            ctx.lineWidth = borderSize;
            ctx.strokeRect(0, 0, columnCount * blockSize, rowCount * blockSize);

            // draw vertical lines
            for (var x = 0; x < columnCount; x++) {
                ctx.beginPath();
                ctx.moveTo(x * blockSize, 0);
                ctx.lineTo(x * blockSize, rowCount * blockSize);
                ctx.stroke();
            }

            // draw horizontal lines
            for (var y = 0; y < rowCount; y++) {
                ctx.beginPath();
                ctx.moveTo(0, y * blockSize);
                ctx.lineTo(columnCount * blockSize, y * blockSize);
                ctx.stroke();
            }
        }
    
        drawField();
    };
</script>
</head>
<body>
    <div class='game-container'>
        <canvas id='tetris' width='400' height='400'></canvas>
    </div>
</body>
</html>