Simple HTML Tetris Game: Learn & Play
<html>
<head>
<title>Simple HTML Tetris Game</title>
<style>
* {
box-sizing: border-box;
}
<pre><code>.tetris-container {
min-width: 260px;
min-height: 260px;
margin: 0 auto;
border: 2px solid black;
position: relative;
}
.tetris-row {
position: absolute;
width: 100%;
height: 10%;
}
.tetris-square {
float: left;
width: 10%;
height: 100%;
background-color: #ccc;
border: 1px solid #000;
}
.tetromino {
position: absolute;
width: 40%;
height: 40%;
left: 30%;
top: 30%;
background-color: #ffb3b3;
border: 1px solid #000;
z-index: 1;
}
</code></pre>
</style>
</head>
<body>
<h1>Simple HTML Tetris Game</h1>
<div class='tetris-container'>
<div class='tetris-row'>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
</div>
<pre><code><div class='tetris-row'>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
</div>
<div class='tetris-row'>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
</div>
<div class='tetris-row'>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
</div>
<div class='tetris-row'>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
<div class='tetris-square'></div>
</div>
<div class='tetromino'></div>
</code></pre>
</div>
<script>
// Variables
const tetrisContainer = document.querySelector('.tetris-container');
const tetromino = document.querySelector('.tetromino');
let currentPosition = 4;
let currentRotation = 0;
// Move Tetromino
function moveTetromino(e) {
if (e.keyCode === 37) {
// Move left
tetromino.style.left = `${currentPosition * 10}%`;
currentPosition -= 1;
} else if (e.keyCode === 39) {
// Move right
tetromino.style.left = `${currentPosition * 10}%`;
currentPosition += 1;
} else if (e.keyCode === 40) {
// Rotate
tetromino.style.transform = `rotate(${currentRotation}deg)`;
currentRotation += 90;
}
}
// Keydown Event Listener
document.addEventListener('keydown', moveTetromino)
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmlJ 著作权归作者所有。请勿转载和采集!