[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import Tetris from "../tetris" export default function Page() { return (

) } [V0_FILE]png:file="public/tetris-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-NoYdJspBV69Ock6SClVMWHIfsluwHm.png" isMerged="true" [V0_FILE]png:file="public/arrow-keys.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-pANTuksrypwxRrlw1DobvNGGzSIZgA.png" isMerged="true" [V0_FILE]typescriptreact:file="tetris.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import { Button } from "@/components/ui/button" import { motion, AnimatePresence } from "framer-motion" import { Music, Pause, Play, VolumeX } from "lucide-react" import { Geist } from "next/font/google" import Image from "next/image" const geist = Geist({ subsets: ["latin"] }) const TETROMINOS = { I: { shape: [[1, 1, 1, 1]], color: "cyan-500" }, J: { shape: [ [1, 0, 0], [1, 1, 1], ], color: "blue-500", }, L: { shape: [ [0, 0, 1], [1, 1, 1], ], color: "orange-500", }, O: { shape: [ [1, 1], [1, 1], ], color: "yellow-500", }, S: { shape: [ [0, 1, 1], [1, 1, 0], ], color: "green-500", }, T: { shape: [ [0, 1, 0], [1, 1, 1], ], color: "purple-500", }, Z: { shape: [ [1, 1, 0], [0, 1, 1], ], color: "red-500", }, } const BOARD_WIDTH = 10 const BOARD_HEIGHT = 20 const BUFFER_ROWS = 2 // Invisible rows above the visible board const TOTAL_BOARD_HEIGHT = BOARD_HEIGHT + BUFFER_ROWS const INITIAL_DROP_TIME = 800 const SPEED_INCREASE_FACTOR = 0.8 // Changed from 0.95 to 0.8 for more dramatic speed increase // Create board with buffer rows (total 22 rows, but only show bottom 20) const createEmptyBoard = () => Array.from({ length: TOTAL_BOARD_HEIGHT }, () => Array(BOARD_WIDTH).fill(0)) const randomTetromino = () => { const keys = Object.keys(TETROMINOS) const randKey = keys[Math.floor(Math.random() * keys.length)] return TETROMINOS[randKey] } const generateNextPieces = (count = 3) => { return Array.from({ length: count }, () => randomTetromino()) } export default function Tetris() { const [board, setBoard] = useState(createEmptyBoard()) const [currentPiece, setCurrentPiece] = useState(null) const [nextPieces, setNextPieces] = useState(generateNextPieces()) const [heldPiece, setHeldPiece] = useState(null) const [canHold, setCanHold] = useState(true) const [score, setScore] = useState(0) const [highScore, setHighScore] = useState(0) const [lines, setLines] = useState(0) const [gameOver, setGameOver] = useState(false) const [isPaused, setIsPaused] = useState(false) const [dropTime, setDropTime] = useState(INITIAL_DROP_TIME) const [level, setLevel] = useState(1) const [isMusicPlaying, setIsMusicPlaying] = useState(true) const [completedRows, setCompletedRows] = useState([]) const audioRef = useRef(null) const gameStateRef = useRef({ board, currentPiece, gameOver, isPaused, }) useEffect(() => { gameStateRef.current = { board, currentPiece, gameOver, isPaused } }, [board, currentPiece, gameOver, isPaused]) const checkCollision = useCallback( (x, y, shape, currentBoard = board) => { for (let row = 0; row < shape.length; row++) { for (let col = 0; col < shape[row].length; col++) { if (shape[row][col] !== 0) { const newX = x + col const newY = y + row if (newX < 0 || newX >= BOARD_WIDTH) { return true } if (newY >= TOTAL_BOARD_HEIGHT) { return true } if (newY >= 0 && currentBoard[newY][newX] !== 0) { return true } } } } return false }, [board], ) const isValidMove = useCallback( (x, y, shape, currentBoard = board) => { return !checkCollision(x, y, shape, currentBoard) }, [checkCollision], ) const checkGameOver = useCallback((currentBoard) => { for (let x = 0; x < BOARD_WIDTH; x++) { if (currentBoard[BUFFER_ROWS][x] !== 0) { return true } } return false }, []) const holdPiece = useCallback(() => { if (!canHold || !currentPiece) return if (heldPiece) { const newPiece = { x: Math.floor(BOARD_WIDTH / 2) - 1, y: 0, tetromino: heldPiece, } if (!isValidMove(newPiece.x, newPiece.y, newPiece.tetromino.shape)) { setGameOver(true) return } setHeldPiece(currentPiece.tetromino) setCurrentPiece(newPiece) } else { setHeldPiece(currentPiece.tetromino) spawnNewPiece() } setCanHold(false) }, [currentPiece, heldPiece, canHold, isValidMove]) const moveLeft = useCallback(() => { if (currentPiece && !isPaused && isValidMove(currentPiece.x - 1, currentPiece.y, currentPiece.tetromino.shape)) { setCurrentPiece((prev) => ({ ...prev, x: prev.x - 1 })) } }, [currentPiece, isPaused, isValidMove]) const moveRight = useCallback(() => { if (currentPiece && !isPaused && isValidMove(currentPiece.x + 1, currentPiece.y, currentPiece.tetromino.shape)) { setCurrentPiece((prev) => ({ ...prev, x: prev.x + 1 })) } }, [currentPiece, isPaused, isValidMove]) const moveDown = useCallback(() => { if (!currentPiece || isPaused) return if (isValidMove(currentPiece.x, currentPiece.y + 1, currentPiece.tetromino.shape)) { setCurrentPiece((prev) => ({ ...prev, y: prev.y + 1 })) } else { placePiece() } }, [currentPiece, isPaused, isValidMove]) const rotate = useCallback(() => { if (!currentPiece || isPaused) return const rotated = currentPiece.tetromino.shape[0].map((_, i) => currentPiece.tetromino.shape.map((row) => row[i]).reverse(), ) const newX = currentPiece.x const newY = currentPiece.y const wallKickOffsets = [ [0, 0], [-1, 0], [1, 0], [0, -1], [-1, -1], [1, -1], ] for (const [offsetX, offsetY] of wallKickOffsets) { const testX = newX + offsetX const testY = newY + offsetY if (isValidMove(testX, testY, rotated)) { setCurrentPiece((prev) => ({ ...prev, x: testX, y: testY, tetromino: { ...prev.tetromino, shape: rotated }, })) return } } }, [currentPiece, isPaused, isValidMove]) const hardDrop = useCallback(() => { if (!currentPiece || isPaused) return let dropY = currentPiece.y while (isValidMove(currentPiece.x, dropY + 1, currentPiece.tetromino.shape)) { dropY++ } if (isValidMove(currentPiece.x, dropY, currentPiece.tetromino.shape)) { const droppedPiece = { ...currentPiece, y: dropY } placePieceAtPosition(droppedPiece) } }, [currentPiece, isPaused, isValidMove]) const placePieceAtPosition = useCallback( (piece) => { const newBoard = board.map((row) => [...row]) let validPlacement = true piece.tetromino.shape.forEach((row, y) => { row.forEach((value, x) => { if (value !== 0) { const boardY = y + piece.y const boardX = x + piece.x if (boardY >= 0 && boardY < TOTAL_BOARD_HEIGHT && boardX >= 0 && boardX < BOARD_WIDTH) { if (newBoard[boardY][boardX] === 0) { newBoard[boardY][boardX] = piece.tetromino.color } else { validPlacement = false } } else { validPlacement = false } } }) }) if (validPlacement) { setBoard(newBoard) setCurrentPiece(null) if (checkGameOver(newBoard)) { setGameOver(true) return } clearLines(newBoard) setCanHold(true) spawnNewPiece() } else { setGameOver(true) } }, [board, checkGameOver], ) const placePiece = useCallback(() => { if (!currentPiece) return placePieceAtPosition(currentPiece) }, [currentPiece, placePieceAtPosition]) const clearLines = useCallback( (newBoard) => { const linesCleared = [] const updatedBoard = [] for (let i = 0; i < TOTAL_BOARD_HEIGHT; i++) { const row = newBoard[i] if (i >= BUFFER_ROWS && row.every((cell) => cell !== 0)) { linesCleared.push(i) } else { updatedBoard.push([...row]) } } if (linesCleared.length > 0) { setCompletedRows(linesCleared.map((row) => row - BUFFER_ROWS)) setTimeout(() => { while (updatedBoard.length < TOTAL_BOARD_HEIGHT) { updatedBoard.unshift(Array(BOARD_WIDTH).fill(0)) } setBoard(updatedBoard) setCompletedRows([]) const newScore = score + linesCleared.length * 100 const newLines = lines + linesCleared.length setScore(newScore) setLines(newLines) setHighScore((prev) => Math.max(prev, newScore)) if (Math.floor(newLines / 10) > level - 1) { setLevel((prev) => prev + 1) setDropTime((prev) => Math.max(prev * SPEED_INCREASE_FACTOR, 50)) } }, 500) } }, [score, lines, level], ) const spawnNewPiece = useCallback(() => { setNextPieces((prevNextPieces) => { const newPiece = { x: Math.floor(BOARD_WIDTH / 2) - 1, y: 0, tetromino: prevNextPieces[0], } const updatedNextPieces = [...prevNextPieces.slice(1), randomTetromino()] if (checkCollision(newPiece.x, newPiece.y, newPiece.tetromino.shape)) { setGameOver(true) } else { setCurrentPiece(newPiece) } return updatedNextPieces }) }, [checkCollision]) const togglePause = () => { setIsPaused(!isPaused) } useEffect(() => { if (!currentPiece && !gameOver) { spawnNewPiece() } }, [currentPiece, gameOver, spawnNewPiece]) useEffect(() => { let interval = null if (!gameOver && !isPaused) { interval = setInterval(() => { const { currentPiece: piece, board: currentBoard, gameOver: isGameOver, isPaused: paused, } = gameStateRef.current if (isGameOver || paused || !piece) return const canMoveDown = !checkCollision(piece.x, piece.y + 1, piece.tetromino.shape, currentBoard) if (canMoveDown) { setCurrentPiece((prev) => (prev ? { ...prev, y: prev.y + 1 } : null)) } else { placePieceAtPosition(piece) } }, dropTime) } return () => { if (interval) { clearInterval(interval) } } }, [gameOver, isPaused, dropTime, checkCollision, placePieceAtPosition]) useEffect(() => { const handleKeyPress = (e) => { if (gameOver) return switch (e.key) { case "ArrowLeft": moveLeft() break case "ArrowRight": moveRight() break case "ArrowDown": moveDown() break case "ArrowUp": rotate() break case " ": e.preventDefault() hardDrop() break case "p": case "P": togglePause() break case "h": case "H": holdPiece() break default: break } } window.addEventListener("keydown", handleKeyPress) return () => window.removeEventListener("keydown", handleKeyPress) }, [moveLeft, moveRight, moveDown, rotate, gameOver, holdPiece]) useEffect(() => { if (audioRef.current) { audioRef.current.volume = 0.3 audioRef.current.loop = true if (!gameOver && isMusicPlaying && !isPaused) { audioRef.current.play().catch((error) => console.error("Audio playback failed:", error)) } else { audioRef.current.pause() } } }, [gameOver, isMusicPlaying, isPaused]) const resetGame = () => { setBoard(createEmptyBoard()) setCurrentPiece(null) setNextPieces(generateNextPieces()) setHeldPiece(null) setCanHold(true) setScore(0) setLines(0) setGameOver(false) setIsPaused(false) setDropTime(INITIAL_DROP_TIME) setLevel(1) setCompletedRows([]) } const renderCell = (x, y) => { const actualY = y + BUFFER_ROWS if ( currentPiece && currentPiece.tetromino.shape[actualY - currentPiece.y] && currentPiece.tetromino.shape[actualY - currentPiece.y][x - currentPiece.x] ) { return currentPiece.tetromino.color } return board[actualY][x] } const renderPiece = (tetromino, size = 20) => { if (!tetromino) return null return (

{tetromino.shape.map((row, y) => row.map((cell, x) => (

)), )}

) } const toggleMusic = () => { setIsMusicPlaying(!isMusicPlaying) } return (

Hold

{renderPiece(heldPiece, 15)}

Highscore

{highScore}

Level

{level}

Score

{score}

Lines

{lines}

{Array.from({ length: BOARD_HEIGHT }, (_, y) => Array.from({ length: BOARD_WIDTH }, (_, x) => ( )), )}

{gameOver &&

Game Over!

} {isPaused && !gameOver &&

Paused

}

{nextPieces.slice(0, 3).map((piece, index) => (

{renderPiece(piece, 15)}

))}

Controls

Move/Rotate

SPACE

Hard drop

Hold piece

Pause

) }

About

Tags

Share

About

Tags

Share

More from richardjzhang

More Templates Like This

About

Tags

Share

About

Tags

Share

More from richardjzhang

More Templates Like This