AI game creator

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

No:19979

←

Prev Next

→

ボウリング🎳
Developer バファリンヌ｜Date and time 23/10/7 16:25:46
Build time 19.952 sec｜Game capacity 2.511KB｜

Script

了解しました。以下に、スマートフォンで遊べるボウリングゲームのHTMLファイルを記述します。

このHTMLファイルは、画面中央に表示されるボウリングボールを動かすシンプルなゲームです。ボウリングボールは壁に当たると反射します。ご参考までに、上記のHTMLファイルを保存して任意のブラウザで開くと、ゲームが実行されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解しました。

以下に、スマートフォンで遊べるボウリングゲームのHTMLファイルを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ボウリングゲーム</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
      border: 1px solid #888;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="400"></canvas>
  
  <script>
    // コンストラクタ関数：ボウリングボール
    function BowlingBall(x, y, speedX, speedY) {
      this.x = x;
      this.y = y;
      this.speedX = speedX;
      this.speedY = speedY;
    }
    
    // プロトタイプ関数：ボウリングボールの描画
    BowlingBall.prototype.draw = function() {
      context.beginPath();
      context.arc(this.x, this.y, 20, 0, Math.PI*2, false);
      context.fillStyle = "orange";
      context.fill();
      context.closePath();
    }
    
    // プロトタイプ関数：ボウリングボールの移動
    BowlingBall.prototype.move = function() {
      this.x += this.speedX;
      this.y += this.speedY;
    }
    
    // プロトタイプ関数：ボウリングボールの壁の反射
    BowlingBall.prototype.reflect = function() {
      if (this.x < 20 || this.x > canvasWidth - 20) {
        this.speedX = -this.speedX;
      }
      if (this.y < 20 || this.y > canvasHeight - 20) {
        this.speedY = -this.speedY;
      }
    }
    
    // プロトタイプ関数：ボウリングボールの座標の更新
    BowlingBall.prototype.update = function() {
      this.move();
      this.reflect();
    }
    
    // 初期設定
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

var ball = new BowlingBall(canvasWidth / 2, canvasHeight / 2, 2, 2);

// ゲームループ
    function gameLoop() {
      context.clearRect(0, 0, canvasWidth, canvasHeight);
      ball.draw();
      ball.update();
      requestAnimationFrame(gameLoop);
    }

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

このHTMLファイルは、画面中央に表示されるボウリングボールを動かすシンプルなゲームです。ボウリングボールは壁に当たると反射します。

ご参考までに、上記のHTMLファイルを保存して任意のブラウザで開くと、ゲームが実行されます。