HTML Tetris Game: Build Your Own Classic Puzzle Game
<html>
<head>
<title>Tetris</title>
<style>
#tetris-board {
width: 200px;
height: 400px;
border: 2px solid black;
margin: 0 auto;
}
.block {
width: 20px;
height: 20px;
background-color: #FF0000;
margin: 0;
padding: 0;
border: 1px solid black;
}
</style>
</head>
<body>
<div id='tetris-board'></div>
<script>
var board = document.querySelector('#tetris-board');
var blockCount = 0;
<pre><code> // create block
function createBlock() {
var block = document.createElement('div');
block.classList.add('block');
block.id = 'block' + blockCount;
blockCount++;
board.appendChild(block);
}
// move block
function moveBlock(blockId, x, y) {
var block = document.querySelector('#' + blockId);
block.style.left = x * 20 + 'px';
block.style.top = y * 20 + 'px';
}
// start game
function startGame() {
// create new block
createBlock();
// move new block
moveBlock('block0', 4, 0);
}
startGame();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmus 著作权归作者所有。请勿转载和采集!