Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="tetris-canvas" width="200" height="400"></canvas>
  <script src="script.js"></script>
</body>
</html>
body {
  font-family: Arial, sans-serif;
  text-align: center;
}

#tetris-canvas {
  border: 1px solid black;
}
// Get the canvas element
const canvas = document.getElementById('tetris-canvas');
const ctx = canvas.getContext('2d');

// Set the canvas dimensions
canvas.width = 200;
canvas.height = 400;

// Define the Tetriminos
const tetriminos = [
  // I-Shape
  [
    [0, 0, 0, 0],
    [1, 1, 1, 1],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ],
  // J-Shape
  [
    [0, 1, 0],
    [0, 1, 0],
    [1, 1, 0],
    [0, 0, 0]
  ],
  // L-Shape
  [
    [0, 0, 1],
    [0, 0, 1],
    [0, 1, 1],
    [0, 0, 0]
  ],
  // O-Shape
  [
    [1, 1],
    [1, 1]
  ],
  // S-Shape
  [
    [0, 1, 1],
    [1, 1, 0],
    [0, 0, 0],
    [0, 0, 0]
  ],
  // T-Shape
  [
    [0, 1, 0],
    [1, 1, 1],
    [0, 0, 0],
    [0, 0, 0]
  ],
  // Z-Shape
  [
    [1, 1, 0],
    [0, 1, 1],
    [0, 0, 0],
    [0, 0, 0]
  ]
];

// Define the game variables
let score = 0;
let level = 1;
let linesCleared = 0;
let tetriminoIndex = 0;
let tetriminoRotation = 0;
let tetriminoX = 0;
let tetriminoY = 0;
let grid = [];
let gameOver = false;

// Initialize the grid
for (let i = 0; i < 20; i++) {
  grid[i] = [];
  for (let j = 0; j < 10; j++) {
    grid[i][j] = 0;
  }
}

// Draw the grid
function drawGrid() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;
  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 10; j++) {
      if (grid[i][j] === 1) {
        ctx.fillStyle = 'gray';
        ctx.fillRect(j * 20, i * 20, 20, 20);
      }
      ctx.strokeRect(j * 20, i * 20, 20, 20);
    }
  }
}

// Draw the Tetrimino
function drawTetrimino() {
  ctx.fillStyle = 'blue';
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (tetriminos[tetriminoIndex][i][j] === 1) {
        ctx.fillRect((tetriminoX + j) * 20, (tetriminoY + i) * 20, 20, 20);
      }
    }
  }
}

// Update the game state
function update() {
  if (gameOver) return;
  tetriminoY++;
  if (checkCollision()) {
    tetriminoY--;
    fixTetrimino();
    checkLines();
    tetriminoIndex = Math.floor(Math.random() * tetriminos.length);
    tetriminoRotation = 0;
    tetrimino
Editor is loading...