【JavaScript】リバーシ(オセロ)の作り方を初学者向けに1行づつ解説！①【ゲーム】

勉強の為にJavaScriptでリバーシ(オセロ)を作りたい!

簡単なCPUを実装したい!

という方、初学者向けの解説記事です。
この記事を読めば、下記のようなオセロゲームを作ることができます。

<br /> See the Pen <a href="https://codepen.io/kmb686/pen/VwEPXYG"><br /> オセロ_④</a> by kmb686 (<a href="https://codepen.io/kmb686">@kmb686</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

この記事を読んでできること

・オセロの作り方を理解することができる
・簡単なCPUを実装することができる

対象読者様

①javascriptだけで簡単なゲームを作りたい方
②コードの意味・作り方を理解したい方

上記のような読者様を想定しております。

当記事では javascriptで初めて何かを作りたい方 を想定している為
4つのパートに分けて解説をしていきます。

今回はテーブルと白黒の石を表示させるところまで解説していきます。

<br /> See the Pen <a href="https://codepen.io/kmb686/pen/vYVYexp"><br /> 【JavaScript】オセロ_①</a> by kmb686 (<a href="https://codepen.io/kmb686">@kmb686</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

この記事を読んでできること
対象読者様

概要説明

概要説明

ポイントは3つです。

①html/css を完成させる
②関数 init()/put() を完成させる
③関数 kousin() を完成させる

関数がたくさんでてきて難しく感じる方もいるかと思いますが

①は基本的なhtml/cssのみ
②は当サイトで解説している15パズルの応用で
③にいたってはコピペたった5行の簡単な関数です。
【JavaScript】 15パズルの作り方を初学者向けに1行づつ解説！特別な知識は必要なく、楽しく作ることができます。
順に見ていきましょう。

解説①html/CSSを準備しよう

まず、盤面8×8のマスを作成することを考えましょう。こちらをご覧ください。

画像のように背景(#table)の上にマス目の色(td.masu)を乗せるようにすれば
マス目をきれいに作ることができます。該当コードがこちら

<head>
<meta charset="UTF-8">
<title>オセロ</title>

<script src="main.js"></script>
<style>
  body{
  background-color: black
  }
  h3{
  color:white;
  }
　#table{
　background-color:#555000;
　}
　td.masu{
　background-color:#54b549;
　width:40px;
　height:40px;
　margin:2px;
　font-size:20px;
　text-align:center;
　}
　td.black{
　color:black;
　}
　td.white{
　color:white;
　}
</style>
</head>

<body>
　 <h3 class="white">
      白(YOU)：<span id="countWhite"></span>枚
    </h3>
      <table id="table"></table>
    <h3 class="black">
      黒(CPU)：<span id="countBlack"></span>枚
    </h3>
</body>
</html>

tr.tdはjavascriptで追加しよう

8×8をのtr.td全てhtmlに書くのは手間ですし、ミスがおこりやすいので
<table id="table">のみ記載しています。tr.tdはinit()で<table id="table">子要素として追加します。
また、<span id=”countBlack“><span id=”countWhite“>もinit()関数で扱いますのでこちらも後述致します。

解説②init()/kousin() 関数を作成しよう！

まず、init()関数から解説します。

function init() {
  let table = document.getElementById("table");
  for (let i = 0; i < 8; i++) {
  let yokoretu = document.createElement("tr");
  data[i] = [0, 0, 0, 0, 0, 0, 0, 0];
   for (let j = 0; j < 8; j++) {
   let itimasu = document.createElement("td");
   itimasu.className = "masu";
   itimasu.id = "masu" + i + j;　
　yokoretu.appendChild(itimasu);}
   table.appendChild(yokoretu);
 }
 //初期配置
 put(3, 3, SIRO);
 put(4, 4, SIRO);
 put(3, 4, KURO); 
 put(4, 3, KURO);
 kousin();
}

init()関数

まずはtr：yokoretu/td：itimasuを<table id="table">の子要素として追加します。

もし、for文の中にfor文がよく分からない方は↓のfor文を使おう！をご参考下さい。
【JavaScript】 15パズルの作り方を初学者向けに1行づつ解説！

続いてdata[i] = [0, 0, 0, 0, 0, 0, 0, 0]を設定します。

data[i][j]を座標に見立てます。

これすればitimasu.id = "masu" + i + jで特定の1マスを
data[0][3]やdata[2][6]で表現することができます。

最後にput(3, 3, SIRO)で初期配置の石を置いて終了です。
※参考画像では黒が置かれていますが、白が置かれます※

ということで次はput()についてです。

put()関数

function put(i, j, color) {
  let masu = document.getElementById("masu" + i + j);
  masu.textContent = "●";
 masu.className = "masu " + (color === SIRO　? "white" : "black" );
 data[i][j] = color;
}

このput関数が入る前、全ての座標がdata[0][0]です。
新たに石を置きたい[i][j]を引数に代入します。

まず、変数masuに"masu" + i + jを格納して"●"をtextContentとして代入します。

次にclassNameを設定しますので、置きたい石の色をcolorとして代入します。

白か黒かを(color === SIRO　? "white" : "black" )で判定します。
ポイントはmasu にスペースがあること。

最終的なクラス名が”masu black“か”masu white“となり、色をつけることができます。

最後にkousin()関数で使う為、data[i][j] = colorを設定し完了です。

解説③update() 関数を作成しよう！

これで最後です！もう少し頑張りましょう！

function kousin() {
  //白と黒の数を数えて、表示する
  let countBlack = 0;
  let countWhite = 0;
  for (let x = 0; x < 8; x++) {
    for (let y = 0; y < 8; y++) {
      if (data[x][y] === SIRO) {
      countWhite++;
     if (data[x][y] === KURO) {
     countBlack++;
     }
      }
    }
  }
  document.getElementById("countWhite").textContent = countWhite;
  document.getElementById("countBlack").textContent = countBlack;
}