😋←これがプレイヤーの食べ物絵文字ブロック崩し's game

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

No:20673

←

Prev Next

→

😋←これがプレイヤーの食べ物絵文字ブロック崩し
Developer User9126｜Date and time 23/10/10 17:09:21
Build time 37.602 sec｜Game capacity 4.93KB｜

Script

了解しました。以下は、HTMLファイルに実装されたJavaScriptを含むブロック崩しゲームのサンプルコードです（スマホ操作には対応していません）。

このコードをHTMLファイルに保存し、ウェブブラウザで開くと、ブロック崩しゲームがプレイできます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下は、HTMLファイルに実装されたJavaScriptを含むブロック崩しゲームのサンプルコードです（スマホ操作には対応していません）。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #canvas {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

draw(ctx) {
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }

get top() {
        return this.y;
      }

get bottom() {
        return this.y + this.height;
      }

get left() {
        return this.x;
      }

get right() {
        return this.x + this.width;
      }
    }

// パドルを表すクラス
    class Paddle extends GameObject {
      constructor(x, y, width, height, speed) {
        super(x, y, width, height);
        this.speed = speed;
      }

moveLeft() {
        this.x -= this.speed;
        if (this.x < 0) {
          this.x = 0;
        }
      }

moveRight() {
        this.x += this.speed;
        if (this.x + this.width > canvas.width) {
          this.x = canvas.width - this.width;
        }
      }
    }

// ボールを表すクラス
    class Ball extends GameObject {
      constructor(x, y, radius, speedX, speedY) {
        super(x, y, radius * 2, radius * 2);
        this.radius = radius;
        this.speedX = speedX;
        this.speedY = speedY;
      }

move() {
        this.x += this.speedX;
        this.y += this.speedY;

if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
          this.speedX = -this.speedX;
        }

if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
          this.speedY = -this.speedY;
        }
      }
    }

// ブロックを表すクラス
    class Block extends GameObject {
    }

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

const paddle = new Paddle(160, 380, 80, 10, 6);
    const ball = new Ball(200, 200, 10, 3, -3);
    const blocks = [];
    const blockRowCount = 3;
    const blockColumnCount = 5;
    const blockWidth = 75;
    const blockHeight = 20;
    const blockPadding = 10;
    const blockOffsetTop = 30;
    const blockOffsetLeft = 30;

for (let c = 0; c < blockColumnCount; c++) {
      for (let r = 0; r < blockRowCount; r++) {
        const blockX = (c * (blockWidth + blockPadding)) + blockOffsetLeft;
        const blockY = (r * (blockHeight + blockPadding)) + blockOffsetTop;
        const block = new Block(blockX, blockY, blockWidth, blockHeight);
        blocks.push(block);
      }
    }

function drawPaddle() {
      paddle.draw(ctx);
    }

function drawBall() {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
    }

function drawBlocks() {
      blocks.forEach((block) => {
        block.draw(ctx);
      });
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawPaddle();
      drawBall();
      drawBlocks();
    }

function update() {
      ball.move();

if (ball.bottom >= paddle.top && ball.right >= paddle.left && ball.left <= paddle.right) {
        ball.speedY = -ball.speedY;
      }

blocks.forEach((block) => {
        if (ball.bottom >= block.top && ball.top <= block.bottom && ball.right >= block.left && ball.left <= block.right) {
          ball.speedY = -ball.speedY;
          const index = blocks.indexOf(block);
          blocks.splice(index, 1);
        }
      });

paddle.moveLeft();
      paddle.moveRight();
    }

function loop() {
      update();
      draw();
      requestAnimationFrame(loop);
    }

function handleTouchMove(event) {
      event.preventDefault();

const touch = event.touches[0];
      const touchX = touch.pageX - canvas.offsetLeft;
      
      if (touchX < canvas.width / 2) {
        paddle.moveLeft();
      } else {
        paddle.moveRight();
      }
    }

canvas.addEventListener("touchstart", handleTouchStart);
    canvas.addEventListener("touchmove", handleTouchMove);

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

このコードをHTMLファイルに保存し、ウェブブラウザで開くと、ブロック崩しゲームがプレイできます。