Simple HTML Tetris Game: Code and Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Simple Tetris Game</title>
<style>
html {
height: 100%;
width: 100%;
}
body {
background-color: #f1f1f1;
margin: 0;
padding: 0;
font-family: sans-serif;
}
#game {
margin: 0 auto;
width: 600px;
height: 600px;
background-color: #000;
position: relative;
}
#game .block {
position: absolute;
width: 30px;
height: 30px;
background-color: #f00;
}
</style>
</head>
<body>
<div id='game'>
<div class='block' data-x='0' data-y='0'></div>
<div class='block' data-x='30' data-y='0'></div>
<div class='block' data-x='0' data-y='30'></div>
<div class='block' data-x='30' data-y='30'></div>
</div>
<script>
const game = document.getElementById('game');
const blocks = game.querySelectorAll('.block');
<pre><code>// rotate the tetromino
function rotate() {
let x = 0;
let y = 0;
blocks.forEach(block => {
// store the current coordinates
const oldX = block.dataset.x;
const oldY = block.dataset.y;
// calculate the new coordinates
x = oldY * -1;
y = oldX;
// update the coordinates
block.dataset.x = x;
block.dataset.y = y;
// update the block position
block.style.left = `${x * 30}px`;
block.style.top = `${y * 30}px`;
});
}
setInterval(rotate, 1000);
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmdl 著作权归作者所有。请勿转载和采集!