+// 初期化をする関数\r
const InitilizeTable = () => {\r
- for (a = 0 ; a < TableYNumber; a++){\r
- //alert("None")\r
+ for (a = 0 ; a < TableYNumber; a++){ // 行を作成するループ\r
+ \r
+ // 行を作成する\r
let tr = document.createElement("tr")\r
- for(b = 0; b < TableXNumber; b++){\r
\r
- // マス目を作成\r
- let td = document.createElement("td");\r
- td.innerText = InitialStr;\r
- td.dataset.clicked = false;\r
- td.addEventListener("click", ClickedBox)\r
- tr.appendChild(td)\r
+ // 先程作成した行の中で横並びのボックスを作る\r
+ for(b = 0; b < TableXNumber; b++){\r
+ let td = document.createElement("td"); // ボックスを作成\r
+ td.innerText = InitialStr; // ボックスの文字を初期化する（空白に設定する）\r
+ td.dataset.clicked = false; // ボックスの状態を「クリックされていない」にする\r
+ td.addEventListener("click", ClickedBox) //ボックスがクリックされた時「ClickedBox」関数を実行する\r
+ tr.appendChild(td) //行に先程作成したボックスを挿入する\r
}\r
- MainTable.appendChild(tr)\r
+ MainTable.appendChild(tr) //完成した行を画面に挿入する\r
}\r
}\r
\r
+// 初回読み込み時に初期化を行う\r
window.addEventListener("load", InitilizeTable)\r
\r
+// ボックスがクリックされたときの処理
const ClickedBox = (e) => {
- const MySelf = e.path[0]
+ const MySelf = e.path[0] // クリックされたボックスを取得する
- if (! GameEnded){
+ if (! GameEnded){ //もしゲームの状態が「終了」でなければ
if (MySelf.dataset.clicked != "true"){
// クリックされたボックスの設定
- MySelf.innerText = PlayerMarks[CurrentPlayer];
- MySelf.dataset.clicked = "true";
+ MySelf.innerText = PlayerMarks[CurrentPlayer]; //クリックされたボックスのテキストをクリックしたプレーヤーの記号にする
+ MySelf.dataset.clicked = "true"; //ボックスの状態を「クリック済み」にする
// プレイヤーを変更する
ChangePlayer();
// すべてチェックされた場合の処理
CheckedBox++;
- if (CheckedBox == TableXNumber * TableYNumber){
- Msg.innerText = "終了"
- GameEnded = true;
+ if (CheckedBox == TableXNumber * TableYNumber){ // もしチェックされた数とマス目の数が等しいならば
+ Msg.innerText = "終了" // メッセージに終了と表示
+ GameEnded = true; // ゲームの状態を「終了」にする
}
}else{
console.log("既にクリックされています")
}
}
+// プレーヤーを変更する処理
const ChangePlayer = () => {
- if (CurrentPlayer == PlayerNumer - 1){
- CurrentPlayer = 0;
+ if (CurrentPlayer == PlayerNumer - 1){ // 今のプレーヤーが最後だったら
+ CurrentPlayer = 0; //最初のプレーヤーに戻る
}else{
- CurrentPlayer++;
+ CurrentPlayer++; //次のプレーヤーにする
}
- console.log("現在のプレイヤーは" + CurrentPlayer + "です")
+ console.log("現在のプレイヤーは" + CurrentPlayer + "です") //ログを表示する
}
+// 最初にのみログを表示する
window.addEventListener("load", ()=>{
console.log(CurrentPlayer + "でゲームをスタートします")
})
+/* 全体の見た目 */\r
body{\r
- margin: 0;\r
- min-width: 320px;\r
+ margin: 0; /* 外側の空白を0にする */\r
+ min-width: 320px; /* 最初の横幅を設定 （これを設定しないとスマホで表示が崩れてしまう）*/\r
}\r
\r
html{\r
- background-color: white;\r
- color: black;\r
+ background-color: white; /* 背景色を白にする */\r
+ color: black; /* 文字色を黒にする */\r
}\r
\r
+/* ゲーム本体の見た目 */\r
+\r
tr{\r
- width: 50%;\r
+ width: 50%; /*ゲーム本体の横幅を画面の半分に設定*/\r
}\r
\r
+/* ボックス1つ1つの見た目 */\r
td{\r
- background-color: blue;\r
- margin: 50px;\r
+ background-color: blue; /* 背景の色を青に設定 */\r
+ margin: 50px; /* ボックス同士の空白を画面のドット50個分に設定 */\r
\r
- width: 100px;\r
- height: 100px;\r
+ width: 100px; /* ボックスの幅を画面のドット100個に設定 */\r
+ height: 100px; /* ボックスの高さを画面のドット100個に設定 */\r
\r
- font-size: 20px;\r
- line-height: 20px;\r
+ font-size: 20px; /* ボックス内の文字の大きさをドット20個に設定 */\r
+ line-height: 20px; /* ボックスの1行の高さをドット20個に設定 */\r
}
\ No newline at end of file
OSDN Git Service
