import { useState } from ‘react’ import { Button } from «/components/ui/button» import { Card, CardContent, CardHeader, CardTitle } from «/components/ui/card» import { ArrowRight } from «lucide-react» import { motion, useAnimation } from «framer-motion» export default function BasketballGame() { const [score, setScore] = useState(0) const [ballPosition, setBallPosition] = useState({ x: 0, y: 0 }) const [isBallInBasket, setIsBallInBasket] = useState(false) const ballControls = useAnimation() const launchBall = () => { const targetX = Math.random() * 300 – 150 // Random horizontal position const targetY = Math.random() * 200 – 200 // Random vertical position ballControls.start({ x: targetX, y: targetY, transition: { duration: 1, ease: «easeInOut», onComplete: () => { checkIfBallInBasket(targetX, targetY) resetBallPosition() }, }, }) } const checkIfBallInBasket = (x: number, y: number) => { // Simple check to see if the ball is within the basket area if (x >= -20 && x <= 20 && y <= -150) { setScore(score + 10) setIsBallInBasket(true) } else { setIsBallInBasket(false) } } const resetBallPosition = () => { ballControls.start({ x: 0, y: 0 }) } return ( Juego de Tiro al Baloncesto
Puntos: {score}
) } Share Refresh Version 1 of 1