【初心者向け】第一回 メモ帳だけで ゲーム作ってみた〈ブロック崩し編〉

2021年11月4日

「プログラミングって難しいソフトとか入れないとできないよね？」

そう考えている方はきっと多いはず。

でも実際はそうじゃないんです！

簡単にパソコンに入っているメモ帳ソフトだけでゲームが作れます！

「でもプログラミングって難しいんでしょ…？」

そんなことはありません！

仕組みを理解できればあなたもすぐにプログラマーになれます！
また、このブログで分かりやすく説明しますので一緒に勉強して頑張りましょう！

必要なもの

・パソコン、ただそれだけです！（スマホではできません！ご注意を。）
逆にパソコンさえあれば絶対できます！

・最低限のパソコンの知識
今回はメモ帳やインターネットエクスプローラーなどのブラウザを使っていくので、それらの開き方や保存の仕方、ほかにもキーボードの打ち方など簡単なことをわかっていれば絶対できます！

詳しいことは後回しにして始めよう！

まずはどのパソコンにもあるメモ帳を開きましょう！
Windowsの場合は「メモ帳」と左下の検索バーで検索、Macの場合は「テキストエディタ」を開きましょう！

開けたら、下を真似をしてうってみましょう。

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

</body>
</html>

できたら保存をするのですが、保存の際に注意をしなければいけないことがあります。

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

ファイルの種類を「すべてのファイル」に変更して、ファイル名を「(つけた名前).html」に変更しましょう。そして文字コードは「UTF-8」にしましょう！

そして保存したファイルを右クリックして、「プログラムから開く」から「Chrome」や「Internet Explorer」など自分の使うブラウザで開きましょう！

するとどうなりましたか…？

おそらく真っ白な画面が出てきたでしょう。
それで大丈夫です！

ここで簡単に今書いたものを説明したいと思います。

まず、<（小なり）と >（大なり）で囲まれたものは、タグといわれるもので、

例えば<title>には、英語で「タイトル」とある通りに、ここからがタイトルであるとコンピュータが認識できるようになってあります。

そしてコンピュータがどこまでがタイトルであるかわかるように、</title>というものでタグを閉じています。

つまり、どのタグにも始まり用のものと終わり用のものがあります。
あとはタグを一つ一つ解説していきましょう。

headタグは、今回ならゲームの名前やアイコンなどの情報を書く部分です。
アイコンはまだ設定していないので、タイトルだけですね。

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

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

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

ここの内容は難しいので、完全に理解しなくて大丈夫ですよ‼

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

例えばこんな感じ…

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

（ここからは見やすくするためにスペースを入れますが、入れなくても行けます。）

これでどうなりましたか？

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

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

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

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

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

今回はcanvasというものを使いました。
そしてそれにゲーム画面として表示するので、いまはゲーム画面を作ったということになります。

scriptタグについては最後に詳しく説明しますが、ゲームの画面を動かすためのものだと思ってください。

ですが、白の背景に白いゲーム画面を作ったのでこのままでは見えません。
そのため、ゲーム画面の周りに枠線を引いて見えるようにしましょう。

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

borderというものが「枠線」を英語にしたもので、
その後の1px solid blackというものは、

1pxの太さの線を
solid（＝切れ目のない線）で
black（＝黒色）で引く

というものです。

なので、太くしたければ5pxにしたり、色を変えたければredやblueなどにしてみましょう！

これでブラウザで確認してみると、ゲームの画面が左上に見えてるはずです。

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

最後に今回使ったHTMLについて少し説明して終わりたいと思います。

HTML と Javascript とは？

今回ゲームを作っていく中で、HTMLとJavascriptという2つのものを使っています。

HTMLとは、ウェブページを作るためのものです。つまりあなたが今見ているこのページもGoogleもYouTubeもこれからできています。

それに対してJavascriptは、HTMLを様々な形で動かすことができます。

すごく分かりやすい例を挙げると、操り人形です。

HTMLは人形で、そのままでは動かず、見るだけのものになります。
Javascriptは、操るための仕組みで、HTMLを動かすことが可能になります。

こんな感じ

今回は主にHTMLの設定をしました。
第ニ回以降では主にJavascriptのコードを書いていきたいと思います。

第一回はここまでにしたいと思います。

第二回はこちらから！

長くなってしまいましたが、

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

このブログでは、他にも初心者向けのプログラミングの記事やゲーム紹介の記事を書いていますので、良ければ是非読んでみて下さい！

おすすめ記事：

ブロック崩し,プログラミング,メモ帳,HTML,javascript,初心者

Posted by ただの大学生