[ドットインストール] はじめてのJavaScript (全11回) - ヤマカサのプログラミング勉強日記

JavaScript

最近、JavaScript の勉強をしているので、ドットインストールでも学んでいきたいと思います。

#08 まで

index.html というファイルにCSS や JavaScript を書いていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Practice</title>
    <style>
      body {
        /* 横並びにする */
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        width: 100px;
        height: 100px;
        background: skyblue;
        /* カーソルを変更 */
        cursor: pointer;
        transition: 0.8s;
        margin: 0 8px 8px 0;
      }
      .circle {
        background: pink;
        border-radius: 50%;
        transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <div id="target1" class="box"></div>
    <div id="target2" class="box"></div>
    <div id="target3" class="box"></div>
    <script>
      'use strict';
      // クリックしたら色が変わる
      const target1 = document.getElementById('target1');
      const target2 = document.getElementById('target2');
      const target3 = document.getElementById('target3');
      target1.addEventListener('click', function() {
        // document.getElementById('target').style.background = 'pink';
        // document.getElementById('target').style.borderRadius = '50%';
        // circle クラスがある場合は外し、ない場合は追加する
        target1.classList.toggle('circle');
      });

      target2.addEventListener('click', function() {
        target2.classList.toggle('circle');
      });
      target3.addEventListener('click', function() {
        target3.classList.toggle('circle');
      });
    </script>
  </body>
</html>

宝さがしゲーム

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Practice</title>
    <style>
      body {
        /* 横並びにする */
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        width: 100px;
        height: 100px;
        background: skyblue;
        /* カーソルを変更 */
        cursor: pointer;
        transition: 0.8s;
        margin: 0 8px 8px 0;
        text-align: center;
        line-height: 100px;
      }
      .win {
        background: pink;
        border-radius: 50%;
        transform: rotate(360deg);
      }
      .lose {
        transform: scale(0.9);
      }
    </style>
  </head>
  <body>
    <script>
      'use strict';
      // 宝探しゲーム
      // クリックしたものが当たりなら Win と出る
      const num = 5;
      const winner = Math.floor(Math.random() * num);
      for(let i = 0; i < 5; i++) {
        const div = document.createElement('div');
        div.classList.add('box');
        if(i == winner) {
          div.dataset.result = 'win';
        } else {
          div.dataset.result = 'lose';
        }
        div.textContent = i;
        div.addEventListener('click', function() {
          if(div.dataset.result == 'win') {
            div.textContent = 'Win!';
            div.classList.add('win');
          } else {
            div.textContent = 'Lose!';
            div.classList.add('lose');
          }
          div.classList.toggle('circle');
        });
        document.body.appendChild(div);
      }
    </script>
  </body>
</html>

感想

JavaFX でゲームを作ろうとしていた時を思い出しました。オブジェクトに機能を持たせていくのが何か似ている感じがしました。