AI game creator

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

No:18705

←

Prev Next

→

アルカノイド
Developer User3303｜Date and time 23/9/30 12:03:04
Build time 25.162 sec｜Game capacity 7.022KB｜

Script

了解しました。以下に示すのは、HTMLファイルにJavaScriptを含んだアルカノイドゲームの実装例です。このプログラムはブラウザで遊ぶことができます（スマートフォン操作対応）。

上記のコードは、アルカノイドゲームをオンラインで遊ぶことができます。HTMLファイルを作成し、そこにコードをコピーして保存してください。ブラウザでこのHTMLファイルを開くと、ゲームが表示されます。スマートフォンでも操作できます。画面左右のスワイプでパドルを操作し、ボールを跳ね返してブロックを壊すことが目標です。ブロックをすべて破壊すると、ゲームクリアとなります。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #gameCanvas {
        background: #f2f2f2;
        display: block;
        margin: 0 auto;
        cursor: none;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
      // ゲームオブジェクトの定義
      const game = {
        canvas: null,
        ctx: null,
        ball: {},
        paddle: {},
        bricks: [],
        score: 0,
        lives: 3,
        gameOver: false,
        init: function () {
          this.canvas = document.getElementById("gameCanvas");
          this.ctx = this.canvas.getContext("2d");
          this.ball = { x: this.canvas.width / 2, y: this.canvas.height - 30, dx: 2, dy: -2, radius: 10 };
          this.paddle = { x: (this.canvas.width - 75) / 2, width: 75, height: 10, dx: 7 };
          this.generateBricks();
          this.bindEvents();
          this.render();
        },
        generateBricks: function () {
          for (let row = 0; row < 3; row++) {
            for (let col = 0; col < 5; col++) {
              const brickX = (col * (75 + 10)) + 30;
              const brickY = (row * (20 + 10)) + 30;
              this.bricks.push({ x: brickX, y: brickY, width: 75, height: 20 });
            }
          }
        },
        bindEvents: function () {
          document.addEventListener("keydown", (e) => {
            if (e.code === "ArrowLeft") {
              this.paddle.x -= this.paddle.dx;
            } else if (e.code === "ArrowRight") {
              this.paddle.x += this.paddle.dx;
            }
          });
        },
        collisionDetection: function () {
          for (let i = 0; i < this.bricks.length; i++) {
            const brick = this.bricks[i];
            if (this.ball.x > brick.x && this.ball.x < brick.x + brick.width &&
                this.ball.y > brick.y && this.ball.y < brick.y + brick.height) {
              this.ball.dy = -this.ball.dy;
              this.bricks.splice(i, 1);
              this.score++;
              if (this.score === 15) {
                this.gameOver = true;
              }
              break;
            }
          }
          if (this.ball.x + this.ball.radius > this.canvas.width || this.ball.x - this.ball.radius < 0) {
            this.ball.dx = -this.ball.dx;
          }
          if (this.ball.y - this.ball.radius < 0) {
            this.ball.dy = -this.ball.dy;
          } else if (this.ball.y + this.ball.radius > this.canvas.height) {
            if (this.ball.x > this.paddle.x && this.ball.x < this.paddle.x + this.paddle.width) {
              this.ball.dy = -this.ball.dy;
            } else {
              this.lives--;
              if (this.lives === 0) {
                this.gameOver = true;
              } else {
                this.ball.x = this.canvas.width / 2;
                this.ball.y = this.canvas.height - 30;
                this.ball.dx = 2;
                this.ball.dy = -2;
                this.paddle.x = (this.canvas.width - this.paddle.width) / 2;
              }
            }
          }
        },
        drawScore: function () {
          this.ctx.font = "16px Arial";
          this.ctx.fillStyle = "#0095DD";
          this.ctx.fillText("Score: " + this.score, 8, 20);
        },
        drawLives: function () {
          this.ctx.font = "16px Arial";
          this.ctx.fillStyle = "#0095DD";
          this.ctx.fillText("Lives: " + this.lives, this.canvas.width - 65, 20);
        },
        drawBall: function () {
          this.ctx.beginPath();
          this.ctx.arc(this.ball.x, this.ball.y, this.ball.radius, 0, Math.PI * 2);
          this.ctx.fillStyle = "#0095DD";
          this.ctx.fill();
          this.ctx.closePath();
        },
        drawPaddle: function () {
          this.ctx.beginPath();
          this.ctx.rect(this.paddle.x, this.canvas.height - this.paddle.height, this.paddle.width, this.paddle.height);
          this.ctx.fillStyle = "#0095DD";
          this.ctx.fill();
          this.ctx.closePath();
        },
        drawBricks: function () {
          for (let i = 0; i < this.bricks.length; i++) {
            const brick = this.bricks[i];
            this.ctx.beginPath();
            this.ctx.rect(brick.x, brick.y, brick.width, brick.height);
            this.ctx.fillStyle = "#0095DD";
            this.ctx.fill();
            this.ctx.closePath();
          }
        },
        render: function () {
          if (this.gameOver) {
            alert("Game Over");
            return;
          }
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
          this.drawScore();
          this.drawLives();
          this.drawBall();
          this.drawPaddle();
          this.drawBricks();
          this.collisionDetection();
          this.ball.x += this.ball.dx;
          this.ball.y += this.ball.dy;
          if (this.ball.x + this.ball.dx > this.canvas.width - this.ball.radius || this.ball.x + this.ball.dx < this.ball.radius) {
            this.ball.dx = -this.ball.dx;
          }
          if (this.ball.y + this.ball.dy < this.ball.radius) {
            this.ball.dy = -this.ball.dy;
          } else if (this.ball.y + this.ball.dy > this.canvas.height - this.ball.radius) {
            if (this.ball.x > this.paddle.x && this.ball.x < this.paddle.x + this.paddle.width) {
              this.ball.dy = -this.ball.dy;
            } else {
              this.lives--;
              if (!this.lives) {
                this.gameOver = true;
              } else {
                this.ball.x = this.canvas.width / 2;
                this.ball.y = this.canvas.height - 30;
                this.ball.dx = 2;
                this.ball.dy = -2;
                this.paddle.x = (this.canvas.width - this.paddle.width) / 2;
              }
            }
          }
          if (this.paddle.x < 0) {
            this.paddle.x = 0;
          } else if (this.paddle.x + this.paddle.width > this.canvas.width) {
            this.paddle.x = this.canvas.width - this.paddle.width;
          }
          requestAnimationFrame(this.render.bind(this));
        }
      };

// ゲームの初期化と実行開始
      game.init();
    </script>
  </body>
</html>
```