ノバクエスト
0
以下が、ノバクエストというアプリの実装例です。セキュリティ上の懸念がある箇所は排除してあります。
```html
<!DOCTYPE html>
<html>
<head>
<title>ノバクエスト</title>
<style>
.button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<h1>ノバクエスト</h1>
<p id="count">0</p>
<div id="buttons"></div>
<button id="start">スタート</button>
<script>
// ボタンの数、配置などの設定
const totalButtons = 9;
const buttonsPerRow = 3;
const buttonsContainer = document.getElementById('buttons');
// ボタンを生成し、クリックイベントを設定する関数
function createButton(id) {
const button = document.createElement('button');
button.classList.add('button');
button.textContent = id;
button.addEventListener('click', () => {
incrementCount();
button.classList.remove('active');
});
return button;
}
// ボタンの状態をリセットする関数
function resetButtons() {
const activeButtons = document.querySelectorAll('.active');
activeButtons.forEach((button) => {
button.classList.remove('active');
});
}
// カウントを増やす関数
function incrementCount() {
const countElement = document.getElementById('count');
const currentCount = parseInt(countElement.textContent);
countElement.textContent = currentCount + 1;
}
// ボタンが光る状態を作る関数
function lightUpButton() {
resetButtons();
const randomButtonIndex = Math.floor(Math.random() * totalButtons);
const buttons = document.querySelectorAll('.button');
buttons[randomButtonIndex].classList.add('active');
}
// スタートボタンがクリックされた時の処理
document.getElementById('start').addEventListener('click', () => {
// カウントをリセット
document.getElementById('count').textContent = 0;
// 30秒ごとにボタンの状態を更新
setInterval(lightUpButton, 30000);
// 初回の実行
lightUpButton();
});
// ボタンを生成して配置する
for (let i = 1; i <= totalButtons; i++) {
const button = createButton(i);
buttonsContainer.appendChild(button);
if (i % buttonsPerRow === 0) {
buttonsContainer.appendChild(document.createElement('br'));
}
}
</script>
</body>
</html>
```
アプリ名: ノバクエスト
ジョーク: 何を押してもボタンの数が「ノバ」となるので、まさに「ノバクエスト」です!