드디어 코드 전체 받기 성공했는데
<!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();