【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈スライドパズル編〉
「プログラミングって絶対難しい！」
そう思っている方に言いたい！
そんなことは全くない！
確かに最初は難しいと感じるかもしれませんが、一つのゲームやアプリを作り終えたときには素晴らしい達成感を得ることができます！
そんな達成感を皆さんに知っていただきたいために、今回は…
パソコンに入っているメモ帳を使って
ゲームを作っていきたいと思います！
必要なもの
・パソコン（メモ帳を使うので他のアプリなどは必要ありません！）
・最低限のパソコンの知識
メモ帳やインターネットエクスプローラーなどのブラウザを使ってプログラミングしていくので、それらの開き方や保存の方法がわかっていれば大丈夫です！
今回から作っていくゲーム
今回から作っていくゲームを説明したいと思います。
タイトルにも書いてある通り、
スライドパズル
というのを作っていきたいと思います。
なんだそれと思う人もいるかもしれませんが、画像を見たら絶対に分かります！
これです。
小さいころに遊んだことがある人は多いんじゃないでしょうか？
これをパソコンのメモ帳だけを使って作っていきたいと思います！
プログラミングを始めてみよう！
いきなりですが、実際にメモ帳を使ってプログラミングを始めていきましょう！
まずは、メモ帳を開きましょう！
Windowsの場合は左下の検索バーで「メモ帳」と検索、Macの場合は「テキストエディタ」を開きましょう！
開けたら、下を真似して打ってみましょう！
<html>
<head>
<title>Game</title>
</head>
<body>
</body>
</html>＊左の数字は見やすくするためのものなので、入力しなくて大丈夫です！
これを真似して打てたら、保存をするのですが、保存の際に注意をしなければならないことがあります！
左上の「ファイル」→「名前を付けて保存」
適当な場所に、好きな名前を付けて…
ファイルの種類を「すべてのファイル」に変更して、
ファイル名を「（つけた名前）.html」というものに変更しましょう！
（文字コードは「UTF-8」にしましょう。）
そして保存したファイルを右クリックして、
「プログラムから開く」
→「Internet Explorer」や「Chrome」など自分のブラウザを選択しましょう！
すると…
真っ白な画面が出てくるはずです！
それで大丈夫です！
まだゲーム画面も何も作っていないので、真っ白になっているはず…！
ここで今書いたものを簡単に説明したいと思います。
まず、「<」と「>」に囲まれたもの（例えば「<html>」）というのは、タグといわれるものです。
例えば、<title>には、英語で「タイトル」とあるように、ここからがタイトルであるとコンピューターにが認識できるようになっています。
そして、タイトルがどこまでかわかるように、</title>というもので、タグを閉じています。
つまり、どのタグにも始まり用のものと終わり用のものがあります。
今回使ったタグを簡単に解説します！
headタグは、今回ならゲームの名前やアイコンなどの情報を書く部分です。
titleタグは先ほども書いた通り、タイトルを書く部分です。
bodyタグは、実際の画面に表示されるものであり、今回はゲームの画面を表示させるためのコードをここに書きます。
そしてhtmlタグは、今回HTMLというものを使ってゲームを作っているため、コンピュータがHTMLであると認識できるようにするためのタグです。
さて解説も終わったので、実際に一つbodyタグの中に好きな文章を入れてみましょう！
またタイトルも変えてみましょう！
例えばこんな感じ！
<html>
<head>
<title>Slide Puzzle</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も先ほどあなたが書いたようなタグですべて作られています！
それに対して、JavaScriptは最後に少し書いた「<script>」の部分で、
HTMLを様々な形で動かすことができます！
どういうことか、分かりやすい例を挙げてみましょう！
HTMLとJavaScriptを合わせて、「操り人形」であると考えましょう！
すると、HTMLはただの「人形」で、それだけでは動かず、見せるだけのものになります！
それに対して、JavaScriptは「人形を動かすための糸」になり、HTMLがあることで、操り人形として成り立つことができます！
HTMLとJavaScriptについて簡単にわかっていただけたでしょうか？
次回からは、ゲーム画面を動かす（＝HTMLを動かす）ために、JavaScriptのコードを書いていきたいと思います！
今回はここまで！
今回はスライドパズルを作るための準備編でした！
次回から本格的にスライドパズルを作っていきたいと思います！
いろいろと説明が多い回でしたが、
最後まで読んでいただきありがとうございます！
感想などあれば、ぜひコメントやTwitterのほうにどしどしお寄せください！
第二回はこちらから！
