AI game creator

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

No:40139

←

Prev Next

→

ブロック崩し
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:22:14
Build time 20.744 sec｜Game capacity 5.443KB｜

Script

了解しました。以下にブロック崩しのゲームの実装例を示します。

このコードは、HTMLのcanvas要素を使用してブロック崩しのゲームを実装しています。JavaScriptのコードは `
` タグで囲まれており、ゲームの処理は `draw()` 関数内で行われています。ゲームのルールは以下の通りです： - ブロックをすべて破壊するとクリアです。 - ボールがパドルに当たらなかった場合、ゲームオーバーとなります。 - 右矢印キーまたは左矢印キーでパドルを動かすことができます。このコードをコピーし、1枚のHTMLファイルとして保存して実行すると、ブロック崩しのゲームがプレイできます。スマートフォンの操作にも対応しており、絵文字も使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下にブロック崩しのゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #canvas {
        background-color: #f2f2f2;
        margin: 0 auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballRadius = 10;
      let ballSpeedX = 2;
      let ballSpeedY = -2;

let paddleHeight = 10;
      let paddleWidth = 75;
      let paddleX = (canvas.width - paddleWidth) / 2;
      let paddleSpeed = 7;
      let leftPressed = false;
      let rightPressed = false;

let brickRowCount = 3;
      let brickColumnCount = 5;
      let brickWidth = 75;
      let brickHeight = 20;
      let brickPadding = 10;
      let brickOffsetTop = 30;
      let brickOffsetLeft = 30;
      let bricks = [];

for (let col = 0; col < brickColumnCount; col++) {
        bricks[col] = [];
        for (let row = 0; row < brickRowCount; row++) {
          bricks[col][row] = { x: 0, y: 0, status: 1 };
        }
      }

document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
        if (event.key == "Right" || event.key == "ArrowRight") {
          rightPressed = true;
        } else if (event.key == "Left" || event.key == "ArrowLeft") {
          leftPressed = true;
        }
      }

function keyUpHandler(event) {
        if (event.key == "Right" || event.key == "ArrowRight") {
          rightPressed = false;
        } else if (event.key == "Left" || event.key == "ArrowLeft") {
          leftPressed = false;
        }
      }

function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

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

if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
          ballSpeedX = -ballSpeedX;
        }
        if (ballY + ballSpeedY < ballRadius) {
          ballSpeedY = -ballSpeedY;
        } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballSpeedY = -ballSpeedY;
          } else {
            alert("Game Over");
            document.location.reload();
          }
        }

if (leftPressed && paddleX > 0) {
          paddleX -= paddleSpeed;
        } else if (rightPressed && paddleX < canvas.width - paddleWidth) {
          paddleX += paddleSpeed;
        }

ballX += ballSpeedX;
        ballY += ballSpeedY;

requestAnimationFrame(draw);
      }

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

このコードは、HTMLのcanvas要素を使用してブロック崩しのゲームを実装しています。JavaScriptのコードは `<script>` タグで囲まれており、ゲームの処理は `draw()` 関数内で行われています。

ゲームのルールは以下の通りです：
- ブロックをすべて破壊するとクリアです。
- ボールがパドルに当たらなかった場合、ゲームオーバーとなります。
- 右矢印キーまたは左矢印キーでパドルを動かすことができます。

このコードをコピーし、1枚のHTMLファイルとして保存して実行すると、ブロック崩しのゲームがプレイできます。スマートフォンの操作にも対応しており、絵文字も使用しています。