Spaces:

FriedsU
/

tetris

Running

App Files Files Community

FriedsU commited on Apr 5, 2025

Commit

a80016c

verified ·

1 Parent(s): c00679a

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +632 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tetris
-emoji: 📈
 colorFrom: gray
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tetris
+emoji: 🐳
 colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,632 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neon Tetris</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        body {
+            font-family: 'Press Start 2P', cursive;
+            background-color: #0f172a;
+            overflow: hidden;
+        }
+        .tetris-block {
+            box-sizing: border-box;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.1s ease;
+        }
+        .tetris-block.I {
+            background-color: #00f0f0;
+            box-shadow: inset 0 0 10px rgba(0, 240, 240, 0.5), 0 0 10px rgba(0, 240, 240, 0.5);
+        }
+        .tetris-block.J {
+            background-color: #0000f0;
+            box-shadow: inset 0 0 10px rgba(0, 0, 240, 0.5), 0 0 10px rgba(0, 0, 240, 0.5);
+        }
+        .tetris-block.L {
+            background-color: #f0a000;
+            box-shadow: inset 0 0 10px rgba(240, 160, 0, 0.5), 0 0 10px rgba(240, 160, 0, 0.5);
+        }
+        .tetris-block.O {
+            background-color: #f0f000;
+            box-shadow: inset 0 0 10px rgba(240, 240, 0, 0.5), 0 0 10px rgba(240, 240, 0, 0.5);
+        }
+        .tetris-block.S {
+            background-color: #00f000;
+            box-shadow: inset 0 0 10px rgba(0, 240, 0, 0.5), 0 0 10px rgba(0, 240, 0, 0.5);
+        }
+        .tetris-block.T {
+            background-color: #a000f0;
+            box-shadow: inset 0 0 10px rgba(160, 0, 240, 0.5), 0 0 10px rgba(160, 0, 240, 0.5);
+        }
+        .tetris-block.Z {
+            background-color: #f00000;
+            box-shadow: inset 0 0 10px rgba(240, 0, 0, 0.5), 0 0 10px rgba(240, 0, 0, 0.5);
+        }
+        .grid-cell {
+            background-color: rgba(30, 41, 59, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .next-piece-container {
+            background-color: rgba(30, 41, 59, 0.7);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+        }
+        .game-overlay {
+            background-color: rgba(15, 23, 42, 0.9);
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        /* New styles for next piece preview */
+        .next-piece-grid {
+            display: grid;
+            width: 100px;
+            height: 100px;
+            position: relative;
+        }
+        .next-piece-inner {
+            position: absolute;
+            display: grid;
+            gap: 0;
+        }
+        .next-piece-cell {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col items-center justify-center text-white p-4">
+    <div class="text-center mb-6">
+        <h1 class="text-4xl md:text-5xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
+            NEON TETRIS
+        </h1>
+        <p class="text-sm text-gray-400">Use arrow keys to play • ↑ to rotate • ↓ to drop faster</p>
+    </div>
+    <div class="flex flex-col md:flex-row items-center gap-8">
+        <!-- Game Board -->
+        <div class="relative">
+            <div id="game-board" class="grid grid-cols-10 grid-rows-20 gap-0 w-[250px] h-[500px] border-4 border-indigo-500/50 rounded-lg overflow-hidden"></div>
+            <div id="game-overlay" class="game-overlay absolute inset-0 flex flex-col items-center justify-center hidden">
+                <h2 class="text-3xl font-bold mb-4 text-red-500">GAME OVER</h2>
+                <button id="restart-btn" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-bold transition-all pulse">
+                    PLAY AGAIN
+                </button>
+            </div>
+        </div>
+        <!-- Game Info -->
+        <div class="flex flex-col gap-6 w-full max-w-[250px]">
+            <div class="next-piece-container p-4 rounded-lg">
+                <h3 class="text-center text-lg mb-3">NEXT PIECE</h3>
+                <div id="next-piece" class="next-piece-grid">
+                    <div id="next-piece-inner" class="next-piece-inner"></div>
+                </div>
+            </div>
+            <div class="bg-slate-800/50 p-4 rounded-lg">
+                <div class="flex justify-between mb-2">
+                    <span>SCORE:</span>
+                    <span id="score" class="font-bold">0</span>
+                </div>
+                <div class="flex justify-between mb-2">
+                    <span>LEVEL:</span>
+                    <span id="level" class="font-bold">1</span>
+                </div>
+                <div class="flex justify-between">
+                    <span>LINES:</span>
+                    <span id="lines" class="font-bold">0</span>
+                </div>
+            </div>
+            <div class="bg-slate-800/50 p-4 rounded-lg hidden md:block">
+                <h3 class="text-center text-lg mb-2">CONTROLS</h3>
+                <div class="grid grid-cols-3 gap-2 text-xs">
+                    <div class="col-span-3 flex justify-center">
+                        <div class="bg-slate-700/50 p-2 rounded text-center">↑ Rotate</div>
+                    </div>
+                    <div class="flex justify-center">
+                        <div class="bg-slate-700/50 p-2 rounded text-center">← Left</div>
+                    </div>
+                    <div class="flex justify-center">
+                        <div class="bg-slate-700/50 p-2 rounded text-center">↓ Drop</div>
+                    </div>
+                    <div class="flex justify-center">
+                        <div class="bg-slate-700/50 p-2 rounded text-center">→ Right</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="mt-8 text-xs text-gray-500 text-center">
+        <p>Press any key to start • P to pause</p>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game constants
+            const COLS = 10;
+            const ROWS = 20;
+            const BLOCK_SIZE = 25;
+            const EMPTY = 'empty';
+            // Game variables
+            let board = createEmptyBoard();
+            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-inner');
+            const scoreDisplay = document.getElementById('score');
+            const levelDisplay = document.getElementById('level');
+            const linesDisplay = document.getElementById('lines');
+            const gameOverlay = document.getElementById('game-overlay');
+            const restartBtn = document.getElementById('restart-btn');
+            // Initialize the game board display
+            function initializeBoard() {
+                gameBoard.innerHTML = '';
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'grid-cell w-full h-full';
+                        cell.dataset.row = row;
+                        cell.dataset.col = col;
+                        gameBoard.appendChild(cell);
+                    }
+                }
+            }
+            // Create empty game board
+            function createEmptyBoard() {
+                return Array.from({ length: ROWS }, () => Array(COLS).fill(EMPTY));
+            }
+            // Tetromino shapes
+            const SHAPES = {
+                I: [
+                    [0, 0, 0, 0],
+                    [1, 1, 1, 1],
+                    [0, 0, 0, 0],
+                    [0, 0, 0, 0]
+                ],
+                J: [
+                    [1, 0, 0],
+                    [1, 1, 1],
+                    [0, 0, 0]
+                ],
+                L: [
+                    [0, 0, 1],
+                    [1, 1, 1],
+                    [0, 0, 0]
+                ],
+                O: [
+                    [1, 1],
+                    [1, 1]
+                ],
+                S: [
+                    [0, 1, 1],
+                    [1, 1, 0],
+                    [0, 0, 0]
+                ],
+                T: [
+                    [0, 1, 0],
+                    [1, 1, 1],
+                    [0, 0, 0]
+                ],
+                Z: [
+                    [1, 1, 0],
+                    [0, 1, 1],
+                    [0, 0, 0]
+                ]
+            };
+            // Tetromino colors
+            const COLORS = {
+                I: 'I',
+                J: 'J',
+                L: 'L',
+                O: 'O',
+                S: 'S',
+                T: 'T',
+                Z: 'Z'
+            };
+            // Get random tetromino
+            function getRandomPiece() {
+                const pieces = Object.keys(SHAPES);
+                const randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
+                return {
+                    shape: SHAPES[randomPiece],
+                    color: COLORS[randomPiece],
+                    x: Math.floor(COLS / 2) - Math.floor(SHAPES[randomPiece][0].length / 2),
+                    y: 0
+                };
+            }
+            // Draw the game board
+            function drawBoard() {
+                // Clear the board
+                document.querySelectorAll('#game-board div').forEach(cell => {
+                    cell.className = 'grid-cell w-full h-full';
+                });
+                // Draw locked pieces
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        if (board[row][col] !== EMPTY) {
+                            const cell = document.querySelector(`#game-board div[data-row="${row}"][data-col="${col}"]`);
+                            if (cell) {
+                                cell.className = `tetris-block ${board[row][col]} w-full h-full`;
+                            }
+                        }
+                    }
+                }
+                // Draw current piece
+                if (currentPiece) {
+                    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 cell = document.querySelector(`#game-board div[data-row="${boardRow}"][data-col="${boardCol}"]`);
+                                    if (cell) {
+                                        cell.className = `tetris-block ${currentPiece.color} w-full h-full`;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // Draw next piece preview
+            function drawNextPiece() {
+                if (!nextPiece) return;
+                // Clear the preview
+                nextPieceDisplay.innerHTML = '';
+                // Set up the grid based on the piece dimensions
+                const rows = nextPiece.shape.length;
+                const cols = nextPiece.shape[0].length;
+                // Calculate cell size to fit in the 100x100 container
+                const cellSize = Math.min(100 / cols, 100 / rows);
+                const containerWidth = cellSize * cols;
+                const containerHeight = cellSize * rows;
+                // Position the inner container in the center
+                nextPieceDisplay.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`;
+                nextPieceDisplay.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`;
+                nextPieceDisplay.style.width = `${containerWidth}px`;
+                nextPieceDisplay.style.height = `${containerHeight}px`;
+                nextPieceDisplay.style.left = `${(100 - containerWidth) / 2}px`;
+                nextPieceDisplay.style.top = `${(100 - containerHeight) / 2}px`;
+                // Draw the piece
+                for (let row = 0; row < rows; row++) {
+                    for (let col = 0; col < cols; col++) {
+                        const cell = document.createElement('div');
+                        if (nextPiece.shape[row][col]) {
+                            cell.className = `tetris-block ${nextPiece.color} next-piece-cell`;
+                        } else {
+                            cell.className = 'next-piece-cell opacity-0';
+                        }
+                        nextPieceDisplay.appendChild(cell);
+                    }
+                }
+            }
+            // Check for collisions
+            function collision(x, y, shape) {
+                for (let row = 0; row < shape.length; row++) {
+                    for (let col = 0; col < shape[row].length; col++) {
+                        if (shape[row][col]) {
+                            const newX = x + col;
+                            const newY = y + row;
+                            // Check boundaries
+                            if (newX < 0 || newX >= COLS || newY >= ROWS) {
+                                return true;
+                            }
+                            // Check if already locked
+                            if (newY >= 0 && board[newY][newX] !== EMPTY) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+                return false;
+            }
+            // Rotate piece
+            function rotatePiece() {
+                if (!currentPiece || gameOver || isPaused) return;
+                const newShape = [];
+                for (let col = currentPiece.shape[0].length - 1; col >= 0; col--) {
+                    const newRow = [];
+                    for (let row = 0; row < currentPiece.shape.length; row++) {
+                        newRow.push(currentPiece.shape[row][col]);
+                    }
+                    newShape.push(newRow);
+                }
+                // Check if rotation is possible
+                if (!collision(currentPiece.x, currentPiece.y, newShape)) {
+                    currentPiece.shape = newShape;
+                    drawBoard();
+                }
+            }
+            // Move piece left
+            function moveLeft() {
+                if (!currentPiece || gameOver || isPaused) return;
+                if (!collision(currentPiece.x - 1, currentPiece.y, currentPiece.shape)) {
+                    currentPiece.x--;
+                    drawBoard();
+                }
+            }
+            // Move piece right
+            function moveRight() {
+                if (!currentPiece || gameOver || isPaused) return;
+                if (!collision(currentPiece.x + 1, currentPiece.y, currentPiece.shape)) {
+                    currentPiece.x++;
+                    drawBoard();
+                }
+            }
+            // Move piece down
+            function moveDown() {
+                if (!currentPiece || gameOver || isPaused) return;
+                if (!collision(currentPiece.x, currentPiece.y + 1, currentPiece.shape)) {
+                    currentPiece.y++;
+                    drawBoard();
+                } else {
+                    lockPiece();
+                }
+            }
+            // Drop piece instantly
+            function dropPiece() {
+                if (!currentPiece || gameOver || isPaused) return;
+                while (!collision(currentPiece.x, currentPiece.y + 1, currentPiece.shape)) {
+                    currentPiece.y++;
+                }
+                lockPiece();
+                drawBoard();
+            }
+            // Lock piece in place
+            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();
+                // Check for game over
+                if (currentPiece.y <= 0) {
+                    gameOver = true;
+                    clearInterval(dropInterval);
+                    gameOverlay.classList.remove('hidden');
+                    return;
+                }
+                // Get next piece
+                currentPiece = nextPiece;
+                nextPiece = getRandomPiece();
+                drawNextPiece();
+            }
+            // Check for completed lines
+            function checkLines() {
+                let linesCleared = 0;
+                for (let row = ROWS - 1; row >= 0; row--) {
+                    if (board[row].every(cell => cell !== EMPTY)) {
+                        // Remove the line
+                        board.splice(row, 1);
+                        // Add new empty line at the top
+                        board.unshift(Array(COLS).fill(EMPTY));
+                        linesCleared++;
+                        row++; // Check the same row again
+                    }
+                }
+                if (linesCleared > 0) {
+                    // Update score
+                    const points = [0, 40, 100, 300, 1200][linesCleared] * level;
+                    score += points;
+                    lines += linesCleared;
+                    // Update level every 10 lines
+                    const newLevel = Math.floor(lines / 10) + 1;
+                    if (newLevel > level) {
+                        level = newLevel;
+                        // Increase speed
+                        dropSpeed = Math.max(100, 1000 - (level - 1) * 100);
+                        clearInterval(dropInterval);
+                        dropInterval = setInterval(moveDown, dropSpeed);
+                    }
+                    updateStats();
+                }
+            }
+            // Update score, level, and lines
+            function updateStats() {
+                scoreDisplay.textContent = score;
+                levelDisplay.textContent = level;
+                linesDisplay.textContent = lines;
+            }
+            // Start the game
+            function startGame() {
+                board = createEmptyBoard();
+                score = 0;
+                level = 1;
+                lines = 0;
+                gameOver = false;
+                isPaused = false;
+                dropSpeed = 1000;
+                updateStats();
+                currentPiece = getRandomPiece();
+                nextPiece = getRandomPiece();
+                drawBoard();
+                drawNextPiece();
+                gameOverlay.classList.add('hidden');
+                clearInterval(dropInterval);
+                dropInterval = setInterval(moveDown, dropSpeed);
+            }
+            // Pause the game
+            function togglePause() {
+                if (gameOver) return;
+                isPaused = !isPaused;
+                if (isPaused) {
+                    clearInterval(dropInterval);
+                    document.querySelector('h1').textContent = 'PAUSED';
+                } else {
+                    dropInterval = setInterval(moveDown, dropSpeed);
+                    document.querySelector('h1').textContent = 'NEON TETRIS';
+                }
+            }
+            // Event listeners
+            document.addEventListener('keydown', (e) => {
+                if (gameOver && e.key === ' ') {
+                    startGame();
+                    return;
+                }
+                switch (e.key) {
+                    case 'ArrowLeft':
+                        moveLeft();
+                        break;
+                    case 'ArrowRight':
+                        moveRight();
+                        break;
+                    case 'ArrowDown':
+                        moveDown();
+                        break;
+                    case 'ArrowUp':
+                        rotatePiece();
+                        break;
+                    case ' ':
+                        dropPiece();
+                        break;
+                    case 'p':
+                    case 'P':
+                        togglePause();
+                        break;
+                }
+            });
+            restartBtn.addEventListener('click', startGame);
+            // Touch controls for mobile
+            let touchStartX = 0;
+            let touchStartY = 0;
+            gameBoard.addEventListener('touchstart', (e) => {
+                touchStartX = e.touches[0].clientX;
+                touchStartY = e.touches[0].clientY;
+            }, false);
+            gameBoard.addEventListener('touchend', (e) => {
+                if (!touchStartX || !touchStartY || gameOver || isPaused) return;
+                const touchEndX = e.changedTouches[0].clientX;
+                const touchEndY = e.changedTouches[0].clientY;
+                const diffX = touchStartX - touchEndX;
+                const diffY = touchStartY - touchEndY;
+                // Swipe left
+                if (diffX > 50 && Math.abs(diffY) < 100) {
+                    moveLeft();
+                }
+                // Swipe right
+                else if (diffX < -50 && Math.abs(diffY) < 100) {
+                    moveRight();
+                }
+                // Swipe down
+                else if (diffY < -50 && Math.abs(diffX) < 100) {
+                    dropPiece();
+                }
+                // Swipe up or tap
+                else if (Math.abs(diffX) < 50 && Math.abs(diffY) < 50) {
+                    rotatePiece();
+                }
+            }, false);
+            // Initialize the game
+            initializeBoard();
+            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=FriedsU/tetris" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>