動体視力トレーニングアプリ
スコア: 0
制限時間: 30秒
以下はJavaScriptを使用した動体視力トレーニングアプリの例です。安全性を確保するため、evalを使用せず、他のサイトに遷移させたり、リダイレクトさせたりすることはしません。
```
<!DOCTYPE html>
<html>
<head>
<title>動体視力トレーニングアプリ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#circle {
background-color: green;
border-radius: 50%;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<h1>動体視力トレーニングアプリ</h1>
<p id="score">スコア: 0</p>
<p id="timer">制限時間: 30秒</p>
<div id="circle"></div>
<script>
// 初期化
var circle = document.getElementById('circle');
var score = document.getElementById('score');
var countdown = document.getElementById('timer');
var startTime = Date.now() + 30000; // 30秒後の時刻
var interval = null;
var points = 0;
// マウスがクリックされたときの処理
circle.addEventListener('mousedown', function(event) {
points++; // スコアを加算
score.textContent = "スコア: " + points;
});
// エスケープキーが押されたときの処理
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
endGame();
}
});
// ゲームの開始
function startGame() {
interval = setInterval(function() {
// サークルをランダムな位置に表示
circle.style.top = Math.random() * (window.innerHeight - circle.offsetHeight) + 'px';
circle.style.left = Math.random() * (window.innerWidth - circle.offsetWidth) + 'px';
// 難易度を上げるために表示時間を減らす
var delay = Math.random() * 2000 + 1000; // 1秒から3秒
setTimeout(function() { circle.style.display = 'none'; }, delay);
setTimeout(function() { circle.style.display = 'block'; }, delay + 100);
}, 3000); // 3秒ごとにサークルを表示
countdown.textContent = "制限時間: 30秒";
setTimeout(endGame, 30000); // 30秒後に終了
}
// ゲームの終了
function endGame() {
clearInterval(interval);
circle.style.display = 'none';
score.textContent = "スコア: " + points;
countdown.textContent = "制限時間: 終了";
alert("あなたのスコアは" + points + "ポイントです！");
window.close(); // タブを閉じる
}
// ゲームを開始する
startGame();
</script>
</body>
</html>
```
ジョークを加えて、HTMLのbodyタグ内に以下の文言を追加することもできます。
```
<p id="joke">ジョーク: 何が赤くて、緑でも青でもないですか？</p>
<script>
var joke = document.getElementById('joke');
joke.textContent = "ジョーク: トマトとして育った林檎です！";
</script>
```