[V0_FILE]typescriptreact:file="components/game-canvas.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import useInput from "@/hooks/use-input" import { drawField, drawSprite } from "@/lib/render-utils" import { checkCollision, updateBallPhysics } from "@/lib/physics" import { useSound } from "@/hooks/use-sound" // Game constants const GAME_WIDTH = 320 const GAME_HEIGHT = 240 const PLAYER_SPEED = 2.5 const BALL_SPEED = 1.8 const KICK_POWER = 5 const GAME_DURATION = 120 // 2 minutes in seconds // Game entities interface Entity { x: number y: number width: number height: number speedX: number speedY: number } interface GameCanvasProps { onScore: (isPlayer: boolean) => void onGameEnd: () => void } export default function GameCanvas({ onScore, onGameEnd }: GameCanvasProps) { const canvasRef = useRef(null) const [timeLeft, setTimeLeft] = useState(GAME_DURATION) const [isGameActive, setIsGameActive] = useState(true) const animationFrameRef = useRef() const lastTimeRef = useRef(0) // Game entities const [player, setPlayer] = useState({ x: GAME_WIDTH / 4, y: GAME_HEIGHT / 2, width: 16, height: 16, speedX: 0, speedY: 0, }) const [cpu, setCpu] = useState({ x: (GAME_WIDTH / 4) * 3, y: GAME_HEIGHT / 2, width: 16, height: 16, speedX: 0, speedY: 0, }) const [ball, setBall] = useState({ x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2, width: 8, height: 8, speedX: 0, speedY: 0, }) // Goals const leftGoal = { x: 0, y: GAME_HEIGHT / 2 - 24, width: 8, height: 48 } const rightGoal = { x: GAME_WIDTH - 8, y: GAME_HEIGHT / 2 - 24, width: 8, height: 48 } // Input handling const { keys, touchInput } = useInput() // Sound effects const kickSound = useSound("/sounds/kick.mp3") const goalSound = useSound("/sounds/goal.mp3") const whistleSound = useSound("/sounds/whistle.mp3") // Create placeholder sounds using Web Audio API useEffect(() => { const createBeep = (frequency: number, duration: number) => { try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.type = "sine" oscillator.frequency.value = frequency oscillator.connect(gainNode) gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 oscillator.start() setTimeout(() => { oscillator.stop() audioContext.close() }, duration) } catch (error) { console.warn("Web Audio API error:", error) } } // Override kick and goal sounds with beeps if needed const originalKickPlay = kickSound.play kickSound.play = () => { try { originalKickPlay() } catch (e) { createBeep(440, 100) // A4 note, short duration } } const originalGoalPlay = goalSound.play goalSound.play = () => { try { originalGoalPlay() } catch (e) { createBeep(523.25, 300) // C5 note, longer duration } } const originalWhistlePlay = whistleSound.play whistleSound.play = () => { try { originalWhistlePlay() } catch (e) { createBeep(880, 500) // A5 note, longer duration } } }, [kickSound, goalSound, whistleSound]) // Reset ball to center const resetBall = () => { setBall({ x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2, width: 8, height: 8, speedX: 0, speedY: 0, }) } // Check for goals const checkGoals = () => { // Ball in left goal (CPU scores) if (ball.x < leftGoal.x + leftGoal.width && ball.y > leftGoal.y && ball.y < leftGoal.y + leftGoal.height) { goalSound.play() onScore(false) resetBall() } // Ball in right goal (Player scores) if (ball.x + ball.width > rightGoal.x && ball.y > rightGoal.y && ball.y < rightGoal.y + rightGoal.height) { goalSound.play() onScore(true) resetBall() } } // Update player position based on input const updatePlayerPosition = () => { let dx = 0 let dy = 0 // Keyboard controls if (keys.ArrowUp || keys.KeyW) dy -= PLAYER_SPEED if (keys.ArrowDown || keys.KeyS) dy += PLAYER_SPEED if (keys.ArrowLeft || keys.KeyA) dx -= PLAYER_SPEED if (keys.ArrowRight || keys.KeyD) dx += PLAYER_SPEED // Touch controls if (touchInput.active) { dx = touchInput.dx * PLAYER_SPEED dy = touchInput.dy * PLAYER_SPEED } // Update player position setPlayer((prev) => { const newX = Math.max(0, Math.min(GAME_WIDTH - prev.width, prev.x + dx)) const newY = Math.max(0, Math.min(GAME_HEIGHT - prev.height, prev.y + dy)) return { ...prev, x: newX, y: newY } }) // Handle kick if (keys.Space || touchInput.action) { // Check if player is close to the ball if (checkCollision(player, ball, 20)) { kickSound.play() // Calculate kick direction from player to ball const dx = ball.x - player.x const dy = ball.y - player.y const magnitude = Math.sqrt(dx * dx + dy * dy) || 1 const normalizedDx = dx / magnitude const normalizedDy = dy / magnitude setBall((prev) => ({ ...prev, speedX: normalizedDx * KICK_POWER, speedY: normalizedDy * KICK_POWER, })) } } } // Update CPU AI const updateCpuAi = () => { setCpu((prev) => { // Simple AI: move toward the ball const dx = ball.x - prev.x const dy = ball.y - prev.y const distance = Math.sqrt(dx * dx + dy * dy) let newX = prev.x let newY = prev.y if (distance > 5) { newX += (dx / distance) * (PLAYER_SPEED * 0.75) newY += (dy / distance) * (PLAYER_SPEED * 0.75) } // Keep CPU within bounds newX = Math.max(0, Math.min(GAME_WIDTH - prev.width, newX)) newY = Math.max(0, Math.min(GAME_HEIGHT - prev.height, newY)) return { ...prev, x: newX, y: newY } }) // CPU kick logic if (checkCollision(cpu, ball, 20)) { // CPU has 3% chance to kick per frame when near ball if (Math.random() < 0.03) { kickSound.play() // Kick toward player's goal setBall((prev) => ({ ...prev, speedX: -KICK_POWER, speedY: (Math.random() - 0.5) * KICK_POWER, })) } } } // Update game state const updateGame = (deltaTime: number) => { // Limit deltaTime to prevent physics issues on slow devices const limitedDeltaTime = Math.min(deltaTime, 3) updatePlayerPosition() updateCpuAi() // Update ball physics setBall((prev) => updateBallPhysics(prev, GAME_WIDTH, GAME_HEIGHT, limitedDeltaTime)) // Check for collisions with players if (checkCollision(player, ball)) { setBall((prev) => { const dx = prev.x - player.x const dy = prev.y - player.y const magnitude = Math.sqrt(dx * dx + dy * dy) || 1 // Prevent division by zero const normalizedDx = dx / magnitude const normalizedDy = dy / magnitude return { ...prev, x: prev.x + normalizedDx * 5, // Push ball away from player y: prev.y + normalizedDy * 5, speedX: normalizedDx * BALL_SPEED * 2, speedY: normalizedDy * BALL_SPEED * 2, } }) } if (checkCollision(cpu, ball)) { setBall((prev) => { const dx = prev.x - cpu.x const dy = prev.y - cpu.y const magnitude = Math.sqrt(dx * dx + dy * dy) || 1 // Prevent division by zero const normalizedDx = dx / magnitude const normalizedDy = dy / magnitude return { ...prev, x: prev.x + normalizedDx * 5, // Push ball away from CPU y: prev.y + normalizedDy * 5, speedX: normalizedDx * BALL_SPEED * 2, speedY: normalizedDy * BALL_SPEED * 2, } }) } // Check for goals checkGoals() } // Render game const renderGame = () => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw field drawField(ctx, canvas.width, canvas.height) // Draw goals ctx.fillStyle = "#FFFFFF" ctx.fillRect(leftGoal.x, leftGoal.y, leftGoal.width, leftGoal.height) ctx.fillRect(rightGoal.x, rightGoal.y, rightGoal.width, rightGoal.height) // Draw player drawSprite(ctx, player.x, player.y, player.width, player.height, "#3498db") // Draw CPU drawSprite(ctx, cpu.x, cpu.y, cpu.width, cpu.height, "#e74c3c") // Draw ball drawSprite(ctx, ball.x, ball.y, ball.width, ball.height, "#f1c40f", true) // Draw UI ctx.fillStyle = "#FFFFFF" ctx.font = '16px "Press Start 2P", monospace' ctx.textAlign = "center" // Format time as MM:SS const minutes = Math.floor(timeLeft / 60) const seconds = timeLeft % 60 const timeString = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}` ctx.fillText(timeString, canvas.width / 2, 20) } // Game loop const gameLoop = (timestamp: number) => { if (!isGameActive) return if (!lastTimeRef.current) { lastTimeRef.current = timestamp } const deltaTime = (timestamp - lastTimeRef.current) / 16.67 // normalize to ~60fps lastTimeRef.current = timestamp updateGame(deltaTime) renderGame() animationFrameRef.current = requestAnimationFrame(gameLoop) } // Start and stop game loop useEffect(() => { // Start game loop animationFrameRef.current = requestAnimationFrame(gameLoop) // Clean up return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } setIsGameActive(false) } }, []) // Timer useEffect(() => { const timer = setInterval(() => { setTimeLeft((prev) => { if (prev <= 1) { clearInterval(timer) whistleSound.play() // Schedule the state update for after the current render cycle setTimeout(() => { setIsGameActive(false) onGameEnd() }, 1000) return 0 } return prev - 1 }) }, 1000) return () => clearInterval(timer) }, [onGameEnd, whistleSound]) // Set canvas size useEffect(() => { const canvas = canvasRef.current if (canvas) { canvas.width = GAME_WIDTH canvas.height = GAME_HEIGHT } }, []) return (

) } [V0_FILE]typescriptreact:file="components/start-screen.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" interface StartScreenProps { onStart: () => void } export default function StartScreen({ onStart }: StartScreenProps) { const [blinking, setBlinking] = useState(true) useEffect(() => { const blinkInterval = setInterval(() => { setBlinking((prev) => !prev) }, 500) const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { onStart() } } window.addEventListener("keydown", handleKeyDown) return () => { clearInterval(blinkInterval) window.removeEventListener("keydown", handleKeyDown) } }, [onStart]) const handleTouchStart = () => { onStart() } return (

BRAZILIAN STREET SOCCER

TOQUE PARA COMEÇAR

Controls:

WASD / Arrow Keys to move

SPACE to kick | TAP to kick on mobile

) } [V0_FILE]typescriptreact:file="components/end-screen.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" interface EndScreenProps { playerScore: number cpuScore: number onRestart: () => void } export default function EndScreen({ playerScore, cpuScore, onRestart }: EndScreenProps) { const [blinking, setBlinking] = useState(true) useEffect(() => { const blinkInterval = setInterval(() => { setBlinking((prev) => !prev) }, 500) const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { onRestart() } } window.addEventListener("keydown", handleKeyDown) return () => { clearInterval(blinkInterval) window.removeEventListener("keydown", handleKeyDown) } }, [onRestart]) const handleTouchStart = () => { onRestart() } const result = playerScore > cpuScore ? "VOCÊ VENCEU!" : playerScore < cpuScore ? "CPU VENCEU!" : "EMPATE!" return (

FIM DE JOGO

PLAYER {playerScore}

CPU {cpuScore}

{result}

TOQUE PARA JOGAR NOVAMENTE

) } [V0_FILE]typescriptreact:file="hooks/use-game-loop.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" export default function useGameLoop(callback: (deltaTime: number) => void) { const requestRef = useRef() const previousTimeRef = useRef() const isRunningRef = useRef(true) const animate = (time: number) => { if (!isRunningRef.current) return if (previousTimeRef.current !== undefined) { // Calculate delta time in milliseconds const deltaTimeMs = time - previousTimeRef.current // Convert to a normalized value (1.0 = 16.67ms, which is ~60fps) // Clamp to prevent huge jumps if the tab was inactive const deltaTime = Math.min(deltaTimeMs / 16.67, 3) callback(deltaTime) } previousTimeRef.current = time requestRef.current = requestAnimationFrame(animate) } useEffect(() => { isRunningRef.current = true requestRef.current = requestAnimationFrame(animate) // Handle visibility change to pause/resume the game loop const handleVisibilityChange = () => { if (document.hidden) { // Page is hidden, pause the game loop isRunningRef.current = false if (requestRef.current) { cancelAnimationFrame(requestRef.current) } } else { // Page is visible again, resume the game loop isRunningRef.current = true previousTimeRef.current = performance.now() requestRef.current = requestAnimationFrame(animate) } } document.addEventListener("visibilitychange", handleVisibilityChange) return () => { isRunningRef.current = false if (requestRef.current) { cancelAnimationFrame(requestRef.current) } document.removeEventListener("visibilitychange", handleVisibilityChange) } }, []) } [V0_FILE]typescriptreact:file="hooks/use-input.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" interface TouchInput { active: boolean startX: number startY: number currentX: number currentY: number dx: number dy: number action: boolean } export default function useInput() { const [keys, setKeys] = useState>({}) const [touchInput, setTouchInput] = useState({ active: false, startX: 0, startY: 0, currentX: 0, currentY: 0, dx: 0, dy: 0, action: false, }) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Prevent default behavior for game controls to avoid scrolling if ( ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Space", "KeyW", "KeyA", "KeyS", "KeyD"].includes(e.code) ) { e.preventDefault() } setKeys((prev) => ({ ...prev, [e.code]: true })) } const handleKeyUp = (e: KeyboardEvent) => { setKeys((prev) => ({ ...prev, [e.code]: false })) } // Touch controls for mobile const handleTouchStart = (e: TouchEvent) => { if (e.touches.length === 0) return const touch = e.touches[0] setTouchInput({ active: true, startX: touch.clientX, startY: touch.clientY, currentX: touch.clientX, currentY: touch.clientY, dx: 0, dy: 0, action: false, }) } const handleTouchMove = (e: TouchEvent) => { if (e.touches.length === 0) return e.preventDefault() // Prevent scrolling while playing const touch = e.touches[0] setTouchInput((prev) => { // Calculate normalized direction vector const dx = (touch.clientX - prev.startX) / 30 // More sensitive const dy = (touch.clientY - prev.startY) / 30 // Clamp values between -1 and 1 const clampedDx = Math.max(-1, Math.min(1, dx)) const clampedDy = Math.max(-1, Math.min(1, dy)) return { ...prev, currentX: touch.clientX, currentY: touch.clientY, dx: clampedDx, dy: clampedDy, } }) } const handleTouchEnd = () => { setTouchInput((prev) => ({ ...prev, active: false, dx: 0, dy: 0, })) } // Single tap for action (kick) const handleTap = (e: TouchEvent) => { // Simple tap detection setTouchInput((prev) => ({ ...prev, action: true, })) // Reset action after a short delay setTimeout(() => { setTouchInput((prev) => ({ ...prev, action: false, })) }, 100) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) window.addEventListener("touchstart", handleTouchStart) window.addEventListener("touchmove", handleTouchMove, { passive: false }) window.addEventListener("touchend", handleTouchEnd) window.addEventListener("touchend", handleTap) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) window.removeEventListener("touchstart", handleTouchStart) window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("touchend", handleTouchEnd) window.removeEventListener("touchend", handleTap) } }, []) return { keys, touchInput } } [V0_FILE]typescriptreact:file="hooks/use-sound.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" export function useSound(soundUrl: string) { const audioRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { // Create audio element try { audioRef.current = new Audio() audioRef.current.preload = "auto" // Handle successful loading audioRef.current.addEventListener("canplaythrough", () => { setIsLoaded(true) }) // Handle loading errors audioRef.current.addEventListener("error", () => { console.warn(`Sound file not found: ${soundUrl}`) setIsLoaded(false) }) // Set source after adding event listeners audioRef.current.src = soundUrl } catch (error) { console.warn("Audio creation failed:", error) } return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current.src = "" audioRef.current = null } } }, [soundUrl]) const play = () => { if (audioRef.current && isLoaded) { // Reset audio to beginning if it's already playing audioRef.current.currentTime = 0 audioRef.current.play().catch((e) => { // Handle autoplay restrictions console.log("Audio playback failed:", e) }) } } return { play } } [V0_FILE]typescriptreact:file="lib/render-utils.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" export function drawField(ctx: CanvasRenderingContext2D, width: number, height: number) { // Draw concrete background (Brazilian street soccer style) ctx.fillStyle = "#4a5568" // Concrete color ctx.fillRect(0, 0, width, height) // Draw field lines with Brazilian colors ctx.strokeStyle = "#FFFFFF" ctx.lineWidth = 2 // Center line ctx.beginPath() ctx.moveTo(width / 2, 0) ctx.lineTo(width / 2, height) ctx.stroke() // Center circle ctx.beginPath() ctx.arc(width / 2, height / 2, 30, 0, Math.PI * 2) ctx.stroke() // Draw goal areas ctx.strokeRect(0, height / 2 - 40, 20, 80) ctx.strokeRect(width - 20, height / 2 - 40, 20, 80) // Draw corner arcs ctx.beginPath() ctx.arc(0, 0, 10, 0, Math.PI / 2) ctx.stroke() ctx.beginPath() ctx.arc(width, 0, 10, Math.PI / 2, Math.PI) ctx.stroke() ctx.beginPath() ctx.arc(0, height, 10, 0, -Math.PI / 2) ctx.stroke() ctx.beginPath() ctx.arc(width, height, 10, -Math.PI / 2, -Math.PI) ctx.stroke() // Add Brazilian flair - yellow and green markings // Yellow penalty spots ctx.fillStyle = "#f1c40f" ctx.beginPath() ctx.arc(40, height / 2, 4, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.arc(width - 40, height / 2, 4, 0, Math.PI * 2) ctx.fill() // Green center spot ctx.fillStyle = "#2ecc71" ctx.beginPath() ctx.arc(width / 2, height / 2, 4, 0, Math.PI * 2) ctx.fill() // Add some street texture - cracks in the concrete ctx.strokeStyle = "#2d3748" ctx.lineWidth = 1 // Random cracks for (let i = 0; i < 10; i++) { const startX = Math.random() * width const startY = Math.random() * height ctx.beginPath() ctx.moveTo(startX, startY) ctx.lineTo(startX + (Math.random() - 0.5) * 30, startY + (Math.random() - 0.5) * 30) ctx.stroke() } } export function drawSprite( ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, color: string, isCircle = false, ) { ctx.fillStyle = color if (isCircle) { // Draw ball with Brazilian flag-inspired design ctx.beginPath() ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2) ctx.fill() // Add some details to the ball ctx.fillStyle = "#2ecc71" // Green ctx.beginPath() ctx.arc(x + width / 2, y + height / 2, width / 4, 0, Math.PI * 2) ctx.fill() ctx.fillStyle = "#f1c40f" // Yellow ctx.beginPath() ctx.arc(x + width / 2, y + height / 2, width / 8, 0, Math.PI * 2) ctx.fill() } else { // Draw pixelated character with Brazilian-inspired colors ctx.fillRect(x, y, width, height) // Add details to make it look like a player ctx.fillStyle = "#000000" ctx.fillRect(x + 2, y + 2, 4, 4) // Left eye ctx.fillRect(x + width - 6, y + 2, 4, 4) // Right eye // Add jersey details if (color === "#3498db") { // Player (blue) // Yellow trim for player (Brazilian colors) ctx.fillStyle = "#f1c40f" ctx.fillRect(x, y + height - 4, width, 4) // Bottom trim } else { // CPU (red) // White trim for CPU ctx.fillStyle = "#ffffff" ctx.fillRect(x, y + height - 4, width, 4) // Bottom trim } } } [V0_FILE]typescriptreact:file="lib/physics.ts" isEdit="true" isMerged="true" interface Entity { x: number y: number width: number height: number speedX: number speedY: number } // Fix the ball physics to make it more responsive and prevent getting stuck export function updateBallPhysics(ball: Entity, gameWidth: number, gameHeight: number, deltaTime: number): Entity { // Apply friction - less friction for smoother movement const friction = 0.98 // Update position based on speed let newX = ball.x + ball.speedX * deltaTime let newY = ball.y + ball.speedY * deltaTime let newSpeedX = ball.speedX * friction let newSpeedY = ball.speedY * friction // Bounce off walls if (newX < 0 || newX + ball.width > gameWidth) { // Don't bounce if in goal area (handled by goal detection) const inGoalArea = newY > gameHeight / 2 - 24 && newY < gameHeight / 2 + 24 if (!inGoalArea) { newSpeedX = -newSpeedX * 0.8 newX = newX < 0 ? 0 : gameWidth - ball.width } } if (newY < 0 || newY + ball.height > gameHeight) { newSpeedY = -newSpeedY * 0.8 newY = newY < 0 ? 0 : gameHeight - ball.height } // Stop ball if it's moving very slowly if (Math.abs(newSpeedX) < 0.01) newSpeedX = 0 if (Math.abs(newSpeedY) < 0.01) newSpeedY = 0 // Ensure the ball doesn't get stuck at the edge if (newX <= 0 && newSpeedX <= 0) newSpeedX = 0.1 if (newX >= gameWidth - ball.width && newSpeedX >= 0) newSpeedX = -0.1 if (newY <= 0 && newSpeedY <= 0) newSpeedY = 0.1 if (newY >= gameHeight - ball.height && newSpeedY >= 0) newSpeedY = -0.1 return { ...ball, x: newX, y: newY, speedX: newSpeedX, speedY: newSpeedY, } } // Improve collision detection to be more accurate export function checkCollision(entity1: Entity, entity2: Entity, padding = 0): boolean { // For the ball (which is circular), use circle-rectangle collision const isCircle = entity2.width === 8 && entity2.height === 8 if (isCircle) { // Circle-rectangle collision const circleX = entity2.x + entity2.width / 2 const circleY = entity2.y + entity2.height / 2 const circleRadius = entity2.width / 2 + padding // Find closest point on rectangle to circle const closestX = Math.max(entity1.x, Math.min(circleX, entity1.x + entity1.width)) const closestY = Math.max(entity1.y, Math.min(circleY, entity1.y + entity1.height)) // Calculate distance between closest point and circle center const distanceX = circleX - closestX const distanceY = circleY - closestY const distanceSquared = distanceX * distanceX + distanceY * distanceY return distanceSquared < circleRadius * circleRadius } else { // Rectangle-rectangle collision return ( entity1.x < entity2.x + entity2.width + padding && entity1.x + entity1.width + padding > entity2.x && entity1.y < entity2.y + entity2.height + padding && entity1.y + entity1.height + padding > entity2.y ) } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/brazilian-soccer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" // Game states type GameState = "start" | "playing" | "end" // Game constants const GAME_WIDTH = 320 const GAME_HEIGHT = 240 const PLAYER_SPEED = 3 const BALL_SPEED = 2 const KICK_POWER = 5 const GAME_DURATION = 120 // 2 minutes in seconds // Game entities interface Entity { x: number y: number width: number height: number speedX: number speedY: number } export default function BrazilianSoccer() { // Game canvas const canvasRef = useRef(null) const gameLoopRef = useRef() const lastTimeRef = useRef(0) // Game state const [gameState, setGameState] = useState("start") const [playerScore, setPlayerScore] = useState(0) const [cpuScore, setCpuScore] = useState(0) const [timeLeft, setTimeLeft] = useState(GAME_DURATION) // Game entities - using refs for better performance const playerRef = useRef({ x: GAME_WIDTH / 4, y: GAME_HEIGHT / 2, width: 16, height: 16, speedX: 0, speedY: 0, }) const cpuRef = useRef({ x: (GAME_WIDTH / 4) * 3, y: GAME_HEIGHT / 2, width: 16, height: 16, speedX: 0, speedY: 0, }) const ballRef = useRef({ x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2, width: 8, height: 8, speedX: 0, speedY: 0, }) // Goals const leftGoal = { x: 0, y: GAME_HEIGHT / 2 - 24, width: 8, height: 48 } const rightGoal = { x: GAME_WIDTH - 8, y: GAME_HEIGHT / 2 - 24, width: 8, height: 48 } // Input state const keysRef = useRef>({}) const touchRef = useRef({ active: false, startX: 0, startY: 0, currentX: 0, currentY: 0, dx: 0, dy: 0, action: false, }) // Sound effects const playSound = (type: "kick" | "goal" | "whistle") => { try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.type = "sine" // Different sounds for different actions switch (type) { case "kick": oscillator.frequency.value = 440 // A4 gainNode.gain.value = 0.1 setTimeout(() => oscillator.stop(), 100) break case "goal": oscillator.frequency.value = 523.25 // C5 gainNode.gain.value = 0.2 setTimeout(() => oscillator.stop(), 300) break case "whistle": oscillator.frequency.value = 880 // A5 gainNode.gain.value = 0.15 setTimeout(() => oscillator.stop(), 500) break } oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.start() setTimeout(() => { audioContext.close().catch((e) => console.warn("Error closing audio context:", e)) }, 1000) } catch (error) { console.warn("Web Audio API error:", error) } } // Reset ball to center const resetBall = () => { ballRef.current = { x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2, width: 8, height: 8, speedX: 0, speedY: 0, } } // Start game const startGame = () => { playSound("whistle") setGameState("playing") setPlayerScore(0) setCpuScore(0) setTimeLeft(GAME_DURATION) // Reset positions playerRef.current = { x: GAME_WIDTH / 4, y: GAME_HEIGHT / 2, width: 16, height: 16, speedX: 0, speedY: 0, } cpuRef.current = { x: (GAME_WIDTH / 4) * 3, y: GAME_HEIGHT / 2, width: 16, height: 16, speedX: 0, speedY: 0, } resetBall() // Start game loop if not already running if (!gameLoopRef.current) { lastTimeRef.current = performance.now() gameLoopRef.current = requestAnimationFrame(gameLoop) } } // End game const endGame = () => { playSound("whistle") setGameState("end") } // Check for collision between two entities const checkCollision = (entity1: Entity, entity2: Entity, padding = 0): boolean => { // For the ball (which is circular), use circle-rectangle collision const isCircle = entity2.width === 8 && entity2.height === 8 if (isCircle) { // Circle-rectangle collision const circleX = entity2.x + entity2.width / 2 const circleY = entity2.y + entity2.height / 2 const circleRadius = entity2.width / 2 + padding // Find closest point on rectangle to circle const closestX = Math.max(entity1.x, Math.min(circleX, entity1.x + entity1.width)) const closestY = Math.max(entity1.y, Math.min(circleY, entity1.y + entity1.height)) // Calculate distance between closest point and circle center const distanceX = circleX - closestX const distanceY = circleY - closestY const distanceSquared = distanceX * distanceX + distanceY * distanceY return distanceSquared < circleRadius * circleRadius } else { // Rectangle-rectangle collision return ( entity1.x < entity2.x + entity2.width + padding && entity1.x + entity1.width + padding > entity2.x && entity1.y < entity2.y + entity2.height + padding && entity1.y + entity1.height + padding > entity2.y ) } } // Update ball physics const updateBallPhysics = (deltaTime: number) => { const ball = ballRef.current // Apply friction const friction = 0.98 ball.speedX *= friction ball.speedY *= friction // Update position ball.x += ball.speedX * deltaTime ball.y += ball.speedY * deltaTime // Bounce off walls if (ball.x < 0 || ball.x + ball.width > GAME_WIDTH) { // Don't bounce if in goal area (handled by goal detection) const inGoalArea = ball.y > GAME_HEIGHT / 2 - 24 && ball.y < GAME_HEIGHT / 2 + 24 if (!inGoalArea) { ball.speedX = -ball.speedX * 0.8 ball.x = ball.x < 0 ? 0 : GAME_WIDTH - ball.width } } if (ball.y < 0 || ball.y + ball.height > GAME_HEIGHT) { ball.speedY = -ball.speedY * 0.8 ball.y = ball.y < 0 ? 0 : GAME_HEIGHT - ball.height } // Stop ball if it's moving very slowly if (Math.abs(ball.speedX) < 0.01) ball.speedX = 0 if (Math.abs(ball.speedY) < 0.01) ball.speedY = 0 // Ensure the ball doesn't get stuck at the edge if (ball.x <= 0 && ball.speedX <= 0) ball.speedX = 0.1 if (ball.x >= GAME_WIDTH - ball.width && ball.speedX >= 0) ball.speedX = -0.1 if (ball.y <= 0 && ball.speedY <= 0) ball.speedY = 0.1 if (ball.y >= GAME_HEIGHT - ball.height && ball.speedY >= 0) ball.speedY = -0.1 } // Check for goals const checkGoals = () => { const ball = ballRef.current // Ball in left goal (CPU scores) if (ball.x < leftGoal.x + leftGoal.width && ball.y > leftGoal.y && ball.y < leftGoal.y + leftGoal.height) { playSound("goal") setCpuScore((prev) => prev + 1) resetBall() } // Ball in right goal (Player scores) if (ball.x + ball.width > rightGoal.x && ball.y > rightGoal.y && ball.y < rightGoal.y + rightGoal.height) { playSound("goal") setPlayerScore((prev) => prev + 1) resetBall() } } // Update player position based on input const updatePlayerPosition = (deltaTime: number) => { const player = playerRef.current const keys = keysRef.current const touch = touchRef.current let dx = 0 let dy = 0 // Keyboard controls if (keys.ArrowUp || keys.KeyW) dy -= PLAYER_SPEED if (keys.ArrowDown || keys.KeyS) dy += PLAYER_SPEED if (keys.ArrowLeft || keys.KeyA) dx -= PLAYER_SPEED if (keys.ArrowRight || keys.KeyD) dx += PLAYER_SPEED // Touch controls if (touch.active) { dx = touch.dx * PLAYER_SPEED dy = touch.dy * PLAYER_SPEED } // Update player position player.x = Math.max(0, Math.min(GAME_WIDTH - player.width, player.x + dx * deltaTime)) player.y = Math.max(0, Math.min(GAME_HEIGHT - player.height, player.y + dy * deltaTime)) // Handle kick if (keys.Space || touch.action) { // Check if player is close to the ball if (checkCollision(player, ballRef.current, 20)) { playSound("kick") // Calculate kick direction from player to ball const dx = ballRef.current.x - player.x const dy = ballRef.current.y - player.y const magnitude = Math.sqrt(dx * dx + dy * dy) || 1 const normalizedDx = dx / magnitude const normalizedDy = dy / magnitude ballRef.current.speedX = normalizedDx * KICK_POWER ballRef.current.speedY = normalizedDy * KICK_POWER } } } // Update CPU AI const updateCpuAi = (deltaTime: number) => { const cpu = cpuRef.current const ball = ballRef.current // Simple AI: move toward the ball const dx = ball.x - cpu.x const dy = ball.y - cpu.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance > 5) { const moveX = (dx / distance) * PLAYER_SPEED * 0.75 * deltaTime const moveY = (dy / distance) * PLAYER_SPEED * 0.75 * deltaTime // Keep CPU within bounds cpu.x = Math.max(0, Math.min(GAME_WIDTH - cpu.width, cpu.x + moveX)) cpu.y = Math.max(0, Math.min(GAME_HEIGHT - cpu.height, cpu.y + moveY)) } // CPU kick logic if (checkCollision(cpu, ball, 20)) { // CPU has 1% chance to kick per frame when near ball if (Math.random() < 0.01) { playSound("kick") // Kick toward player's goal ball.speedX = -KICK_POWER ball.speedY = (Math.random() - 0.5) * KICK_POWER } } } // Check for collisions between players and ball const handleCollisions = () => { const player = playerRef.current const cpu = cpuRef.current const ball = ballRef.current // Player-ball collision if (checkCollision(player, ball)) { const dx = ball.x - player.x const dy = ball.y - player.y const magnitude = Math.sqrt(dx * dx + dy * dy) || 1 const normalizedDx = dx / magnitude const normalizedDy = dy / magnitude // Push ball away from player ball.x += normalizedDx * 5 ball.y += normalizedDy * 5 ball.speedX = normalizedDx * BALL_SPEED * 2 ball.speedY = normalizedDy * BALL_SPEED * 2 } // CPU-ball collision if (checkCollision(cpu, ball)) { const dx = ball.x - cpu.x const dy = ball.y - cpu.y const magnitude = Math.sqrt(dx * dx + dy * dy) || 1 const normalizedDx = dx / magnitude const normalizedDy = dy / magnitude // Push ball away from CPU ball.x += normalizedDx * 5 ball.y += normalizedDy * 5 ball.speedX = normalizedDx * BALL_SPEED * 2 ball.speedY = normalizedDy * BALL_SPEED * 2 } } // Draw field const drawField = (ctx: CanvasRenderingContext2D) => { // Draw concrete background (Brazilian street soccer style) ctx.fillStyle = "#4a5568" // Concrete color ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Draw field lines with Brazilian colors ctx.strokeStyle = "#FFFFFF" ctx.lineWidth = 2 // Center line ctx.beginPath() ctx.moveTo(GAME_WIDTH / 2, 0) ctx.lineTo(GAME_WIDTH / 2, GAME_HEIGHT) ctx.stroke() // Center circle ctx.beginPath() ctx.arc(GAME_WIDTH / 2, GAME_HEIGHT / 2, 30, 0, Math.PI * 2) ctx.stroke() // Draw goal areas ctx.strokeRect(0, GAME_HEIGHT / 2 - 40, 20, 80) ctx.strokeRect(GAME_WIDTH - 20, GAME_HEIGHT / 2 - 40, 20, 80) // Draw goals ctx.fillStyle = "#FFFFFF" ctx.fillRect(leftGoal.x, leftGoal.y, leftGoal.width, leftGoal.height) ctx.fillRect(rightGoal.x, rightGoal.y, rightGoal.width, rightGoal.height) // Add Brazilian flair - yellow and green markings // Yellow penalty spots ctx.fillStyle = "#f1c40f" ctx.beginPath() ctx.arc(40, GAME_HEIGHT / 2, 4, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.arc(GAME_WIDTH - 40, GAME_HEIGHT / 2, 4, 0, Math.PI * 2) ctx.fill() // Green center spot ctx.fillStyle = "#2ecc71" ctx.beginPath() ctx.arc(GAME_WIDTH / 2, GAME_HEIGHT / 2, 4, 0, Math.PI * 2) ctx.fill() } // Draw sprite (player or ball) const drawSprite = (ctx: CanvasRenderingContext2D, entity: Entity, color: string, isCircle = false) => { ctx.fillStyle = color if (isCircle) { // Draw ball with Brazilian flag-inspired design ctx.beginPath() ctx.arc(entity.x + entity.width / 2, entity.y + entity.height / 2, entity.width / 2, 0, Math.PI * 2) ctx.fill() // Add some details to the ball ctx.fillStyle = "#2ecc71" // Green ctx.beginPath() ctx.arc(entity.x + entity.width / 2, entity.y + entity.height / 2, entity.width / 4, 0, Math.PI * 2) ctx.fill() ctx.fillStyle = "#f1c40f" // Yellow ctx.beginPath() ctx.arc(entity.x + entity.width / 2, entity.y + entity.height / 2, entity.width / 8, 0, Math.PI * 2) ctx.fill() } else { // Draw pixelated character ctx.fillRect(entity.x, entity.y, entity.width, entity.height) // Add details to make it look like a player ctx.fillStyle = "#000000" ctx.fillRect(entity.x + 2, entity.y + 2, 4, 4) // Left eye ctx.fillRect(entity.x + entity.width - 6, entity.y + 2, 4, 4) // Right eye // Add jersey details if (color === "#3498db") { // Player (blue) // Yellow trim for player (Brazilian colors) ctx.fillStyle = "#f1c40f" ctx.fillRect(entity.x, entity.y + entity.height - 4, entity.width, 4) // Bottom trim } else { // CPU (red) // White trim for CPU ctx.fillStyle = "#ffffff" ctx.fillRect(entity.x, entity.y + entity.height - 4, entity.width, 4) // Bottom trim } } } // Draw UI const drawUI = (ctx: CanvasRenderingContext2D) => { ctx.fillStyle = "#FFFFFF" ctx.font = "16px monospace" ctx.textAlign = "center" // Format time as MM:SS const minutes = Math.floor(timeLeft / 60) const seconds = timeLeft % 60 const timeString = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}` ctx.fillText(timeString, GAME_WIDTH / 2, 20) // Draw score ctx.textAlign = "left" ctx.fillText(`Player: ${playerScore}`, 10, 20) ctx.textAlign = "right" ctx.fillText(`CPU: ${cpuScore}`, GAME_WIDTH - 10, 20) } // Draw start screen const drawStartScreen = (ctx: CanvasRenderingContext2D) => { // Background ctx.fillStyle = "#2ecc71" // Green background ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Brazilian flag-inspired design ctx.fillStyle = "#f1c40f" // Yellow ctx.beginPath() ctx.moveTo(GAME_WIDTH / 2, GAME_HEIGHT / 2 - 40) ctx.lineTo(GAME_WIDTH / 2 + 80, GAME_HEIGHT / 2) ctx.lineTo(GAME_WIDTH / 2, GAME_HEIGHT / 2 + 40) ctx.lineTo(GAME_WIDTH / 2 - 80, GAME_HEIGHT / 2) ctx.closePath() ctx.fill() // Blue circle ctx.fillStyle = "#3498db" ctx.beginPath() ctx.arc(GAME_WIDTH / 2, GAME_HEIGHT / 2, 25, 0, Math.PI * 2) ctx.fill() // Title ctx.fillStyle = "#FFFFFF" ctx.font = "bold 16px monospace" ctx.textAlign = "center" ctx.fillText("BRAZILIAN STREET SOCCER", GAME_WIDTH / 2, 50) // Instructions ctx.font = "12px monospace" ctx.fillText("PRESS SPACE OR CLICK TO START", GAME_WIDTH / 2, GAME_HEIGHT - 50) // Controls ctx.font = "10px monospace" ctx.fillText("ARROWS/WASD: MOVE, SPACE: KICK", GAME_WIDTH / 2, GAME_HEIGHT - 30) } // Draw end screen const drawEndScreen = (ctx: CanvasRenderingContext2D) => { // Background ctx.fillStyle = "#2ecc71" // Green background ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Brazilian flag-inspired design ctx.fillStyle = "#f1c40f" // Yellow ctx.beginPath() ctx.moveTo(GAME_WIDTH / 2, GAME_HEIGHT / 2 - 40) ctx.lineTo(GAME_WIDTH / 2 + 80, GAME_HEIGHT / 2) ctx.lineTo(GAME_WIDTH / 2, GAME_HEIGHT / 2 + 40) ctx.lineTo(GAME_WIDTH / 2 - 80, GAME_HEIGHT / 2) ctx.closePath() ctx.fill() // Title ctx.fillStyle = "#FFFFFF" ctx.font = "bold 16px monospace" ctx.textAlign = "center" ctx.fillText("GAME OVER", GAME_WIDTH / 2, 50) // Score ctx.fillText(`PLAYER: ${playerScore} - CPU: ${cpuScore}`, GAME_WIDTH / 2, GAME_HEIGHT / 2 - 10) // Result const result = playerScore > cpuScore ? "YOU WIN!" : playerScore < cpuScore ? "CPU WINS!" : "DRAW!" ctx.font = "bold 14px monospace" ctx.fillText(result, GAME_WIDTH / 2, GAME_HEIGHT / 2 + 20) // Instructions ctx.font = "12px monospace" ctx.fillText("PRESS SPACE OR CLICK TO RESTART", GAME_WIDTH / 2, GAME_HEIGHT - 30) } // Main render function const render = () => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Render based on game state if (gameState === "start") { drawStartScreen(ctx) } else if (gameState === "playing") { drawField(ctx) drawSprite(ctx, playerRef.current, "#3498db") drawSprite(ctx, cpuRef.current, "#e74c3c") drawSprite(ctx, ballRef.current, "#f1c40f", true) drawUI(ctx) } else if (gameState === "end") { drawEndScreen(ctx) } } // Game loop const gameLoop = (timestamp: number) => { if (gameState !== "playing") { render() gameLoopRef.current = requestAnimationFrame(gameLoop) return } // Calculate delta time const deltaTime = (timestamp - lastTimeRef.current) / 16.67 // normalize to ~60fps lastTimeRef.current = timestamp // Update game state updatePlayerPosition(deltaTime) updateCpuAi(deltaTime) updateBallPhysics(deltaTime) handleCollisions() checkGoals() // Render render() // Continue loop gameLoopRef.current = requestAnimationFrame(gameLoop) } // Set up input handlers useEffect(() => { // Keyboard input const handleKeyDown = (e: KeyboardEvent) => { // Prevent default behavior for game controls to avoid scrolling if ( ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Space", "KeyW", "KeyA", "KeyS", "KeyD"].includes(e.code) ) { e.preventDefault() } keysRef.current[e.code] = true // Start game with space if (e.code === "Space" && (gameState === "start" || gameState === "end")) { startGame() } } const handleKeyUp = (e: KeyboardEvent) => { keysRef.current[e.code] = false } // Touch input const handleTouchStart = (e: TouchEvent) => { if (gameState === "start" || gameState === "end") { startGame() return } if (e.touches.length === 0) return const touch = e.touches[0] touchRef.current = { ...touchRef.current, active: true, startX: touch.clientX, startY: touch.clientY, currentX: touch.clientX, currentY: touch.clientY, } } const handleTouchMove = (e: TouchEvent) => { if (e.touches.length === 0 || gameState !== "playing") return e.preventDefault() // Prevent scrolling while playing const touch = e.touches[0] // Calculate normalized direction vector const dx = (touch.clientX - touchRef.current.startX) / 30 const dy = (touch.clientY - touchRef.current.startY) / 30 // Clamp values between -1 and 1 const clampedDx = Math.max(-1, Math.min(1, dx)) const clampedDy = Math.max(-1, Math.min(1, dy)) touchRef.current = { ...touchRef.current, currentX: touch.clientX, currentY: touch.clientY, dx: clampedDx, dy: clampedDy, } } const handleTouchEnd = () => { touchRef.current = { ...touchRef.current, active: false, dx: 0, dy: 0, } } // Tap for kick const handleTap = () => { if (gameState !== "playing") return touchRef.current = { ...touchRef.current, action: true, } // Reset action after a short delay setTimeout(() => { touchRef.current = { ...touchRef.current, action: false, } }, 100) } // Add event listeners window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) window.addEventListener("touchstart", handleTouchStart) window.addEventListener("touchmove", handleTouchMove, { passive: false }) window.addEventListener("touchend", handleTouchEnd) window.addEventListener("touchend", handleTap) window.addEventListener("click", handleTap) // Clean up return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) window.removeEventListener("touchstart", handleTouchStart) window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("touchend", handleTouchEnd) window.removeEventListener("touchend", handleTap) window.removeEventListener("click", handleTap) if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, [gameState]) // Timer effect useEffect(() => { if (gameState !== "playing") return const timer = setInterval(() => { setTimeLeft((prev) => { if (prev <= 1) { clearInterval(timer) endGame() return 0 } return prev - 1 }) }, 1000) return () => clearInterval(timer) }, [gameState]) // Initialize canvas useEffect(() => { const canvas = canvasRef.current if (canvas) { canvas.width = GAME_WIDTH canvas.height = GAME_HEIGHT // Start initial render const ctx = canvas.getContext("2d") if (ctx) { drawStartScreen(ctx) } } // Start game loop lastTimeRef.current = performance.now() gameLoopRef.current = requestAnimationFrame(gameLoop) return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, []) return (

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 50%; --primary-foreground: 0 0% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Pixel art rendering */ .pixelated { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: crisp-edges; backface-visibility: hidden; transform: translateZ(0); } /* Ensure proper scaling on all devices */ canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; margin: 0 auto; } /* Prevent scrolling on mobile when playing */ html, body { overscroll-behavior: none; touch-action: manipulation; margin: 0; padding: 0; height: 100%; width: 100%; } /* Animation for pulsing text */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Add confetti animation */ @keyframes fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } /* Add text shadow */ .text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } /* Add responsive container styles */ .game-container { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; } /* Responsive text sizes */ @media (max-width: 640px) { .text-shadow-sm { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); } .game-text-sm { font-size: 0.75rem; } .game-text-md { font-size: 0.875rem; } .game-text-lg { font-size: 1rem; } } /* Improved mobile touch handling */ @media (max-width: 768px) { html, body { touch-action: none; overflow: hidden; position: fixed; width: 100%; height: 100%; } .touch-control { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } } /* Optimize for high-DPI displays */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .pixelated { image-rendering: auto; } } /* Prevent iOS Safari zoom on double tap */ * { touch-action: manipulation; } /* Add visible touch controls for mobile */ .touch-button { position: absolute; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; user-select: none; -webkit-user-select: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 10; } .touch-button:active { background-color: rgba(255, 255, 255, 0.3); transform: scale(1.1); } /* Orientation warning */ .orientation-warning { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; padding: 2rem; } @media (max-height: 450px) and (orientation: landscape) { .orientation-warning { display: flex; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" // Replace the main container with a more responsive layout export default function Home() { const [gameStarted, setGameStarted] = useState(false) return (

Brazilian Street Soccer

Controls:

Desktop: WASD/Arrows to move, Space to kick | Mobile: Drag to move, Tap to kick

) } // Game constants const GAME_WIDTH = 320 const GAME_HEIGHT = 240 const PLAYER_SPEED = 3.5 // Increased player speed const BALL_SPEED = 2.5 // Increased ball speed const KICK_POWER = 6 // Increased kick power const GAME_DURATION = 120 // 2 minutes in seconds const GOAL_WIDTH = 12 // Wider goals (was 8) const GOAL_HEIGHT = 60 // Taller goals (was 48) // Add these new constants for touch controls const TOUCH_CONTROLS_ENABLED = true // Brazilian Soccer Game Component function BrazilianSoccerGame({ gameStarted, setGameStarted, }: { gameStarted: boolean setGameStarted: (started: boolean) => void }) { const canvasRef = useRef(null) const requestRef = useRef() // Game state const [score, setScore] = useState({ player: 0, cpu: 0 }) const [timeLeft, setTimeLeft] = useState(GAME_DURATION) const [gameOver, setGameOver] = useState(false) // Game objects using refs to avoid re-renders const playerRef = useRef({ x: 80, y: 120, width: 16, height: 16 }) const cpuRef = useRef({ x: 240, y: 120, width: 16, height: 16 }) const ballRef = useRef({ x: 160, y: 120, width: 8, height: 8, speedX: 0, speedY: 0 }) // Input state const keysRef = useRef>({}) const touchRef = useRef({ active: false, startX: 0, startY: 0, currentX: 0, currentY: 0, dx: 0, dy: 0, action: false, }) // Add state for device detection const [isMobile, setIsMobile] = useState(false) const [showTouchControls, setShowTouchControls] = useState(false) // Add refs for touch controls const touchJoystickRef = useRef(null) const kickButtonRef = useRef(null) // Detect mobile devices useEffect(() => { const checkMobile = () => { const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768 setIsMobile(isMobileDevice) setShowTouchControls(isMobileDevice && TOUCH_CONTROLS_ENABLED) } checkMobile() window.addEventListener("resize", checkMobile) return () => { window.removeEventListener("resize", checkMobile) } }, []) // Sound effect function const playSound = (type: "kick" | "goal" | "whistle") => { try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.type = "sine" // Different sounds for different actions switch (type) { case "kick": oscillator.frequency.value = 440 // A4 gainNode.gain.value = 0.1 setTimeout(() => oscillator.stop(), 100) break case "goal": oscillator.frequency.value = 523.25 // C5 gainNode.gain.value = 0.2 setTimeout(() => oscillator.stop(), 300) break case "whistle": oscillator.frequency.value = 880 // A5 gainNode.gain.value = 0.15 setTimeout(() => oscillator.stop(), 500) break } oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.start() setTimeout(() => { audioContext.close().catch((e) => console.warn("Error closing audio context:", e)) }, 1000) } catch (error) { console.warn("Web Audio API error:", error) } } // Start the game const startGame = () => { playSound("whistle") setGameStarted(true) setGameOver(false) setScore({ player: 0, cpu: 0 }) setTimeLeft(GAME_DURATION) // Reset positions playerRef.current = { x: 80, y: 120, width: 16, height: 16 } cpuRef.current = { x: 240, y: 120, width: 16, height: 16 } ballRef.current = { x: 160, y: 120, width: 8, height: 8, speedX: 0, speedY: 0 } } // End the game const endGame = () => { playSound("whistle") setGameOver(true) } // Handle keyboard input useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Prevent default behavior for game controls to avoid scrolling if ( ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Space", "KeyW", "KeyA", "KeyS", "KeyD"].includes(e.code) ) { e.preventDefault() } // Start game with space if (e.code === "Space" && (!gameStarted || gameOver)) { startGame() return } keysRef.current[e.code] = true } const handleKeyUp = (e: KeyboardEvent) => { keysRef.current[e.code] = false } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [gameStarted, gameOver]) // Handle touch input useEffect(() => { const handleTouchStart = (e: TouchEvent) => { if (!gameStarted || gameOver) { startGame() return } if (e.touches.length === 0) return const touch = e.touches[0] touchRef.current = { ...touchRef.current, active: true, startX: touch.clientX, startY: touch.clientY, currentX: touch.clientX, currentY: touch.clientY, } } const handleTouchMove = (e: TouchEvent) => { if (e.touches.length === 0 || !gameStarted || gameOver) return e.preventDefault() // Prevent scrolling while playing const touch = e.touches[0] // Calculate normalized direction vector const dx = (touch.clientX - touchRef.current.startX) / 30 const dy = (touch.clientY - touchRef.current.startY) / 30 // Clamp values between -1 and 1 const clampedDx = Math.max(-1, Math.min(1, dx)) const clampedDy = Math.max(-1, Math.min(1, dy)) touchRef.current = { ...touchRef.current, currentX: touch.clientX, currentY: touch.clientY, dx: clampedDx, dy: clampedDy, } } const handleTouchEnd = () => { touchRef.current = { ...touchRef.current, active: false, dx: 0, dy: 0, } // Tap to kick touchRef.current.action = true setTimeout(() => { touchRef.current.action = false }, 100) } window.addEventListener("touchstart", handleTouchStart) window.addEventListener("touchmove", handleTouchMove, { passive: false }) window.addEventListener("touchend", handleTouchEnd) return () => { window.removeEventListener("touchstart", handleTouchStart) window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("touchend", handleTouchEnd) } }, [gameStarted, gameOver]) // Handle click to start useEffect(() => { const handleClick = () => { if (!gameStarted || gameOver) { startGame() } } window.addEventListener("click", handleClick) return () => { window.removeEventListener("click", handleClick) } }, [gameStarted, gameOver]) // Timer effect useEffect(() => { if (!gameStarted || gameOver) return const timer = setInterval(() => { setTimeLeft((prev) => { if (prev <= 1) { clearInterval(timer) endGame() return 0 } return prev - 1 }) }, 1000) return () => clearInterval(timer) }, [gameStarted, gameOver]) // Add a resize handler to ensure pixel-perfect rendering on all devices useEffect(() => { const handleResize = () => { const canvas = canvasRef.current if (!canvas) return // Get the container dimensions const container = canvas.parentElement if (!container) return const containerWidth = container.clientWidth const containerHeight = container.clientHeight // Calculate the maximum size while maintaining aspect ratio const aspectRatio = GAME_WIDTH / GAME_HEIGHT let width = containerWidth let height = width / aspectRatio if (height > containerHeight) { height = containerHeight width = height * aspectRatio } // Set canvas display size (CSS pixels) canvas.style.width = `${width}px` canvas.style.height = `${height}px` // Set canvas render size (actual pixels) canvas.width = GAME_WIDTH canvas.height = GAME_HEIGHT } // Initial resize handleResize() // Add event listener window.addEventListener("resize", handleResize) // Clean up return () => { window.removeEventListener("resize", handleResize) } }, [gameStarted, gameOver]) // Improved resize handler for better responsiveness useEffect(() => { const handleResize = () => { const canvas = canvasRef.current if (!canvas) return // Get the container dimensions const container = canvas.parentElement if (!container) return const containerWidth = container.clientWidth const containerHeight = container.clientHeight // Calculate the maximum size while maintaining aspect ratio const aspectRatio = GAME_WIDTH / GAME_HEIGHT let width = containerWidth let height = width / aspectRatio if (height > containerHeight) { height = containerHeight width = height * aspectRatio } // Set canvas display size (CSS pixels) canvas.style.width = `${width}px` canvas.style.height = `${height}px` // Set canvas render size (actual pixels) canvas.width = GAME_WIDTH canvas.height = GAME_HEIGHT // Update touch controls position if they exist if (showTouchControls) { if (touchJoystickRef.current) { touchJoystickRef.current.style.left = `${width * 0.15}px` touchJoystickRef.current.style.bottom = `${height * 0.15}px` } if (kickButtonRef.current) { kickButtonRef.current.style.right = `${width * 0.15}px` kickButtonRef.current.style.bottom = `${height * 0.15}px` } } } // Initial resize handleResize() // Add event listener window.addEventListener("resize", handleResize) // Clean up return () => { window.removeEventListener("resize", handleResize) } }, [gameStarted, gameOver, showTouchControls]) // Enhanced touch input handling for better mobile experience useEffect(() => { if (!isMobile) return let joystickActive = false let kickActive = false let joystickStartX = 0 let joystickStartY = 0 const handleJoystickStart = (e: TouchEvent) => { if (!gameStarted || gameOver) { startGame() return } joystickActive = true const touch = e.touches[0] joystickStartX = touch.clientX joystickStartY = touch.clientY touchRef.current = { ...touchRef.current, active: true, startX: touch.clientX, startY: touch.clientY, currentX: touch.clientX, currentY: touch.clientY, dx: 0, dy: 0, } e.preventDefault() } const handleJoystickMove = (e: TouchEvent) => { if (!joystickActive || !gameStarted || gameOver) return const touch = e.touches[0] // Calculate normalized direction vector const dx = (touch.clientX - joystickStartX) / 50 // More sensitive const dy = (touch.clientY - joystickStartY) / 50 // Clamp values between -1 and 1 const clampedDx = Math.max(-1, Math.min(1, dx)) const clampedDy = Math.max(-1, Math.min(1, dy)) touchRef.current = { ...touchRef.current, currentX: touch.clientX, currentY: touch.clientY, dx: clampedDx, dy: clampedDy, } e.preventDefault() } const handleJoystickEnd = () => { joystickActive = false touchRef.current = { ...touchRef.current, active: false, dx: 0, dy: 0, } } const handleKickStart = (e: TouchEvent) => { if (!gameStarted || gameOver) { startGame() return } kickActive = true touchRef.current.action = true e.preventDefault() } const handleKickEnd = () => { kickActive = false setTimeout(() => { touchRef.current.action = false }, 100) } // Add touch controls event listeners if they exist if (touchJoystickRef.current) { touchJoystickRef.current.addEventListener("touchstart", handleJoystickStart) touchJoystickRef.current.addEventListener("touchmove", handleJoystickMove, { passive: false }) touchJoystickRef.current.addEventListener("touchend", handleJoystickEnd) } if (kickButtonRef.current) { kickButtonRef.current.addEventListener("touchstart", handleKickStart) kickButtonRef.current.addEventListener("touchend", handleKickEnd) } // Clean up return () => { if (touchJoystickRef.current) { touchJoystickRef.current.removeEventListener("touchstart", handleJoystickStart) touchJoystickRef.current.removeEventListener("touchmove", handleJoystickMove) touchJoystickRef.current.removeEventListener("touchend", handleJoystickEnd) } if (kickButtonRef.current) { kickButtonRef.current.removeEventListener("touchstart", handleKickStart) kickButtonRef.current.removeEventListener("touchend", handleKickEnd) } } }, [isMobile, gameStarted, gameOver, touchJoystickRef.current, kickButtonRef.current]) // Game loop useEffect(() => { if (!gameStarted || gameOver) return const canvas = canvasRef.current if (!canvas) return // Set canvas size canvas.width = GAME_WIDTH canvas.height = GAME_HEIGHT const ctx = canvas.getContext("2d") if (!ctx) return // Track frame rate for consistent gameplay across devices let lastFrameTime = 0 const targetFPS = 60 const frameInterval = 1000 / targetFPS // Create grass pattern with device-specific optimizations const createGrassPattern = () => { // For lower-end devices, use a simpler pattern if (isMobile) { const patternCanvas = document.createElement("canvas") patternCanvas.width = 10 patternCanvas.height = 10 const patternCtx = patternCanvas.getContext("2d") if (patternCtx) { // Simpler pattern for mobile patternCtx.fillStyle = "#2ecc71" patternCtx.fillRect(0, 0, 10, 10) // Just a few darker patches patternCtx.fillStyle = "#27ae60" patternCtx.fillRect(0, 0, 5, 5) patternCtx.fillRect(5, 5, 5, 5) } return ctx.createPattern(patternCanvas, "repeat") } else { // Full quality pattern for desktop const patternCanvas = document.createElement("canvas") patternCanvas.width = 20 patternCanvas.height = 20 const patternCtx = patternCanvas.getContext("2d") if (patternCtx) { // Base green patternCtx.fillStyle = "#2ecc71" patternCtx.fillRect(0, 0, 20, 20) // Darker green patches patternCtx.fillStyle = "#27ae60" // Create a more natural pattern for (let i = 0; i < 8; i++) { const x = Math.floor(Math.random() * 20) const y = Math.floor(Math.random() * 20) const size = 3 + Math.floor(Math.random() * 4) patternCtx.fillRect(x, y, size, size) } // Add some lighter patches patternCtx.fillStyle = "#3ae681" for (let i = 0; i < 5; i++) { const x = Math.floor(Math.random() * 20) const y = Math.floor(Math.random() * 20) const size = 2 + Math.floor(Math.random() * 3) patternCtx.fillRect(x, y, size, size) } // Add field lines pattern if (Math.random() > 0.7) { patternCtx.fillStyle = "#25a55a" patternCtx.fillRect(0, 10, 20, 1) } } return ctx.createPattern(patternCanvas, "repeat") } } const grassPattern = createGrassPattern() // Game loop function with frame rate control const gameLoop = (timestamp: number) => { // Calculate delta time for consistent gameplay speed const deltaTime = timestamp - lastFrameTime // Skip frames if needed to maintain consistent gameplay if (deltaTime < frameInterval) { requestRef.current = requestAnimationFrame(gameLoop) return } // Calculate a multiplier to ensure consistent speed regardless of frame rate const speedMultiplier = deltaTime / frameInterval // Update last frame time lastFrameTime = timestamp - (deltaTime % frameInterval) // Clear canvas ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Draw field with grass pattern if (grassPattern) { ctx.fillStyle = grassPattern } else { ctx.fillStyle = "#2ecc71" // Fallback green } ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Draw field markings - simplified for mobile if needed ctx.strokeStyle = "rgba(255, 255, 255, 0.8)" ctx.lineWidth = 2 // Center line ctx.beginPath() ctx.moveTo(GAME_WIDTH / 2, 0) ctx.lineTo(GAME_WIDTH / 2, GAME_HEIGHT) ctx.stroke() // Center circle ctx.beginPath() ctx.arc(GAME_WIDTH / 2, GAME_HEIGHT / 2, 30, 0, Math.PI * 2) ctx.stroke() // Center spot ctx.fillStyle = "rgba(255, 255, 255, 0.8)" ctx.beginPath() ctx.arc(GAME_WIDTH / 2, GAME_HEIGHT / 2, 3, 0, Math.PI * 2) ctx.fill() // Only draw detailed field markings on desktop if (!isMobile) { // Penalty areas ctx.strokeRect(0, GAME_HEIGHT / 2 - 50, 40, 100) ctx.strokeRect(GAME_WIDTH - 40, GAME_HEIGHT / 2 - 50, 40, 100) // Penalty spots ctx.beginPath() ctx.arc(30, GAME_HEIGHT / 2, 3, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.arc(GAME_WIDTH - 30, GAME_HEIGHT / 2, 3, 0, Math.PI * 2) ctx.fill() // Corner arcs ctx.beginPath() ctx.arc(0, 0, 10, 0, Math.PI / 2) ctx.stroke() ctx.beginPath() ctx.arc(GAME_WIDTH, 0, 10, Math.PI / 2, Math.PI) ctx.stroke() ctx.beginPath() ctx.arc(0, GAME_HEIGHT, 10, 0, -Math.PI / 2) ctx.stroke() ctx.beginPath() ctx.arc(GAME_WIDTH, GAME_HEIGHT, 10, -Math.PI / 2, -Math.PI) ctx.stroke() } // Draw goal areas ctx.strokeRect(0, GAME_HEIGHT / 2 - 40, 20, 80) ctx.strokeRect(GAME_WIDTH - 20, GAME_HEIGHT / 2 - 40, 20, 80) // Draw goals - make them larger and more visible ctx.fillStyle = "#FFFFFF" ctx.strokeStyle = "#000000" ctx.lineWidth = 1 // Left goal ctx.fillRect(0, GAME_HEIGHT / 2 - GOAL_HEIGHT / 2, GOAL_WIDTH, GOAL_HEIGHT) ctx.strokeRect(0, GAME_HEIGHT / 2 - GOAL_HEIGHT / 2, GOAL_WIDTH, GOAL_HEIGHT) // Right goal ctx.fillRect(GAME_WIDTH - GOAL_WIDTH, GAME_HEIGHT / 2 - GOAL_HEIGHT / 2, GOAL_WIDTH, GOAL_HEIGHT) ctx.strokeRect(GAME_WIDTH - GOAL_WIDTH, GAME_HEIGHT / 2 - GOAL_HEIGHT / 2, GOAL_WIDTH, GOAL_HEIGHT) // Add goal nets (simple pattern) - simplified for mobile ctx.fillStyle = "#EEEEEE" const netSpacing = isMobile ? 8 : 6 for (let y = GAME_HEIGHT / 2 - GOAL_HEIGHT / 2; y < GAME_HEIGHT / 2 + GOAL_HEIGHT / 2; y += netSpacing) { for (let x = 0; x < GOAL_WIDTH; x += netSpacing) { ctx.fillRect(x, y, 2, 2) // Left goal net ctx.fillRect(GAME_WIDTH - GOAL_WIDTH + x, y, 2, 2) // Right goal net } } // Update player position based on input const player = playerRef.current const keys = keysRef.current const touch = touchRef.current let dx = 0 let dy = 0 // Keyboard controls if (keys.ArrowUp || keys.KeyW) dy -= PLAYER_SPEED * speedMultiplier if (keys.ArrowDown || keys.KeyS) dy += PLAYER_SPEED * speedMultiplier if (keys.ArrowLeft || keys.KeyA) dx -= PLAYER_SPEED * speedMultiplier if (keys.ArrowRight || keys.KeyD) dx += PLAYER_SPEED * speedMultiplier // Touch controls if (touch.active) { dx = touch.dx * PLAYER_SPEED * speedMultiplier dy = touch.dy * PLAYER_SPEED * speedMultiplier } // Update player position player.x = Math.max(0, Math.min(GAME_WIDTH - player.width, player.x + dx)) player.y = Math.max(0, Math.min(GAME_HEIGHT - player.height, player.y + dy)) // Simple CPU AI - follow the ball but not too aggressively const cpu = cpuRef.current const ball = ballRef.current const cpuToBallX = ball.x - cpu.x const cpuToBallY = ball.y - cpu.y const cpuToBallDist = Math.sqrt(cpuToBallX * cpuToBallX + cpuToBallY * cpuToBallY) if (cpuToBallDist > 5) { // Make CPU slower and less aggressive const cpuSpeed = PLAYER_SPEED * 0.6 // Reduced from 0.75 // Only move aggressively if ball is in CPU's half const aggressionFactor = ball.x > GAME_WIDTH / 2 ? 1 : 0.5 const cpuDx = (cpuToBallX / cpuToBallDist) * cpuSpeed * aggressionFactor * speedMultiplier const cpuDy = (cpuToBallY / cpuToBallDist) * cpuSpeed * aggressionFactor * speedMultiplier // Keep CPU in bounds and on right side of field cpu.x = Math.max(GAME_WIDTH / 2 - 20, Math.min(GAME_WIDTH - cpu.width, cpu.x + cpuDx)) cpu.y = Math.max(0, Math.min(GAME_HEIGHT - cpu.height, cpu.y + cpuDy)) } // Update ball position with speed multiplier for consistent physics ball.x += ball.speedX * speedMultiplier ball.y += ball.speedY * speedMultiplier // Ball friction ball.speedX *= Math.pow(0.98, speedMultiplier) ball.speedY *= Math.pow(0.98, speedMultiplier) // Stop ball if it's moving very slowly if (Math.abs(ball.speedX) < 0.01) ball.speedX = 0 if (Math.abs(ball.speedY) < 0.01) ball.speedY = 0 // Ball collision with walls if (ball.y < 0 || ball.y + ball.height > GAME_HEIGHT) { ball.speedY = -ball.speedY * 0.8 ball.y = ball.y < 0 ? 0 : GAME_HEIGHT - ball.height } // Check for goals - left goal (CPU scores) if ( ball.x < GOAL_WIDTH && ball.y > GAME_HEIGHT / 2 - GOAL_HEIGHT / 2 && ball.y < GAME_HEIGHT / 2 + GOAL_HEIGHT / 2 ) { playSound("goal") setScore((prev) => { const newScore = { ...prev, cpu: prev.cpu + 1 } console.log("CPU scored! New score:", newScore) return newScore }) // Reset ball position ball.x = GAME_WIDTH / 2 ball.y = GAME_HEIGHT / 2 ball.speedX = 0 ball.speedY = 0 } // Check for goals - right goal (Player scores) if ( ball.x + ball.width > GAME_WIDTH - GOAL_WIDTH && ball.y > GAME_HEIGHT / 2 - GOAL_HEIGHT / 2 && ball.y < GAME_HEIGHT / 2 + GOAL_HEIGHT / 2 ) { playSound("goal") setScore((prev) => { const newScore = { ...prev, player: prev.player + 1 } console.log("Player scored! New score:", newScore) return newScore }) // Reset ball position ball.x = GAME_WIDTH / 2 ball.y = GAME_HEIGHT / 2 ball.speedX = 0 ball.speedY = 0 } // Ball collision with walls (sides) if ( (ball.x < 0 && (ball.y < GAME_HEIGHT / 2 - GOAL_HEIGHT / 2 || ball.y > GAME_HEIGHT / 2 + GOAL_HEIGHT / 2)) || (ball.x + ball.width > GAME_WIDTH && (ball.y < GAME_HEIGHT / 2 - GOAL_HEIGHT / 2 || ball.y > GAME_HEIGHT / 2 + GOAL_HEIGHT / 2)) ) { ball.speedX = -ball.speedX * 0.8 ball.x = ball.x < 0 ? 0 : GAME_WIDTH - ball.width } // Ball collision with player if ( ball.x < player.x + player.width && ball.x + ball.width > player.x && ball.y < player.y + player.height && ball.y + ball.height > player.y ) { playSound("kick") // Calculate direction from player to ball const dx = ball.x + ball.width / 2 - (player.x + player.width / 2) const dy = ball.y + ball.height / 2 - (player.y + player.height / 2) const dist = Math.sqrt(dx * dx + dy * dy) || 1 // Set ball velocity based on collision ball.speedX = (dx / dist) * BALL_SPEED * 2 ball.speedY = (dy / dist) * BALL_SPEED * 2 // Move ball outside player if (dx > 0) { ball.x = player.x + player.width + 1 } else { ball.x = player.x - ball.width - 1 } } // Ball collision with CPU if ( ball.x < cpu.x + cpu.width && ball.x + ball.width > cpu.x && ball.y < cpu.y + cpu.height && ball.y + ball.height > cpu.y ) { playSound("kick") // Calculate direction from CPU to ball const dx = ball.x + ball.width / 2 - (cpu.x + cpu.width / 2) const dy = ball.y + ball.height / 2 - (cpu.y + cpu.height / 2) const dist = Math.sqrt(dx * dx + dy * dy) || 1 // Set ball velocity based on collision ball.speedX = (dx / dist) * BALL_SPEED * 2 ball.speedY = (dy / dist) * BALL_SPEED * 2 // Move ball outside CPU if (dx > 0) { ball.x = cpu.x + cpu.width + 1 } else { ball.x = cpu.x - ball.width - 1 } } // Kick the ball - improved mechanics if (keysRef.current.Space || touchRef.current.action) { // Check if player is close to the ball const dx = ball.x + ball.width / 2 - (player.x + player.width / 2) const dy = ball.y + ball.height / 2 - (player.y + player.height / 2) const dist = Math.sqrt(dx * dx + dy * dy) if (dist < 40) { // Increased kick range (was 30) playSound("kick") // Calculate kick direction let kickDx = dx / dist const kickDy = dy / dist // If player is on the left side, add a slight bias toward the right goal if (player.x < GAME_WIDTH / 2) { kickDx = (kickDx + 0.3) / 1.3 // Bias toward right } ball.speedX = kickDx * KICK_POWER ball.speedY = kickDy * KICK_POWER // Add a slight vertical randomness to make the ball movement more interesting ball.speedY += (Math.random() - 0.5) * 2 } } // Draw player (blue with Brazilian yellow trim) ctx.fillStyle = "#3498db" ctx.fillRect(player.x, player.y, player.width, player.height) ctx.fillStyle = "#f1c40f" // Yellow trim ctx.fillRect(player.x, player.y + player.height - 4, player.width, 4) // Draw player face ctx.fillStyle = "#000000" ctx.fillRect(player.x + 2, player.y + 2, 4, 4) // Left eye ctx.fillRect(player.x + player.width - 6, player.y + 2, 4, 4) // Right eye // Draw CPU (red with white trim) ctx.fillStyle = "#e74c3c" ctx.fillRect(cpu.x, cpu.y, cpu.width, cpu.height) ctx.fillStyle = "#ffffff" // White trim ctx.fillRect(cpu.x, cpu.y + cpu.height - 4, cpu.width, 4) // Draw CPU face ctx.fillStyle = "#000000" ctx.fillRect(cpu.x + 2, cpu.y + 2, 4, 4) // Left eye ctx.fillRect(cpu.x + cpu.width - 6, cpu.y + 2, 4, 4) // Right eye // Draw ball (Brazilian colors) ctx.fillStyle = "#f1c40f" // Yellow ctx.beginPath() ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2) ctx.fill() // Ball details - simplified on mobile if (!isMobile) { ctx.fillStyle = "#2ecc71" // Green ctx.beginPath() ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 4, 0, Math.PI * 2) ctx.fill() ctx.fillStyle = "#3498db" // Blue ctx.beginPath() ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 8, 0, Math.PI * 2) ctx.fill() } // Draw improved scoreboard ctx.fillStyle = "rgba(0, 0, 0, 0.8)" ctx.fillRect(0, 0, GAME_WIDTH, 24) // Player score area ctx.fillStyle = "#3498db" // Player color ctx.fillRect(GAME_WIDTH / 4 - 30, 0, 60, 24) ctx.fillStyle = "#FFFFFF" ctx.font = "16px monospace" ctx.textAlign = "center" ctx.fillText(score.player.toString(), GAME_WIDTH / 4, 18) // CPU score area ctx.fillStyle = "#e74c3c" // CPU color ctx.fillRect((GAME_WIDTH * 3) / 4 - 30, 0, 60, 24) ctx.fillStyle = "#FFFFFF" ctx.textAlign = "center" ctx.fillText(score.cpu.toString(), (GAME_WIDTH * 3) / 4, 18) // VS text ctx.fillStyle = "#FFFFFF" ctx.font = "12px monospace" ctx.fillText("VS", GAME_WIDTH / 2, 18) // Draw timer with more prominence const minutes = Math.floor(timeLeft / 60) const seconds = timeLeft % 60 const timeString = `${minutes}:${seconds.toString().padStart(2, "0")}` // Timer background ctx.fillStyle = "rgba(0, 0, 0, 0.8)" ctx.fillRect(GAME_WIDTH / 2 - 30, 30, 60, 24) ctx.strokeStyle = timeLeft <= 30 ? "#e74c3c" : "#FFFFFF" // Red when time is running out ctx.lineWidth = 2 ctx.strokeRect(GAME_WIDTH / 2 - 30, 30, 60, 24) // Timer text ctx.fillStyle = timeLeft <= 30 ? "#e74c3c" : "#FFFFFF" // Red when time is running out ctx.font = "16px monospace" ctx.textAlign = "center" ctx.fillText(timeString, GAME_WIDTH / 2, 48) // Add a pulsing effect when time is running out if (timeLeft <= 10 && Math.floor(Date.now() / 500) % 2 === 0) { ctx.fillStyle = "#e74c3c" ctx.globalAlpha = 0.3 ctx.fillRect(GAME_WIDTH / 2 - 30, 30, 60, 24) ctx.globalAlpha = 1.0 } // Continue the game loop requestRef.current = requestAnimationFrame(gameLoop) } // Start the game loop requestRef.current = requestAnimationFrame(gameLoop) // Clean up return () => { if (requestRef.current) { cancelAnimationFrame(requestRef.current) } } }, [gameStarted, gameOver, score, isMobile]) // Modify the canvas return statement to include touch controls if (gameStarted && !gameOver) { return (

) } // Update the start screen to be more responsive if (!gameStarted && !gameOver) { return (

{/* Animated grass background */}

{Array.from({ length: 20 }).map((_, i) => (

))}

{/* Field lines */}

Brazilian Street Soccer

{isMobile ? "Tap to Start" : "Press SPACE or Click to Start"}

Controls:

{isMobile ? (

Drag left side to move • Tap right side to kick

) : ( <>

WASD/Arrows: Move

Space: Kick

)}

2 Minute Match

) } // Update the game over screen to be more responsive if (gameOver) { return (

{/* Animated confetti for winner */} {score.player > score.cpu && (

{Array.from({ length: 50 }).map((_, i) => (

))}

)}

Game Over!

Final Score

Player

{score.player}

CPU

{score.cpu}

{score.player > score.cpu ? "You Win! 🏆" : score.player < score.cpu ? "CPU Wins!" : "Draw!"}

{score.player > score.cpu ? "Congratulations! You are the champion!" : score.player < score.cpu ? "Better luck next time!" : "An even match!"}

{isMobile ? "Tap to Play Again" : "Press SPACE or Click to Play Again"}

) } }

BRAZILIAN STREET SOCCER

FIM DE JOGO

Brazilian Street Soccer

Please rotate your device

Brazilian Street Soccer

Game Over!

Final Score

About

About