Simple HTML Tetris Game: Play Now in Your Browser
<html>
<head>
<title>Simple Tetris Game</title>
<style>
#container {
width: 500px;
height: 500px;
background-color: #E2E2E2;
border: 10px solid #ccc;
margin: 0 auto;
position: relative;
}
<pre><code> .block {
width: 20px;
height: 20px;
background-color: #7F7F7F;
position: absolute;
border: 1px solid #ccc;
}
#score {
width: 500px;
margin: 0 auto;
text-align: center;
}
</style>
<script>
var container = document.getElementById('container');
var scoreDiv = document.getElementById('score');
var score = 0;
scoreDiv.innerHTML = 'Score: ' + score;
// Define the shapes of the pieces
var shapes = [
// I piece
[[1,1,1,1]],
// J piece
[[2,0,0],
[2,2,2]],
// L piece
[[0,0,3],
[3,3,3]],
// O piece
[[4,4],
[4,4]],
// S piece
[[0,5,5],
[5,5,0]],
// T piece
[[0,6,0],
[6,6,6]],
// Z piece
[[7,7,0],
[0,7,7]]
];
// Define the colors for the pieces
var colors = ['#00FFFF', '#0000FF', '#FFA500', '#FFFF00', '#00FF00', '#FF00FF', '#FF0000'];
// Define the current piece and its position
var activeShape;
var activeShapeX = 0;
var activeShapeY = 0;
// Generate a new piece
function newPiece() {
// Select a shape at random
var shape = shapes[Math.floor(Math.random()*shapes.length)];
activeShape = shape;
// Set the position of the piece
activeShapeX = Math.floor(container.offsetWidth / 2) - Math.ceil(shape[0].length / 2) * 20;
activeShapeY = 0;
}
// Draw the active piece
function drawPiece() {
for (var y = 0; y < activeShape.length; y++) {
for (var x = 0; x < activeShape[y].length; x++) {
if (activeShape[y][x] > 0) {
// Create a block
var block = document.createElement('div');
block.className = 'block';
block.style.top = activeShapeY + y * 20 + 'px';
block.style.left = activeShapeX + x * 20 + 'px';
block.style.backgroundColor = colors[activeShape[y][x] - 1];
container.appendChild(block);
}
}
}
}
// Move the active piece
function movePiece() {
// Clear the existing piece
while (container.firstChild) {
container.removeChild(container.firstChild);
}
// Move the piece down
activeShapeY += 20;
// Draw the piece in its new position
drawPiece();
}
// Start the game
newPiece();
drawPiece();
setInterval(movePiece, 500);
</script>
</code></pre>
</head>
<body>
<h1>Simple Tetris Game</h1>
<div id="container"></div>
<div id="score"></div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmpm 著作权归作者所有。请勿转载和采集!