ウェブページで遊べる「なんちゃって○×ゲーム」をつくりました。
HTMLとCSSで表示部分を作成し、動きはjavascriptで実装しました。
マス目をクリックしたら〇か×が表示されるだけのシンプルなものです。機会があれば勝敗の判定をつけたいです。。
サンプルページはこちらです。まずは実際の動作を確認してください！
ソースコードを確認
まるばつゲームはHTMLとCSS、javascript（JS）で作成しました。
作成手順のポイントをメモしておきます。
ページの構造をHTMLで作る
HTMLでゲームの外枠部分だけをつくります。マス目はtableタグの中にJSで動的に書き出すので空にします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<table id="board"></table>
</div>
</body>
</html>ページの装飾をCSSで指定する
CSSでオセロのマス目のようなデザインにします。
#container {
padding: 10px;
margin-left: auto;
margin-right: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #999;
max-width: 100%;
background: green;
text-align: center;
}
td {
border: 1px solid #fff;
width: 50px;
height: 50px;
font-size: 25px;
font-weight: bold;
color: #fff;
}javascriptでマス目を作成してイベントを設定する
JSのコード全体はこんな感じになりました。
ポイントだけメモしておきます。
window.addEventListener('DOMContentLoaded', () => {// ページ読込後に実行
let board = document.getElementById("board");
let xy = 3;
let count = 0;
for (let i = 0; i < xy; i++) {
let tr = document.createElement("tr");
for (let j = 0; j < xy; j++) {
let td = document.createElement("td");
const option = { once: true };
td.className = `cell ${j}-${i}`;
tr.appendChild(td);
td.addEventListener('click', (event) => {
let self = event.target;
let pice = count++ % 2 == 0 ? "○" : "×";
self.textContent = pice;
if (count == xy * xy) {
setTimeout(() => {
alert('終了しました。');
}, 300);
}
}, option);
}
board.appendChild(tr);
}
});まるばつゲームのマス目を指定して動的に書き出す
変数xyの値は作成する縦横のマス目の数です。初期値が3なので、全部で9個のマス目ができます。この値を変更すると表示されるマス目も変わります。
let xy = 3;マス目をクリックした時に発生するイベントは１回のみ
マス目をクリックした時に発生するイベントは「addEventListener」で設定しますが、複数回クリックすると挙動がおかしくなるので、発火するのは１回だけにします。
一回だけ発火させるには「addEventListener」のオプション「once」をtrueに設定します。
const option = { once: true };
element.addEventListener('click', (event) => {
let self = event.target;
// 変数[self]に対して実行したい処理を記述
}, option);クリックした時、〇か×どちらを表示するかの判定
マス目をクリックした時、クリックした数をカウントして、偶数だったら「〇」。奇数だったら「×」を表示します。
以下のコードでは判定と同時にカウントの数を1つ増やしています。
let pice = count++ % 2 == 0 ? "○" : "×";すべてのマス目をクリックしたらゲーム終了
全てのマス目をクリックしたらゲーム終了です。終了の判定は、マス目全体の数とクリック数が同じ数になった時にします。ゲームが終わったら“終了しました”のアラートを表示します。
アラートが表示されるタイミングが、デフォルトだと少し早いように感じたので、setTimeoutで若干遅く表示します。
if (count == xy * xy) {
setTimeout(() => {
alert('終了しました。');
}, 300);
}まとめ
単純なまるばつゲームですが、プログラムで作成するのは難しかったです。。
都度ブラッシュアップしていきます！
コメント