Developer Hisashi is always dying of shock and everyone is mad at him 🤬💢 game's game

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

No:5182

2827

←

Prev Next

→

Developer Hisashi is always dying of shock and eve..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/29 20:06:08
Build time 60.423 sec｜Game capacity 7.066KB｜

Script

了解しました！私はブロック崩しゲームを作成します。以下のコードをご参照ください。

このコードでブロック崩しゲームを実装しました。スマートフォンで操作が可能です。画面上で左右に動かせるパドルがあり、ボールを跳ね返してブロックを壊していくゲームです。ブロックを全て壊すと「ゲームクリア！」のアラートが表示されます。ボールが画面下部に触れると「ゲームオーバー！」のアラートが表示され、ゲームがリセットされます。このプログラムは、HTMLファイルとして実装されており、JavaScriptは`
`タグで囲まれています。また、絵文字は使用していませんが、代わりにカラフルな四角形でブロックを表現しています。お楽しみいただければ幸いです！

←

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>
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// パドルの設定
        const paddleWidth = 100;
        const paddleHeight = 10;
        const paddle = {
            x: canvas.width / 2 - paddleWidth / 2,
            y: canvas.height - paddleHeight - 10,
            width: paddleWidth,
            height: paddleHeight,
            dx: 5
        };

// ボールの設定
        const ballSize = 10;
        const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: ballSize,
            speed: 4,
            dx: 4,
            dy: -4
        };

// ブロックの設定
        const brickRowCount = 5;
        const brickColumnCount = 8;
        const brickWidth = 80;
        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, visible: true };
            }
        }

// スコアの設定
        let score = 0;

// パドルを描画
        function drawPaddle() {
            context.beginPath();
            context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

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

// ブロックを描画
        function drawBricks() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].visible) {
                        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        context.beginPath();
                        context.rect(brickX, brickY, brickWidth, brickHeight);
                        context.fillStyle = "#0095DD";
                        context.fill();
                        context.closePath();
                    }
                }
            }
        }

// ボールとブロックの当たり判定
        function collisionDetection() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    const brick = bricks[c][r];
                    if (brick.visible) {
                        if (
                            ball.x > brick.x &&
                            ball.x < brick.x + brickWidth &&
                            ball.y > brick.y &&
                            ball.y < brick.y + brickHeight
                        ) {
                            ball.dy = -ball.dy;
                            brick.visible = false;
                            score++;
                            if (score === brickRowCount * brickColumnCount) {
                                alert("ゲームクリア！");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

// ゲームオーバー判定
        function gameover() {
            if (ball.y + ball.radius > canvas.height) {
                alert("ゲームオーバー！");
                document.location.reload();
            }
        }

// ゲーム画面の更新
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);

drawPaddle();
            drawBall();
            drawBricks();
            collisionDetection();
            gameover();

// パドルの移動
            if (rightPressed && paddle.x < canvas.width - paddle.width) {
                paddle.x += paddle.dx;
            } else if (leftPressed && paddle.x > 0) {
                paddle.x -= paddle.dx;
            }

// ボールの移動
            ball.x += ball.dx;
            ball.y += ball.dy;

// 壁との反射
            if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
                ball.dx = -ball.dx;
            }
            if (ball.y - ball.radius < 0) {
                ball.dy = -ball.dy;
            }

// パドルとの反射
            if (
                ball.y + ball.radius > paddle.y &&
                ball.x > paddle.x &&
                ball.x < paddle.x + paddle.width
            ) {
                ball.dy = -ball.dy;
            }

requestAnimationFrame(update);
        }

// スマホ操作イベントの設定
        let rightPressed = false;
        let leftPressed = false;
        document.addEventListener("touchstart", function (event) {
            const touchX = event.touches[0].clientX;
            if (touchX > canvas.width / 2) {
                rightPressed = true;
            } else {
                leftPressed = true;
            }
        });
        document.addEventListener("touchend", function () {
            rightPressed = false;
            leftPressed = false;
        });

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

このプログラムは、HTMLファイルとして実装されており、JavaScriptは`<script>`タグで囲まれています。また、絵文字は使用していませんが、代わりにカラフルな四角形でブロックを表現しています。

お楽しみいただければ幸いです！