Skip to content

Instantly share code, notes, and snippets.

@bakerface

bakerface/index.html

Created December 28, 2022 15:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bakerface/9e79100d92c6afb91fee5aca35f8f77e to your computer and use it in GitHub Desktop.
Save bakerface/9e79100d92c6afb91fee5aca35f8f77e to your computer and use it in GitHub Desktop.
Download ZIP
9x9 TicTacToe
Raw
index.html
<html>
<head>
<style>
body { width: 100%; }
table { margin: auto; border-spacing: 1rem; }
button { padding: 1rem; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<table id="group-0">
<tbody>
<tr>
<td><button onclick="choose(this)" id="0"></button></td>
<td><button onclick="choose(this)" id="1"></button></td>
<td><button onclick="choose(this)" id="2"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="3"></button></td>
<td><button onclick="choose(this)" id="4"></button></td>
<td><button onclick="choose(this)" id="5"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="6"></button></td>
<td><button onclick="choose(this)" id="7"></button></td>
<td><button onclick="choose(this)" id="8"></button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="group-1">
<tbody>
<tr>
<td><button onclick="choose(this)" id="10"></button></td>
<td><button onclick="choose(this)" id="11"></button></td>
<td><button onclick="choose(this)" id="12"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="13"></button></td>
<td><button onclick="choose(this)" id="14"></button></td>
<td><button onclick="choose(this)" id="15"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="16"></button></td>
<td><button onclick="choose(this)" id="17"></button></td>
<td><button onclick="choose(this)" id="18"></button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="group-2">
<tbody>
<tr>
<td><button onclick="choose(this)" id="20"></button></td>
<td><button onclick="choose(this)" id="21"></button></td>
<td><button onclick="choose(this)" id="22"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="23"></button></td>
<td><button onclick="choose(this)" id="24"></button></td>
<td><button onclick="choose(this)" id="25"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="26"></button></td>
<td><button onclick="choose(this)" id="27"></button></td>
<td><button onclick="choose(this)" id="28"></button></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table id="group-3">
<tbody>
<tr>
<td><button onclick="choose(this)" id="30"></button></td>
<td><button onclick="choose(this)" id="31"></button></td>
<td><button onclick="choose(this)" id="32"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="33"></button></td>
<td><button onclick="choose(this)" id="34"></button></td>
<td><button onclick="choose(this)" id="35"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="36"></button></td>
<td><button onclick="choose(this)" id="37"></button></td>
<td><button onclick="choose(this)" id="38"></button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="group-4">
<tbody>
<tr>
<td><button onclick="choose(this)" id="40"></button></td>
<td><button onclick="choose(this)" id="41"></button></td>
<td><button onclick="choose(this)" id="42"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="43"></button></td>
<td><button onclick="choose(this)" id="44"></button></td>
<td><button onclick="choose(this)" id="45"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="46"></button></td>
<td><button onclick="choose(this)" id="47"></button></td>
<td><button onclick="choose(this)" id="48"></button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="group-5">
<tbody>
<tr>
<td><button onclick="choose(this)" id="50"></button></td>
<td><button onclick="choose(this)" id="51"></button></td>
<td><button onclick="choose(this)" id="52"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="53"></button></td>
<td><button onclick="choose(this)" id="54"></button></td>
<td><button onclick="choose(this)" id="55"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="56"></button></td>
<td><button onclick="choose(this)" id="57"></button></td>
<td><button onclick="choose(this)" id="58"></button></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table id="group-6">
<tbody>
<tr>
<td><button onclick="choose(this)" id="60"></button></td>
<td><button onclick="choose(this)" id="61"></button></td>
<td><button onclick="choose(this)" id="62"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="63"></button></td>
<td><button onclick="choose(this)" id="64"></button></td>
<td><button onclick="choose(this)" id="65"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="66"></button></td>
<td><button onclick="choose(this)" id="67"></button></td>
<td><button onclick="choose(this)" id="68"></button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="group-7">
<tbody>
<tr>
<td><button onclick="choose(this)" id="70"></button></td>
<td><button onclick="choose(this)" id="71"></button></td>
<td><button onclick="choose(this)" id="72"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="73"></button></td>
<td><button onclick="choose(this)" id="74"></button></td>
<td><button onclick="choose(this)" id="75"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="76"></button></td>
<td><button onclick="choose(this)" id="77"></button></td>
<td><button onclick="choose(this)" id="78"></button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="group-8">
<tbody>
<tr>
<td><button onclick="choose(this)" id="80"></button></td>
<td><button onclick="choose(this)" id="81"></button></td>
<td><button onclick="choose(this)" id="82"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="83"></button></td>
<td><button onclick="choose(this)" id="84"></button></td>
<td><button onclick="choose(this)" id="85"></button></td>
</tr>
<tr>
<td><button onclick="choose(this)" id="86"></button></td>
<td><button onclick="choose(this)" id="87"></button></td>
<td><button onclick="choose(this)" id="88"></button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
var player = 0;
var colors = ["blue", "red"];
var cells = Array(90).fill("");
var groups = Array(9).fill("");
var game_winner = "";
function choose(el) {
if (game_winner) {
return;
}
if (cells[el.id]) {
// todo: a message
return;
}
el.style.backgroundColor = colors[player];
cells[el.id] = "" + player;
player ^= 1;
var group = Math.floor(el.id / 10);
if (groups[group]) {
return;
}
var first = group * 10;
var group_winner = groups[group] = winner(cells.slice(first, first + 9));
if (!group_winner) {
return;
}
document.getElementById("group-" + group).style.backgroundColor =
colors[group_winner];
game_winner = winner(groups);
if (game_winner) {
document.body.style.backgroundColor = colors[game_winner];
}
}
function winner(board) {
return win(board, 0, 1, 2) ||
win(board, 3, 4, 5) ||
win(board, 6, 7, 8) ||
win(board, 0, 3, 6) ||
win(board, 1, 4, 7) ||
win(board, 2, 5, 8) ||
win(board, 0, 4, 8) ||
win(board, 2, 4, 6);
}
function win(board, a, b, c) {
if (board[a] === board[b] && board[b] === board[c]) {
return board[a];
}
return "";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment