連打ゲー
5秒間で何回ボタンを連打できるか競おう!
以下が実際のプログラムです。
```html
<!DOCTYPE html>
<html>
<head>
<title>連打ゲー</title>
<meta charset="UTF-8">
<style type="text/css">
body {
text-align: center;
font-size: 36px;
font-family: sans-serif;
}
button {
width: 200px;
height: 100px;
font-size: 36px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>連打ゲー</h1>
<p>5秒間で何回ボタンを連打できるか競おう!</p>
<button onclick="startGame()">連打ボタン</button>
<br><br>
<div id="timer"></div>
<div id="counter"></div>
<script type="text/javascript">
let intervalId;
let counter = 0;
function startGame() {
// 初期化
counter = 0;
clearInterval(intervalId);
document.getElementById('counter').innerHTML = '';
document.getElementById('timer').innerHTML = '5秒カウントダウン!';
// 5秒カウントダウン
let count = 5;
intervalId = setInterval(function() {
count--;
document.getElementById('timer').innerHTML = count + '秒';
if (count === 0) {
clearInterval(intervalId);
endGame();
}
}, 1000);
}
function endGame() {
document.getElementById('timer').innerHTML = '';
document.getElementById('counter').innerHTML = '連打数:' + counter;
// ジョーク
if (counter === 0) {
alert('ヒドイ!もうちょいがんばろう!');
} else if (counter < 10) {
alert('まあまあの結果だね!');
} else if (counter < 20) {
alert('すごい!けどまだまだだよ!');
} else if (counter < 30) {
alert('うますぎ!リーダーボードに登録するべき!');
} else {
alert('神の領域に達した!おめでとう!');
}
}
document.addEventListener('keydown', function(event) {
if (event.code === 'Space' || event.code === 'KeyZ') {
counter++;
document.getElementById('counter').innerHTML = 'カウント:' + counter;
}
});
</script>
</body>
</html>
```
ただし、このアプリケーションにもセキュリティ上の問題が存在します。eval、他のサイトへの遷移、リダイレクト、alertなどは使用していませんが、キーダウンイベントによってカウントを増やしているため、ユーザーがキーダウンイベントを改ざんして不正にカウントを増やすことができます。そのため、キャプチャやトークンなどのセキュリティ対策を追加する必要があります。