こちらのページは以下の動画の補足説明ページとなります。
  
  初心者が初心者向けにJavaScriptを解説しながらゲームを作っていく動画　001
  
  まずは使用ツールについて
  Visual Studio div https://div.visualstudio.com/ 
  動画冒頭でも説明していますが、入力保管など、Javascript以外でも結構つかえます。
  もちろん、他のエディタや、Windowsなどに標準搭載されているメモ帳などでも問題ありません。
  私はこちらの「自動保存」という機能を有効にしています。
  変更内容が適時更新されますので、大きな作業の前には必ずファイルのバックアップをとりませう。
  
  File Fox https://www.mozilla.org/ja/firefox/new/
  ブラウザに関してはデバッグしやすいというだけでこれを選んでいます。
  第三者へのリリースを目的にしているのであれば、IE、エッジは嫌でも通らないといけないですが。
  
  # HTMLのお約束宣言
  <!DOCTYPE html>
  canvasを扱う上で、HTML5の使用が最低条件となりますが、
  そのための宣言は上記の一文だけでOKです。
  HTML5に対応しているブラウザならこれだけでHTML5と認識してくれます。
  
  HTML5の優れているところは、<script>タグや<style>タグを省略できる点です。
  これはほんとに凄い楽です。
  何度もテストのために宣言文コピペする苦労から(ry
  
  # Hellow Wold！！
  動画内ではおなか一杯と飛ばしていますが、世にいう標準出力のテンプレですね。
  簡単に書けば、以下の文をまるまるコピーしていただければ出ます。
  
<!DOCTYPE html>
  <script>
     document.write("Hellow Wold！！");
  </script>

  これは、[document]と言うオブジェクトの[write]というメゾッドを使用しています。
  documentオブジェクトとはなんぞや？と、
  ここで掘り下げても、こんな情報を必要としているレベルでは混乱するだけですので、
  興味のある方はググってください。
  

  # コメント
  結構大事。
  <script>タグ内では
  // で一行コメント。設定の覚え書き、注釈なんかに便利
  /* ～ */ で複数行コメント。デバッグのための機能をまとめてコメントアウトしたり、
  <style>タグ内もこちら。
  

  キー入力のイベント監視
  やり方はいろいろありますが、一番(?)単純なものを採用したつもりです。
  動画内では以下のように扱っています。
  
window.addEventListener("イベント", イベント発生時に渡す関数, false);

  
  addEventListenerはターゲットの要素のイベントを監視して、第一引数のイベントが発生したら
  第二引数の処理に渡すって感じで覚えておいてたぶん間違いはないです。
  

  # 配列
  宣言
  
var 配列名 = new Array();

  もしくは
  
var 配列名 = [];

  配列とは、順番にデータを入れる箱と思っていただければ。
  以下例
  
var r = new Array();
  r = [0,5,"文字"];
  // 配列の呼び出し。配列は先頭は0から始まる
  document.write(r[0]);  // 0 と表示
  document.write(r[2] + "の場合は\"で囲んでね");  // 文字の場合は"で囲んでね と表示

  

  
  # 関数
  書式は以下の通り
   
function 関数名(引数){
     処理
   }

  
  引数に渡すものがなければ()のみの空でも問題ありません。
  引数は受け取る任意のものですので、自身がわかりやすいものをつけておけば問題ありません。
  動画内では、addEventListenerで発生してキーダウン、アップの処理をeという引数で受け取っています。
  さらにeの要素keyCodeを取り出すことによって、押されたキー、離されたキーを選別しています。
  

  # if 条件分岐
  もしooならば…というある種必須の比較演算です。
  
if ( 条件A == 条件B ){
     上記の条件があうなら処理
  }

  といった書き方になります。
  条件が多岐にわたる場合
  
if ( 条件A == 条件B ){
     処理A;
   } else if ( 条件A < 条件B ){
     処理B;
   } else {
     いずれの条件も該当しなかった場合の処理
   }

  
  例 以下をscriptタグ内に書いて実行してみてください。変数sの値を好きにかえてみてください。
  
var r,s = 2; // 変数の宣言
  if ( s == 1 ){
    r = "答えは１"; // 変数sが1ならrに代入
  } else if (s){
    r = "sは" + s + "です";
     // 最初の条件が合わず、sが有効な変数(空でなければ) 「sは2(変数sの中身)です」と代入
  } else {
   r = "sはただの屍";   // いずれの条件も合わない場合
  }
  document.write(r);  // 変数rを標準出力

  
  

  # for ループ処理
  for文の書き方は多種ありますが、本動画では以下の通りです
  
for ( var i = 0; i < 比較するもの(配列など); i++){
     繰り返す処理
  }

  for文の中にさらにfor文を入れたりなんかは日常茶飯事ですので、使いまくってなれてください。
  
  

  # 001で作成したソース全文は以下です
  
  <!DOCTYPE html>
   <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        // キーイベントの監視
        window.addEventListener( "keydown", keyDownd, false);
        window.addEventListener( "keyup",   keyUpd,   false);

        // 同時押しの時のキー配列
        var addKey = new Array();

        // キーダウン時の関数
        function keyDownd(e){
            var addF = 0 ; // キーが被ってるときのフラグ。剥けない
            for ( var i = 0; i < addKey.length; i++ ){
                if ( e.keyCode == addKey[i] ){ addF++; }
            }
            if ( addF == 0 ){
                addKey.push(e.keyCode);
                putLog(addKey);
            }
        }

        // キーアップ時の関数
        function keyUpd(e){
            for ( var i = 0; i < addKey.length; i++ ){
                if ( e.keyCode == addKey[i] ){ addKey.splice(i, 1); }
            }
            putLog(addKey);
        }

        // ログ出力
        function putLog(Logs){
            document.getElementById("logs").innerHTML = Logs;
        }

        </script>
    </head>
    <body>
        <p>ここに結果がでます>/p>
        <span id="logs"> </span>
    </body>
</html>
topページへ
inserted by FC2 system