Pulse falsi luci cocooning game with purge's game

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

No:4647

846

←

Prev Next

→

Pulse falsi luci cocooning game with purge
Developer User3796｜Date and time 23/6/28 14:05:36
Build time 31.116 sec｜Game capacity 2.87KB｜

Script

了解しました。以下に、スマホ操作に対応したHTMLファイルで実行されるゲームの例を示します。このゲームは、画面上に表示される虫をタップして倒すというシンプルなアクションゲームです。

このゲームでは、画面上に黄色い虫が表示されます。タップすると虫が倒れ、スコアが加算されます。他の虫もタップして倒すことができます。画面上に表示されるスコアは、タップした虫の数を表しています。このゲームをスマホで開いて、画面をタップして遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Purge the Luci Bugs</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// キャンバスのサイズを画面サイズに合わせる
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// 虫を生成する関数
    function createBug(x, y) {
      const bug = { x, y };
      bugs.push(bug);
    }

// キャンバスをクリックしたときの処理
    canvas.addEventListener("click", function(event) {
      const rect = canvas.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

// クリック位置と虫の距離を計算し、一定以下ならば虫を倒す
      for (let i = 0; i < bugs.length; i++) {
        const bug = bugs[i];
        const distance = Math.sqrt((clickX - bug.x) ** 2 + (clickY - bug.y) ** 2);
        if (distance <= bugRadius) {
          bugs.splice(i, 1);
          score++;
          break;
        }
      }
    });

// ゲームループ関数
    function gameLoop() {
      // 虫を表示する
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < bugs.length; i++) {
        const bug = bugs[i];
        ctx.beginPath();
        ctx.arc(bug.x, bug.y, bugRadius, 0, Math.PI * 2);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
      }

// スコアを表示する
      ctx.font = "24px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 30);

// 更新処理を繰り返す
      requestAnimationFrame(gameLoop);
    }

// ゲーム開始時に初期の虫を生成する
    createBug(canvas.width / 2, canvas.height / 2 - 100);

// ゲームループを開始する
    gameLoop();
  </script>
</body>
</html>
```