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

No:11906

←

Prev Next

→

Perseids
Developer User4522｜Date and time 23/8/13 3:29:23
Build time 21.673 sec｜Game capacity 2.252KB｜

Script

了解しました。以下にプログラムの例を示します。

ペルセウス座流星群

スマホの画面をタップして流星を発射し、できるだけ多くの流星を見つけましょう！

このプログラムは、流星をタップして発射するゲームです。画面上のどこかをタップすると、ランダムなサイズとスピードで流星が流れていきます。流れていった流星は画面外に出たら削除されます。画面上に流れている流星の数が得点となります。スマホのブラウザで上記のHTMLファイルを開くと、ゲームとしてプレイすることができます。JavaScriptの処理は実行開始され、流星が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下にプログラムの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ペルセウス座流星群</title>
</head>
<body>
  <h1>ペルセウス座流星群</h1>
  <p>スマホの画面をタップして流星を発射し、できるだけ多くの流星を見つけましょう！</p>
  <canvas id="canvas" width="500" height="500"></canvas>

// 流星を表すクラス
    class Meteor {
      constructor(x, y, size, speed) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.speed = speed;
      }

update() {
        this.y += this.speed;
        if (this.y > canvas.height + this.size) {
          // 流星が画面外に出たら削除
          meteors.splice(meteors.indexOf(this), 1);
        }
      }

draw() {
        ctx.fillStyle = 'white';
        ctx.fillRect(this.x, this.y, this.size, this.size);
      }
    }

const meteors = [];

// マウスクリック時のイベントリスナー
    canvas.addEventListener('click', (event) => {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const meteor = new Meteor(x, y, Math.random() * 20 + 10, Math.random() * 2 + 1);
      meteors.push(meteor);
    });

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

meteors.forEach((meteor) => {
        meteor.update();
        meteor.draw();
      });

requestAnimationFrame(gameLoop);
    }

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

このプログラムは、流星をタップして発射するゲームです。画面上のどこかをタップすると、ランダムなサイズとスピードで流星が流れていきます。流れていった流星は画面外に出たら削除されます。画面上に流れている流星の数が得点となります。

スマホのブラウザで上記のHTMLファイルを開くと、ゲームとしてプレイすることができます。JavaScriptの処理は実行開始され、流星が表示されます。