空から降ってくる女の子を少年がキャッチするゲーム's game

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

No:22802

←

Prev Next

→

空から降ってくる女の子を少年がキャッチするゲーム
Developer バファリンヌ｜Date and time 23/10/25 5:52:20
Build time 69.06 sec｜Game capacity 3.467KB｜

Script

以下は、空から降ってくる女の子を少年がキャッチするゲームの実装例となります。スマートフォンで遊ぶことを前提にしており、絵文字も使用しています。

上記のコードをHTMLファイルとして保存し、スマートフォンのブラウザで開くことでゲームが遊べます。少年をスマートフォン上で動かすことができ、女の子をキャッチすることでスコアが加算されます。

←

Prev　Next

→ 　

Back　

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

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

以下は、空から降ってくる女の子を少年がキャッチするゲームの実装例となります。スマートフォンで遊ぶことを前提にしており、絵文字も使用しています。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-size: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <script>
    var score = 0;
    var scoreText;

function onload() {
      // プレイヤーの初期位置
      var playerX = window.innerWidth / 2;
      var playerY = window.innerHeight - 100;

// プレイヤーの作成
      var player = document.createElement('span');
      player.innerHTML = '👦';
      player.style.position = 'fixed';
      player.style.left = playerX + 'px';
      player.style.top = playerY + 'px';
      player.style.transform = 'translate(-50%, -50%)';
      document.body.appendChild(player);

// スコア表示の作成
      scoreText = document.createElement('div');
      scoreText.style.position = 'fixed';
      scoreText.style.left = '50%';
      scoreText.style.top = '10px';
      scoreText.style.transform = 'translateX(-50%)';
      scoreText.style.color = 'white';
      scoreText.style.fontFamily = 'Arial, sans-serif';
      scoreText.style.fontSize = '30px';
      scoreText.innerHTML = 'Score: ' + score;
      document.body.appendChild(scoreText);

// イベントリスナーの追加
      document.addEventListener('mousemove', movePlayer);

// 女の子を降らせる
      setInterval(createGirl, 1000);
    }

function movePlayer(event) {
      // プレイヤーの位置を更新
      var player = document.getElementsByTagName('span')[0];
      var playerX = event.clientX;
      player.style.left = playerX + 'px';
    }

function createGirl() {
      // 女の子の初期位置
      var girlX = Math.floor(Math.random() * window.innerWidth);
      var girlY = 0;

// 女の子の作成
      var girl = document.createElement('span');
      girl.innerHTML = '👧';
      girl.style.position = 'fixed';
      girl.style.left = girlX + 'px';
      girl.style.top = girlY + 'px';
      girl.style.transform = 'translateX(-50%)';
      document.body.appendChild(girl);

// 女の子の落下アニメーション
      var interval = setInterval(function() {
        if (girlY >= window.innerHeight) {
          clearInterval(interval);
          girl.remove();
        } else {
          girlY += 10;
          girl.style.top = girlY + 'px';

// プレイヤーと女の子の衝突判定
          var player = document.getElementsByTagName('span')[0];
          var playerX = parseInt(player.style.left.replace('px', ''));
          var playerY = parseInt(player.style.top.replace('px', ''));
          if (girlX >= playerX - 50 && girlX <= playerX + 50 && girlY >= playerY - 50 && girlY <= playerY + 50) {
            girl.remove();
            score++;
            scoreText.innerHTML = 'Score: ' + score;
          }
        }
      }, 50);
    }

window.addEventListener('load', onload);
  </script>
</body>
</html>
```

上記のコードをHTMLファイルとして保存し、スマートフォンのブラウザで開くことでゲームが遊べます。少年をスマートフォン上で動かすことができ、女の子をキャッチすることでスコアが加算されます。