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

2020年12月6日

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

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

今回作るもの

前回はオセロを作っていくための準備をしましたね！

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

そして今回はオセロの盤を表示していきたいと思います！

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

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

下準備

前回は、HTMLを使う練習をしましたが、前回のままでは少し不完全だったので、少しだけ修正をしたいと思います！

前回作ったもののままでは、パソコンが正しくHTMLと認識しなかったり、文字化けが起こってしまったりする可能性があるので、それを無くすためのコードを書きたいと思います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Othello</title>
  </head>
  <body>
     <canvas style="border:1px solid black"></canvas>
     <script>
     </script>
  </body>
</html>

どこが変わったかわかるでしょうか？

そうですね！
１行目と４行目に新しいものが追加されています！

（しれっとゲームのタイトルも変えています。ここは好きな名前にしておきましょう。）

簡単に説明すると、

<!DOCTYPE html>

というのは、ブラウザにHTMLであることを認識させることができます。

そして、

<meta charset="utf-8">

そして、これで文字化けを起こさないようにしています。

＊少し難しいですが、ここは全然理解しなくてもOKです！

そしてもう一つ！

<canvas width="400" height="400" id="canvas" style="border:1px solid black"></canvas>

と、canvasタグの中を少し変えましょう！

一つ一つ説明すると…

まず、「width」とは日本語で、「幅」なので、キャンバス（＝ゲーム画面）の横の長さを指し、それに対して「height」は「高さ」なので、キャンバスの縦の長さを指していますね。

それが今回、400（px）：400（px）にしているので、正方形の画面になりますね！

今回はオセロを作るので、正方形の形にしましたが、自分の作るゲームに合わせた大きさにするといいでしょう！

そして、idというのは、その名前の通り、キャンバス（＝ゲーム画面）にIDを振りました。
後でも説明しますが、ゲーム画面に何かを表示させるときに、IDを使って指定するので、その時に必要になってきます！

今回必要になる知識

今回、実際にコードを書いていく上で、知っていた方がいいプログラミング用語が1つだけあります！

それは、変数です！

変数については別の記事で詳しく説明しましたので、そちらを参考にしてください！

【誰でもわかる！】変数とは

プログラミングの勉強を始めたときに最初に学ぶのが、「変数」と呼ばれるものです。 変数を知ることはプログラミング…

コードを書いていこう！

先ほどの下準備や第一回では、第一回でも説明した、HTMLというものを主に書いてきました。

ですが、これからはJavaScriptという、HTMLを動かすためのものを書いていき、

第一回とは少し別のものを作っていくことになるため、書き方がHTMLと変わってきますが、慣れていきましょう！

ゲーム画面の設定

まずは手始めに、JavaScriptがキャンバス（＝ゲーム画面）がどこにあるかわかるように、先ほど指定したIDで教えてあげましょう！

<script>
    const CANVAS = document.getElementById("canvas");
    const CONTEXT = CANVAS.getContext("2d");
</script>

この二行を書き写してみましょう！
（constの左側のスペースは見やすくするために入れているものなので、入れなくても大丈夫です！）

この二行は少し難しいので、完全に理解はしなくても大丈夫ですが、

一行ずつ説明しますと…

const CANVAS = document.getElementById("canvas");

constは、変えることのできない変数でしたね。

「document」は「メモ帳」、「getElementById(～)」は「～とIDが付いたものを探す」、「.」は「の」と訳すと…

「CANVAS」を「メモ帳の中の"canvas"というIDが付いたものにする」といった意味があります。

そして、

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

は、2Dともあるように、「CANVAS（＝ゲーム画面）を2Dの設定にしたものを、CONTEXTとする」といった意味があります。

線を表示させてみよう！

数字の前に、まずは線を表示させてみて練習しましょう！

まずは下の通りに入力してみましょう！

<script>
  const CANVAS = document.getElementById("canvas");
  const CONTEXT = CANVAS.getContext("2d");

  CONTEXT.beginPath();
  CONTEXT.moveTo(0, 0);
  CONTEXT.lineTo(400, 400);
  CONTEXT.stroke();
</script>

一行ずつ説明すると…

CONTEXT.beginPath();

というのは、ここから、CONTEXT（＝ゲーム画面）に「線を書き始めるよー」という指示をしました。

そして次の行の、

CONTEXT.moveTo(0, 0);

で、座標（0, 0）の場所に書き始める場所を指定しました。
（座標については後で解説します。）

そしてその次に、

CONTEXT.lineTo(400, 400);

で、座標（400, 400）の場所を書き終える場所を指定しました。

そして最後の、

CONTEXT.stroke();

で、指定した書き始めの場所から書き終わりの場所まで線を引きました！

これで、Internet ExplorerやChromeなどのブラウザで確認してみましょう！
どうなりましたか？

下の画像のようになっていれば成功です！

ではここで先ほど書いたものの、数字だけ変えてみましょう！

例えば…

CONTEXT.beginPath();
CONTEXT.moveTo(10, 50);
CONTEXT.lineTo(350, 200);
CONTEXT.stroke();

＊数字以外のところは変えないでください！

するとどうなるでしょうか？
ブラウザで確認してみましょう！

上の例のようにしたのなら、下の画像のようになっているはずです！

何度か数字を変えてみて、どのようになるか試してみましょう！

すると、このキャンバスの座標について少しわかるかもしれません。

キャンバスのx座標、y座標はこのようになっています！

いろいろと数字が書いてあったややこしいですが、

座標は（x座標, y座標）の順番で、

x座標の数字を大きくすればするほど右に行く
y座標の数字を大きくすればするほど下に行く

ということですね。

座標空間については中学生のころに習っているはずですが、y軸が逆だったり少し違った点もありますが、慣れましょう！

今回は、下の画像のように、正方形を ８×８ に分けたいと思います。

このマス目を作るには、縦に7本、横に7本の線を引けばいいですね！

線を表示する

では、先ほどの線を書くコードを使って、線を引いていきましょう！

少し長くなりますので、コピペをうまく使って進めましょう！

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();

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

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

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

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

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

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

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

＊２回目以降は「beginPath」が必要ありません。

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

数字がややこしいですので、注意して書きましょう！

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

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

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

それでもうまくいかなかった方のために、サンプルコードを用意しました。
ダウンロードして、自分のコードのどこが間違っているのか、これを見て確認してみてください！

Sample_Gameダウンロード

第二回はここまで！

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

線を引けてマス目が完成すると、少しずつ完成に向かっているのが感じられますね！

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

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

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

第三回はこちらから！

第三回は製作中です。
もう少しお待ちください。

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

Posted by ただの大学生