まるばつゲームの制作
3×3のマス目を作り、マスをクリックすると○と×を交互に表示できるようにします。
まず、body要素にonload属性を付与して、ブラウザがページを読み込んだときにマス目を画面に表示するように設定します。
<body onload="init()">
<h2>⚪︎×ゲーム</h2>
<table id="table"></table>
<p>※ マスをクリックしてください。</p>
</body>
script要素内ではまず、変数countを定義します。初期値はfalseにします。
init関数内はtable要素に「createElement」メソッドで作成したtr要素を3つ追加します。tr要素には同じく「createElement」メソッドで作成したtd要素を3つ追加します。
「document.createElement("要素名")」で指定した要素を作成することができます。
「要素名.appendChild(要素名２)」で親要素（要素名）に子要素（要素名２）を追加することができます。
tdにはonclickプロパティでmark関数を代入します。これでtd要素であるマス目をクリックしたときにマス目に○や×を表示できるようにします。
<script>
let count = false;
function init() {
for(let r = 0; r < 3; r++) {
let tr = document.createElement("tr");
for(let d = 0; d < 3; d++) {
let td = document.createElement("td");
td.onclick = mark;
tr.appendChild(td);
}
table.appendChild(tr);
}
}
mark関数には引数にeを指定します。マス目をクリックしたときのクリックしたtdのデータを取得することができます。
「let src = e.target;」で取得したデータを変数srcに代入します。
その後のif文は変数countがfalseのときは「src.textContent = "○";」でマス目に○が表示されるようにします。そしてcountにtrueを代入します。
elseの後はcountがfalseでないときはマス目に×を表示してcountにfalseを代入します。
countがfalseのときは○、trueのときは×を表示することを交互に行えるようにしています。
function mark(e) {
let src = e.target;
if(count === false) {
src.textContent = "⚪︎";
count = true;
} else {
src.textContent = "×";
count = false;
}
}
</script>
以下のコードをコピーしてファイルに貼り付ければ試すことができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marubatu</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 100px;
font-size: 60px;
text-align: center;
border: 1px solid black;
}
</style>
<script>
let count = false;
function init() {
for(let r = 0; r < 3; r++) {
let tr = document.createElement("tr");
for(let d = 0; d < 3; d++) {
let td = document.createElement("td");
td.onclick = mark;
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function mark(e) {
let src = e.target;
if(count === false) {
src.textContent = "⚪︎";
count = true;
} else {
src.textContent = "×";
count = false;
}
}
</script>
</head>
<body onload="init()">
<h2>⚪︎×ゲーム</h2>
<table id="table"></table>
<p>※ マスをクリックしてください。</p>
</body>
</html>