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

という方、初学者向けの解説記事です。

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

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

対象読者様

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

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

今回はその第2回
クリックすると石が置けて、挟めたら石をひっくり返す(の準備)
まで解説していきます。

概要説明

今回は次回の準備となります。

画面に動きがなく、物足りないかもしれませんが、とても重要な箇所です。
今回と次回まで完了すれば、下記が完成しますので頑張りましょうm(__)m

◆ポイント

 if (countWhite > countBlack) {
   alert("白の勝ち")
 }

どんな文字列を表示させるか考えよう

ゲームをしていると色々なメッセージが表示されます。
「敵と出会いました」「GameOver」「アイテムを使いますか?」などなど

では、オセロのゲームをする時に出てきてほしいメッセージを考えてみると…

ざっくりこんなものでしょう。
これを別の関数で判定し、if文でメッセージを個別に用意すればゲームになりそうです。

では、早速メッセージ毎の条件を入力していきましょう。

解説②kousin() に追記しよう

let turnSIRO = canReverce(SIRO);
let turnKURO = canReverce(KURO);


if (countWhite + countBlack === 64 ||　(turnKURO === false && turnSIRO === false)) {
　　if (countWhite > countBlack) {
　　alert("白の勝ち");
　　} else if (countWhite < countBlack) {
　　alert("黒の勝ち");
　　} else {
　　alert("引き分け");
　　}
return;
}


if (turnSIRO === false) {
alert("白スキップ");
myTurn = false;
} else if (turnKURO === false) {
alert("黒スキップ");
myTurn = true;
} else {
myTurn = !myTurn;
}

if (countWhite + countBlack === 64 || (turnKURO === false && turnSIRO===false )) {
　　　ーーーーーーここに処理してほしいことを書くーーーーーーー
　return;}

if (turnSIRO=== false) {
　　　alert("白スキップ");
　　　myTurn = false;
　　　} else if (turnKURO === false) {
　　　alert("黒スキップ");
　　　myTurn = true;
　　　} else {
　　　myTurn = !myTurn; 　　　
　　　}

function touch(a) {
    if (!myTurn) {
    return;
    }
let id = masu.target.id;
let tate = parseInt(id.charAt(4));
let yoko = parseInt(id.charAt(5));
let canReverseMasu = canReverceMasu(tate, yoko, SIRO);

if (canReverseMasu.length > 0) {
    for (let k = 0; k < canReverseMasu.length; k++) {
    put(canReverseMasu[k][0], canReverseMasu[k][1], SIRO);
    }

  put(tate, yoko, SIRO);
  kousin();
  }
}

let id = masu.target.id;
let tate = parseInt(id.charAt(4));
let yoko = parseInt(id.charAt(5));
let canReverseMasu= canReverseMasu(tate, yoko, SIRO);

クリックした要素をlet id = masu.target.idで取得します。
このidは何か思い出してみましょう。

⇒の画像を見てみましょう。
これはタテ:3マス目/ヨコ：5マス目をクリックした時のidを確認したものです。

id = [masu24]　という結果でした。
つまり、クリックした箇所のマス目を特定できるのです。

これを関数にいれてと…できればよいのですが
この方法には問題があります。

parseInt　と　charAt()

id = [masu24] ですが、これは数字ではなく文字として判定されてしまいます。
さらに[masu24]は文字列ですので、ピンポイントで24をそれぞれ抜き出す必要があるのです。

これを実現できるのが「parseInt()」「charAt()」です。

let tate = parseInt(id.charAt(4))

parseInt(●●)
■■.charAt(△△)

parseInt：「●●を整数値に変換しなさい」
■■.charAt(△△)：「■■の△△番目の文字を抜き出しなさい」

これを組み合わせると

「idの4番目の文字を抜き出して、整数値に変換しなさい」

となり、欲しかった24を抜き出して、変数に格納することができるのです。

ひっくり返せるマス目の色を変えよう

if (canReverseMasu.length > 0) {
    for (let k = 0; k < canReverseMasu.length; k++) {
    put(canReverseMasu[k][0], canReverseMasu[k][1], SIRO);
    }
  put(tate, yoko, SIRO);
  kousin();
  }
}