Fully Automatic Block Crumble's game

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

No:4710

2848

←

Prev Next

→

Fully Automatic Block Crumble
Developer User3796｜Date and time 23/6/28 18:11:46
Build time 56.568 sec｜Game capacity 6.796KB｜

Script

了解です。以下に全自動ブロック崩しのHTMLファイルを示します。

以上が全自動ブロック崩しのHTMLファイルです。このファイルをブラウザで開くと、自動で動くブロック崩しゲームがプレイできます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。以下に全自動ブロック崩しのHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全自動ブロック崩し</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            padding: 0;
        }

#gameCanvas {
            background-color: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById("gameCanvas");
            const ctx = canvas.getContext("2d");

// ボールの初期状態
            const ball = {
                x: canvas.width / 2,
                y: canvas.height - 30,
                dx: 2,
                dy: -2,
                radius: 10
            };

// パドルの初期状態
            const paddle = {
                width: 75,
                height: 10,
                x: (canvas.width - 75) / 2,
            };

// ブロックの初期状態
            const block = {
                rows: 5,
                cols: 8,
                width: 75,
                height: 20,
                padding: 10,
                offsetX: 30,
                offsetY: 30,
                fillColor: "#eaeaea"
            };
            const blocks = []; // 全てのブロックを格納するための配列

// ブロックを生成
            for (let row = 0; row < block.rows; row++) {
                blocks[row] = [];
                for (let col = 0; col < block.cols; col++) {
                    blocks[row][col] = { x: 0, y: 0, status: 1 };
                }
            }

// パドルを描画する関数
            function drawPaddle() {
                ctx.beginPath();
                ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }

// ボールを描画する関数
            function drawBall() {
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }

// ブロックを描画する関数
            function drawBlocks() {
                for (let row = 0; row < block.rows; row++) {
                    for (let col = 0; col < block.cols; col++) {
                        if (blocks[row][col].status === 1) {
                            const blockX = (col * (block.width + block.padding)) + block.offsetX;
                            const blockY = (row * (block.height + block.padding)) + block.offsetY;
                            blocks[row][col].x = blockX;
                            blocks[row][col].y = blockY;
                            ctx.beginPath();
                            ctx.rect(blockX, blockY, block.width, block.height);
                            ctx.fillStyle = block.fillColor;
                            ctx.fill();
                            ctx.closePath();
                        }
                    }
                }
            }

// 衝突判定
            function collisionDetection() {
                for (let row = 0; row < block.rows; row++) {
                    for (let col = 0; col < block.cols; col++) {
                        const currentBlock = blocks[row][col];
                        if (currentBlock.status === 1) {
                            if (
                                ball.x > currentBlock.x &&
                                ball.x < currentBlock.x + block.width &&
                                ball.y > currentBlock.y &&
                                ball.y < currentBlock.y + block.height
                            ) {
                                ball.dy = -ball.dy;
                                currentBlock.status = 0; // ブロックを消す
                            }
                        }
                    }
                }
            }

// ゲームループ
            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア
                drawBlocks(); // ブロックを描画
                drawBall(); // ボールを描画
                drawPaddle(); // パドルを描画
                collisionDetection(); // 衝突判定

// ボールを動かす
                ball.x += ball.dx;
                ball.y += ball.dy;

// ボールが画面外に出た場合、反転する
                if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
                    ball.dx = -ball.dx;
                }
                if (ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
                    ball.dy = -ball.dy;
                }

// パドルを動かす
                if (rightPressed && paddle.x < canvas.width - paddle.width) {
                    paddle.x += 7;
                } else if (leftPressed && paddle.x > 0) {
                    paddle.x -= 7;
                }

requestAnimationFrame(draw); // アニメーションのために繰り返し実行
            }

let rightPressed = false;
            let leftPressed = false;

// キーボードイベントのリスナーを設定
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

// キーが押された時の処理
            function keyDownHandler(e) {
                if (e.key === "Right" || e.key === "ArrowRight") {
                    rightPressed = true;
                } else if (e.key === "Left" || e.key === "ArrowLeft") {
                    leftPressed = true;
                }
            }

// キーが離された時の処理
            function keyUpHandler(e) {
                if (e.key === "Right" || e.key === "ArrowRight") {
                    rightPressed = false;
                } else if (e.key === "Left" || e.key === "ArrowLeft") {
                    leftPressed = false;
                }
            }

draw(); // ゲームを開始
        });
    </script>
</body>
</html>
```

以上が全自動ブロック崩しのHTMLファイルです。このファイルをブラウザで開くと、自動で動くブロック崩しゲームがプレイできます。