悪魔のブロック崩し's game

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

No:21402

107

←

Prev Next

→

悪魔のブロック崩し
Developer バファリンヌ｜Date and time 23/10/15 8:04:28
Build time 158.928 sec｜Game capacity 5.785KB｜

Script

了解です。以下に、悪魔のブロック崩しのプログラムを示します。

このプログラムでは、1枚のHTMLファイルに悪魔のブロック崩しのゲームを実装しています。JavaScriptは`
`タグで囲まれており、スマホ操作に対応するための処理も含まれています。`canvas`要素を利用して、ブロックやパドル、ボールを描画し、衝突判定やゲームオーバーの処理を実装しています。ゲームは自動的に開始され、スマホで操作することができます。ゲームオーバー時にはアラートが表示され、ページをリロードして再度プレイできるようになっています。以上が、悪魔のブロック崩しのプログラムです。ご自身の環境でお試しいただけます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

了解です。以下に、悪魔のブロック崩しのプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>悪魔のブロック崩し</title>
    <style>
        #gameCanvas {
            background-color: #000;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

const paddleWidth = 80;
        const paddleHeight = 10;
        let paddleX = (canvas.width - paddleWidth) / 2;
        const paddleSpeed = 8;

const ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballDx = 2;
        let ballDy = -2;

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

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

let rightPressed = false;
        let leftPressed = false;

document.addEventListener('keydown', keyDownHandler);
        document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(e) {
            if (e.key === 'ArrowRight') {
                rightPressed = true;
            } else if (e.key === 'ArrowLeft') {
                leftPressed = true;
            }
        }

function keyUpHandler(e) {
            if (e.key === 'ArrowRight') {
                rightPressed = false;
            } else if (e.key === 'ArrowLeft') {
                leftPressed = false;
            }
        }

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

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

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

if (ballX + ballDx > canvas.width - ballRadius || ballX + ballDx < ballRadius) {
                ballDx = -ballDx;
            }
            if (ballY + ballDy < ballRadius) {
                ballDy = -ballDy;
            } else if (ballY + ballDy > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballDy = -ballDy;
                } else {
                    alert("ゲームオーバー");
                    document.location.reload();
                }
            }

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

ballX += ballDx;
            ballY += ballDy;

requestAnimationFrame(draw);
        }

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

このプログラムでは、1枚のHTMLファイルに悪魔のブロック崩しのゲームを実装しています。JavaScriptは`<script>`タグで囲まれており、スマホ操作に対応するための処理も含まれています。`canvas`要素を利用して、ブロックやパドル、ボールを描画し、衝突判定やゲームオーバーの処理を実装しています。ゲームは自動的に開始され、スマホで操作することができます。ゲームオーバー時にはアラートが表示され、ページをリロードして再度プレイできるようになっています。

以上が、悪魔のブロック崩しのプログラムです。ご自身の環境でお試しいただけます。