[V0_FILE]typescriptreact:file="app/page.tsx" import PongGame from "@/components/pong-game" export default function Home() { return (

Next.js PONG

How to Play

Left Paddle: W (up) and S (down)

Right Paddle: Arrow Up and Arrow Down

) } [V0_FILE]typescriptreact:file="components/pong-game.tsx" "use client" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" // Game constants const PADDLE_HEIGHT = 100 const PADDLE_WIDTH = 15 const BALL_RADIUS = 10 const BALL_SPEED = 5 const PADDLE_SPEED = 8 export default function PongGame() { const canvasRef = useRef(null) const [leftScore, setLeftScore] = useState(0) const [rightScore, setRightScore] = useState(0) const [gameOver, setGameOver] = useState(false) const [winner, setWinner] = useState("") const [gameStarted, setGameStarted] = useState(false) // Game state const gameStateRef = useRef({ leftPaddleY: 0, rightPaddleY: 0, ballX: 0, ballY: 0, ballSpeedX: BALL_SPEED, ballSpeedY: BALL_SPEED, keys: { w: false, s: false, ArrowUp: false, ArrowDown: false, }, canvasWidth: 0, canvasHeight: 0, }) // Initialize game const initGame = () => { const canvas = canvasRef.current if (!canvas) return const gameState = gameStateRef.current gameState.canvasWidth = canvas.width gameState.canvasHeight = canvas.height // Initialize paddle positions gameState.leftPaddleY = (gameState.canvasHeight - PADDLE_HEIGHT) / 2 gameState.rightPaddleY = (gameState.canvasHeight - PADDLE_HEIGHT) / 2 // Initialize ball position gameState.ballX = gameState.canvasWidth / 2 gameState.ballY = gameState.canvasHeight / 2 // Randomize initial ball direction gameState.ballSpeedX = Math.random() > 0.5 ? BALL_SPEED : -BALL_SPEED gameState.ballSpeedY = Math.random() > 0.5 ? BALL_SPEED : -BALL_SPEED setGameOver(false) setWinner("") setLeftScore(0) setRightScore(0) setGameStarted(true) } // Handle key events useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key in gameStateRef.current.keys) { e.preventDefault() gameStateRef.current.keys[e.key as keyof typeof gameStateRef.current.keys] = true } } const handleKeyUp = (e: KeyboardEvent) => { if (e.key in gameStateRef.current.keys) { e.preventDefault() gameStateRef.current.keys[e.key as keyof typeof gameStateRef.current.keys] = false } } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, []) // Game loop useEffect(() => { if (!gameStarted) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Resize canvas to fit container const resizeCanvas = () => { const container = canvas.parentElement if (container) { canvas.width = container.clientWidth canvas.height = Math.min(container.clientWidth * 0.6, 400) gameStateRef.current.canvasWidth = canvas.width gameStateRef.current.canvasHeight = canvas.height } } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Game update function const update = () => { const gameState = gameStateRef.current // Move paddles if (gameState.keys.w && gameState.leftPaddleY > 0) { gameState.leftPaddleY -= PADDLE_SPEED } if (gameState.keys.s && gameState.leftPaddleY < gameState.canvasHeight - PADDLE_HEIGHT) { gameState.leftPaddleY += PADDLE_SPEED } if (gameState.keys.ArrowUp && gameState.rightPaddleY > 0) { gameState.rightPaddleY -= PADDLE_SPEED } if (gameState.keys.ArrowDown && gameState.rightPaddleY < gameState.canvasHeight - PADDLE_HEIGHT) { gameState.rightPaddleY += PADDLE_SPEED } // Move ball gameState.ballX += gameState.ballSpeedX gameState.ballY += gameState.ballSpeedY // Ball collision with top and bottom walls if (gameState.ballY - BALL_RADIUS < 0 || gameState.ballY + BALL_RADIUS > gameState.canvasHeight) { gameState.ballSpeedY = -gameState.ballSpeedY } // Ball collision with paddles // Left paddle if ( gameState.ballX - BALL_RADIUS < PADDLE_WIDTH && gameState.ballY > gameState.leftPaddleY && gameState.ballY < gameState.leftPaddleY + PADDLE_HEIGHT ) { gameState.ballSpeedX = -gameState.ballSpeedX // Add some randomness to the ball direction gameState.ballSpeedY = ((gameState.ballY - (gameState.leftPaddleY + PADDLE_HEIGHT / 2)) / (PADDLE_HEIGHT / 2)) * BALL_SPEED } // Right paddle if ( gameState.ballX + BALL_RADIUS > gameState.canvasWidth - PADDLE_WIDTH && gameState.ballY > gameState.rightPaddleY && gameState.ballY < gameState.rightPaddleY + PADDLE_HEIGHT ) { gameState.ballSpeedX = -gameState.ballSpeedX // Add some randomness to the ball direction gameState.ballSpeedY = ((gameState.ballY - (gameState.rightPaddleY + PADDLE_HEIGHT / 2)) / (PADDLE_HEIGHT / 2)) * BALL_SPEED } // Ball out of bounds - scoring if (gameState.ballX < 0) { // Right player scores setRightScore((prev) => { const newScore = prev + 1 if (newScore >= 5) { setGameOver(true) setWinner("Right Player") } return newScore }) resetBall() } else if (gameState.ballX > gameState.canvasWidth) { // Left player scores setLeftScore((prev) => { const newScore = prev + 1 if (newScore >= 5) { setGameOver(true) setWinner("Left Player") } return newScore }) resetBall() } } // Reset ball after scoring const resetBall = () => { const gameState = gameStateRef.current gameState.ballX = gameState.canvasWidth / 2 gameState.ballY = gameState.canvasHeight / 2 gameState.ballSpeedX = Math.random() > 0.5 ? BALL_SPEED : -BALL_SPEED gameState.ballSpeedY = Math.random() > 0.5 ? BALL_SPEED : -BALL_SPEED } // Render game const render = () => { const gameState = gameStateRef.current // Clear canvas ctx.fillStyle = "#1a202c" ctx.fillRect(0, 0, gameState.canvasWidth, gameState.canvasHeight) // Draw center line ctx.strokeStyle = "#4a5568" ctx.setLineDash([10, 10]) ctx.beginPath() ctx.moveTo(gameState.canvasWidth / 2, 0) ctx.lineTo(gameState.canvasWidth / 2, gameState.canvasHeight) ctx.stroke() ctx.setLineDash([]) // Draw paddles ctx.fillStyle = "white" // Left paddle ctx.fillRect(0, gameState.leftPaddleY, PADDLE_WIDTH, PADDLE_HEIGHT) // Right paddle ctx.fillRect(gameState.canvasWidth - PADDLE_WIDTH, gameState.rightPaddleY, PADDLE_WIDTH, PADDLE_HEIGHT) // Draw ball ctx.beginPath() ctx.arc(gameState.ballX, gameState.ballY, BALL_RADIUS, 0, Math.PI * 2) ctx.fill() } // Game loop let animationId: number const gameLoop = () => { if (!gameOver) { update() render() animationId = requestAnimationFrame(gameLoop) } else { // Game over screen ctx.fillStyle = "#1a202c" ctx.fillRect(0, 0, gameStateRef.current.canvasWidth, gameStateRef.current.canvasHeight) ctx.fillStyle = "white" ctx.font = "24px Arial" ctx.textAlign = "center" ctx.fillText( `Game Over! ${winner} wins!`, gameStateRef.current.canvasWidth / 2, gameStateRef.current.canvasHeight / 2, ) } } animationId = requestAnimationFrame(gameLoop) return () => { cancelAnimationFrame(animationId) window.removeEventListener("resize", resizeCanvas) } }, [gameStarted, gameOver, winner]) return (

Left: {leftScore}

Right: {rightScore}

{!gameStarted && ( )} {gameOver && ( )}

) }

About

Tags

Share

About

Tags

Share

More from akas

More Templates Like This

About

Tags

Share

About

Tags

Share

More from akas

More Templates Like This