Build a Simple HTML Tetris Game: Step-by-Step Guide
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
* {
box-sizing: border-box;
}
#game-area {
width: 400px;
height: 600px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tetris</h1>
<div id='game-area'></div>
<script>
// Create the game field array
let gameField = [];
for (let row = 0; row < 20; row++) {
let rowArr = [];
for (let col = 0; col < 10; col++) {
rowArr.push(0);
}
gameField.push(rowArr);
}
<pre><code> // Create the game field elements
let gameArea = document.getElementById('game-area');
let gameFieldElement = document.createElement('div');
for (let row = 0; row < 20; row++) {
let rowElement = document.createElement('div');
rowElement.className = 'row';
for (let col = 0; col < 10; col++) {
let colElement = document.createElement('div');
colElement.className = 'col';
rowElement.appendChild(colElement);
}
gameFieldElement.appendChild(rowElement);
}
gameArea.appendChild(gameFieldElement);
// Create pieces
let pieces = [
[1,1,1,1], // I
[1,1,1], // T
[1,1,1,0], // L
[0,1,1,1], // J
[1,1,0,0], // O
[1,1,1,0], // S
[0,1,1,1] // Z
];
// Generate random piece
let randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
// Add the piece to the game field
let pieceRow = 0;
let pieceCol = 4;
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 1;
}
}
}
// Render game field
let gameFieldRows = gameFieldElement.children;
for (let row = 0; row < gameField.length; row++) {
let rowElement = gameFieldRows[row];
let rowCols = rowElement.children;
for (let col = 0; col < gameField[row].length; col++) {
let colElement = rowCols[col];
if (gameField[row][col] === 1) {
colElement.style.backgroundColor = 'black';
}
}
}
// Move pieces down
let interval = setInterval(function() {
// Clear current piece
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 0;
}
}
}
// Move piece down
pieceRow++;
// Add piece to game field
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 1;
}
}
}
// Render game field
let gameFieldRows = gameFieldElement.children;
for (let row = 0; row < gameField.length; row++) {
let rowElement = gameFieldRows[row];
let rowCols = rowElement.children;
for (let col = 0; col < gameField[row].length; col++) {
let colElement = rowCols[col];
if (gameField[row][col] === 1) {
colElement.style.backgroundColor = 'black';
}
}
}
}, 1000);
// Move pieces left
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowLeft') {
// Clear current piece
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 0;
}
}
}
// Move piece left
pieceCol--;
// Add piece to game field
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 1;
}
}
}
// Render game field
let gameFieldRows = gameFieldElement.children;
for (let row = 0; row < gameField.length; row++) {
let rowElement = gameFieldRows[row];
let rowCols = rowElement.children;
for (let col = 0; col < gameField[row].length; col++) {
let colElement = rowCols[col];
if (gameField[row][col] === 1) {
colElement.style.backgroundColor = 'black';
}
}
}
}
});
// Move pieces right
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') {
// Clear current piece
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 0;
}
}
}
// Move piece right
pieceCol++;
// Add piece to game field
for (let row = 0; row < randomPiece.length; row++) {
for (let col = 0; col < randomPiece[row].length; col++) {
if (randomPiece[row][col] === 1) {
gameField[pieceRow + row][pieceCol + col] = 1;
}
}
}
// Render game field
let gameFieldRows = gameFieldElement.children;
for (let row = 0; row < gameField.length; row++) {
let rowElement = gameFieldRows[row];
let rowCols = rowElement.children;
for (let col = 0; col < gameField[row].length; col++) {
let colElement = rowCols[col];
if (gameField[row][col] === 1) {
colElement.style.backgroundColor = 'black';
}
}
}
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmjE 著作权归作者所有。请勿转载和采集!