メモ帳にコピペして 適当な名前.html
として保存してブラウザで開くとできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>配信記念！超連打反射神経ゲーム</title>
<style>
body {
margin: 0;
background: #1a1a2e;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
user-select: none;
}
h1 { margin: 0 0 10px; font-size: 24px; color: #4ecca3; }
.status-bar {
display: flex;
gap: 30px;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
#game-area {
width: 500px;
height: 400px;
background: #162447;
border: 3px solid #e43f5a;
border-radius: 12px;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(228, 63, 90, 0.4);
}
.target {
position: absolute;
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
transform: scale(0);
animation: pop 0.2s forwards;
}
@keyframes pop {
to { transform: scale(1); }
}
#overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
}
.btn {
padding: 12px 30px;
font-size: 18px;
font-weight: bold;
color: #fff;
background: #e43f5a;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(228, 63, 90, 0.4);
transition: 0.2s;
}
.btn:hover { background: #ff2e63; transform: scale(1.05); }
#result-rank { font-size: 28px; color: #ffd369; margin-bottom: 15px; font-weight: bold; }
</style>
</head>
<body>
<h1>⚡ 反射神経チャレンジ ⚡</h1>
<div class="status-bar">
<div>⏱️ 残り時間: <span id="time" style="color: #ffd369;">15.0</span>s</div>
<div>🎯 スコア: <span id="score" style="color: #4ecca3;">0</span></div>
</div>
<div id="game-area">
<div id="overlay">
<div id="result-rank" style="display: none;"></div>
<button class="btn" id="start-btn" onclick="startGame()">▶ ゲームスタート</button>
</div>
</div>
<script>
let score = 0;
let timeLeft = 15.0;
let gameTimer = null;
let spawnTimer = null;
let isPlaying = false;
const gameArea = document.getElementById('game-area');
const timeDisplay = document.getElementById('time');
const scoreDisplay = document.getElementById('score');
const overlay = document.getElementById('overlay');
const startBtn = document.getElementById('start-btn');
const resultRank = document.getElementById('result-rank');
const icons = [
{ emoji: '🔥', pts: 1, bg: '#ff5722' },
{ emoji: '💎', pts: 3, bg: '#00bcd4' },
{ emoji: '⭐', pts: 5, bg: '#ffd369' },
{ emoji: '💣', pts: -5, bg: '#333333' } // トラップ
];
function startGame() {
score = 0;
timeLeft = 15.0;
isPlaying = true;
scoreDisplay.innerText = score;
timeDisplay.innerText = timeLeft.toFixed(1);
overlay.style.display = 'none';
resultRank.style.display = 'none';
// 既存のターゲットをクリア
document.querySelectorAll('.target').forEach(t => t.remove());
// タイマー開始
const startTime = Date.now();
gameTimer = setInterval(() => {
const elapsed = (Date.now() - startTime) / 1000;
timeLeft = Math.max(0, 15.0 - elapsed);
timeDisplay.innerText = timeLeft.toFixed(1);
if (timeLeft <= 0) {
endGame();
}
}, 50);
spawnTarget();
}
function spawnTarget() {
if (!isPlaying) return;
const target = document.createElement('div');
target.className = 'target';
// 確率で出現（爆弾は15%）
const rand = Math.random();
let icon = icons[0];
if (rand < 0.15) icon = icons[3]; // 💣
else if (rand < 0.35) icon = icons[2]; // ⭐
else if (rand < 0.65) icon = icons[1]; // 💎
target.innerText = icon.emoji;
target.style.backgroundColor = icon.bg;
// ランダム配置
const maxX = gameArea.clientWidth - 65;
const maxY = gameArea.clientHeight - 65;
target.style.left = Math.floor(Math.random() * maxX) + 'px';
target.style.top = Math.floor(Math.random() * maxY) + 'px';
// クリックイベント
target.onpointerdown = (e) => {
e.stopPropagation();
score = Math.max(0, score + icon.pts);
scoreDisplay.innerText = score;
target.remove();
spawnTarget();
};
gameArea.appendChild(target);
// 一定時間で消える
setTimeout(() => {
if (target.parentNode) {
target.remove();
if (isPlaying && document.querySelectorAll('.target').length < 2) {
spawnTarget();
}
}
}, 1100);
// 同時に2個まで出現させる
if (Math.random() > 0.5 && document.querySelectorAll('.target').length < 2) {
setTimeout(spawnTarget, 200);
}
}
function endGame() {
isPlaying = false;
clearInterval(gameTimer);
document.querySelectorAll('.target').forEach(t => t.remove());
// ランク判定
let rank = "配信初心者クラス 🥉";
if (score >= 45) rank = "神速の配信者クラス 👑";
else if (score >= 30) rank = "プロゲーマークラス 🥇";
else if (score >= 15) rank = "一般リスナークラス 🥈";
resultRank.innerHTML = `スコア: ${score}点<br><span style="font-size: 20px; color: #fff;">称号: ${rank}</span>`;
resultRank.style.display = 'block';
startBtn.innerText = '🔄 もう一度挑戦';
overlay.style.display = 'flex';
}
</script>
</body>
</html>
by