s

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atrapa la fruta</title>
<style>
#juego {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}

#cesta {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 50px;
background-color: #0099ff;
}

#fruta {
position: absolute;
top: 20px;
left: random(50, 450);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff0000;
}
</style>
</head>
<body>
<h1>Atrapa la fruta</h1>
<div id="juego">
<div id="cesta"></div>
<div id="fruta"></div>
</div>

<script>
const cesta = document.getElementById('cesta');
const fruta = document.getElementById('fruta');

let posicionFrutaX = random(50, 450);
let posicionFrutaY = 20;

function moverFruta() {
posicionFrutaY += 5;

if (posicionFrutaY > 300) {
posicionFrutaY = 20;
posicionFrutaX = random(50, 450);
}

fruta.style.top = posicionFrutaY + 'px';
}

function moverCesta(evento) {
const posX = evento.clientX - cesta.offsetWidth / 2;
cesta.style.left = posX + 'px';
}

function detectarColision() {
if (
posicionFrutaY + fruta.offsetHeight >= cesta.offsetTop &&
posicionFrutaX + fruta.offsetWidth >= cesta.offsetLeft &&
posicionFrutaX <= cesta.offsetLeft + cesta.offsetWidth
) {
posicionFrutaY = 20;
posicionFrutaX = random(50, 450);
}
}

window.addEventListener('mousemove', moverCesta);
setInterval(moverFruta, 100);
setInterval(detectarColision, 10);

function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>