以下はユーザーの要望に基づく実際のプログラムです。セキュリティ脆弱性の問題を回避するため、evalは使用していません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打井遊戲</title>
<style>
input[type="text"] {
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
border: 2px solid black;
margin: 10px;
outline: none;
background-color: white;
cursor: pointer;
}
input[type="text"]:disabled {
cursor: default;
background-color: #F2F2F2;
}
</style>
</head>
<body>
<div id="game">
<input type="text" id="0" onclick="play(this)" readonly>
<input type="text" id="1" onclick="play(this)" readonly>
<input type="text" id="2" onclick="play(this)" readonly>
<br>
<input type="text" id="3" onclick="play(this)" readonly>
<input type="text" id="4" onclick="play(this)" readonly>
<input type="text" id="5" onclick="play(this)" readonly>
<br>
<input type="text" id="6" onclick="play(this)" readonly>
<input type="text" id="7" onclick="play(this)" readonly>
<input type="text" id="8" onclick="play(this)" readonly>
</div>
<div id="result"></div>
<button onclick="reset()">重新開始</button>
<script>
let board = ['', '', '', '', '', '', '', '', ''];
let winner = null;
let cells = document.querySelectorAll('input[type="text"]');
// 玩家輸入
function play(cell) {
let index = cell.id;
if (board[index] === '' && winner === null) {
cell.value = '✕';
board[index] = '✕';
checkWin();
if (winner === null) {
computerPlay();
}
}
}
// 電腦輸入
function computerPlay() {
let index;
do {
index = Math.floor(Math.random() * 9);
} while (board[index] !== '');
let cell = document.getElementById(index);
cell.value = '○';
board[index] = '○';
checkWin();
}
// 檢查是否勝利
function checkWin() {
for (let i = 0; i < 9; i += 3) {
if (board[i] !== '' && board[i] === board[i+1] && board[i] === board[i+2]) {
winner = board[i];
break;
}
}
for (let i = 0; i < 3; i++) {
if (board[i] !== '' && board[i] === board[i+3] && board[i] === board[i+6]) {
winner = board[i];
break;
}
}
if (board[0] !== '' && board[0] === board[4] && board[0] === board[8]) {
winner = board[0];
}
if (board[2] !== '' && board[2] === board[4] && board[2] === board[6]) {
winner = board[2];
}
if (winner !== null) {
if (winner === '✕') {
document.getElementById('result').textContent = '恭喜您！🎉';
} else {
document.getElementById('result').textContent = '您輸了！😩';
}
disableCells();
} else if (!board.includes('')) {
document.getElementById('result').textContent = '和局！😐';
disableCells();
}
}
// 重新開始
function reset() {
for (let i = 0; i < 9; i++) {
let cell = document.getElementById(i);
cell.value = '';
cell.removeAttribute('disabled');
}
board = ['', '', '', '', '', '', '', '', ''];
winner = null;
document.getElementById('result').textContent = '';
}
// 停用所有輸入格
function disableCells() {
for (let i = 0; i < 9; i++) {
let cell = document.getElementById(i);
cell.setAttribute('disabled', true);
}
}
</script>
</body>
</html>
```
ジョークは以下です。「✕」は「葵花」の意味があり、中国では「豆芽菜」との語呂合わせで「葵花豆芽菜」（グッドラック）と言われることがあるため、勝った場合には「恭喜您！🎉（おめでとうございます！）」というメッセージを表示させました。
