Simple HTML Tetris Game - Play Now - 常规

<!DOCTYPE html>
<html>
<head>
	<title>Tetris Game</title>
	<style>
		#container{
			width: 400px;
			height: 600px;
			background-color: #ccc;
			margin: 0 auto;
			position: relative;
		}
		.box{
			width: 30px;
			height: 30px;
			background-color: #000;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<div id='container'></div>
	<script>
		//Create boxes
		var boxes = [];
		for(var i = 0; i < 15; i++){
			for(var j = 0; j < 20; j++){
				var box = document.createElement('div');
				box.className = 'box';
				box.style.top = i * 30 + 'px';
				box.style.left = j * 30 + 'px';
				document.getElementById('container').appendChild(box);
				boxes.push(box);
			}
		}
<pre><code>	//Create a random tetromino
	var blocks = [
		[1,1,1,1],
		[1,1,1,0,
		 1],
		[1,1,1,0,
		 0,0,1],
		[1,1,0,0,
		 1,1],
		[1,1,0,0,
		 0,1,1],
		[0,1,1,0,
		 1,1],
		[0,1,0,0,
		 1,1,1]
	];

	//Set a random block
	function newBlock(){
		var blockIndex = Math.floor(Math.random() * blocks.length);
		var block = blocks[blockIndex];
		var colorIndex = Math.floor(Math.random() * colors.length);
		var color = colors[colorIndex];

		//Loop through block array
		for(var i = 0; i &lt; block.length; i++){
			//If block is 1
			if(block[i] == 1){
				//Set box color
				boxes[i].style.backgroundColor = color;
			}
			else{
				boxes[i].style.backgroundColor = '';
			}
		}
	}

	//Set colors
	var colors = ['#F00', '#0F0', '#00F', '#FF0', '#F0F', '#0FF'];

	//Move the block down
	function moveDown(){
		for(var i = 0; i &lt; boxes.length; i++){
			//If box has a color
			if(boxes[i].style.backgroundColor != ''){
				//Set color to box below
				if(i + 20 &lt; boxes.length){
					boxes[i + 20].style.backgroundColor = boxes[i].style.backgroundColor;
					boxes[i].style.backgroundColor = '';
				}
				//If at bottom, set color to nothing
				else{
					boxes[i].style.backgroundColor = '';
				}
			}
		}
	}

	//Move the block left
	function moveLeft(){
		for(var i = 0; i &lt; boxes.length; i++){
			//If box has a color
			if(boxes[i].style.backgroundColor != ''){
				//Set color to box to the left
				if(i % 20 != 0){
					boxes[i - 1].style.backgroundColor = boxes[i].style.backgroundColor;
					boxes[i].style.backgroundColor = '';
				}
			}
		}
	}

	//Move the block right
	function moveRight(){
		for(var i = boxes.length - 1; i &gt;= 0; i--){
			//If box has a color
			if(boxes[i].style.backgroundColor != ''){
				//Set color to box to the right
				if(i % 20 != 19){
					boxes[i + 1].style.backgroundColor = boxes[i].style.backgroundColor;
					boxes[i].style.backgroundColor = '';
				}
			}
		}
	}

	//Rotate the block
	function rotate(){
		for(var i = 0; i &lt; boxes.length; i++){
			//If box has a color
			if(boxes[i].style.backgroundColor != ''){ 
				//Check if current box is on the left side
				if(i % 20 == 0){
					//Check if box to the right has a color
					if(boxes[i + 1].style.backgroundColor != ''){ 
						//Set color to box below
						if(i + 20 &lt; boxes.length){
							boxes[i + 20].style.backgroundColor = boxes[i].style.backgroundColor;
							boxes[i].style.backgroundColor = '';
						}
					}
					//Check if box below has a color
					else if(i + 20 &lt; boxes.length &amp;&amp; boxes[i + 20].style.backgroundColor != ''){
						//Set color to box to the right
						boxes[i + 1].style.backgroundColor = boxes[i].style.backgroundColor;
						boxes[i].style.backgroundColor = '';
					}
				}
				//Check if current box is on the right side
				else if(i % 20 == 19){
					//Check if box to the left has a color
					if(boxes[i - 1].style.backgroundColor != ''){
						//Set color to box below
						if(i + 20 &lt; boxes.length){
							boxes[i + 20].style.backgroundColor = boxes[i].style.backgroundColor;
							boxes[i].style.backgroundColor = '';
						}
					}
					//Check if box below has a color
					else if(i + 20 &lt; boxes.length &amp;&amp; boxes[i + 20].style.backgroundColor != ''){
						//Set color to box to the left
						boxes[i - 1].style.backgroundColor = boxes[i].style.backgroundColor;
						boxes[i].style.backgroundColor = '';
					}
				}
				//Check if current box is in the middle
				else{
					//Check if box to the left has a color
					if(boxes[i - 1].style.backgroundColor != ''){ 
						//Set color to box below
						if(i + 20 &lt; boxes.length){
							boxes[i + 20].style.backgroundColor = boxes[i].style.backgroundColor;
							boxes[i].style.backgroundColor = '';
						}
					}
					//Check if box to the right has a color
					else if(boxes[i + 1].style.backgroundColor != ''){
						//Set color to box below
						if(i + 20 &lt; boxes.length){
							boxes[i + 20].style.backgroundColor = boxes[i].style.backgroundColor;
							boxes[i].style.backgroundColor = '';
						}
					}
					//Check if box below has a color
					else if(i + 20 &lt; boxes.length &amp;&amp; boxes[i + 20].style.backgroundColor != ''){
						//Set color to box to the left
						boxes[i - 1].style.backgroundColor = boxes[i].style.backgroundColor;
						boxes[i].style.backgroundColor = '';
					}
					//Check if box below has a color
					else if(i + 20 &lt; boxes.length &amp;&amp; boxes[i + 20].style.backgroundColor != ''){
						//Set color to box to the right
						boxes[i + 1].style.backgroundColor = boxes[i].style.backgroundColor;
						boxes[i].style.backgroundColor = '';
					}
				}
			}
		}
	}

	//Start the game
	newBlock();

	//Set interval for moving the block down
	setInterval(moveDown, 1000);

	//Set event listeners for moving the block
	document.addEventListener('keydown', function(event) {
		if(event.key == 'ArrowLeft'){
			moveLeft();
		}
		else if(event.key == 'ArrowRight'){
			moveRight();
		}
		else if(event.key == 'ArrowDown'){
			moveDown();
		}
		else if(event.key == 'ArrowUp'){
			rotate();
		}
	});
&lt;/script&gt;
</code></pre>
</body>
</html>