【初心者向け】第三回メモ帳だけでゲーム作ってみた〈スライドパズル編〉

2021年1月30日

1. 今回作るもの
2. 今回必要になる知識
3. コードを書いていこう！
4. うまくいかなかった方向け

今回も、パソコンに入っている「メモ帳」を使って、HTMLとJavaScriptをうまく用いて「スライドパズル」を作っていきたいと思います！

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

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

【初心者向け】第二回メモ帳だけでゲーム作ってみた〈スライドパズル編〉

今回作るもの

前回はスライドパズルの数字を表示させましたね！

準備編
数字を表示させよう！　←前回
要らないマスを塗りつぶそう！　←今回
数字を動かせるようにしよう！
完成させよう！

前回にも少し言った通り、今回は前回まで作ってきたものを、よりスライドパズルっぽくするための調整をしていきたいと思います！

完成イメージは上の画像の通りです！
見ただけでは前回とあまり違いがわからないかもしれませんね笑

今回必要になる知識

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

1つ目が、繰り返しです！
繰り返しについて詳しくまとめた記事があるので、下のリンクを参照してください！

【誰でもわかる！】繰り返しとは

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

今回は配列の発展型の「多次元配列」というものを使うのですが、
これについても別の記事でまとめましたので、ぜひ見てください！

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

コードを書いていこう！

変数を作る

まず初めに、今回のコードを書いていく際に必要になる変数を書いていきましょう！

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

let number = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 10, 11],
  [12, 13, 14, 15]
];

let x = 0;
let y = 0;

…

canvasの設定の後に、上の10行ほどを書きましょう！

numberという変数は、先ほども少し触れた、「多次元配列」というものですね。

コンマの位置や、括弧の位置に気を付けましょう！
（間違わないためにも、コピペでもOKです！）

おさらいですが…

例えば

let c = number[1][2]

とすると、cは6になりますね！

コンピューターが数え始める時に「0」があることに注意しなければいけなかったですよね！

そして、xとyという変数は、最後に要らないマスを塗りつぶす時に使います！

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

前回書いたコードは、すごく縦に長いコードになっていて、見にくいですよね？

そんな時に繰り返しをうまく使えば、きれいにまとめることができます！

まず一つ目に…

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

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

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

をまとめてみます！
これは縦に線を引くコードですね！

これを繰り返しを使うと…

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

このようになります！

今度は横に線を引くコードをまとめてみましょう！

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

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

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

これを先ほどと同じように繰り返しでまとめると…

for (let i = 100; i <= 300; i = i + 100) {
  CONTEXT.moveTo(0, i);
  CONTEXT.lineTo(400, i);
  CONTEXT.stroke();
}

このようにすることができますね！

これをよく見ると、先ほどの縦の線を引くときの繰り返しとほとんど変わらないですよね！

なので、これをまとめて、

for (let i = 100; i <= 300; i = i + 100) {
  CONTEXT.moveTo(i, 0);
  CONTEXT.lineTo(i, 400);
  CONTEXT.stroke();
  
  CONTEXT.moveTo(0, i);
  CONTEXT.lineTo(400, i);
  CONTEXT.stroke();
}

のようにすることができます！

こうすると、前回は30行ほど書いていたコードを9行に収めることができました！

数字を配列を使って表示させる

数字の情報を、変数「number」というところにしまいました！

なので、数字を表示させるコードは以下のように変えることができます！

CONTEXT.fillText(number[0][0], 50, 70);
CONTEXT.fillText(number[0][1], 150, 70);
CONTEXT.fillText(number[0][2], 250, 70);
CONTEXT.fillText(number[0][3], 350, 70);
CONTEXT.fillText(number[1][0], 50, 170);
CONTEXT.fillText(number[1][1], 150, 170);
CONTEXT.fillText(number[1][2], 250, 170);
CONTEXT.fillText(number[1][3], 350, 170);
CONTEXT.fillText(number[2][0], 50, 270);
CONTEXT.fillText(number[2][1], 150, 270);
CONTEXT.fillText(number[2][2], 250, 270);
CONTEXT.fillText(number[2][3], 350, 270);
CONTEXT.fillText(number[3][0], 50, 370);
CONTEXT.fillText(number[3][1], 150, 370);
CONTEXT.fillText(number[3][2], 250, 370);
CONTEXT.fillText(number[3][3], 350, 370);

＊前回は「0」を表示させていませんでしたが、今はとりあえず表示させます。

これを繰り返しにまとめると、下のようになります！

for (let i = 0; i < 4; i++) {
  CONTEXT.fillText(number[i][0], 50, 70 + i * 100);
  CONTEXT.fillText(number[i][1], 150, 70 + i * 100);
  CONTEXT.fillText(number[i][2], 250, 70 + i * 100);
  CONTEXT.fillText(number[i][3], 350, 70 + i * 100);
}

「*」のマークは「×」と同じです！
なので、70 + i * 100は、例えば i が2だったら、70 + 2 × 100 = 270となります！

ですが、これをよく見ると、またまた繰り返しが使えそうな形をしていますよね？

なので、少し形がややこしくて難しいかもしれませんが、こんなこともできちゃいます！

for (let i = 0; i < 4; i++) {
  for (let j = 0; j < 4; j++) {
    CONTEXT.fillText(number[i][j], 50 + j * 100, 70 + i * 100);
  }
}

こうすることで、12行ほどあったコードを5行にすることができましたね！

要らない「0」のマスを塗りつぶす

やっと本題です！

ですが「0」マスを塗りつぶすことはすごく簡単です。

CONTEXT.fillRect(x座標, y座標, 横幅, 縦幅);

「fillRect」というものを使えば簡単にできます。

ですが、次回のために、最初に作った「x、y」という変数を使ってこのコードを書きたいと思います！

次回以降に詳しく説明するので、全然理解しなくて大丈夫です！

最初に作った「x、y」という変数は、下の画像のように使わないマスに対応させた数字に変化させます。

なので、例えば今の6番が入っているマス目を黒で塗りつぶしたかったら、xは2に、yは1になるように設定します。

なので、今回は下のようなコードを書きましょう！

for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      CONTEXT.fillText(number[i][j], 50 + j * 100, 70 + i * 100);
    }
  }
  
  CONTEXT.fillRect(x * 100, y * 100, 100, 100);
  
  
</script>

＊先ほどの数字を表示させるコードも一緒に書いているので注意です！

これで実行するとおそらく下の画像のようになっているでしょう！