Click here for free DL of the app version that can save data.

No:10965

103

A game about a magical girl who changes quickly wh..ALL
Developer User4729｜Date and time 23/8/6 2:25:12
Build time 31.302 sec｜Game capacity 2.413KB｜

了解しました。以下に、光っている間に早着替えをする魔法少女のゲームの実装例を記述します。

光っている間に早着替えをする魔法少女のゲーム

👧

このプログラムでは、`character`というidを持つ要素を取得し、その要素のテキストやスタイルを変更することでゲームを実装しています。`isLightOn`という変数を用意し、ゲーム内で光がついているかを管理しています。 `startGame`関数では、`changeLight`関数を2秒ごとに繰り返し呼び出すように設定しています。`changeLight`関数では、光の状態を切り替えると同時に、光がついている場合には1秒後に衣装を変える処理を呼び出します。`changeClothes`関数では、実際に衣装を変えます。そして、`changeBack`関数では、1秒後に元の衣装に戻します。最後に、`startGame`関数を実行することでゲームが開始されます。ゲーム画面には魔法少女の絵文字と、光りを表現するためのCSSが設定されています。

→ 　

0　

0　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

了解しました。以下に、光っている間に早着替えをする魔法少女のゲームの実装例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>光っている間に早着替えをする魔法少女のゲーム</title>
  <style>
    body {
      text-align: center;
    }
    
    #gameArea {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80vh;
    }
    
    #character {
      font-size: 100px;
      transition: color 1s;
    }
  </style>
</head>
<body>
  <h1>光っている間に早着替えをする魔法少女のゲーム</h1>
  
  <div id="gameArea">
    <div id="character">👧</div>
  </div>
  
  <script>
    const character = document.querySelector('#character');
    let isLightOn = false;

function startGame() {
      setInterval(changeLight, 2000);
    }

function changeLight() {
      isLightOn = !isLightOn;

if (isLightOn) {
        character.style.color = 'yellow';
        setTimeout(changeClothes, 1000); // 1秒後に衣装を変える処理を呼び出す
      } else {
        character.style.color = 'black';
      }
    }

function changeClothes() {
      character.textContent = '👧👚'; // 衣装を変える
      setTimeout(changeBack, 1000); // 1秒後に元の衣装に戻す処理を呼び出す
    }

function changeBack() {
      character.textContent = '👧'; // 元の衣装に戻す
    }

startGame();
  </script>
</body>
</html>
```

このプログラムでは、`character`というidを持つ要素を取得し、その要素のテキストやスタイルを変更することでゲームを実装しています。`isLightOn`という変数を用意し、ゲーム内で光がついているかを管理しています。

`startGame`関数では、`changeLight`関数を2秒ごとに繰り返し呼び出すように設定しています。`changeLight`関数では、光の状態を切り替えると同時に、光がついている場合には1秒後に衣装を変える処理を呼び出します。`changeClothes`関数では、実際に衣装を変えます。そして、`changeBack`関数では、1秒後に元の衣装に戻します。

最後に、`startGame`関数を実行することでゲームが開始されます。ゲーム画面には魔法少女の絵文字と、光りを表現するためのCSSが設定されています。