以下が、セキュリティに配慮した実装例になります。
<html>
<head>
<title>雰囲気ステラおばさん</title>
<script>
const ai_text_div = document.getElementById('ai-text');
const player_text_div = document.getElementById('player-text');
const result_div = document.getElementById('result');
const input_form = document.getElementById('input-form');
const input_text = document.getElementById('input-text');
const game_time = 30;
const ai_phrases = [
'{"customer": "高田さん", "position": "社長", "descriptor": "しっとり", "confection": "マドレーヌ"}',
'{"customer": "山本さん", "position": "役員", "descriptor": "ふんわり", "confection": "シフォンケーキ"}',
'{"customer": "鈴木さん", "position": "ディレクター", "descriptor": "もっちり", "confection": "クッキー"}',
'{"customer": "田中さん", "position": "新入社員", "descriptor": "カリカリ", "confection": "シュークリーム"}',
'{"customer": "小林さん", "position": "インターン", "descriptor": "ふわふわ", "confection": "パンケーキ"}'
];
let game_timer;
let player_score = 0;
let ai_score = 0;
function startGame() {
result_div.innerText = '';
player_score = 0;
ai_score = 0;
startAITurn();
}
function startAITurn() {
const phrase = JSON.parse(ai_phrases[Math.floor(Math.random() * ai_phrases.length)]);
const ai_text = `${phrase.customer}${phrase.position}の${phrase.descriptor}${phrase.confection}\n雰囲気ステラおばさん`;
ai_text_div.innerText = ai_text;
if (game_timer) clearTimeout(game_timer);
game_timer = setTimeout(gameOver, game_time * 1000);
}
function startPlayerTurn() {
player_text_div.innerText = input_text.value;
input_text.value = null;
player_score++;
startAITurn();
}
function gameOver() {
const message = `ゲームオーバー！（あなたのスコア：${player_score}、AIのスコア：${ai_score}）`;
const continue_game = confirm(`${message} もう一度プレイしますか？`);
result_div.innerText = message;
if (continue_game) {
startGame();
} else {
input_form.style.display = 'none';
}
}
input_form.addEventListener('submit', function(event) {
event.preventDefault();
if (game_timer) {
startPlayerTurn();
}
});
startGame();
</script>
</head>
<body>
<div id="ai-text"></div>
<div id="player-text"></div>
<div id="result"></div>
<form id="input-form">
<input type="text" id="input-text" required>
<button type="submit">送信</button>
</form>
</body>
</html>
