Make a pinball game, with one flipper on each side. When the ball hits the flipper, it bounces.'s game

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

No:7906

460

←

Prev Next

→

Make a pinball game, with one flipper on each side..ALL
Developer アッキー(ニセ)｜Date and time 23/7/10 19:08:54
Build time 19.353 sec｜Game capacity 4.395KB｜

Script

了解しました。こちらがピンボールゲームの実装です。

以上がピンボールゲームの実装です。左右に1つずつフリッパーがあり、ボールがフリッパーに当たると跳ね返ります。ボールが底辺に到達するとゲームオーバーになります。キーボードの左右キーでそれぞれフリッパーを操作することができます。

←

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>
      #game {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        position: relative;
      }
      #ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
      }
      #leftFlipper {
        width: 80px;
        height: 20px;
        background-color: blue;
        position: absolute;
        bottom: 0;
      }
      #rightFlipper {
        width: 80px;
        height: 20px;
        background-color: blue;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="ball"></div>
      <div id="leftFlipper"></div>
      <div id="rightFlipper"></div>
    </div>

// フリッパーの初期位置と角度
      let leftFlipperAngle = 0;
      let rightFlipperAngle = 0;

// フリッパーの回転速度
      const FLIPPER_ROTATION_SPEED = 0.1;

// フリッパーの操作
      function moveLeftFlipper() {
        leftFlipperAngle -= FLIPPER_ROTATION_SPEED;
        document.getElementById("leftFlipper").style.transform =
          "rotate(" + leftFlipperAngle + "deg)";
      }

function moveRightFlipper() {
        rightFlipperAngle += FLIPPER_ROTATION_SPEED;
        document.getElementById("rightFlipper").style.transform =
          "rotate(" + rightFlipperAngle + "deg)";
      }

// フリッパーとボールの当たり判定
      function checkCollision() {
        const ball = document.getElementById("ball");
        const leftFlipper = document.getElementById("leftFlipper");
        const rightFlipper = document.getElementById("rightFlipper");

const ballRect = ball.getBoundingClientRect();
        const leftFlipperRect = leftFlipper.getBoundingClientRect();
        const rightFlipperRect = rightFlipper.getBoundingClientRect();

if (
          ballRect.bottom >= leftFlipperRect.top &&
          ballRect.left >= leftFlipperRect.left &&
          ballRect.right <= leftFlipperRect.right
        ) {
          ballSpeedY = -ballSpeedY;
        }

if (
          ballRect.bottom >= rightFlipperRect.top &&
          ballRect.left >= rightFlipperRect.left &&
          ballRect.right <= rightFlipperRect.right
        ) {
          ballSpeedY = -ballSpeedY;
        }
      }

// 壁とボールの当たり判定
      function checkWallCollision() {
        const ball = document.getElementById("ball");
        const game = document.getElementById("game");

const ballRect = ball.getBoundingClientRect();
        const gameRect = game.getBoundingClientRect();

if (ballRect.left <= gameRect.left || ballRect.right >= gameRect.right) {
          ballSpeedX = -ballSpeedX;
        }

if (ballRect.top <= gameRect.top) {
          ballSpeedY = -ballSpeedY;
        }

if (ballRect.bottom >= gameRect.bottom) {
          alert("ゲームオーバー");
          clearInterval(gameLoop);
        }
      }

// ボールを移動させる
      function moveBall() {
        ballX += ballSpeedX;
        ballY += ballSpeedY;

const ball = document.getElementById("ball");
        ball.style.left = ballX + "px";
        ball.style.top = ballY + "px";

checkCollision();
        checkWallCollision();
      }

// ゲームループ
      const gameLoop = setInterval(moveBall, 10);

// キーボード操作
      document.addEventListener("keydown", function (event) {
        if (event.key === "ArrowLeft") {
          moveLeftFlipper();
        } else if (event.key === "ArrowRight") {
          moveRightFlipper();
        }
      });
    </script>
  </body>
</html>
```