[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function ClickPractice() { const [isPlaying, setIsPlaying] = useState(false) const [score, setScore] = useState(0) const [timeLeft, setTimeLeft] = useState(30) const [targetPosition, setTargetPosition] = useState({ x: 50, y: 50 }) const [targetSize, setTargetSize] = useState(50) const [difficulty, setDifficulty] = useState("medium") const gameAreaRef = useRef(null) // Start the game const startGame = () => { setIsPlaying(true) setScore(0) setTimeLeft(30) moveTarget() } // Move target to a random position const moveTarget = () => { if (gameAreaRef.current) { const gameArea = gameAreaRef.current const maxX = gameArea.clientWidth - targetSize const maxY = gameArea.clientHeight - targetSize setTargetPosition({ x: Math.floor(Math.random() * maxX), y: Math.floor(Math.random() * maxY), }) } } // Handle target click const handleTargetClick = () => { setScore(score + 1) moveTarget() } // Handle difficulty change const handleDifficultyChange = (value: string) => { setDifficulty(value) switch (value) { case "easy": setTargetSize(60) break case "medium": setTargetSize(50) break case "hard": setTargetSize(30) break case "expert": setTargetSize(20) break } } // Timer effect useEffect(() => { let timer: NodeJS.Timeout if (isPlaying && timeLeft > 0) { timer = setTimeout(() => { setTimeLeft(timeLeft - 1) }, 1000) } else if (timeLeft === 0) { setIsPlaying(false) } return () => { if (timer) clearTimeout(timer) } }, [isPlaying, timeLeft]) return (

クリック練習アプリ

スコア: {score}

残り時間: {timeLeft}秒

{isPlaying ? (

) : (

{timeLeft === 0 ? (

ゲーム終了!

最終スコア: {score}

) : (

「スタート」を押してゲームを開始

)}

遊び方

円形のターゲットをできるだけ早くクリックしてください。クリックするたびに、ターゲットは新しい位置に移動します。 30秒間でどれだけ多くのターゲットをクリックできるかを競います。

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "クリック練習アプリ", description: "マウスのクリック速度と精度を向上させるための練習アプリ", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This