Hugging Face's logo

Spaces:
bozhong
/
tetris
Running

App Files Community
tetris / index.html
bozhong's picture
bozhong
请实现一个俄罗斯方块小游戏 - Initial Deployment
c9ee90d verified
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>