フルーツバスケットボールシューティング's game

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

No:39289

←

Prev Next

→

フルーツバスケットボールシューティング
Developer ZAXEL｜Date and time 24/1/27 17:56:13
Build time 15.655 sec｜Game capacity 3.011KB｜

Script

了解しました。以下にフルーツバスケットボールシューティングのゲームを実装します。

このゲームでは、スマホのタッチ入力でプレイヤーを左右に移動させて、落ちてくるフルーツをキャッチすると得点が加算されます。フルーツを逃すとゲームオーバーになり、スコアがリセットされます。画面上部には現在のスコアが表示されます。絵文字は特に使っていませんが、画像としてバスケットボールを使用しています。

←

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>Fruit Basketball Shooting</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// キャンバスとコンテキストの取得
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");

// プレイヤーの初期位置
    var playerX = canvas.width / 2;

// フルーツの初期位置とスピード
    var fruitX = Math.random() * (canvas.width - 60);
    var fruitY = 0;
    var fruitSpeed = 3;

// ボールの画像を取得
    var ballImg = document.createElement("img");
    ballImg.src = "basketball.png";

// スマホのタッチ入力でプレイヤーを動かす
    document.addEventListener("touchstart", function(event) {
      if (!isStarted) {
        isStarted = true;
        requestAnimationFrame(update);
      } else {
        var touchX = event.touches[0].clientX;
        playerX = touchX - canvas.offsetLeft - 30;
      }
    });

// ゲームの状態を更新する関数
    function update() {
      // プレイヤーを描画
      ctx.fillStyle = "#0066cc";
      ctx.fillRect(playerX, canvas.height - 60, 60, 60);

// フルーツを描画
      ctx.drawImage(ballImg, fruitX, fruitY, 60, 60);

// ボールが下に移動する
      fruitY += fruitSpeed;

// プレイヤーとフルーツの当たり判定
      if (fruitY > canvas.height - 60) {
        if (Math.abs(playerX - fruitX) < 60) {
          score++;
        } else {
          gameOver();
          return;
        }

fruitX = Math.random() * (canvas.width - 60);
        fruitY = 0;
      }

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

// 次のフレームを描画
      requestAnimationFrame(update);
    }

// ゲームオーバー時に実行される関数
    function gameOver() {
      isStarted = false;
      score = 0;
      fruitX = Math.random() * (canvas.width - 60);
      fruitY = 0;

// ゲームオーバーのメッセージを表示
      ctx.fillStyle = "#ff0000";
      ctx.font = "48px Arial";
      ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
    }
  </script>
</body>
</html>
```