Parents! A girl from the sky!'s game

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

No:9244

3409

←

Prev Next

→

Parents! A girl from the sky!
Developer User4321｜Date and time 23/7/22 23:23:50
Build time 18.068 sec｜Game capacity 2.048KB｜

Script

空から降ってきた子供を救うゲームを作りましょう。以下が実装例です。

👧

このゲームでは、空の背景に女の子（絵文字で表現）が降ってきます。プレイヤーは女の子をタップして、地面に到達させることでスコアを獲得します。女の子が画面外に消えてしまうとゲームオーバーで、スコアが表示されます。再度プレイする場合はページをリロードしてください。注意: 絵文字の表示が正しく行われない場合、ブラウザや環境によっては絵文字の対応が不十分な可能性があります。その場合は絵文字を適切な画像ファイルに置き換えてください。

←

Prev　Next

→ 　

Back　

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

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

空から降ってきた子供を救うゲームを作りましょう。以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>空から女の子が！</title>
  <style>
    #sky {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: lightblue;
    }
    #girl {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 3rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="sky">
    <div id="girl">👧</div>
  </div>

function dropGirl() {
      const girlPosition = girl.offsetTop;
      girl.style.transition = 'top 1s';
      girl.style.top = '100vh';

if (girlPosition > window.innerHeight) {
        endGame();
      } else {
        score++;
        updateScore();
        resetGirl();
      }
    }

function resetGirl() {
      girl.style.transition = 'none';
      girl.style.top = '0';
      girl.style.left = `${Math.random() * 80 + 10}%`;
    }

function updateScore() {
      girl.textContent = `👧 ${score}`;
    }

function endGame() {
      girl.removeEventListener('click', dropGirl);
      alert(`Game Over! Score: ${score}`);
    }

girl.addEventListener('click', dropGirl);
  </script>
</body>
</html>
```

このゲームでは、空の背景に女の子（絵文字で表現）が降ってきます。プレイヤーは女の子をタップして、地面に到達させることでスコアを獲得します。女の子が画面外に消えてしまうとゲームオーバーで、スコアが表示されます。再度プレイする場合はページをリロードしてください。

注意: 絵文字の表示が正しく行われない場合、ブラウザや環境によっては絵文字の対応が不十分な可能性があります。その場合は絵文字を適切な画像ファイルに置き換えてください。