[V0_FILE]typescriptreact:file="components/Game.tsx" import type React from "react" import { useState, useEffect, useRef } from "react" import { type GameState, updateGameState } from "../utils/gameLogic" import Canvas from "./Canvas" const PADDLE_WIDTH = 10 const PADDLE_HEIGHT = 100 const BALL_SIZE = 10 const GAME_WIDTH = 800 const GAME_HEIGHT = 600 export default function Game() { const [gameState, setGameState] = useState({ player1: { y: GAME_HEIGHT / 2 - PADDLE_HEIGHT / 2 }, player2: { y: GAME_HEIGHT / 2 - PADDLE_HEIGHT / 2 }, ball: { x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2, dx: 5, dy: 5 }, score: { player1: 0, player2: 0 }, }) const canvasRef = useRef(null) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "w" || e.key === "s" || e.key === "ArrowUp" || e.key === "ArrowDown") { e.preventDefault() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, []) useEffect(() => { let animationId: number const gameLoop = () => { setGameState((prevState) => updateGameState(prevState, GAME_WIDTH, GAME_HEIGHT)) animationId = requestAnimationFrame(gameLoop) } gameLoop() return () => cancelAnimationFrame(animationId) }, []) const handleKeyDown = (e: React.KeyboardEvent) => { setGameState((prevState) => { const newState = { ...prevState } const moveAmount = 20 switch (e.key) { case "w": newState.player1.y = Math.max(0, newState.player1.y - moveAmount) break case "s": newState.player1.y = Math.min(GAME_HEIGHT - PADDLE_HEIGHT, newState.player1.y + moveAmount) break case "ArrowUp": newState.player2.y = Math.max(0, newState.player2.y - moveAmount) break case "ArrowDown": newState.player2.y = Math.min(GAME_HEIGHT - PADDLE_HEIGHT, newState.player2.y + moveAmount) break } return newState }) } return (

Pong

Player 1: {gameState.score.player1} | Player 2: {gameState.score.player2}

) } [V0_FILE]typescriptreact:file="components/Canvas.tsx" import React, { useRef, useEffect } from "react" import type { GameState } from "../utils/gameLogic" interface CanvasProps { width: number height: number gameState: GameState paddleWidth: number paddleHeight: number ballSize: number } export default function Canvas({ width, height, gameState, paddleWidth, paddleHeight, ballSize }: CanvasProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear the canvas ctx.fillStyle = "black" ctx.fillRect(0, 0, width, height) // Draw paddles ctx.fillStyle = "white" ctx.fillRect(0, gameState.player1.y, paddleWidth, paddleHeight) ctx.fillRect(width - paddleWidth, gameState.player2.y, paddleWidth, paddleHeight) // Draw ball ctx.beginPath() ctx.arc(gameState.ball.x, gameState.ball.y, ballSize / 2, 0, Math.PI * 2) ctx.fill() // Draw center line ctx.setLineDash([5, 15]) ctx.moveTo(width / 2, 0) ctx.lineTo(width / 2, height) ctx.stroke() }, [gameState, width, height, paddleWidth, paddleHeight, ballSize]) return