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

No:42334

←

Prev Next

→

ドラえもんのボウリング
Developer User18736｜Date and time 24/2/11 11:21:59
Build time 13.424 sec｜Game capacity 3.949KB｜

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>
      #canvas {
        background-color: #ffffff;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align: center;">ドラえもんのボウリング</h1>
    <canvas id="canvas" width="400" height="600"></canvas>

// ボールの初期位置
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;

// ボールの移動量
      let ballDX = 2;
      let ballDY = -2;

// ボウリングピンの配列
      const pins = [];
      const pinRowCount = 4;
      const pinColumnCount = 5;
      const pinWidth = 75;
      const pinHeight = 20;
      const pinPadding = 10;
      const pinOffsetTop = 30;
      const pinOffsetLeft = 30;

// フレームごとの描画処理
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールを描画
        drawBall();

// ボウリングピンを描画
        drawPins();

// ボールとボウリングピンの当たり判定
        collisionDetection();

// ボールの移動
        updateBallPos();

// 再描画
        requestAnimationFrame(draw);
      }

// ボールを描画する関数
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
        ctx.fillStyle = '#0095DD';
        ctx.fill();
        ctx.closePath();
      }

// ボウリングピンを描画する関数
      function drawPins() {
        for (let c = 0; c < pinColumnCount; c++) {
          for (let r = 0; r < pinRowCount; r++) {
            if (!pins[c] || !pins[c][r]) {
              const pinX =
                c * (pinWidth + pinPadding) + pinOffsetLeft;
              const pinY =
                r * (pinHeight + pinPadding) + pinOffsetTop;
              pins[c] = pins[c] || [];
              pins[c][r] = { x: pinX, y: pinY };
              ctx.beginPath();
              ctx.rect(pinX, pinY, pinWidth, pinHeight);
              ctx.fillStyle = '#0095DD';
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

// ボールの位置を更新する関数
      function updateBallPos() {
        ballX += ballDX;
        ballY += ballDY;

// ボールが画面の端に当たった場合、移動方向を反転する
        if (
          ballX + ballDX > canvas.width - 10 ||
          ballX + ballDX < 10
        ) {
          ballDX = -ballDX;
        }
        if (
          ballY + ballDY > canvas.height - 10 ||
          ballY + ballDY < 10
        ) {
          ballDY = -ballDY;
        }
      }

// ボールとボウリングピンの当たり判定を行う関数
      function collisionDetection() {
        for (let c = 0; c < pinColumnCount; c++) {
          for (let r = 0; r < pinRowCount; r++) {
            const pin = pins[c][r];
            if (pin) {
              if (
                ballX > pin.x &&
                ballX < pin.x + pinWidth &&
                ballY > pin.y &&
                ballY < pin.y + pinHeight
              ) {
                // ボウリングピンとボールが衝突した場合、ピンを削除する
                pins[c][r] = null;
                ballDY = -ballDY;
              }
            }
          }
        }
      }

// スマホ操作に対応
      function handleOrientation(event) {
        ballDX = event.gamma / 50;
      }

// スマホのジャイロセンサーのイベントを受け取る
      window.addEventListener(
        'deviceorientation',
        handleOrientation,
        true
      );

// ゲームを開始する
      draw();
    </script>
  </body>
</html>