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

2021年1月30日

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

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

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

今回も、パソコンに入っている「メモ帳」だけを使って、HTMLとJavaScriptを駆使して「スライドパズル」…

今回作るもの

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

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

コードを書いていこう！

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

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

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

<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";

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

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

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

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

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

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

完成！

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

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

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

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

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

自分が作ったコードがうまく動かないってこと、プログラミングで本当によく起きますよね？私なんて、10回トライして…

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

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

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

おすすめの記事：

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

みなさんはゲームは好きですか？ このブログの運営主のただの大学生は、ゲームが大大好きです。 今まで様々なハード…

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

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