まるばつゲーム1
クリックすると、○・×が書き込まれる単純なプログラムです。
デモ
プログラム
<!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>
解説
(追記予定)