Play Tetris Online: Simple HTML Tetris Game with Instructions
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
body {
background-color: #000;
color: #fff;
font-family: sans-serif;
}
#container {
margin: 0 auto;
width: 450px;
}
#canvas {
background-color: #000;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div id="container">
<canvas id="canvas" width="450" height="700"></canvas>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
<pre><code>// Set up the game board
let board = [];
for (let i = 0; i < 10; i++) {
board[i] = [];
for (let j = 0; j < 20; j++) {
board[i][j] = 0;
}
}
// Set up the pieces
let pieces = [
[
[0,0,0,0],
[1,1,1,1],
[0,0,0,0],
[0,0,0,0]
],
[
[2,2],
[2,2]
],
[
[0,3,0],
[3,3,3],
[0,0,0]
],
[
[0,4,4],
[4,4,0],
[0,0,0]
],
[
[5,5,0],
[0,5,5],
[0,0,0]
],
[
[0,6,0],
[6,6,6],
[0,0,0]
],
[
[7,7,7],
[0,7,0],
[0,0,0]
]
];
// Set up the colors
let colors = ['#000000', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF'];
// Set up the current piece
let currentPiece;
let currentPosition;
// Set up the score
let score = 0;
// Set up the game loop
let lastTime = 0;
function gameLoop(time = 0) {
const deltaTime = time - lastTime;
lastTime = time;
update(deltaTime);
draw();
requestAnimationFrame(gameLoop);
}
// Create a new piece
function createPiece() {
let index = Math.floor(Math.random() * pieces.length);
currentPiece = pieces[index];
currentPosition = {x: 0, y: 0};
}
// Update the game
function update(deltaTime) {
// Move the piece down
currentPosition.y += deltaTime * 0.5;
// Check for collisions
if (checkCollision()) {
// If there is a collision, add the piece to the board
addPieceToBoard();
// Create a new piece
createPiece();
}
}
// Draw the game
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the board
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 20; j++) {
let color = colors[board[i][j]];
ctx.fillStyle = color;
ctx.fillRect(i * 45, j * 45, 45, 45);
}
}
// Draw the current piece
for (let y = 0; y < currentPiece.length; y++) {
for (let x = 0; x < currentPiece[y].length; x++) {
let color = colors[currentPiece[y][x]];
ctx.fillStyle = color;
ctx.fillRect((x + currentPosition.x) * 45, (y + currentPosition.y) * 45, 45, 45);
}
}
// Draw the score
ctx.fillStyle = '#FFF';
ctx.font = '20px sans-serif';
ctx.fillText('Score: ' + score, 10, canvas.height - 10);
}
// Check for collisions
function checkCollision() {
for (let y = 0; y < currentPiece.length; y++) {
for (let x = 0; x < currentPiece[y].length; x++) {
let yPos = y + currentPosition.y;
let xPos = x + currentPosition.x;
if (currentPiece[y][x] !== 0 && (yPos >= 20 || xPos < 0 || xPos >= 10 || board[xPos][yPos] !== 0)) {
return true;
}
}
}
return false;
}
// Add the current piece to the board
function addPieceToBoard() {
for (let y = 0; y < currentPiece.length; y++) {
for (let x = 0; x < currentPiece[y].length; x++) {
let yPos = y + currentPosition.y;
let xPos = x + currentPosition.x;
if (currentPiece[y][x] !== 0) {
board[xPos][yPos] = currentPiece[y][x];
}
}
}
// Check for completed lines
let lines = 0;
for (let y = 0; y < 20; y++) {
let complete = true;
for (let x = 0; x < 10; x++) {
if (board[x][y] === 0) {
complete = false;
break;
}
}
if (complete) {
lines++;
// Remove the line
for (let x = 0; x < 10; x++) {
board[x].splice(y, 1);
board[x].unshift(0);
}
}
}
// Update the score
if (lines > 0) {
score += lines * 10;
}
}
// Handle keyboard input
document.addEventListener('keydown', (e) => {
switch (e.keyCode) {
case 37: // left
currentPosition.x--;
break;
case 39: // right
currentPosition.x++;
break;
case 40: // down
currentPosition.y++;
break;
}
});
// Start the game
createPiece();
gameLoop();
</code></pre>
</script>
</body>
</html>
<h2>Instructions:</h2>
<ol>
<li>Use the left, right, and down arrow keys to move and rotate the pieces.</li>
<li>Try to make as many complete lines as possible by filling up rows with pieces.</li>
<li>Once a line is completed, it will disappear and your score will go up.</li>
<li>Keep playing until the pieces reach the top of the board.</li>
<li>Have fun!</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/lmjG 著作权归作者所有。请勿转载和采集!