一本歯下駄NO.1ブランド
ホーム
0
カテゴリー
グループ
コンテンツ
カート
ユーザー
絞り込む
カテゴリー
グループ
コンテンツ
  • ホーム
  • ビジョントレーニング 画面を移動するネズミを目で追って、視覚追跡能力を鍛えましょう
import React, { useState, useEffect, useRef } from 'react'; const VisionTraining = () => { const [speed, setSpeed] = useState(250); const [isActive, setIsActive] = useState(false); const [currentCorner, setCurrentCorner] = useState(0); const [position, setPosition] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); // 4隅の座標を計算 const corners = [ { x: 50, y: 50, name: '左上' }, { x: window.innerWidth - 100, y: 50, name: '右上' }, { x: window.innerWidth - 100, y: window.innerHeight - 150, name: '右下' }, { x: 50, y: window.innerHeight - 150, name: '左下' } ]; useEffect(() => { if (!isActive) return; const interval = setInterval(() => { setCurrentCorner((prev) => { const next = (prev + 1) % 4; setPosition(corners[next]); return next; }); }, speed); return () => clearInterval(interval); }, [isActive, speed]); useEffect(() => { if (isActive) { setPosition(corners[0]); } }, [isActive]); const handleStart = () => { setIsActive(true); }; const handleStop = () => { setIsActive(false); }; const handleReset = () => { setIsActive(false); setCurrentCorner(0); setPosition({ x: 0, y: 0 }); }; return (
{/* ヘッダー */}

? ビジョントレーニング

画面を移動するネズミを目で追って、視覚追跡能力を鍛えましょう

{/* コントロールパネル */}
{/* スピードコントロール */}
setSpeed(Number(e.target.value))} disabled={isActive} style={{ width: '100%', height: '8px', borderRadius: '4px', outline: 'none', backgroundColor: '#E8E8E8', cursor: isActive ? 'not-allowed' : 'pointer' }} />
速い (10ms) 遅い (500ms)
{/* ボタン */}
{/* トレーニングエリア */}
{/* 4隅のマーカー */} {corners.map((corner, index) => (
{index + 1}
))} {/* 移動するネズミ */} {isActive && (
?
)} {/* 説明テキスト */} {!isActive && (
?

「開始」ボタンを押してトレーニングを始めましょう

ネズミを目で追って、視覚追跡能力を向上させます

)}
{/* 使い方ガイド */}
? トレーニングのポイント: 首を動かさず、目だけでネズミを追いかけてください。慣れてきたらスピードを上げて挑戦しましょう。
{/* アニメーション用のスタイル */}
); }; export default VisionTraining;