まるばつゲーム１
クリックすると、○・×が書き込まれる単純なプログラムです。
デモ
プログラム
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>まるばつゲーム</title>
<style>
#a td {
width: 100px;
height: 100px;
font-size: 80px;
border: 1px solid #ccc;
text-align:center;
}
</style>
<script>
window.onload = function() {
var turn = '○';
function mark(e)
{
if (e.target.innerHTML == '') {
e.target.innerHTML = turn;
change_turn();
}
}
function change_turn()
{
if (turn == '○') {
turn = '×';
} else {
turn = '○'
}
}
document.getElementById('b1').addEventListener('click', mark);
document.getElementById('b2').addEventListener('click', mark);
document.getElementById('b3').addEventListener('click', mark);
document.getElementById('b4').addEventListener('click', mark);
document.getElementById('b5').addEventListener('click', mark);
document.getElementById('b6').addEventListener('click', mark);
document.getElementById('b7').addEventListener('click', mark);
document.getElementById('b8').addEventListener('click', mark);
document.getElementById('b9').addEventListener('click', mark);
}
</script>
</head>
<body>
<h1>まるばつゲーム</h1>
<table id="a">
<tbody>
<tr><td id="b1"></td><td id="b2"></td><td id="b3"></td></tr>
<tr><td id="b4"></td><td id="b5"></td><td id="b6"></td></tr>
<tr><td id="b7"></td><td id="b8"></td><td id="b9"></td></tr>
</tbody>
</table>
</body>
</html>
解説
（追記予定）