Simple HTML Tetris Game - Play Online Now! - 常规

<html>
<head>
	<title>Tetris</title>
	<style>
		#game-board {
			width: 400px;
			height: 800px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<h1>Tetris</h1>
	<div id='game-board'></div>
	<script>
		// define the game board
		var board = document.getElementById('game-board');
<pre><code>	// define the game pieces
	var piece = {
		// define the I piece
		'I': [
			[1, 1, 1, 1]
		],
		// define the J piece
		'J': [
			[1, 0, 0],
			[1, 1, 1]
		],
		// define the L piece
		'L': [
			[0, 0, 1],
			[1, 1, 1]
		],
		// define the O piece
		'O': [
			[1, 1],
			[1, 1]
		],
		// define the S piece
		'S': [
			[0, 1, 1],
			[1, 1, 0]
		],
		// define the T piece
		'T': [
			[0, 1, 0],
			[1, 1, 1]
		],
		// define the Z piece
		'Z': [
			[1, 1, 0],
			[0, 1, 1]
		]
	};

	// define the game board matrix
	var boardMatrix = [];

	// define the game piece
	var currentPiece;

	// define the game score
	var score = 0;

	// function to generate random pieces
	function randomPiece() {
		var pieceNames = 'IJLOSTZ';
		var randomNumber = Math.floor(Math.random() * pieceNames.length);
		return pieceNames[randomNumber];
	}

	// function to generate a blank board
	function blankBoard() {
		var boardSize = 20;
		for (var i = 0; i &lt; boardSize; i++) {
			boardMatrix[i] = [];
			for (var j = 0; j &lt; boardSize; j++) {
				boardMatrix[i][j] = 0;
			}
		}
		renderBoard();
	}

	// function to render the board
	function renderBoard() {
		var boardSize = 20;
		var html = '';
		for (var i = 0; i &lt; boardSize; i++) {
			for (var j = 0; j &lt; boardSize; j++) {
				if (boardMatrix[i][j] == 0) {
					html += '&lt;div class=&quot;blank&quot;&gt;&lt;/div&gt;';
				} else {
					html += '&lt;div class=&quot;filled&quot;&gt;&lt;/div&gt;';
				}
			}
		}
		board.innerHTML = html;
	}

	// function to add a piece to the board
	function addPiece() {
		currentPiece = randomPiece();
		var pieceMatrix = piece[currentPiece];
		for (var i = 0; i &lt; pieceMatrix.length; i++) {
			for (var j = 0; j &lt; pieceMatrix[i].length; j++) {
				if (pieceMatrix[i][j] == 1) {
					boardMatrix[i][j] = 1;
				}
			}
		}
		renderBoard();
	}

	// function to move the piece down
	function moveDown() {
		var pieceMatrix = piece[currentPiece];
		for (var i = 0; i &lt; pieceMatrix.length; i++) {
			for (var j = 0; j &lt; pieceMatrix[i].length; j++) {
				if (pieceMatrix[i][j] == 1) {
					boardMatrix[i + 1][j] = 1;
					boardMatrix[i][j] = 0;
				}
			}
		}
		renderBoard();
	}

	// function to move the piece to the left
	function moveLeft() {
		var pieceMatrix = piece[currentPiece];
		for (var i = 0; i &lt; pieceMatrix.length; i++) {
			for (var j = 0; j &lt; pieceMatrix[i].length; j++) {
				if (pieceMatrix[i][j] == 1) {
					boardMatrix[i][j - 1] = 1;
					boardMatrix[i][j] = 0;
				}
			}
		}
		renderBoard();
	}

	// function to move the piece to the right
	function moveRight() {
		var pieceMatrix = piece[currentPiece];
		for (var i = 0; i &lt; pieceMatrix.length; i++) {
			for (var j = 0; j &lt; pieceMatrix[i].length; j++) {
				if (pieceMatrix[i][j] == 1) {
					boardMatrix[i][j + 1] = 1;
					boardMatrix[i][j] = 0;
				}
			}
		}
		renderBoard();
	}

	// function to check for full rows
	function checkForFullRows() {
		var boardSize = 20;
		for (var i = 0; i &lt; boardSize; i++) {
			var filled = true;
			for (var j = 0; j &lt; boardSize; j++) {
				if (boardMatrix[i][j] == 0) {
					f
</code></pre>