ゲームを作る試み・その２

お世話になっております。坂上です。

今週の更新がなさそうなので僕が書こうと思います。

さて、前回ゲームの自機みたいなものを作ったかと思いますが、そのコードの説明をさせていただきます。まず、main.htmlの方からですが、

<!DOCTYPE html>
これは宣言といって「この文章はHTMLですよ！」という表明です。HTMLはHyperText Markup Languageのことで英語みたいな外国語だと思っていただければよいかと。Languageってついてますし。
<html>
これはそのHTMLの要素であることを表しています。実はこれはこれでXML（eXtensible Markup Language）という言語で書かれてて。。。と言い出すともう無理と読むのをやめられそうなので言いませんが、要は入れ子構造になってます。最後の</html>までがhtml要素と呼ばれるもので、その中に入れ子のように他の要素が入る構造になってます。
例えば
<beleza>
　<sales>
　　<employee>西川</employee>
　</sales>
　<system>
　　<employee>坂上</employee>
　　<employee>上田</employee>
　</system>
</beleza>
といったような感じなのですが、伝わってますでしょうか。伝わってると信じて次に進みます。
<body>
body要素になります。体の名のとおり本体・中身ということですね。本来であれば<head>頭要素というのもあるのですが割愛しております。頭と体って人間みたいですよね。これもhtmlを書く際の決まり文句なのでそういうものかと思っておいてください。
<canvas id=”canvas” width=”500″ height=”500″></canvas>
続いてcanvas要素です。これか今回のミソとなっていて、このcanvasに描画を行っております。実際に前回のゲーム（の自機）を動かしてもらった方にはわかるかと思いますが、右とか下とかに行った際、自機がいなくなってしまったと思います。それはここで指定している高さと幅500を超えてしまったため描画されなくなっていたわけです。要はココの数字を変えれば画面端から端まで黒点となって大冒険することができます。
<script type=”text/javascript” src=”main.js”></script>
これはスクリプト要素と言って、後から説明するjsファイル「main.js」を読み込んでくださいね！ということを表しております。
</body>
ボディ要素の終わりを表しております。
</html>
html要素も閉じて終わりです。