【本ページについて】
プログラミング知識ゼロの方でも、こんなゲームが作れるようになります。
なお、各プログラミングの技術に関しては既に語りつくされている感があるので、基本的にはとほほのＷＷＷ入門というサイトを教科書とし、本ページはその教科書を使用した解説授業という感じのものになります。
ただし、本ページの目的は「JavaScriptゲームを製作すること」なので、ＷＷＷ入門の読まなくてよい記事はバンバン飛ばしていきます。
【必要な環境】
・普通のPC
使用アプリ：メモ帳、インターネットブラウザ(chrome等)、メモ帳の代わりにテキストエディタがあると便利(筆者はサクラエディタを使用)
【JavaScriptでゲームを作るメリット】
・ブラウザで遊べるゲームが作れる
ダウンロード形式のゲームに比べて、ブラウザゲームはスグ遊べるので、遊んでもらいやすい
・プログラミング言語の勉強にもなる、ゲーム制作以外にも応用可能
【基礎編】
まずはＷＷＷ入門の「Webページ作成入門(7)」というページを読んで、やってみてください。事前知識ゼロでも学べるページなので、簡単だと思います。
なお、最終章の「ホームページを公開しよう」はやらなくてよいです。JavaScriptゲームの公開は後ほどもっと簡単な方法で行います。
ではいよいよ、JavaScriptを勉強していきたいと思います。ＷＷＷ入門の「JavaScript(39)」というページを開いてください。
ずらーっと項目が並んでいますが、読まなくてはならないページは以下のものだけです。
２.まずは始めてみよう
３.JavaScript の書き方
５.JavaScript の基本文法 （必ず理解しなければならないのは「変数」「文」「コメント」のみ）
６.構文 （必ず理解しなければならないのは「変数宣言(var)」「条件分岐（if）」「条件分岐（switch）」「繰り返し（while）」「繰り返し（do）」「繰り返し（for）」「ループを抜ける（break）」のみ）
７.演算子 （「ビット演算子」以降は読まなくてもＯＫ、ただし「複合代入演算子」は理解しておくと便利かも）
９.イベントハンドラ （「各種イベントハンドラ」以降は適当に流し読みしておけばＯＫ）
１１.数値(Number) （必ず理解しなければならないのは「丸め誤差」のみ）
大体ここまで理解できれば、基礎的な知識はついたと思います。試しに簡単なゲームもどきを制作してみましょう。
ちなみに筆者が作った試作ゲームもどきがコチラ。
右クリック→ページのソースを表示、でソースコードを確認できます。
【応用編】
・バグった？
Google Chromeの場合、「右上の3つの点のボタン(Google Chrome の設定)→その他のツール→デベロッパー ツール」でエラーログの確認ができます。
英語ですが、英文をコピペして検索するとエラーの原因を解説してくれる日本語のwebページが出てきます。
・ゲーム制作をするうえで、既存のゲームのソースコードは非常に参考になります
【各種技術編】
・ちょっとだけ高度な内容ですが、JavaScript(39)の１４.配列(Array)が理解できるとゲーム製作が効率的になります
配列はゲームのデータを管理するのに非常に便利です
LeaderArr = new Array();//０名前、１攻撃力、２防御力
LeaderArr[0] = new Array("ロンメル",4,2);
LeaderArr[1] = new Array("マンシュタイン",3,4);
LeaderArr[2] = new Array("グーデリアン",5,1);
LeaderArr[3] = new Array("ホト",3,3);
LeaderName = new Array();
LeaderAtt = new Array();
LeaderDef = new Array();
for (HenA=0;HenA<=3;HenA++) {
LeaderName[HenA] = AreaArr[HenA][0];
LeaderAtt[HenA] = AreaArr[HenA][1];
LeaderDef[HenA] = AreaArr[HenA][2];
}
マンシュタインの攻撃力を呼び出したい場合、LeaderAtt[1]
例えば以下のようにすれば、全将軍の防御力を+1できます
for (HenA=0;HenA<=3;HenA++) {
LeaderAtt[HenA] += 1;
}
・画像を変更する(実例)
〈img id="GazouNumber1" src="GazouHennkouMAE.png" style="position:absolute; top:10px;left:15px;" width=22 height=14 〉（〈〉は<>に変換）
function GazouHennkou() { document.getElementById("GazouNumber1").src="GazouHennkouGO.png"; }