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

2020年9月9日

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

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

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


今回作るもの

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

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

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

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


今回必要になる知識

今回もコードを書いていく上で必要になってくる、プログラミングの知識が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>

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

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

最初に見たやつ

ちなみに、先ほどの変数「x、y」についてあまりわからなかった人は、

  let x = 2;
  let y = 3;

などに変更してみましょう!

すると下の画像のようになるはず!

次回以降に詳しく説明しますので、今はxとyの値を変えると隠れるマスが変わると覚えておきましょう!

これで、今回の目標であった、要らないマスを塗りつぶすことができました!

今回は主に、前回作ったコードを短くすることをしました!

ちょっと難しかったもしれませんが、これを理解できるようになればあなたもプログラミングマスターになれます!


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

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

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

【初心者向け】 JavaScriptの エラーの直し方

自分が作ったコードがうまく動かないってこと、プログラミングで本当によく起きますよね?私なんて、10回トライして9回エラーでうまくいかないなんてこともよくあります。 でもそんなときどこが間違っているか、自分の目ですべて探す […]

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

ということで、第三回はここまでにします!

次回は、数字をキーボードの入力で動かせるようにしたいと思います!

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

ご感想などあれば、Twitterやコメントにどしどしお寄せください!

第四回はこちらから!