【初心者向け】第三回 メモ帳だけでゲーム作ってみた〈オセロ編〉

2020年12月6日

今回も、パソコンに入っている「メモ帳」を使って、オセロを作っていきたいと思います！

今回から、様々なプログラミングの知識を使って進めていくので、少しだけ難しく感じるかもしれませんが、軽く理解できたら十分なので、最後頑張っていきましょう！

前回の記事をまだ読んでいない方は、是非こちらを先に読んでください！

今回作るもの

前回は、オセロの盤を表示させましたね！

  1. 準備編
  2. オセロの盤を表示させよう！　←前回
  3. オセロの駒を表示させよう！　←今回
  4. キー入力で動かせるようにしよう！
  5. キー入力で駒を置けるようにしよう！
  6. 駒が裏返るようにしよう！

そして、今回はオセロの駒を表示させるコードを書いていきたいと思います！

完成イメージは以下の通りです！

操作はまだできませんが、オセロっぽくなってきていますね！

是非最後まで読んでみて下さい！

今回必要になる知識

今回、コードを書いていくうえで必要になってくるプログラミングの知識が２つほどあります。

１つ目が、繰り返しです。

今回は繰り返しを頻繁に使うので、要チェックです！

そして２つ目が、配列です！

今回は配列を１個だけ使いますが、繰り返しとうまく混ぜて使っていくので、こちらも要チェックです！

【誰でもわかる！】配列とは

皆さんは「配列」という言葉を聞いたことはありますか？ プログラミングを学習していくうえで、たまに使う程度かもし…

コードを書いていこう！

では今回もさっそくコードを書いていきましょう！

今回は、繰り返しと配列をうまく使ってコードを書いていくので少し難しく感じるかもしません。

ですが、理解に時間がかかりそうなら次に進めましょう！

プログラミングでは同じようなコードをよく使うので、またいつか同じようなコードを使うときに深く理解すればOKです！

気軽に進めていきましょう！

繰り返しを使ってまとめる

前回書いた線を表示するコードは非常に長いコードになっていて見にくいですよね？

そんな時に繰り返しが使えるんです！

駒を表示する前に線のコードを繰り返しでまとめる練習をしてみましょう！

まず初めに、前回書いたこちらのコードをまとめてみます！

CONTEXT.beginPath();

CONTEXT.moveTo(50, 0);
CONTEXT.lineTo(50, 400);
CONTEXT.stroke();

CONTEXT.moveTo(100, 0);
CONTEXT.lineTo(100, 400);
CONTEXT.stroke();

CONTEXT.moveTo(150, 0);
CONTEXT.lineTo(150, 400);
CONTEXT.stroke();

CONTEXT.moveTo(200, 0);
CONTEXT.lineTo(200, 400);
CONTEXT.stroke();

CONTEXT.moveTo(250, 0);
CONTEXT.lineTo(250, 400);
CONTEXT.stroke();

CONTEXT.moveTo(300, 0);
CONTEXT.lineTo(300, 400);
CONTEXT.stroke();

CONTEXT.moveTo(350, 0);
CONTEXT.lineTo(350, 400);
CONTEXT.stroke();

これは線を縦に引くコードですね！

これをよく見ると、x座標が50ずつ増えて行っていますね！

なので、50ずつ増えていく繰り返しを使います。

CONTEXT.beginPath();
for (let i = 50; i <= 350; i = i + 50) {
 CONTEXT.moveTo(i, 0);
 CONTEXT.lineTo(i, 400);
 CONTEXT.stroke();
}

このような感じですね！

おさらいですが、forの中の括弧は

i は最初50、i は350以下の時に繰り返す、i は50ずつ増やす

という意味がありましたね。

では次に線を横に引くコードも繰り返しを使ってみます。

先ほどのものをy座標が変わるようにfor文を書けばいいんですが、実はこんな書き方もできます。

CONTEXT.beginPath();
for (let i = 50; i <= 350; i = i + 50) {
 CONTEXT.moveTo(i, 0);
 CONTEXT.lineTo(i, 400);
 CONTEXT.stroke();
 
 CONTEXT.moveTo(0, i);
 CONTEXT.lineTo(400, i);
 CONTEXT.stroke();
}

上半分が、先ほど書いた縦の線を引くコードで、下半分が横に線を引くコードとなっています。

これで前回書いた60行ほどのコードが10行にまとめることが出来ました！

繰り返しって便利ですね！

変数を作る

では次に、今回駒を表示させるコードを書いていくのに必要になってくる変数を作っていきます！

…
const CONTEXT = CANVAS.getContext("2d");

let field = [
 ["", "", "", "", "", "", "", ""],
 ["", "●", "", "", "", "", "", ""],
 ["", "", "", "", "", "", "", ""],
 ["", "", "", "〇", "●", "", "", ""],
 ["", "", "", "●", "〇", "", "", ""],
 ["", "", "", "", "", "", "", ""],
 ["", "", "〇", "", "", "", "", ""],
 ["", "", "", "", "", "", "", ""]
];

＊「,」や「;」の位置に気を付けてください！
　うまく動かなければ、ここのタイプミスの可能性が高いです！

「field」という多次元変数を作りました。

中身を見て下さればわかると思いますが、ここに駒がどこに置かれているかという情報を入れていきます。

多次元配列の中身を見れば、完成イメージと同じになっていることが分かりますね！

もちろん、「""」と中に何も入っていない部分は、駒が置かれていない場所を指しますね！

駒を表示させる

では本題です。

先ほど作った多次元配列に入っている駒を盤面に表示させましょう。

多次元配列の中に入っている要素を取り出す方法を覚えていますか？

例えば左上の黒い駒を取り出すには、

field[1][1]

とするんでしたよね！

コンピュータが数字を数えるときには、「0」から始まることが大事でしたね。

ではまず初めに、何も考えずに下の３行を書き写してみましょう。

 CONTEXT.stroke();
}
…（線を引くコードの続き）…

CONTEXT.font = "40px serif";
CONTEXT.textAlign = "center";
CONTEXT.fillText(field[1][1], 75, 90);

すると、左上に黒い駒が表示されたはずです！

１つ目の

CONTEXT.font = "30px serif";

というのは、

40pxの文字の大きさで、「serif」というフォントで表示させる、といった意味があります。

今回はあらかじめ私が大きさをはかって、40がちょうどなのを見つけました。

そして２つ目の、

CONTEXT.textAlign = "center";

は、textAlignは文字位置を決めていて、今回は「center」なので中央にしています。

つまり文字位置が中央（＝center）で、

「●」がマスの真ん中に来るようになっています

そして最後の

CONTEXT.fillText(field[1][1], 75, 90);

括弧の中は、

fillText(表示させるもの, x座標, y座標 )

といった意味を持っています。

x座標とy座標も私があらかじめいい場所に来る数値を調べて、この上の数値になっています。

前回に座標の話をしたので、少し忘れている方は復習をしておきましょう。

これで黒い駒を表示できましたね！

あとは、今１マスの表示が出来ましたが、あと63マスに（何もないマスにも同じようなコードを書くので）このようなコードを書かないといけません。

これもまた面倒くさいですよね。

そんな時に繰り返しです！

いきなり答えのコードを書くので、少し考え方はスクロールを止めましょう！

CONTEXT.font = "40px serif";
CONTEXT.textAlign = "center";
for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    CONTEXT.fillText(field[i][j], 25 + 50 * j, 40 + 50 * i);
  }
}

繰り返しの中に繰り返しが入っていますね。

これでブラウザで確認すれば、完成イメージと同じになっているはずです。

このコードを完全に理解するのは少し難しいと思いますが、ゆっくり考えてみましょう！

また、完全に理解する必要はありませんが、なんで「i」や「j」がその場所に入るのか程度は理解できるようになりましょう！

うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう！

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください！

前回同様うまくいかなかった方のために、サンプルコードを用意しました！
ダウンロードして、自分のコードと比較してみましょう！

Sample_Gameダウンロード

第三回はここまで！

ということで第三回はここまでとします！

オセロっぽくなってきましたね！

次回は、キーボード入力で動かせるポインターを作っていきたいと思います！

長くなってしまいましたが、

最後まで読んでいただきありがとうございました！

第四回はこちらから！

第四回は準備中です。
もう少しお待ちください。

オセロオセロ,プログラミング,メモ帳,HTML,javascript,初心者

Posted by ただの大学生