The kompeito rains down.'s game

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

No:5659

4772

←

Prev Next

→

The kompeito rains down.
Developer User3834｜Date and time 23/6/30 15:28:28
Build time 30.977 sec｜Game capacity 2.814KB｜

Script

金平糖が降り注ぐゲームを作ってみましょう！

このゲームでは、金平糖が画面上から降りてきます。画面をクリックすると、クリックした金平糖が消えます。金平糖をクリックすると得点が加算されるなど、さらに機能を追加することも可能ですが、以上の実装を含む簡単なゲームを作成しました。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

金平糖が降り注ぐゲームを作ってみましょう！

```
<!DOCTYPE html>
<html>
<head>
  <title>金平糖ゲーム</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script>
    // キャンバスのサイズを取得
    const width = window.innerWidth;
    const height = window.innerHeight;

// キャンバスを作成
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    document.body.appendChild(canvas);

// 金平糖の画像を読み込み
    const candyImage = new Image();
    candyImage.src = 'https://example.com/candy.png';

// 金平糖のマウスクリックイベント
    canvas.addEventListener('click', handleClick);

// 金平糖のオブジェクト
    const candies = [];

// 金平糖を作成する関数
    function createCandy() {
      const candy = {
        x: Math.random() * width,  // 画面上のランダムなx座標
        y: 0,                      // 画面の上端から出現する
        size: Math.random() * 30 + 10  // サイズは10から40のランダム
      };
      candies.push(candy);
    }

// 金平糖をクリックしたときの処理
    function handleClick(event) {
      const clickX = event.clientX;
      const clickY = event.clientY;
      for (let i = 0; i < candies.length; i++) {
        const candy = candies[i];
        if (clickX >= candy.x && clickX <= candy.x + candy.size &&
            clickY >= candy.y && clickY <= candy.y + candy.size) {
          candies.splice(i, 1);  // クリックした金平糖を削除
          break;
        }
      }
    }

// ゲームループ
    function gameLoop() {
      // 金平糖を作成
      createCandy();

// 背景を塗りつぶし
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, width, height);

// 金平糖を描画
      for (let i = 0; i < candies.length; i++) {
        const candy = candies[i];
        ctx.drawImage(candyImage, candy.x, candy.y, candy.size, candy.size);
        candy.y += 1;  // 下に移動させる
        if (candy.y > height) {
          candies.splice(i, 1);  // 画面下端に到達した金平糖を削除
        }
      }

// 次のフレームをリクエスト
      requestAnimationFrame(gameLoop);
    }

// ゲームを開始
    gameLoop();

</script>
</body>
</html>
```

このゲームでは、金平糖が画面上から降りてきます。画面をクリックすると、クリックした金平糖が消えます。金平糖をクリックすると得点が加算されるなど、さらに機能を追加することも可能ですが、以上の実装を含む簡単なゲームを作成しました。