드디어 코드 전체 받기 성공했는데


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <style>
        canvas {
            display: block;
            margin: auto;
            background-color: black;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <canvas id="game" width="320" height="640"></canvas>
    <script src="tetris.js"></script>
</body>
</html>


const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const scale = 32;

const tetrominoes = [
    [[1, 1, 1],
     [0, 1, 0]],

    [[0, 2, 2],
     [2, 2, 0]],

    [[3, 3, 0],
     [0, 3, 3]],

    [[4, 4, 4, 4]],

    [[5, 5, 0],
     [0, 5, 5]],

    [[0, 6, 6],
     [6, 6, 0]],

    [[7, 7, 7],
     [7, 0, 0]]
];

class Tetromino {
    constructor() {
        this.matrix = this.randomPiece();
        this.pos = {x: (canvas.width / 2 / scale) - 1, y: 0};
    }

    randomPiece() {
        return tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
    }

    draw() {
        this.matrix.forEach((row, y) => {
            row.forEach((value, x) => {
                if (value) {
                    ctx.fillStyle = 'white';
                    ctx.fillRect(this.pos.x + x, this.pos.y + y, 1, 1);
                }
            });
        });
    }

    update() {
        this.pos.y++;
        this.draw();
    }
}

let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;

function update(time = 0) {
    const deltaTime = time - lastTime;
    lastTime = time;

    dropCounter += deltaTime;
    if (dropCounter > dropInterval) {
        piece.update();
        dropCounter = 0;
    }

    draw();
    requestAnimationFrame(update);
}

function draw() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    piece.draw();
}

const piece = new Tetromino();
update();