JavaScriptの基本構文でゲームを作る

今日覚えること(30min)



準備、今日使うファイルをダウンロードする(6min)



STEP1. まず最初に・・・

HTMLを編集して、もぐらの画像を表示してみる

  
<img src="images/mogumogu.png">


STEP2. log出力、logの見方

console.logってなに?

ログをChromeのディベロッパーツールで確認してみよう
    
<script>
  console.log("test");
</script>


STEP3. 「document」とは?

JavaScriptでHTML要素(DOMを取得する)

  1. DOMとは?
  1. documentとは?
  1. document.GetElement(s)…

<script>
  // 出力結果を確認しよう
  console.log(document);
</script>

STEP4. 画像リソースを切り替える

document.GetElement(s)…

  1. imgタグにid属性をつけてみる
  1. idを指定して<img … > DOM を取得してみよう

// htmlを修正
<img id="mogura" src="images/mogumogu.png">

// jsを修正
<script>
  let mogura = document.getElementById("mogura");
  console.log(mogura);
</script>