Tetris

<script>
  // Initialize board and pieces
  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]
  ];
  let pieces = ['I', 'O', 'T', 'S', 'Z', 'J', 'L'];
  let currentPiece;
  let currentX;
  let currentY;

  // Draw board and pieces
  function drawBoard() {
    let output = '';
    for (let i = 0; i < board.length; i++) {
      output += '<div class='row'>';
      for (let j = 0; j < board[i].length; j++) {
        if (board[i][j] == 0) {
          output += '<div class='empty'></div>';
        }
        else {
          output += '<div class='piece'></div>';
        }
      }
      output += '</div>';
    }
    document.getElementById('tetrisBoard').innerHTML = output;
    document.getElementById('tetrisPieces').innerHTML = '<img src='tetris_' + currentPiece.toLowerCase() + '.png'>';
  }

  // Generate a random piece
  function generatePiece() {
    let randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
    currentPiece = randomPiece;
    currentX = 4;
    currentY = 0;
  }

  // Move the piece down
  function movePieceDown() {
    if (validMove(0, 1)) {
      currentY++;
    }
    else {
      freezePiece();
      generatePiece();
    }
    updateBoard();
  }

  // Move the piece left
  function movePieceLeft() {
    if (validMove(-1, 0)) {
      currentX--;
    }
    updateBoard();
  }

  // Move the piece right
  function movePieceRight() {
    if (validMove(1, 0)) {
      currentX++;
    }
    updateBoard();
  }

  // Move the piece all the way to the bottom
  function dropPiece() {
    while (validMove(0, 1)) {
      currentY++;
    }
    freezePiece();
    generatePiece();
    updateBoard();
  }

  // Check if a move is valid
  function validMove(x, y) {
    for (let i = 0; i < currentPiece.length; i++) {
      for (let j = 0; j < currentPiece.length; j++) {
        if (currentPiece[i][j] == 0) {
          continue;
        }
        let newX = currentX + j + x;
        let newY = currentY + i + y;
        if (newX < 0 || newX > 9 || newY < 0 || newY > 19) {
          return false;
        }
        if (board[newY][newX] != 0) {
          return false;
        }
      }
    }
    return true;
  }

  // Freeze the current piece in place
  function freezePiece() {
    for (let i = 0; i < currentPiece.length; i++) {
      for (let j = 0; j < currentPiece.length; j++) {
        if (currentPiece[i][j] == 0) {
          continue;
        }
        board[currentY + i][currentX + j] = currentPiece[i][j];
      }
    }
  }

  // Update board
  function updateBoard() {
    board.forEach(row => row.fill(0));
    for (let i = 0; i < currentPiece.length; i++) {
      for (let j = 0; j < currentPiece.length; j++) {
        if (currentPiece[i][j] == 0) {
          continue;
        }
        board[currentY + i][currentX + j] = currentPiece[i][j];
      }
    }
    drawBoard();
  }

  // Let's go!
  generatePiece();
  updateBoard();
  setInterval(movePieceDown, 1000);
</script>

<style>
  #gameWindow {
    width: 400px;
    margin: 0 auto;
  }
  #tetrisBoard {
    float: left;
    width: 300px;
    border: 1px solid #000;
  }
  #tetrisPieces {
    float: left;
    width: 100px;
  }
  .row {
    clear: both;
  }
  .empty {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    background-color: #eee;
    border: 1px solid #000;
  }
  .piece {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    background-color: #ccc;
    border: 1px solid #000;
  }
</style>