このブログでは、JavaScriptでブラウザゲームを作る時に参考になる情報をまとめていこうと思っています。
まず最初に、簡単なゲームを作成してブラウザゲームの基本的な構造とプログラミングの流れを理解していこうと思います。
記事の内容は、基本的なHTMLとJavaScriptを理解していることを前提としています。
Webページを作る
JavaScriptはWebページ上で動くプログラミング言語なので、まずWebページを作る必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テンプレート</title>
</head>
<body>
ブラウザ上に表示。
</body>
</html>
決まりごとなので、このひな型を使いまわして作っていきます。
このコードをテキストエディタにコピペします。
ファイル名は何でも良いですが、文字コードは「UTF-8」、拡張子は「.html」にして保存する必要があります。
ブラウザで表示するには、ファイルをブラウザにドラッグ＆ドロップするか、ダブルクリック（またはシングルクリック）します。
JavaScriptを動かす
次に、JavaScriptを動かしてみようと思います。
先程のひな型にscriptタグを追加して、JavaScriptを動かす環境を準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テンプレート</title>
</head>
<body>
ブラウザ上に表示。
<script>
console.log('準備完了');
</script>
</body>
</html>
上記のコードを追加してブラウザをリロードしても画面上は何の変化もありませんが、デベロッパーツールからJavaScriptが動いていることを確認できます。
デベロッパーツールの開き方（Google Chrome）
方法 1
1.ブラウザの画面を右クリックして、「検証」を選択する。
2.開いたウィンドウの上部にある「Console」タブを選択する。
方法 2
1.ブラウザの右上の3つの点が並んでいる部分をクリックします。
2.開いたウィンドウの「その他のツール」-「デベロッパーツール」を選択する。
3.開いたウィンドウの上部にある「Console」タブを選択する。
まとめ
今回はJavaScriptを動かすところまでを簡単に説明しました。
この一連の作業は、JavaScriptプログラミングの基本的なものです。
特に、console.log()というメソッドを使用してのデバッグは、開発中は頻繁に使うことになります。
次回は、ゲームの構造について考えてみたいと思います。