Simple HTML Tetris Game: Play and Code Along
<html>
<head>
<title>Tetris</title>
<style>
#container {
height: 400px;
width: 300px;
border: 1px solid black;
}
.tetris-block {
position: absolute;
height: 30px;
width: 30px;
border: 1px solid black;
background-color: red;
}
</style>
</head>
<body>
<h1>Tetris</h1>
<div id='container'></div>
<script>
// create a 2D array of 10x20
let gameBoard = [];
for (let row = 0; row < 20; row++) {
gameBoard[row] = [];
for (let col = 0; col < 10; col++) {
gameBoard[row][col] = 0;
}
}
<pre><code>// spawn in a new tetris block
let block = {
x: 0,
y: 0,
color: 'red',
shape: [
[1, 1],
[1, 1],
]
};
// draw the block onto the game board
for (let row = 0; row < block.shape.length; row++) {
for (let col = 0; col < block.shape[0].length; col++) {
if (block.shape[row][col] === 1) {
let newBlock = document.createElement('div');
newBlock.className = 'tetris-block';
newBlock.style.top = (block.y + row) * 30 + 'px';
newBlock.style.left = (block.x + col) * 30 + 'px';
newBlock.style.backgroundColor = block.color;
document.getElementById('container').appendChild(newBlock);
}
}
}
// move the block left, right, and down
document.onkeydown = function(e) {
if (e.keyCode === 37) { // left
moveLeft();
} else if (e.keyCode === 38) { // up
rotateBlock();
} else if (e.keyCode === 39) { // right
moveRight();
} else if (e.keyCode === 40) { // down
moveDown();
}
}
// move block to the left
function moveLeft() {
let canMove = true;
for (let row = 0; row < block.shape.length; row++) {
for (let col = 0; col < block.shape[0].length; col++) {
// check the left edge of the block
if (block.shape[row][col] === 1 &&
(block.x + col - 1) < 0) {
canMove = false;
}
// check the game board
if (block.shape[row][col] === 1 &&
gameBoard[block.y + row][block.x + col - 1] === 1) {
canMove = false;
}
}
}
// move the block if allowed
if (canMove === true) {
block.x -= 1;
removeOldBlock();
drawNewBlock();
}
}
// move block to the right
function moveRight() {
let canMove = true;
for (let row = 0; row < block.shape.length; row++) {
for (let col = 0; col < block.shape[0].length; col++) {
// check the right edge of the block
if (block.shape[row][col] === 1 &&
(block.x + col + 1) > 9) {
canMove = false;
}
// check the game board
if (block.shape[row][col] === 1 &&
gameBoard[block.y + row][block.x + col + 1] === 1) {
canMove = false;
}
}
}
// move the block if allowed
if (canMove === true) {
block.x += 1;
removeOldBlock();
drawNewBlock();
}
}
// move block down
function moveDown() {
let canMove = true;
for (let row = 0; row < block.shape.length; row++) {
for (let col = 0; col < block.shape[0].length; col++) {
// check the bottom edge of the block
if (block.shape[row][col] === 1 &&
(block.y + row + 1) > 19) {
canMove = false;
}
// check the game board
if (block.shape[row][col] === 1 &&
gameBoard[block.y + row + 1][block.x + col] === 1) {
canMove = false;
}
}
}
// move the block if allowed
if (canMove === true) {
block.y += 1;
removeOldBlock();
drawNewBlock();
} else {
// freeze the block
for (let row = 0; row < block.shape.length; row++) {
for (let col = 0; col < block.shape[0].length; col++) {
if (block.shape[row][col] === 1) {
gameBoard[block.y + row][block.x + col] = 1;
}
}
}
// spawn in a new block
block.x = 0;
block.y = 0;
drawNewBlock();
}
}
// rotate the block
function rotateBlock() {
let canRotate = true;
// rotate the block
let newShape = [];
for (let col = 0; col < block.shape[0].length; col++) {
newShape[col] = [];
for (let row = block.shape.length - 1; row >= 0; row--) {
newShape[col][block.shape[0].length - 1 - row] = block.shape[row][col];
}
}
// check if rotation is allowed
for (let row = 0; row < newShape.length; row++) {
for (let col = 0; col < newShape[0].length; col++) {
if (newShape[row][col] === 1 &&
(block.x + col < 0 || block.x + col > 9 ||
block.y + row > 19 ||
gameBoard[block.y + row][block.x + col] === 1)) {
canRotate = false;
}
}
}
// rotate the block if allowed
if (canRotate === true) {
block.shape = newShape;
removeOldBlock();
drawNewBlock();
}
}
// remove the old block
function removeOldBlock() {
let allBlocks = document.getElementsByClassName('tetris-block');
while (allBlocks.length > 0) {
allBlocks[0].parentNode.removeChild(allBlocks[0]);
}
}
// draw the new block
function drawNewBlock() {
for (let row = 0; row < block.shape.length; row++) {
for (let col = 0; col < block.shape[0].length; col++) {
if (block.shape[row][col] === 1) {
let newBlock = document.createElement('div');
newBlock.className = 'tetris-block';
newBlock.style.top = (block.y + row) * 30 + 'px';
newBlock.style.left = (block.x + col) * 30 + 'px';
newBlock.style.backgroundColor = block.color;
document.getElementById('container').appendChild(newBlock);
}
}
}
}
</code></pre>
</script>
</body>
</html>
<p>Instructions:</p>
<ol>
<li>Use the left (←), up (↑), right (→) and down (↓) arrow keys to move the blocks.</li>
<li>The up arrow will rotate the block.</li>
<li>The goal is to fit the blocks together and fill up the rows.</li>
<li>When a row is filled, it will disappear and the blocks above it will move down.</li>
<li>If the blocks reach the top of the game board, the game is over.</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/lmjF 著作权归作者所有。请勿转载和采集!