Spaces:

bozhong
/

tetris

Running

App Files Files Community

tetris / index.html

bozhong

请实现一个俄罗斯方块小游戏 - Initial Deployment

c9ee90d verified 10 months ago

raw

history blame contribute delete

27.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Responsive Tetris Game</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	/* Custom styles that can't be done with Tailwind */
	.cell {
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.cell-filled {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	}

	@keyframes flash {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
	}

	.flash-animation {
	animation: flash 0.3s 2;
	}

	/* Tetromino colors */
	.cell-I { background-color: #00FFFF; }
	.cell-O { background-color: #FFFF00; }
	.cell-T { background-color: #AA00FF; }
	.cell-S { background-color: #00FF00; }
	.cell-Z { background-color: #FF0000; }
	.cell-J { background-color: #0000FF; }
	.cell-L { background-color: #FFAA00; }
	</style>
	</head>
	<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
	<div class="text-center mb-4">
	<h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-2">Tetris</h1>
	<div class="flex justify-center gap-8">
	<div class="text-xl">
	<span class="text-gray-300">Score:</span>
	<span id="score" class="font-bold ml-2">0</span>
	</div>
	<div class="text-xl">
	<span class="text-gray-300">Level:</span>
	<span id="level" class="font-bold ml-2">1</span>
	</div>
	<div class="text-xl">
	<span class="text-gray-300">Lines:</span>
	<span id="lines" class="font-bold ml-2">0</span>
	</div>
	</div>
	</div>

	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="relative">
	<div id="game-board" class="grid grid-cols-10 grid-rows-20 gap-0 bg-gray-800 border-2 border-gray-700 rounded-md overflow-hidden"></div>
	<div id="game-over" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center hidden">
	<h2 class="text-3xl font-bold text-red-500 mb-4">Game Over!</h2>
	<button id="restart-btn" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-bold transition">Play Again</button>
	</div>
	<div id="pause-screen" class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden">
	<h2 class="text-3xl font-bold text-yellow-400">Paused</h2>
	</div>
	</div>

	<div class="flex flex-col gap-6">
	<div class="bg-gray-800 p-4 rounded-md border border-gray-700">
	<h3 class="text-xl font-semibold mb-2 text-center">Next Piece</h3>
	<div id="next-piece" class="grid grid-cols-4 grid-rows-4 gap-0 w-24 h-24 mx-auto"></div>
	</div>

	<div class="bg-gray-800 p-4 rounded-md border border-gray-700">
	<h3 class="text-xl font-semibold mb-2 text-center">Controls</h3>
	<div class="grid grid-cols-3 gap-2 text-center">
	<div class="bg-gray-700 p-2 rounded">← Left</div>
	<div class="bg-gray-700 p-2 rounded">→ Right</div>
	<div class="bg-gray-700 p-2 rounded">↑ Rotate</div>
	<div class="bg-gray-700 p-2 rounded">↓ Soft Drop</div>
	<div class="bg-gray-700 p-2 rounded">Space Hard Drop</div>
	<div class="bg-gray-700 p-2 rounded">P Pause</div>
	</div>
	</div>

	<button id="pause-btn" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-md font-bold transition">Pause</button>
	</div>
	</div>

	<div class="mt-8 text-gray-400 text-sm">
	<p>Use keyboard or touch controls to play. Clear lines to score points!</p>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	// Game constants
	const COLS = 10;
	const ROWS = 20;
	const BLOCK_SIZE = 30;
	const NEXT_PIECE_SIZE = 4;

	// Game variables
	let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
	let currentPiece = null;
	let nextPiece = null;
	let score = 0;
	let level = 1;
	let lines = 0;
	let gameOver = false;
	let isPaused = false;
	let dropInterval = null;
	let dropSpeed = 1000; // Initial speed (ms)

	// DOM elements
	const gameBoard = document.getElementById('game-board');
	const nextPieceDisplay = document.getElementById('next-piece');
	const scoreDisplay = document.getElementById('score');
	const levelDisplay = document.getElementById('level');
	const linesDisplay = document.getElementById('lines');
	const gameOverScreen = document.getElementById('game-over');
	const pauseScreen = document.getElementById('pause-screen');
	const restartBtn = document.getElementById('restart-btn');
	const pauseBtn = document.getElementById('pause-btn');

	// Tetromino shapes
	const SHAPES = {
	I: [
	[0, 0, 0, 0],
	[1, 1, 1, 1],
	[0, 0, 0, 0],
	[0, 0, 0, 0]
	],
	O: [
	[1, 1],
	[1, 1]
	],
	T: [
	[0, 1, 0],
	[1, 1, 1],
	[0, 0, 0]
	],
	S: [
	[0, 1, 1],
	[1, 1, 0],
	[0, 0, 0]
	],
	Z: [
	[1, 1, 0],
	[0, 1, 1],
	[0, 0, 0]
	],
	J: [
	[1, 0, 0],
	[1, 1, 1],
	[0, 0, 0]
	],
	L: [
	[0, 0, 1],
	[1, 1, 1],
	[0, 0, 0]
	]
	};

	const COLORS = {
	I: 'cell-I',
	O: 'cell-O',
	T: 'cell-T',
	S: 'cell-S',
	Z: 'cell-Z',
	J: 'cell-J',
	L: 'cell-L'
	};

	// Initialize the game board
	function initBoard() {
	gameBoard.innerHTML = '';
	gameBoard.style.width = `${COLS * BLOCK_SIZE}px`;
	gameBoard.style.height = `${ROWS * BLOCK_SIZE}px`;

	for (let row = 0; row < ROWS; row++) {
	for (let col = 0; col < COLS; col++) {
	const cell = document.createElement('div');
	cell.className = 'cell w-full h-full';
	cell.dataset.row = row;
	cell.dataset.col = col;
	gameBoard.appendChild(cell);
	}
	}
	}

	// Initialize the next piece display
	function initNextPieceDisplay() {
	nextPieceDisplay.innerHTML = '';
	nextPieceDisplay.style.width = `${NEXT_PIECE_SIZE * BLOCK_SIZE}px`;
	nextPieceDisplay.style.height = `${NEXT_PIECE_SIZE * BLOCK_SIZE}px`;

	for (let row = 0; row < NEXT_PIECE_SIZE; row++) {
	for (let col = 0; col < NEXT_PIECE_SIZE; col++) {
	const cell = document.createElement('div');
	cell.className = 'cell w-full h-full';
	cell.dataset.row = row;
	cell.dataset.col = col;
	nextPieceDisplay.appendChild(cell);
	}
	}
	}

	// Create a new random piece
	function createPiece() {
	const types = Object.keys(SHAPES);
	const type = types[Math.floor(Math.random() * types.length)];
	const shape = SHAPES[type];

	// For O piece (2x2), adjust starting position
	const startCol = type === 'O' ? Math.floor(COLS / 2) - 1 : Math.floor(COLS / 2) - 2;

	return {
	shape,
	type,
	color: COLORS[type],
	x: startCol,
	y: 0
	};
	}

	// Draw the current piece on the board
	function drawPiece() {
	if (!currentPiece) return;

	for (let row = 0; row < currentPiece.shape.length; row++) {
	for (let col = 0; col < currentPiece.shape[row].length; col++) {
	if (currentPiece.shape[row][col]) {
	const boardRow = currentPiece.y + row;
	const boardCol = currentPiece.x + col;

	if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
	const cellIndex = boardRow * COLS + boardCol;
	const cell = gameBoard.children[cellIndex];
	cell.className = `cell cell-filled ${currentPiece.color}`;
	}
	}
	}
	}
	}

	// Draw the next piece in the preview
	function drawNextPiece() {
	if (!nextPiece) return;

	// Clear the next piece display
	for (let i = 0; i < nextPieceDisplay.children.length; i++) {
	nextPieceDisplay.children[i].className = 'cell w-full h-full';
	}

	// Center the piece in the 4x4 grid
	const offsetX = Math.floor((NEXT_PIECE_SIZE - nextPiece.shape[0].length) / 2);
	const offsetY = Math.floor((NEXT_PIECE_SIZE - nextPiece.shape.length) / 2);

	for (let row = 0; row < nextPiece.shape.length; row++) {
	for (let col = 0; col < nextPiece.shape[row].length; col++) {
	if (nextPiece.shape[row][col]) {
	const displayRow = row + offsetY;
	const displayCol = col + offsetX;
	const cellIndex = displayRow * NEXT_PIECE_SIZE + displayCol;
	const cell = nextPieceDisplay.children[cellIndex];
	cell.className = `cell cell-filled ${nextPiece.color}`;
	}
	}
	}
	}

	// Clear the current piece from the board (before moving/rotating)
	function clearPiece() {
	if (!currentPiece) return;

	for (let row = 0; row < currentPiece.shape.length; row++) {
	for (let col = 0; col < currentPiece.shape[row].length; col++) {
	if (currentPiece.shape[row][col]) {
	const boardRow = currentPiece.y + row;
	const boardCol = currentPiece.x + col;

	if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
	const cellIndex = boardRow * COLS + boardCol;
	const cell = gameBoard.children[cellIndex];
	cell.className = 'cell w-full h-full';
	}
	}
	}
	}
	}

	// Check if the current piece can move to the specified position
	function isValidMove(offsetX, offsetY, rotatedShape = null) {
	const shape = rotatedShape \|\| currentPiece.shape;

	for (let row = 0; row < shape.length; row++) {
	for (let col = 0; col < shape[row].length; col++) {
	if (shape[row][col]) {
	const newX = currentPiece.x + col + offsetX;
	const newY = currentPiece.y + row + offsetY;

	// Check boundaries
	if (newX < 0 \|\| newX >= COLS \|\| newY >= ROWS) {
	return false;
	}

	// Check collision with existing pieces (only check if moving down)
	if (newY >= 0 && board[newY][newX] && offsetY >= 0) {
	return false;
	}
	}
	}
	}

	return true;
	}

	// Rotate the current piece
	function rotatePiece() {
	if (!currentPiece) return;

	// Create a rotated version of the shape
	const rotated = [];
	for (let col = 0; col < currentPiece.shape[0].length; col++) {
	const newRow = [];
	for (let row = currentPiece.shape.length - 1; row >= 0; row--) {
	newRow.push(currentPiece.shape[row][col]);
	}
	rotated.push(newRow);
	}

	// Check if the rotation is valid
	if (isValidMove(0, 0, rotated)) {
	clearPiece();
	currentPiece.shape = rotated;
	drawPiece();
	} else {
	// Try wall kicks (adjust position if rotation would cause collision)
	const kicks = [-1, 1, -2, 2];
	for (const kick of kicks) {
	if (isValidMove(kick, 0, rotated)) {
	clearPiece();
	currentPiece.shape = rotated;
	currentPiece.x += kick;
	drawPiece();
	break;
	}
	}
	}
	}

	// Move the current piece left
	function moveLeft() {
	if (!currentPiece \|\| gameOver \|\| isPaused) return;

	if (isValidMove(-1, 0)) {
	clearPiece();
	currentPiece.x--;
	drawPiece();
	}
	}

	// Move the current piece right
	function moveRight() {
	if (!currentPiece \|\| gameOver \|\| isPaused) return;

	if (isValidMove(1, 0)) {
	clearPiece();
	currentPiece.x++;
	drawPiece();
	}
	}

	// Move the current piece down (soft drop)
	function moveDown() {
	if (!currentPiece \|\| gameOver \|\| isPaused) return;

	if (isValidMove(0, 1)) {
	clearPiece();
	currentPiece.y++;
	drawPiece();
	return true;
	} else {
	lockPiece();
	return false;
	}
	}

	// Hard drop - move piece all the way down immediately
	function hardDrop() {
	if (!currentPiece \|\| gameOver \|\| isPaused) return;

	while (moveDown()) {
	// Keep moving down until it can't anymore
	}
	}

	// Lock the current piece in place and check for completed lines
	function lockPiece() {
	if (!currentPiece) return;

	// Add piece to the board
	for (let row = 0; row < currentPiece.shape.length; row++) {
	for (let col = 0; col < currentPiece.shape[row].length; col++) {
	if (currentPiece.shape[row][col]) {
	const boardRow = currentPiece.y + row;
	const boardCol = currentPiece.x + col;

	if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
	board[boardRow][boardCol] = currentPiece.color;
	}
	}
	}
	}

	// Check for completed lines
	checkLines();

	// Get next piece
	currentPiece = nextPiece;
	nextPiece = createPiece();
	drawNextPiece();

	// Check if game over (new piece can't be placed)
	if (!isValidMove(0, 0)) {
	gameOver = true;
	clearInterval(dropInterval);
	gameOverScreen.classList.remove('hidden');
	}
	}

	// Check for completed lines and clear them
	function checkLines() {
	let linesCleared = 0;

	for (let row = ROWS - 1; row >= 0; row--) {
	if (board[row].every(cell => cell !== 0)) {
	// Line is complete
	linesCleared++;

	// Flash animation for cleared lines
	for (let col = 0; col < COLS; col++) {
	const cellIndex = row * COLS + col;
	const cell = gameBoard.children[cellIndex];
	cell.classList.add('flash-animation');
	}

	// Remove the line after animation
	setTimeout(() => {
	// Shift all rows above down
	for (let r = row; r > 0; r--) {
	board[r] = [...board[r - 1]];
	}
	board[0] = Array(COLS).fill(0);

	// Redraw the entire board
	redrawBoard();
	}, 300);
	}
	}

	if (linesCleared > 0) {
	// Update score based on lines cleared
	const points = [0, 40, 100, 300, 1200]; // Points for 0, 1, 2, 3, 4 lines
	score += points[linesCleared] * level;
	lines += linesCleared;

	// Every 10 lines increases the level
	level = Math.floor(lines / 10) + 1;

	// Increase speed with level (capped at 100ms)
	dropSpeed = Math.max(100, 1000 - (level - 1) * 100);

	// Update displays
	updateDisplays();

	// Restart the drop interval with new speed
	clearInterval(dropInterval);
	dropInterval = setInterval(moveDown, dropSpeed);
	}
	}

	// Redraw the entire board (after line clears)
	function redrawBoard() {
	for (let row = 0; row < ROWS; row++) {
	for (let col = 0; col < COLS; col++) {
	const cellIndex = row * COLS + col;
	const cell = gameBoard.children[cellIndex];

	// Remove animation class if present
	cell.classList.remove('flash-animation');

	if (board[row][col]) {
	cell.className = `cell cell-filled ${board[row][col]}`;
	} else {
	cell.className = 'cell w-full h-full';
	}
	}
	}
	}

	// Update score, level, and lines displays
	function updateDisplays() {
	scoreDisplay.textContent = score;
	levelDisplay.textContent = level;
	linesDisplay.textContent = lines;
	}

	// Start the game
	function startGame() {
	// Reset game state
	board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
	score = 0;
	level = 1;
	lines = 0;
	gameOver = false;
	dropSpeed = 1000;

	// Create pieces
	currentPiece = createPiece();
	nextPiece = createPiece();

	// Update displays
	updateDisplays();

	// Draw initial state
	redrawBoard();
	drawPiece();
	drawNextPiece();

	// Hide game over screen
	gameOverScreen.classList.add('hidden');

	// Start the drop interval
	clearInterval(dropInterval);
	dropInterval = setInterval(moveDown, dropSpeed);
	}

	// Toggle pause
	function togglePause() {
	if (gameOver) return;

	isPaused = !isPaused;

	if (isPaused) {
	clearInterval(dropInterval);
	pauseScreen.classList.remove('hidden');
	} else {
	dropInterval = setInterval(moveDown, dropSpeed);
	pauseScreen.classList.add('hidden');
	}
	}

	// Event listeners
	document.addEventListener('keydown', (e) => {
	if (gameOver && e.key === 'Enter') {
	startGame();
	return;
	}

	if (isPaused && e.key !== 'p') return;

	switch (e.key) {
	case 'ArrowLeft':
	moveLeft();
	break;
	case 'ArrowRight':
	moveRight();
	break;
	case 'ArrowDown':
	moveDown();
	break;
	case 'ArrowUp':
	rotatePiece();
	break;
	case ' ':
	hardDrop();
	break;
	case 'p':
	case 'P':
	togglePause();
	break;
	}
	});

	// Touch controls for mobile
	let touchStartX = 0;
	let touchStartY = 0;

	gameBoard.addEventListener('touchstart', (e) => {
	if (gameOver \|\| isPaused) return;

	touchStartX = e.touches[0].clientX;
	touchStartY = e.touches[0].clientY;
	e.preventDefault();
	}, { passive: false });

	gameBoard.addEventListener('touchmove', (e) => {
	if (gameOver \|\| isPaused) return;

	const touchX = e.touches[0].clientX;
	const touchY = e.touches[0].clientY;
	const diffX = touchX - touchStartX;
	const diffY = touchY - touchStartY;

	// Horizontal swipe
	if (Math.abs(diffX) > Math.abs(diffY)) {
	if (diffX > 30) {
	moveRight();
	touchStartX = touchX;
	} else if (diffX < -30) {
	moveLeft();
	touchStartX = touchX;
	}
	}

	// Vertical swipe down (soft drop)
	if (diffY > 30) {
	moveDown();
	touchStartY = touchY;
	}

	e.preventDefault();
	}, { passive: false });

	gameBoard.addEventListener('touchend', (e) => {
	if (gameOver \|\| isPaused) return;

	const touchEndX = e.changedTouches[0].clientX;
	const touchEndY = e.changedTouches[0].clientY;
	const diffX = touchEndX - touchStartX;
	const diffY = touchEndY - touchStartY;

	// Tap (rotate)
	if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10) {
	rotatePiece();
	}

	// Quick swipe up (hard drop)
	if (diffY < -50) {
	hardDrop();
	}
	});

	// Button event listeners
	restartBtn.addEventListener('click', startGame);
	pauseBtn.addEventListener('click', togglePause);

	// Initialize the game
	initBoard();
	initNextPieceDisplay();
	startGame();
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/tetris" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>