俄罗斯方块-526互联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h2 {
      font-size: 19px;
      text-align: center;
    }

    #tetris {
      width: 240px;
      margin: 0 auto;
      background-color: #d5d5d5;
      border-radius: 10px;
      padding: 25px;
    }

    #game-board {
      width: 200px;
      height: 400px;
      border: 4px solid #4b6014;
      position: relative;
      border-radius: 10px;
      background-color: #f4f126;
      margin: 0 auto;
    }

    #score {
      text-align: center;
      margin-top: 10px;
    }

    .block {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: #000;
      border: 1px solid #3a3a3a;
      box-sizing: border-box;
    }
  </style>

</head>
<body>
<h2>俄罗斯方块</h2>
<div id="tetris">
  <div id="game-board"></div>
  <div id="score">Score: <span id="score-value">0</span></div>
</div>
</body>
<script>
  const board = document.getElementById('game-board');
  const scoreValue = document.getElementById('score-value');
  const blockSize = 20;
  const rows = 20;
  const cols = 10;
  let score = 0;
  let boardGrid = Array.from(Array(rows), () => new Array(cols).fill(0));
  let currentShape;
  let currentRow;
  let currentCol;




    document.addEventListener('DOMContentLoaded', () => {

    function createShape() {
      const shapes = [
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[1, 1, 0], [0, 1, 1]],
        [[0, 1, 1], [1, 1, 0]],
        [[1, 1, 1], [0, 1, 0]],
        [[1, 1, 1], [1, 0, 0]],
        [[1, 1, 1], [0, 0, 1]]
      ];
      const randomIndex = Math.floor(Math.random() * shapes.length);
      const shape = shapes[randomIndex];
      currentShape = shape;
      currentRow = 0;
      currentCol = Math.floor(cols / 2) - Math.floor(shape[0].length / 2);
    }

    function drawBoard() {
    board.innerHTML = '';
    for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
    if (boardGrid[row][col]) {
    const block = document.createElement('div');
    block.className = 'block';
    block.style.top = row * blockSize + 'px';
    block.style.left = col * blockSize + 'px';
    board.appendChild(block);
  }
  }
  }
  }

    function drawCurrentShape() {
    for (let row = 0; row < currentShape.length; row++) {
    for (let col = 0; col < currentShape[row].length; col++) {
    if (currentShape[row][col]) {
    const block = document.createElement('div');
    block.className = 'block';
    block.style.top = (currentRow + row) * blockSize + 'px';
    block.style.left = (currentCol + col) * blockSize + 'px';
    board.appendChild(block);
  }
  }
  }
  }

    function checkCollision() {
    for (let row = 0; row < currentShape.length; row++) {
    for (let col = 0; col < currentShape[row].length; col++) {
    if (currentShape[row][col]) {
    const newRow = currentRow + row;
    const newCol = currentCol + col;
    if (
    newRow >= rows ||
    newCol < 0 ||
    newCol >= cols ||
    boardGrid[newRow][newCol]
    ) {
    return true;
  }
  }
  }
  }
    return false;
  }

    function mergeShape() {
    for (let row = 0; row < currentShape.length; row++) {
    for (let col = 0; col < currentShape[row].length; col++) {
    if (currentShape[row][col]) {
    const newRow = currentRow + row;
    const newCol = currentCol + col;
    boardGrid[newRow][newCol] = 1;
  }
  }
  }
  }

    function clearRows() {
    for (let row = rows - 1; row >= 0; row--) {
    if (boardGrid[row].every((cell) => cell)) {
    boardGrid.splice(row, 1);
    boardGrid.unshift(new Array(cols).fill(0));
    score++;
  }
  }
  }

    function updateScore() {
    scoreValue.textContent = score;
  }

    function moveDown() {
    currentRow++;
    if (checkCollision()) {
    currentRow--;
    mergeShape();
    clearRows();
    updateScore();
    createShape();
    if (checkCollision()) {
    gameOver();
  }
  }
  }

    function moveLeft() {
    currentCol--;
    if (checkCollision()) {
    currentCol++;
  }
  }

    function moveRight() {
    currentCol++;
    if (checkCollision()) {
    currentCol--;
  }
  }

    function rotateShape() {
    const rotatedShape = currentShape[0].map((_, colIndex) =>
    currentShape.map((row) => row[colIndex]).reverse()
    );
    const prevShape = currentShape;
    currentShape = rotatedShape;
    if (checkCollision()) {
    currentShape = prevShape;
  }
  }

    function gameOver() {
    alert('Game Over');
    resetGame();
  }

    function resetGame() {
    score = 0;
    boardGrid = Array.from(Array(rows), () => new Array(cols).fill(0));
    updateScore();
    createShape();
  }

    function handleKeyPress(event) {
    switch (event.key) {
    case 'ArrowDown':
    moveDown();
    break;
    case 'ArrowLeft':
    moveLeft();
    break;
    case 'ArrowRight':
    moveRight();
    break;
    case 'ArrowUp':
    rotateShape();
    break;
  }
    drawBoard();
    drawCurrentShape();
  }

    function startGame() {
    createShape();
    setInterval(() => {
    moveDown();
    drawBoard();
    drawCurrentShape();
  }, 500);
    document.addEventListener('keydown', handleKeyPress);
  }

    startGame();
  });




</script>

</html>