-
ホーム
-
ビジョントレーニング 画面を移動するネズミを目で追って、視覚追跡能力を鍛えましょう
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 (
{/* ヘッダー */}
{/* コントロールパネル */}
{/* スピードコントロール */}
{/* ボタン */}
{/* トレーニングエリア */}
{/* 4隅のマーカー */}
{corners.map((corner, index) => (
{index + 1}
))}
{/* 移動するネズミ */}
{isActive && (
?
)}
{/* 説明テキスト */}
{!isActive && (
?
「開始」ボタンを押してトレーニングを始めましょう
ネズミを目で追って、視覚追跡能力を向上させます
)}
{/* 使い方ガイド */}
? トレーニングのポイント:
首を動かさず、目だけでネズミを追いかけてください。慣れてきたらスピードを上げて挑戦しましょう。
{/* アニメーション用のスタイル */}
);
};
export default VisionTraining;