以下が音ゲーの実装例です。この実装では、JavaScriptのevalは使わず、外部サイトへの遷移やリダイレクトも行っていません。さらに、セキュリティに配慮し、ユーザーが意図しない動作を起こす可能性があるコードを含まないよう注意しています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音ゲー</title>
<style>
.note {
width: 50px;
height: 50px;
border: 1px solid black;
position: absolute;
}
.note-red {
background-color: red;
left: 100px;
}
.note-blue {
background-color: blue;
left: 200px;
}
.note-yellow {
background-color: yellow;
left: 300px;
}
.note-green {
background-color: green;
left: 400px;
}
</style>
</head>
<body>
<div class="note note-red"></div>
<div class="note note-blue"></div>
<div class="note note-yellow"></div>
<div class="note note-green"></div>
<script>
let score = 0;
let combo = 0;
document.addEventListener('keydown', function (event) {
let note = null;
switch (event.key) {
case 'q':
note = document.querySelector('.note-red');
break;
case 'w':
note = document.querySelector('.note-blue');
break;
case 'e':
note = document.querySelector('.note-yellow');
break;
case 'r':
note = document.querySelector('.note-green');
break;
}
if (note !== null) {
if (note.offsetTop >= 450 && note.offsetTop < 500) {
score += 100;
combo++;
note.remove();
} else if (note.offsetTop >= 400 && note.offsetTop < 450) {
score += 50;
combo = 0;
note.remove();
} else {
combo = 0;
}
updateScore();
updateCombo();
}
});
function createNote() {
const colors = ['red', 'blue', 'yellow', 'green'];
const noteColor = colors[Math.floor(Math.random() * colors.length)];
const note = document.createElement('div');
note.classList.add('note', `note-${noteColor}`);
note.style.top = '-50px';
note.style.transition = 'top 1s linear';
note.addEventListener('transitionend', function (event) {
if (event.propertyName === 'top') {
event.target.remove();
combo = 0;
updateCombo();
}
});
document.body.appendChild(note);
setTimeout(() => {
note.style.top = '500px';
}, 0);
}
function updateScore() {
const scoreEl = document.querySelector('.score');
if (scoreEl) {
scoreEl.textContent = `Score: ${score}`;
} else {
const scoreEl = document.createElement('div');
scoreEl.classList.add('score');
scoreEl.textContent = `Score: ${score}`;
document.body.appendChild(scoreEl);
}
}
function updateCombo() {
const comboEl = document.querySelector('.combo');
if (comboEl) {
comboEl.textContent = `Combo: ${combo}`;
} else {
const comboEl = document.createElement('div');
comboEl.classList.add('combo');
comboEl.textContent = `Combo: ${combo}`;
document.body.appendChild(comboEl);
}
}
setInterval(createNote, 1000);
</script>
</body>
</html>
```
ジョークとして、スコアが1000点に達すると「あなたは音ゲーの達人です!」と表示するといった味付けができます。また、コンボが20以上続くと「エクセレント!連続パーフェクト!」と表示するようにするとより楽しい体験になるかもしれません。