Simple HTML Tetris Game: Build and Play
<html>
<head>
<style>
#board {
width: 200px;
height: 400px;
background-color: #999;
}
</style>
<script>
var board = document.getElementById('board');
var context = board.getContext('2d');
var x = 0;
var y = 0;
<pre><code> document.onkeydown = function(e) {
if (e.keyCode == 37) { // left
x--;
} else if (e.keyCode == 38) { // up
y--;
} else if (e.keyCode == 39) { // right
x++;
} else if (e.keyCode == 40) { // down
y++;
}
context.fillStyle = '#000';
context.fillRect(x * 20, y * 20, 20, 20);
}
</script>
</code></pre>
</head>
<body>
<canvas id='board'></canvas>
</body>
</html>
<p>Instructions:</p>
<ol>
<li>Open the HTML file in a web browser.</li>
<li>Use the arrow keys to move the pieces.</li>
<li>Try to fit the pieces together to make complete lines.</li>
<li>When a line is completed it will disappear.</li>
<li>The game will end when there is no more room to fit pieces.</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/lmjD 著作权归作者所有。请勿转载和采集!