Simple HTML Tetris Game: Play Now!
<html>
<head>
<title>Simple HTML Tetris Game</title>
</head>
<body>
<h1>Simple HTML Tetris Game</h1>
<div id='gameBoard'>
<canvas id='tetrisCanvas' width='200' height='400'></canvas>
</div>
<script>
//Define arrays for the shapes
let shapes = [
[1,1,1,1],
[1,1,1,0,1],
[1,1,1,0,0,0,1],
[1,1,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1],
[0,1,0,0,1,1,1]
];
<pre><code> //Define variables and constants
let canvas = document.getElementById('tetrisCanvas');
let ctx = canvas.getContext('2d');
let boardWidth = 10;
let boardHeight = 20;
let board = [];
let x = 0;
let y = 0;
let shape = shapes[Math.floor(Math.random() * shapes.length)];
let interval;
//Draw a tetromino
function drawTetromino() {
ctx.fillStyle = 'red';
for (let row = 0; row < shape.length; row++) {
for (let col = 0; col < shape[row].length; col++) {
if (shape[row][col]) {
ctx.fillRect(x + col, y + row, 1, 1);
}
}
}
}
//Create a game board
function createGameBoard() {
for (let row = 0; row < boardHeight; row++) {
board[row] = [];
for (let col = 0; col < boardWidth; col++) {
board[row][col] = 0;
}
}
}
//Draw the game board
function drawGameBoard() {
for (let row = 0; row < boardHeight; row++) {
for (let col = 0; col < boardWidth; col++) {
if (board[row][col] == 0) {
ctx.fillStyle = 'white';
ctx.fillRect(col, row, 1, 1);
} else {
ctx.fillStyle = 'red';
ctx.fillRect(col, row, 1, 1);
}
}
}
}
//Move the tetromino down
function moveDown() {
if (!checkCollision(0, 1, shape)) {
y++;
} else {
addToBoard(shape);
shape = shapes[Math.floor(Math.random() * shapes.length)];
x = 0;
y = 0;
}
}
//Move the tetromino left
function moveLeft() {
if (!checkCollision(-1, 0, shape)) {
x--;
}
}
//Move the tetromino right
function moveRight() {
if (!checkCollision(1, 0, shape)) {
x++;
}
}
//Rotate the tetromino
function rotate() {
let temp = [];
for (let row = 0; row < shape.length; row++) {
temp[row] = [];
for (let col = 0; col < shape[row].length; col++) {
temp[row][col] = shape[col][row];
}
}
temp.reverse();
let rotatedShape = temp;
if (!checkCollision(0, 0, rotatedShape)) {
shape = rotatedShape;
}
}
//Check for collision
function checkCollision(xOffset, yOffset, shape) {
for (let row = 0; row < shape.length; row++) {
for (let col = 0; col < shape[row].length; col++) {
if (shape[row][col] &&
((board[y + yOffset + row] == undefined ||
board[y + yOffset + row][x + xOffset + col] == undefined) ||
board[y + yOffset + row][x + xOffset + col])) {
return true;
}
}
}
return false;
}
//Add the tetromino to the game board
function addToBoard(shape) {
for (let row = 0; row < shape.length; row++) {
for (let col = 0; col < shape[row].length; col++) {
if (shape[row][col]) {
board[y + row][x + col] = shape[row][col];
}
}
}
}
//Start the game
function startGame() {
createGameBoard();
interval = setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGameBoard();
drawTetromino();
moveDown();
}, 500);
}
//Keyboard controls
document.addEventListener('keydown', function(event) {
if (event.keyCode == 37) {
//Move left
moveLeft();
} else if (event.keyCode == 39) {
//Move right
moveRight();
} else if (event.keyCode == 38) {
//Rotate
rotate();
} else if (event.keyCode == 40) {
//Move down
moveDown();
}
});
startGame();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmlD 著作权归作者所有。请勿转载和采集!