• 日期: 2028-05-17
  • 标签: 常规
<html>
<head>
  <title>Simple Tetris Game</title>
  <style>
    #game-container {
      position: relative;
    }
    #game-board {
      position: absolute;
      left: 0;
      top: 0;
      width: 350px;
      height: 500px;
      border-style: solid;
      border-width: 3px;
    }
    .tetromino {
      position: absolute;
      width: 30px;
      height: 30px;
      border-style: solid;
      border-width: 1px;
    }
  </style>
</head>
<body>
  <div id='game-container'>
    <div id='game-board'></div>
  </div>
  <script>
    // Define the game board
    let board = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ];
<pre><code>let currentTetromino = {
  shape: [
    [1, 0],
    [1, 0],
    [1, 1],
  ],
  x: 4,
  y: 0,
};

let nextTetromino = {
  shape: [
    [2, 2],
    [2, 2],
  ],
  x: 4,
  y: 0,
};

let isGameOver = false;

// Draw the game board
const drawBoard = () =&gt; {
  let gameBoard = document.getElementById('game-board');
  let gameContainer = document.getElementById('game-container');

  let gameBoardWidth = gameContainer.clientWidth;
  let gameBoardHeight = gameContainer.clientHeight;

  let blockWidth = gameBoardWidth / board[0].length;
  let blockHeight = gameBoardHeight / board.length;

  gameBoard.innerHTML = '';

  for (let row = 0; row &lt; board.length; row++) {
    for (let column = 0; column &lt; board[row].length; column++) {
      let block = document.createElement('div');
      block.className = 'tetromino';
      block.style.backgroundColor = board[row][column] ? 'black' : 'white';
      block.style.left = (column * blockWidth) + 'px';
      block.style.top = (row * blockHeight) + 'px';
      block.style.width = blockWidth + 'px';
      block.style.height = blockHeight + 'px';
      gameBoard.appendChild(block);
    }
  }
}

// Draw the current tetromino
const drawTetromino = (tetromino) =&gt; {
  let gameBoard = document.getElementById('game-board');
  let gameContainer = document.getElementById('game-container');

  let gameBoardWidth = gameContainer.clientWidth;
  let gameBoardHeight = gameContainer.clientHeight;

  let blockWidth = gameBoardWidth / board[0].length;
  let blockHeight = gameBoardHeight / board.length;

  for (let row = 0; row &lt; tetromino.shape.length; row++) {
    for (let column = 0; column &lt; tetromino.shape[row].length; column++) {
      if (tetromino.shape[row][column] === 0) {
        continue;
      }

      let block = document.createElement('div');
      block.className = 'tetromino';
      block.style.backgroundColor = 'red';
      block.style.left = ((tetromino.x + column) * blockWidth) + 'px';
      block.style.top = ((tetromino.y + row) * blockHeight) + 'px';
      block.style.width = blockWidth + 'px';
      block.style.height = blockHeight + 'px';
      gameBoard.appendChild(block);
    }
  }
}

// Move the current tetromino
const moveTetromino = (tetromino, keyCode) =&gt; {
  switch (keyCode) {
    case 37: // left arrow
      tetromino.x--;
      break;
    case 38: // up arrow
      rotateTetromino(tetromino);
      break;
    case 39: // right arrow
      tetromino.x++;
      break;
    case 40: // down arrow
      tetromino.y++;
      break;
    default:
      break;
  }
}

// Rotate the current tetromino
const rotateTetromino = (tetromino) =&gt; {
  let newShape = [];
  for (let column = 0; column &lt; tetromino.shape[0].length; column++) {
    let newRow = [];
    for (let row = tetromino.shape.length - 1; row &gt;= 0; row--) {
      newRow.push(tetromino.shape[row][column]);
    }
    newShape.push(newRow);
  }
  tetromino.shape = newShape;
}

// Check if the current tetromino can move
const canMove = (tetromino) =&gt; {
  for (let row = 0; row &lt; tetromino.shape.length; row++) {
    for (let column = 0; column &lt; tetromino.shape[row].length; column++) {
      if (tetromino.shape[row][column] === 0) {
        continue;
      }

      let newX = tetromino.x + column;
      let newY = tetromino.y + row;

      if (newX &lt; 0 || newX &gt;= board[0].length || newY &gt;= board.length || board[newY][newX] !== 0) {
        return false;
      }
    }
  }
  return true;
}

// Add the current tetromino to the game board
const addTetrominoToBoard = (tetromino) =&gt; {
  for (let row = 0; row &lt; tetromino.shape.length; row++) {
    for (let column = 0; column &lt; tetromino.shape[row].length; column++) {
      if (tetromino.shape[row][column] === 0) {
        continue;
      }

      let newX = tetromino.x + column;
      let newY = tetromino.y + row;

      board[newY][newX] = tetromino.shape[row][column];
    }
  }
  currentTetromino = nextTetromino;
  nextTetromino = {
    shape: [
      [3, 0],
      [3, 0],
      [3, 3],
    ],
    x: 4,
    y: 0,
  };
  drawBoard();
  drawTetromino(currentTetromino);
}

// Handle keyboard input
document.addEventListener('keydown', (event) =&gt; {
  if (isGameOver) {
    return;
  }
  moveTetromino(currentTetromino, event.keyCode);
  if (!canMove(currentTetromino)) {
    moveTetromino(currentTetromino, event.keyCode * -1);
  }
  drawBoard();
  drawTetromino(currentTetromino);

  // Check if the tetromino has reached the bottom
  if (currentTetromino.y + currentTetromino.shape.length === board.length) {
    addTetrominoToBoard(currentTetromino);
  }
});

// Start the game
drawBoard();
drawTetromino(currentTetromino);
</code></pre>
  </script>
</body>
</html>
Simple HTML Tetris Game: Learn to Code Your Own

原文地址: https://www.cveoy.top/t/topic/lmpa 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录