超新星リズムファイブ！ – BEAT BATTLE

body {
background-color: #1a1a1a;
color: white;
font-family: ‘Arial Black’, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}

#game-container {
position: relative;
width: 800px;
height: 500px;
background: linear-gradient(to bottom, #333, #000);
border: 5px solid #ff0000;
box-shadow: 0 0 20px rgba(255,0,0,0.5);
}

/* バトル画面 */
#battle-screen {
height: 350px;
display: flex;
justify-content: space-around;
align-items: flex-end;
padding-bottom: 20px;
background: url(‘https://www.transparenttextures.com/patterns/stardust.png’);
}

.character {
width: 150px;
height: 200px;
text-align: center;
font-size: 80px;
transition: transform 0.1s;
}

/* ゲージ */
.hp-bar-container {
position: absolute;
top: 20px;
width: 300px;
height: 20px;
background: #444;
border: 2px solid #fff;
}
#hero-hp-container { left: 50px; }
#boss-hp-container { right: 50px; }
.hp-fill { width: 100%; height: 100%; transition: width 0.3s; }
#hero-hp { background: #00ff00; }
#boss-hp { background: #ff0000; }

/* リズムレーン */
#rhythm-lane {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background: rgba(0,0,0,0.8);
border-top: 3px solid #ffd700;
overflow: hidden;
}

#judge-zone {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border: 4px solid #ffd700;
border-radius: 50%;
z-index: 10;
}

.note {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: #ffd700;
font-weight: bold;
}

#message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: #fff;
text-shadow: 2px 2px #ff0000;
display: none;
pointer-events: none;
}

#start-btn {
padding: 15px 40px;
font-size: 24px;
background: #ff0000;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}

BEAT BATTLE: ROBOT vs MONSTER

操作: 矢印キー (← ↓ ↑ →)

ゲーム開始

const hero = document.getElementById(‘hero’);
const boss = document.getElementById(‘boss’);
const heroHpBar = document.getElementById(‘hero-hp’);
const bossHpBar = document.getElementById(‘boss-hp’);
const lane = document.getElementById(‘rhythm-lane’);
const message = document.getElementById(‘message’);
const startBtn = document.getElementById(‘start-btn’);

let heroHp = 100;
let bossHp = 100;
let notes = [];
let isPlaying = false;
let gameLoop;

const arrows = [‘ArrowLeft’, ‘ArrowDown’, ‘ArrowUp’, ‘ArrowRight’];
const arrowIcons = { ‘ArrowLeft’: ‘←’, ‘ArrowDown’: ‘↓’, ‘ArrowUp’: ‘↑’, ‘ArrowRight’: ‘→’ };

function spawnNote() {
if (!isPlaying) return;
const type = arrows[Math.floor(Math.random() * arrows.length)];
const noteDiv = document.createElement(‘div’);
noteDiv.className = ‘note’;
noteDiv.innerText = arrowIcons[type];
noteDiv.dataset.type = type;
noteDiv.style.left = ‘800px’;
lane.appendChild(noteDiv);
notes.push({ el: noteDiv, x: 800, type: type });
}

function update() {
notes.forEach((note, index) => {
note.x -= 5; // ノーツの移動速度
note.el.style.left = note.x + ‘px’;

// 画面外に消えたらミス
if (note.x hero.style.transform = ‘none’, 100);
} else {
heroHp -= 10;
heroHpBar.style.width = heroHp + ‘%’;
boss.style.transform = ‘translateX(-50px) scale(1.2)’;
setTimeout(() => boss.style.transform = ‘none’, 100);
}

if (bossHp <= 0) endGame('YOU WIN!');
if (heroHp {
if (!isPlaying) return;
if (!arrows.includes(e.code)) return;

const targetNote = notes.find(n => n.x > 30 && n.x n !== targetNote);
}
});

function showMessage(txt) {
message.innerText = txt;
message.style.display = ‘block’;
setTimeout(() => message.style.display = ‘none’, 500);
}

startBtn.onclick = () => {
startBtn.style.display = ‘none’;
isPlaying = true;
gameLoop = setInterval(() => {
update();
if (Math.random() < 0.03) spawnNote(); // ノーツ出現頻度
}, 20);
};