Advanced HTML Tetris Code (No Tutorial) - Build Your Own Game - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris</title>
    <style>
    #tetris {
      margin: 0 auto;
      position: relative;
      width: 400px;
      height: 600px;
      background: #000;
    }
    .block {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #CCC;
      border-radius: 5px;
    }
    </style>
  </head>
  <body>
    <h1>Tetris</h1>
    <div id="tetris"></div>
    <script>
    // Tetris pieces
    var pieces = [
      [Z, 'red'],
      [S, 'green'],
      [T, 'yellow'],
      [O, 'blue'],
      [L, 'purple'],
      [I, 'cyan'],
      [J, 'orange']
    ];
<pre><code>// Piece Constructors
function Z() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [1, 1, 0],
    [0, 1, 1],
    [0, 0, 0]
  ];
}
function S() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [0, 2, 2],
    [2, 2, 0],
    [0, 0, 0]
  ];
}
function T() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [0, 3, 0],
    [3, 3, 3],
    [0, 0, 0]
  ];
}
function O() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [4, 4],
    [4, 4]
  ];
}
function L() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [0, 5, 0],
    [0, 5, 0],
    [0, 5, 5]
  ];
}
function I() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [0, 6, 0, 0],
    [0, 6, 0, 0],
    [0, 6, 0, 0],
    [0, 6, 0, 0]
  ];
}
function J() {
  this.x = 0;
  this.y = 0;
  this.rotation = 0;
  this.activePiece = [
    [7, 0, 0],
    [7, 7, 7],
    [0, 0, 0]
  ];
}

// Game Variables
var canvas = document.getElementById(&quot;tetris&quot;);
var context = canvas.getContext(&quot;2d&quot;);
var score = 0;
var 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],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
var activePiece;


// Move the Piece
document.addEventListener(&quot;keydown&quot;, CONTROL);
function CONTROL(event) {
  if (event.keyCode == 37) {
    activePiece.x--;
    if (hasCollided()) {
      activePiece.x++;
    }
  } else if (event.keyCode == 38) {
    rotatePiece();
    if (hasCollided()) {
      rotatePiece();
    }
  } else if (event.keyCode == 39) {
    activePiece.x++;
    if (hasCollided()) {
      activePiece.x--;
    }
  } else if (event.keyCode == 40) {
    activePiece.y++;
    if (hasCollided()) {
      activePiece.y--;
    }
  }
}

// Check for Collisions
function hasCollided() {
  for (let row = 0; row &lt; activePiece.activePiece.length; row++) {
    for (let col = 0; col &lt; activePiece.activePiece[row].length; col++) {
      if ( activePiece.activePiece[row][col] !== 0 &amp;&amp; 
        (board[row + activePiece.y] &amp;&amp; board[row + activePiece.y][col + activePiece.x]) !== 0 ) {
        return true;
      }
    }
  }
  return false;
}

// Rotate the Piece
function rotatePiece() {
  let nextPattern = 0;
  activePiece.rotation++;
  if (activePiece.rotation == 4) {
    activePiece.rotation = 0;
  }
  nextPattern = activePiece.rotation;
  activePiece.activePiece = activePiece.patterns[nextPattern];
}

// Draw the Piece
function drawPiece() {
  for (let row = 0; row &lt; activePiece.activePiece.length; row++) {
    for (let col = 0; col &lt; activePiece.activePiece[row].length; col++) {
      if (activePiece.activePiece[row][col] !== 0) {
        context.fillStyle = activePiece.color;
        context.fillRect(activePiece.x + col, activePiece.y + row, 1, 1);
      }
    }
  }
}

// Add the Piece to the board
function addPieceToBoard() {
  for (let row = 0; row &lt; activePiece.activePiece.length; row++) {
    for (let col = 0; col &lt; activePiece.activePiece[row].length; col++) {
      if (activePiece.activePiece[row][col] !== 0) {
        board[row + activePiece.y][col + activePiece.x] = activePiece.activePiece[row][col];
      }
    }
  }
}

// Draw the Board
function drawBoard() {
  for (let row = 0; row &lt; board.length; row++) {
</code></pre>