Advanced HTML Tetris Game - Create Your Own Tetris Game with Code - 常规

<!DOCTYPE html>
<html>
	<head>
  	<title>Advanced HTML Tetris</title>
  	<style type="text/css">
  		#game {
  			width: 300px;
  			height: 600px;
  			background-color: #000;
  			margin: 0 auto;
  			border: 4px solid #fff;
  			position: relative;
  		}
  		#game div {
  			width: 30px;
  			height: 30px;
  			position: absolute;
  			background-color: #fff;
  			border-radius: 2px;
  		}
  	</style>
	</head>
	<body>
		<div id="game"></div>
		<script>
			// Variables
			let game = document.getElementById('game');
			let columns = 10;
			let rows = 20;
			let blockSize = 30;
			let blocks = [];
<pre><code>		// Game setup
		game.style.width = columns * blockSize + 'px';
		game.style.height = rows * blockSize + 'px';

		// Create blocks
		for (let i = 0; i &lt; columns * rows; i++) {
			let block = document.createElement('div');
			block.style.top = Math.floor(i / columns) * blockSize + 'px';
			block.style.left = (i % columns) * blockSize + 'px';
			game.appendChild(block);
			blocks.push(block);
		}

		// Tetrominoes
		let tetrominoes = [
			[1, columns+1, columns*2+1, 2],
			[0, columns, columns+1, columns*2+1],
			[1, columns, columns+1, columns+2],
			[0, 1, columns+1, columns+2],
			[1, columns+1, columns*2+1, columns*2+2],
			[0, 1, 2, columns+1],
			[0, 1, 2, columns*2+1],
		];

		// Randomly select a Tetromino
		let currentPosition = 4;
		let currentRotation = 0;
		let current = tetrominoes[Math.floor(Math.random()*tetrominoes.length)];

		// Draw the Tetromino
		function draw() {
			current.forEach(index =&gt; {
				blocks[currentPosition + index].classList.add('block');
			});
		}

		// Undraw the Tetromino
		function undraw() {
			current.forEach(index =&gt; {
				blocks[currentPosition + index].classList.remove('block');
			});
		}

		// Move the Tetromino
		function move(offset) {
			if (current.some(index =&gt; blocks[currentPosition + index + offset].classList.contains('block'))) {
				return;
			}
			undraw();
			currentPosition += offset;
			draw();
		}

		// Rotate the Tetromino
		function rotate() {
			let nextRotation = currentRotation === 3 ? 0 : currentRotation + 1;
			let offset = 1;
			let position = currentPosition;

			while (offset &lt; 4) {
				if (current.some(index =&gt; blocks[position + index].classList.contains('block'))) {
					nextRotation = currentRotation;
					break;
				}
				position += columns;
				offset++;
			}

			if (nextRotation !== currentRotation) {
				current = tetrominoes[nextRotation];
				currentRotation = nextRotation;
				undraw();
				currentPosition = position;
				draw();
			}
		}

		// Move the Tetromino down
		let timerId = setInterval(moveDown, 1000);
		function moveDown() {
			if (current.some(index =&gt; blocks[currentPosition + index + columns].classList.contains('block'))) {
				clearInterval(timerId);
			} else {
				undraw();
				currentPosition += columns;
				draw();
			}
		}

		// Key press
		document.addEventListener('keydown', event =&gt; {
			if (event.keyCode === 37) move(-1);
			else if (event.keyCode === 39) move(1);
			else if (event.keyCode === 40) moveDown();
			else if (event.keyCode === 38) rotate();
		});
	&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>