HTML Tetris Game Example Code
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style type="text/css">
body{
background-color: #000000;
}
canvas{
background-color: #FFFFFF;
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="400"></canvas>
<script>
// Get the canvas element
var canvas = document.getElementById("canvas");
// Get the canvas context
var ctx = canvas.getContext("2d");
<pre><code> // Variables for our game
// The current piece
var currentPiece;
// The next piece
var nextPiece;
// The position of the piece
var x = 3;
var y = 0;
// The playing board (20x10)
var board = [];
// Score
var score = 0;
// Piece shapes
var pieces = [
[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]
];
// Colors for the pieces
var colors = [
'cyan', 'blue', 'orange', 'yellow', 'green', 'purple', 'red'
];
// Create the board
function createBoard() {
for (var r = 0; r < 20; r++) {
board[r] = [];
for (var c = 0; c < 10; c++) {
board[r][c] = 0;
}
}
}
// Create a random piece
function randomPiece() {
// Get a random piece
var id = Math.floor(Math.random() * pieces.length);
// Get the shape
var piece = pieces[id];
// Get the color
var color = colors[id];
// Create the piece object
currentPiece = {
x:3,
y:0,
piece:piece,
color:color
};
// Generate the next piece
id = Math.floor(Math.random() * pieces.length);
piece = pieces[id];
color = colors[id];
nextPiece = {
piece:piece,
color:color
};
}
// Draw the board
function drawBoard() {
// Draw the background
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the border
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 4;
ctx.strokeRect(0, 0, canvas.width, canvas.height);
// Draw the pieces on the board
for (var r = 0; r < 20; r++) {
for (var c = 0; c < 10; c++) {
if (board[r][c] !== 0) {
ctx.fillStyle = board[r][c];
ctx.fillRect(c * 20, r * 20, 20, 20);
ctx.strokeRect(c * 20, r * 20, 20, 20);
}
}
}
// Draw the current piece
drawPiece(currentPiece.piece, currentPiece.x, currentPiece.y, currentPiece.color);
// Draw the next piece
drawPiece(nextPiece.piece, 12, 3, nextPiece.color);
// Draw the score
ctx.fillStyle = '#FFFFFF';
ctx.font = '20px Arial';
ctx.fillText('Score: ' + score, 10, 280);
}
// Draw a piece
function drawPiece(piece, x, y, color) {
ctx.fillStyle = color;
for (var r = 0; r < piece.length; r++) {
for (var c = 0; c < piece.length; c++) {
if (piece[r][c]) {
ctx.fillRect((c + x) * 20, (r + y) * 20, 20, 20);
ctx.strokeRect((c + x) * 20, (r + y) * 20, 20, 20);
}
}
}
}
// Move the piece
function movePiece(piece, x, y) {
// If the position is valid, update the current piece position
if (valid(piece, x, y)) {
currentPiece.x = x;
currentPiece.y = y;
drawBoard();
}
// If the position is not valid, check if the game is over
else {
// Check if the piece is at the top of the board
if (y === 0) {
gameOver();
return;
}
// Otherwise, add the piece to the board
addPieceToBoard(piece, currentPiece.x, currentPiece.y);
clearLines();
// Generate a new piece
currentPiece = nextPiece;
currentPiece.x = 3;
currentPiece.y = 0;
// Generate the next piece
randomPiece();
drawBoard();
}
}
function valid(piece, x, y) {
for (var r = 0; r < piece.length; r++) {
for (var c = 0; c < piece.length; c++) {
// Check if the piece is outside the boundaries
if (y + r >= 20 || x + c >= 10) {
return false;
}
// Check if the position is already occupied
if (piece[r][c] && board[y + r][x + c] !== 0) {
return false;
}
}
}
return true;
}
// Add the piece to the board
function addPieceToBoard(piece, x, y) {
for (var r = 0; r < piece.length; r++) {
for (var c = 0; c < piece.length; c++) {
if (piece[r][c]) {
board[y + r][x + c] = currentPiece.color;
}
}
}
}
// Clear completed lines
function clearLines() {
// Check each row
for (var r = 0; r < 20; r++) {
// Check if the row is full
var full = true;
for (var c = 0; c < 10; c++) {
if (board[r][c] === 0) {
full = false;
break;
}
}
// If the row is full, clear it
if (full) {
// Clear the row
board.splice(r, 1);
// Add a new empty row at the top
board.unshift(new Array(10).fill(0));
// Increase the score
score += 100;
}
}
}
// Game over
function gameOver() {
// Stop the game
alert('Game Over! Score: ' + score);
// Reset the game
createBoard();
randomPiece();
score = 0;
drawBoard();
}
// Initialize the game
createBoard();
randomPiece();
drawBoard();
// Event listeners
window.addEventListener('keydown', function(e) {
// Move left
if (e.key === 'ArrowLeft') {
movePiece(currentPiece.piece, currentPiece.x - 1, currentPiece.y);
}
// Move right
else if (e.key === 'ArrowRight') {
movePiece(currentPiece.piece, currentPiece.x + 1, currentPiece.y);
}
// Move down
else if (e.key === 'ArrowDown') {
movePiece(currentPiece.piece, currentPiece.x, currentPiece.y + 1);
}
// Rotate
else if (e.key === 'ArrowUp') {
// Rotate the piece
var newPiece = [];
for (var c = 0; c < currentPiece.piece.length; c++) {
newPiece[c] = [];
for (var r = 0; r < currentPiece.piece.length; r++) {
newPiece[c][r] = currentPiece.piece[currentPiece.piece.length - 1 - r][c];
}
}
// Check if the rotated piece is valid
if (valid(newPiece, currentPiece.x, currentPiece.y)) {
currentPiece.piece = newPiece;
drawBoard();
}
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/losI 著作权归作者所有。请勿转载和采集!