【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈数独・ナンプレ編〉

2020年11月20日

「プログラミングって難しそうだけど、少しやってみたいな～」

と、プログラミングに少し興味を持ったことがある人は多いと思います。

そんな皆さんに朗報です！

パソコンにもともと入っている「メモ帳」だけを使って、プログラミングを始めることができます！

難しい知識は全く要りません！
是非挑戦して、ゲームを作るという楽しさを体験してみてください！

必要なもの

・パソコン
→パソコンに元々入っているメモ帳を使うので、ほかのソフトは要りません！

・最低限のパソコンの知識
→メモ帳などの開き方や保存の方法がわかっていれば大丈夫です！

このブログを見ることができている時点でパソコンを使いこなせるといえるでしょう！
なので、皆さん必要なものは準備できています！

今回から作っていくゲーム

今回から作っていくゲームは、（タイトルにも書いてありますが…）

数独

を作っていきたいと思います！

プレイしたことがある方も多いんじゃないんでしょうか？

数字を縦や横、9つのマスの中に1から9を被らないように入れていくというパズルゲームですね。

今回から、このゲームをパソコンの「メモ帳」だけを使って作っていきたいと思います！

プログラミングを始めてみよう！

長い説明はここまでにして、実際にメモ帳を使ってプログラミングを始めていきましょう！

まずは、メモ帳を開きましょう！

Windowsの場合は、左下の検索バーに「メモ帳」と入力して開きましょう！
Macの場合は、「テキストエディタ」を開きましょう！

開けたら、下を真似して入力してみましょう！

<html>
<head>
<title>Game</title>
</head>
<body>

</body>
</html>

＊左の数字は見やすくするためのものなので、入力しなくて大丈夫です！

これを入力出来たら、保存していくのですが、少し変わった方法で保存するのでしっかり真似をしましょう！

左上の「ファイル」→「名前を付けて保存」
適当な場所に好きな名前を付けて…

ファイルの種類を「すべてのファイル」に変更して、
ファイル名を「（つけた名前）.html」というものに変更しましょう！
＊文字コードは画像の通りに合わせておいてください

そしたら、保存したファイルを

右クリック→「プログラムから開く」
→「Internet Explorer」や「Chrome」など自分が使うブラウザを選択しましょう！

すると…

真っ白な画面が出てくるはずです！

それで成功です！
まだ何も作っていなので真っ白になります！

ここで、今メモ帳に書いたものを簡単に説明したいと思います！

まず、「<」と「>」に囲まれたもの（例えば、<html>）は、タグと呼ばれます。

例えば、<title>では、英語でタイトルとあるように、ここからがタイトルであるとコンピューターがわかるようにできています。

そして、</title>というもので、タイトルがどこまでなのかがわかるようになっています。

つまり、どのタグにも始め用のものと、終わり用のものがあります。
今回使ったタグを解説します！

headタグは、今回ならゲームの名前やアイコンなどの情報を書く部分です。

titleタグは先ほども書いた通り、タイトルを書く部分です。

bodyタグは、実際の画面に表示されるものであり、今回はゲームの画面を表示させるためのコードをここに書きます。

そしてhtmlタグは、今回HTMLというものを使ってゲームを作っているため、コンピュータがHTMLであると認識できるようにするためのタグです。

さて解説も終わったので、実際に一つbodyタグの中に好きな文章を入れてみましょう！
またタイトルも変えてみましょう！

例えばこんな感じ！

<html>
  <head>
    <title>Simple Game</title>
  </head>
  <body>
    こんにちは！
  </body>
</html>

＊ここからはコードを見やすくするために、左側にスペースを入れますが、入れなくても大丈夫です！

入力した文字がそのまま反映されたと思います。
bodyタグの中に書いたものは画面に、タイトルは上のタブの名前に反映されたはずです。

もしうまくいってなかったらどこかが入力ミスをしているかもしれません。

しっかりチェックしましょう！

ゲーム画面を作る

HTMLの性質を簡単に理解したうえで、
ここからは実際にゲーム画面を作っていきましょう！

先ほど書いたもののbodyタグの中の部分だけ変えますね。

<body>
  <canvas></cannvas>
  <script>

  </script>
</body>

canvasというものをゲーム画面として表示させます！
なので、canvasというタグで、ゲーム画面を作ったことになります！

scriptについては後々説明しますが、ゲーム画面を操作するためにあります。

これで、ゲーム画面を作る事はできたのですが、
真っ白の背景に白色の画面を用意したので、ゲーム画面がこのままでは見えませんね💦

なので、ゲーム画面の周りに枠線を引いて見えるようにしましょう！

<canvas style="border:1px solid black"></canvas>

borderというのは、「枠線」を英語にしたものですねー。

そして、「””」で囲まれたものが、

1px（という単位がパソコンにはあります）の太さの線を、
solid（切れ目のない、ただの線）で
black（黒色）　で引く

といった意味があります！

なので、太くしたければ5pxにしたり、色を変えたければ、「red」や「yellow」などの英語名で入力すればOKです！

これで確認してみると、ゲーム画面が左上に見えているはずですね！

今回のコードを書く作業はここまでにします！

最後に、今回使ったHTMLというものについて簡単に説明して終わりたいと思います！

HTMLとJavaScriptとは？

今回からゲームを作っていく上で、「HTML」と「JavaScript」という2つのものを使っていきます！

HTMLとは、ウェブページを作るためのものです。
つまりあなたが見ているこのページも、GoogleもYouTubeも先ほどあなたが書いたような、<title>や<body>などのタグですべて作られています！

それに対して、JavaScriptは最後に少し書いた「<script>」の部分で、
HTMLを様々な形で動かすことができます！

どういうことか、分かりやすい例を挙げてみましょう！

HTMLとJavaScriptを合わせて、「操り人形」であると考えましょう！

すると、HTMLはただの「人形」で、それだけでは動かず、見せるだけのものになります！

それに対して、JavaScriptは「人形を動かすための糸」になり、HTMLがあることで、操り人形として成り立つことができます！

こんな感じ

HTMLとJavaScriptについて簡単にわかっていただけたでしょうか？

次回からは、ゲーム画面を動かす（＝HTMLを動かす）ために、
JavaScriptのコードを書いていきたいと思います！

第一回はここまで！

今回は数独をこれから作っていくための準備編でした！

次回から本格的に数独を作っていきたいと思います！

今回は説明が多く少し長くなってしまいましたが…

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

感想などあれば、ぜひコメントやTwitterのほうにどしどしお寄せください！

第二回はこちらから！

またこのサイトではほかにもプログラミングやゲームの記事を書いていますので、良ければそちらもぜひ読んでみてください！

おすすめ記事：

数独・ナンプレナンプレ,プログラミング,メモ帳,HTML,javascript,初心者,数独

Posted by ただの大学生