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

No:7478

748

←

Prev Next

→

soap spray
Developer User3997｜Date and time 23/7/8 0:24:34
Build time 19.058 sec｜Game capacity 2.509KB｜

Script

了解しました。以下にシャボン玉を割るゲームの例を示します。

シャボンスプレー

上記の例では、`<canvas>` 要素を使ってゲーム画面を作成し、シャボン玉が画面内を跳ね回る様子を描画しています。`mousedown` イベントでシャボン玉を割る操作を実装しています。シャボン玉をタッチすると、シャボン玉の半径が減少します。このゲームはスマートフォンでも遊ぶことができます。

←

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>
  html, body {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FCF3CF;
  }
</style>
</head>
<body>
  <h1>シャボンスプレー</h1>
  <canvas id="gameCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("gameCanvas");
  var context = canvas.getContext("2d");

// シャボン玉の情報を格納するオブジェクト
  var bubble = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 40,
    speedX: 2,
    speedY: -2,
  };

// ゲームループ
  function gameLoop() {
    update();
    draw();

requestAnimationFrame(gameLoop);
  }

// ゲームの状態を更新
  function update() {
    bubble.x += bubble.speedX;
    bubble.y += bubble.speedY;

// シャボン玉が画面外に出た場合、反転する
    if (bubble.x + bubble.radius > canvas.width || bubble.x - bubble.radius < 0) {
      bubble.speedX *= -1;
    }
    if (bubble.y + bubble.radius > canvas.height || bubble.y - bubble.radius < 0) {
      bubble.speedY *= -1;
    }
  }

// ゲームの画面を描画
  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

context.beginPath();
    context.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2);
    context.fillStyle = "#FF69B4";
    context.fill();
    context.closePath();
  }

// タッチ操作でシャボン玉を割る
  canvas.addEventListener("touchstart", function(event) {
    var touchX = event.touches[0].clientX;
    var touchY = event.touches[0].clientY;

// タッチされた座標がシャボン玉内か判定
    var distance = Math.sqrt((bubble.x - touchX) ** 2 + (bubble.y - touchY) ** 2);
    if (distance < bubble.radius) {
      bubble.radius -= 5; // シャボン玉の半径を減少させる
    }
  });

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

上記の例では、`<canvas>` 要素を使ってゲーム画面を作成し、シャボン玉が画面内を跳ね回る様子を描画しています。`touchstart` イベントでシャボン玉を割る操作を実装しています。シャボン玉をタッチすると、シャボン玉の半径が減少します。

このゲームはスマートフォンでも遊ぶことができます。