function MainComponent() { const [score, setScore] = React.useState(0); const [targets, setTargets] = React.useState([]); const [gameStarted, setGameStarted] = React.useState(false); const [leaderBoard, setLeaderBoard] = React.useState([]); const [spawnRate, setSpawnRate] = React.useState(1000); React.useEffect(()=>{ if (!gameStarted) return; const interval = setInterval(()=>{ createTarget(); }, spawnRate); return ()=>clearInterval(interval); }, [ gameStarted, spawnRate ]); const createTarget = ()=>{ const id = new Date().getTime(); const newTarget = { id, x: Math.random() * 90, y: Math.random() * 90, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2 }; setTargets((prevTargets)=>[ ...prevTargets, newTarget ]); }; const updateTargets = ()=>{ setTargets((prevTargets)=>prevTargets.map((target)=>{ let { x, y, vx, vy } = target; x += vx; y += vy; if (x <= 0 || x >= 90) vx *= -1; if (y <= 0 || y >= 90) vy *= -1; return { ...target, x, y, vx, vy }; })); }; React.useEffect(()=>{ if (!gameStarted) return; const updateInterval = setInterval(updateTargets, 20); return ()=>clearInterval(updateInterval); }, [ gameStarted ]); const startGame = ()=>{ setGameStarted(true); setScore(0); setTargets([]); }; const shootTarget = (targetId)=>{ setTargets((prevTargets)=>prevTargets.filter((target)=>target.id !== targetId)); setScore((prevScore)=>prevScore + 1); if (score % 5 === 0) { setSpawnRate((prevSpawnRate)=>Math.max(500, prevSpawnRate * 0.9)); } }; const targetElements = targets.map((target)=>/*#__PURE__*/ React.createElement("div", { key: target.id, className: "absolute bg-[#FF6347] w-[20px] h-[20px] rounded-full cursor-pointer", style: { transform: `translate(${target.x}vw, ${target.y}vh)` }, onClick: ()=>shootTarget(target.id), __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this })); const leaderBoardElements = leaderBoard.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: entry.id, className: "text-left pl-3", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, `${index + 1}. ${entry.name} - ${entry.score}`))); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, !gameStarted && /*#__PURE__*/ React.createElement("button", { className: "absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] font-roboto bg-[#32CD32] rounded px-4 py-2", onClick: startGame, __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Start Game"), gameStarted && /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, targetElements), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 mr-4 mt-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-[150px] bg-[#F5F5F5] rounded-lg shadow", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-lg p-3 border-b border-[#DDDDDD]", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Leader Board"), leaderBoardElements)), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 ml-4 mt-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-lg", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "Score: ", score))); }

Leader Board

Score: 0