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

今回も、今まで同様パソコンに入っているメモ帳だけを使って、スライドパズルを作っていきたいと思います!

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


今回作るもの

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

前回は、数字を動かせるようにして、ゲームとしてほとんど完成しましたね!

そして今回は、前回まで作ったスライドパズルが色がなくて質素なので、そこにいろいろな色を付けてにしていきたいと思います!

完成イメージはこんな感じ

今回は、ただ色を付けるだけなので、事前に必要となる知識はありません!

最終回なので、ゆっくりと進めていきましょう~


コードを書いていこう!

周りの枠線に色を付けよう!

まずは完成イメージではオレンジ色になっている、周りの線から変えていきましょう。

実は枠線については第一回で説明しています!

なので詳しくは第一回を見てもらえばわかるのですが、枠線の設定は、canvasのタグの中にあります。

下のコードを探してみましょう!

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

この、「border:1px solid black」の部分が、枠線の設定ですね!

あとは、この設定を自分の好きな色と太さにしましょう!
完成イメージと同じにするには、以下のように変えましょう~

<canvas width="400" height="400" style="border:10px solid orange" id="canvas"></canvas>

これで、ゲーム画面の周りにオレンジ色の枠線が表示されるようになるはずです!


数字の色と塗りつぶしの色を変えよう!

次に、数字の色と要らないマスの塗りつぶしの色を変えたいと思います!

塗りつぶしの色を変えるには、下のようなコードを使います!

CONTEXT.fillStyle = "色の名前";

あとは、このコードを塗りつぶすコードの前に書けばOKです。

完成イメージでは、数字の色は青、塗りつぶしの色を赤に変えていました。
なので、実際のコードはこのようになります!

…
CONTEXT.fillStyle = "blue";
CONTEXT.fillText(number[i][j], 50 + j * 100, 70 + i * 100);
…

…
CONTEXT.fillStyle = "red";
CONTEXT.fillRect(x * 100, y * 100, 100, 100);
…

これで数字の色と塗りつぶしの色を変えることができるはずです!

自分好みの色に変えましょう!


数字のフォントを変えよう!

最後に、スライドパズルの数字のフォントを変えましょう!

実はこれも第二回で簡単に説明していました!

フォントの設定は下のコードで行っています!
同じコードを探してみましょう!

CONTEXT.font = "50px serif";

第二回では「serif」という英語のフォントを使ったのですが、ここの文字を好きなフォントに変えればOKです!

完成イメージの例では「MS ゴシック」という日本語のフォントを使いました!

なので、コードはこのようになっています。

CONTEXT.font = "50px 'MS ゴシック'";

*日本語のフォントなど、名前の間にスペースが入るものは「’」で囲まないとうまく認識しないことがあるので注意です!

Wordなどで使えるフォントは、基本的にすべて使えるはずなので、好きなフォントを調べて使ってみましょう!

例と同じようにコードを組んだ方は、下の画像のようになっていれば完成です!

完成!

完成!

ということで、これで「スライドパズル」の完成です!

お友達に遊んでもらうなどいろいろな遊び方をしてみましょう!

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

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

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

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

それでもうまくいかなければ、下のサンプルコードをダウンロードして、自分のコードと比較してみましょう!

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

このブログでは、ほかの方法でゲームを作ったり、様々なゲームの紹介をしています!

なので、良ければぜひほかの記事も読んでみてください!

おすすめの記事:

【超おすすめ】あまり知られていない隠れた神ゲー〈3選〉

みなさんはゲームは好きですか? このブログの運営主のただの大学生は、ゲームが大大好きです。 今まで様々なハードで様々なゲームをプレイしてきました! なので、メチャクチャ有名なゲームから、意外と知られていない無名のゲームを […]

メモ帳プログラミング一覧の記事をお探しの方は、こちらをクリック!

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

Twitter開設しました!

ただの大学生のブログが更新されたときや、様々な情報を載せるためのTwitterを開設しました!ブログの裏側を載せたり、読者の方の質問に応えたりします! TwitterのIDはこちらです。@Daigakusei_blog […]