以下が実際のコードです。セキュリティ上の問題は避けるため、evalや外部サイトへのリダイレクトは行なっていません。また、alertも使用していません。
```html
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe Game</title>
<style>
table {
border-collapse: collapse;
margin: 50px auto;
}
td {
height: 80px;
width: 80px;
text-align: center;
font-size: 50px;
font-weight: bold;
border: 2px solid black;
padding: 0;
cursor: pointer;
}
#winner {
font-size: 2em;
font-weight: bold;
text-align: center;
margin: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td id="cell-1"></td>
<td id="cell-2"></td>
<td id="cell-3"></td>
</tr>
<tr>
<td id="cell-4"></td>
<td id="cell-5"></td>
<td id="cell-6"></td>
</tr>
<tr>
<td id="cell-7"></td>
<td id="cell-8"></td>
<td id="cell-9"></td>
</tr>
</table>
<div id="winner"></div>
<button onclick="resetGame()">Reset Game</button>
<script>
var cells = document.getElementsByTagName("td");
var winnerMessage = document.getElementById("winner");
var currentPlayer = "X";
var aiPlayer = "O";
var gameInProgress = true;
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function() {
if (gameInProgress && this.innerHTML === "") {
this.innerHTML = currentPlayer;
checkResult();
if (gameInProgress) {
computerMove();
}
}
});
}
function checkResult() {
if (checkLine(0, 1, 2) || checkLine(3, 4, 5) || checkLine(6, 7, 8) || checkLine(0, 3, 6) || checkLine(1, 4, 7) || checkLine(2, 5, 8) || checkLine(0, 4, 8) || checkLine(2, 4, 6)) {
endGame(currentPlayer);
} else if (checkDraw()) {
endGame("draw");
} else {
currentPlayer = (currentPlayer === "X") ? "O" : "X";
}
}
function checkLine(a, b, c) {
return cells[a].innerHTML === currentPlayer && cells[b].innerHTML === currentPlayer && cells[c].innerHTML === currentPlayer;
}
function checkDraw() {
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML === "") {
return false;
}
}
return true;
}
function computerMove() {
var availableCells = [];
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML === "") {
availableCells.push(i);
}
}
var randomCellIndex = availableCells[Math.floor(Math.random() * availableCells.length)];
cells[randomCellIndex].innerHTML = aiPlayer;
checkResult();
}
function endGame(result) {
gameInProgress = false;
if (result === "draw") {
winnerMessage.innerHTML = "It's a draw!";
} else {
winnerMessage.innerHTML = "Congratulations! " + result + " wins! 🎉";
winnerMessage.style.color = (result === "X") ? "red" : "black";
}
}
function resetGame() {
for (var i = 0; i < cells.length; i++) {
cells[i].innerHTML = "";
}
winnerMessage.innerHTML = "";
winnerMessage.style.color = "black";
currentPlayer = "X";
aiPlayer = "O";
gameInProgress = true;
}
</script>
</body>
</html>
```
ジョークを追加するために、勝つメッセージが表示されたときに、「でもあなたはそれでもまだコンピューターを倒せませんでした!」というフレーズを追加することもできます。