Build Your Own Tetris Game: A Simple HTML Tutorial
<html>
<head>
<title>Tetris Game Tutorial</title>
<style>
#gameField {
width: 200px;
height: 400px;
border: 1px solid black;
}
.tetromino {
width: 20px;
height: 20px;
background-color: #f00;
position: absolute;
}
</style>
</head>
<body>
<div id='gameField'></div>
<script>
var currentTetromino;
<pre><code>function makeTetromino() {
// Create the object
var newTetromino = document.createElement('div');
newTetromino.className = 'tetromino';
// Randomly set the position
newTetromino.style.left = Math.floor(Math.random() * 180) + 'px';
newTetromino.style.top = '0px';
// Append it to the game field
document.getElementById('gameField').appendChild(newTetromino);
// Set it as the current tetromino
currentTetromino = newTetromino;
// Move the tetromino down
moveTetrominoDown();
}
function moveTetrominoDown() {
// Get the current position
var currentTop = parseInt(currentTetromino.style.top);
// Move it down
currentTetromino.style.top = (currentTop + 20) + 'px';
}
// Start the game
makeTetromino();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmdV 著作权归作者所有。请勿转载和采集!