AI game creator

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

No:4414

723

←

Prev Next

→

mirror ball
Developer User3727｜Date and time 23/6/27 22:37:18
Build time 71.422 sec｜Game capacity 7.445KB｜

Script

ミラーボールというゲームを作りました。以下が実際のコードです。

このゲームは、ボールをパドルで跳ね返しながら、画面上にあるブロックを壊していくゲームです。スマホでも遊べるよう、スワイプでパドルを操作できるようにしています。絵文字は、ブロックがランダムな色で表示されるようにしています。また、スコアとライフが画面上に表示され、ゲームオーバーになった場合は、大きな文字で「Game Over」と表示します。

←

Prev　Next

→ 　

Back　

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

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

ミラーボールというゲームを作りました。

以下が実際のコードです。

<html>
  <head>
    <title>ミラーボール</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // ゲームデータ
      const data = {
        width: 300,
        height: 500,
        ballRadius: 20,
        ballSpeed: 5,
        paddleWidth: 80,
        paddleHeight: 10,
        paddleSpeed: 5,
        brickWidth: 60,
        brickHeight: 20,
        brickGap: 10,
        bricks: [],
        score: 0,
        lives: 3,
        gameOver: false
      };

// キャンバスの設定
      const canvas = document.getElementById("canvas");
      canvas.width = data.width;
      canvas.height = data.height;
      const context = canvas.getContext("2d");

// ボールの初期位置
      let ballX = data.width / 2;
      let ballY = data.height - data.ballRadius - data.paddleHeight - 10;

// パドルの初期位置
      let paddleX = (data.width - data.paddleWidth) / 2;
      const paddleY = data.height - data.paddleHeight - 5;

// ランダムな色を生成
      function getRandomColor() {
        const colors = ["🔴", "🟡", "🟢", "🔵", "🟣"];
        return colors[Math.floor(Math.random() * colors.length)];
      }

// ブロックオブジェクト
      class Brick {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.color = getRandomColor();
          this.alive = true;
        }

draw() {
          if (this.alive) {
            context.beginPath();
            context.fillStyle = this.color;
            context.fillRect(
              this.x,
              this.y,
              data.brickWidth,
              data.brickHeight
            );
            context.closePath();
          }
        }
      }

// ボールの移動
      function moveBall() {
        if (!data.gameOver) {
          // 壁にぶつかった場合
          if (ballX - data.ballRadius < 0 || ballX + data.ballRadius > data.width) {
            data.ballSpeed = -data.ballSpeed;
          }
          if (ballY - data.ballRadius < 0) {
            data.ballSpeed = -data.ballSpeed;
          }

// パドルにぶつかった場合
          if (ballY + data.ballRadius > paddleY && ballX > paddleX && ballX < paddleX + data.paddleWidth) {
            data.ballSpeed = -data.ballSpeed;
          } else if (ballY + data.ballRadius > data.height) {
            // ライフを減らす
            data.lives--;
            if (data.lives > 0) {
              ballX = data.width / 2;
              ballY = data.height - data.ballRadius - data.paddleHeight - 10;
              paddleX = (data.width - data.paddleWidth) / 2;
            } else {
              // ゲームオーバー
              data.gameOver = true;
            }
          }

// ブロックにぶつかった場合
          for (let i = 0; i < data.bricks.length; i++) {
            const brick = data.bricks[i];
            if (
              ballY - data.ballRadius < brick.y + data.brickHeight &&
              ballY + data.ballRadius > brick.y &&
              ballX > brick.x &&
              ballX < brick.x + data.brickWidth &&
              brick.alive
            ) {
              data.ballSpeed = -data.ballSpeed;
              brick.alive = false;
              data.score++;
            }
          }

ballX += data.ballSpeed;
          ballY -= data.ballSpeed;
        }
      }

// パドルの移動
      function movePaddle(direction) {
        if (!data.gameOver) {
          if (direction === "left") {
            paddleX -= data.paddleSpeed;
          } else if (direction === "right") {
            paddleX += data.paddleSpeed;
          }

if (paddleX < 0) {
            paddleX = 0;
          }
          if (paddleX + data.paddleWidth > data.width) {
            paddleX = data.width - data.paddleWidth;
          }
        }
      }

// ゲームオブジェクトの初期化
      function initGame() {
        // ブロックの初期化
        const rows = 6;
        const cols = Math.floor(data.width / (data.brickWidth + data.brickGap));
        for (let i = 0; i < rows; i++) {
          for (let j = 0; j < cols; j++) {
            const brickX = j * (data.brickWidth + data.brickGap);
            const brickY = i * (data.brickHeight + data.brickGap);
            const brick = new Brick(brickX, brickY);
            data.bricks.push(brick);
          }
        }
      }

// ゲームの描画
      function render() {
        context.clearRect(0, 0, data.width, data.height);

// ボールの描画
        context.beginPath();
        context.fillStyle = "white";
        context.arc(ballX, ballY, data.ballRadius, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();

// パドルの描画
        context.beginPath();
        context.fillStyle = "white";
        context.fillRect(paddleX, paddleY, data.paddleWidth, data.paddleHeight);
        context.closePath();

// ブロックの描画
        for (let i = 0; i < data.bricks.length; i++) {
          const brick = data.bricks[i];
          brick.draw();
        }

// スコアの描画
        context.fillStyle = "white";
        context.font = "16px Arial";
        context.fillText(`Score: ${data.score}`, 5, 20);

// ライフの描画
        context.fillStyle = "white";
        context.font = "16px Arial";
        context.fillText(`Lives: ${data.lives}`, data.width - 70, 20);

// ゲームオーバーの描画
        if (data.gameOver) {
          context.fillStyle = "white";
          context.font = "48px Arial";
          context.fillText("Game Over", data.width / 2 - 120, data.height / 2);
        }
      }

// ゲームの開始
      initGame();
      setInterval(() => {
        moveBall();
        render();
      }, 20);

// スマホ操作
      let touchX;
      let touchY;
      document.ontouchstart = (event) => {
        touchX = event.touches[0].clientX;
        touchY = event.touches[0].clientY;
      };
      document.ontouchmove = (event) => {
        event.preventDefault();
        const deltaX = event.touches[0].clientX - touchX;
        const deltaY = event.touches[0].clientY - touchY;
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            // 右にスワイプ
            movePaddle("right");
          } else {
            // 左にスワイプ
            movePaddle("left");
          }
        }
        touchX = event.touches[0].clientX;
        touchY = event.touches[0].clientY;
      };
    </script>
  </body>
</html>