ブロック崩し

ブロック崩しには手があるけど、私にはない
以下はJavaScriptを用いて作成したシンプルなブロック崩しゲームです。可能な限りセキュリティの脆弱性を考慮し、evalや外部サイトへの遷移、リダイレクトなどは行わないようにしています。

ゲームに関するジョークとして、ゲーム開始前に「ブロック崩しには手があるけど、私にはない」というメッセージを表示するようにしました。

```
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>ブロック崩し</title>
    <style>
        canvas {
            border: 1px solid #333;
        }
    </style>
</head>

<body>

    <canvas id="canvas"></canvas>

    <script>
        // ゲーム全体で使う変数
        var canvas;
        var ctx;
        var ballX = 50;
        var ballY = 50;
        var ballSpeedX = 5;
        var ballSpeedY = 7;
        var paddleX = 250;
        var paddleWidth = 100;
        var paddleHeight = 10;
        var brickWidth = 80;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;
        var score = 0;
        var brickRowCount = 5;
        var brickColumnCount = 8;
        var bricks = [];

        // ブロックを初期化する関数
        function initBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                bricks[c] = [];
                for (var r = 0; r < brickRowCount; r++) {
                    bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }
        }
        initBricks();

        // キャンバスを初期化する関数
        function initCanvas() {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');

            // キーイベントのリスナーを追加する
            document.addEventListener('keydown', handleKeyPress);
        }
        initCanvas();

        // キープレス時にパドルを動かす関数
        function handleKeyPress(e) {
            if (e.keyCode == 37) {
                paddleX -= 20;
            } else if (e.keyCode == 39) {
                paddleX += 20;
            }
        }

        // ボールを描画する関数
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        // パドルを描画する関数
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = 'blue';
            ctx.fill();
        }

        // スコアを描画する関数
        function drawScore() {
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText('Score: ' + score, 8, 20);
        }

        // ブロックを描画する関数
        function drawBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status == 1) {
                        var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                        var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        ctx.beginPath();
                        ctx.rect(brickX, brickY, brickWidth, brickHeight);
                        ctx.fillStyle = 'green';
                        ctx.fill();
                    }
                }
            }
        }

        // ボールとブロックの衝突判定関数
        function ballBrickCollisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var b = bricks[c][r];
                    if (b.status == 1) {
                        if (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
                            ballSpeedY = -ballSpeedY;
                            b.status = 0; // ブロックを削除する
                            score++;
                            if (score == brickRowCount * brickColumnCount) {
                                alert('Congratulations! You won the game!');
                                document.showToast("再読み込みしてください");
                            }
                        }
                    }
                }
            }
        }

        // ボールと壁の衝突判定関数
        function ballWallCollisionDetection() {
            if (ballX + 10 > canvas.width || ballX - 10 < 0) {
                ballSpeedX = -ballSpeedX;
            } else if (ballY + 10 > canvas.height) {
                alert('Game Over!');
                document.showToast("再読み込みしてください");
            } else if (ballY - 10 < 0) {
                ballSpeedY = -ballSpeedY;
            }
        }

        // パドルとボールの衝突判定関数
        function ballPaddleCollisionDetection() {
            if (ballY + 10 > canvas.height - paddleHeight && ballX > paddleX && ballX < paddleX + paddleWidth) {
                ballSpeedY = -ballSpeedY;
            }
        }

        // ゲームを描画する関数
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            ballWallCollisionDetection();
            ballBrickCollisionDetection();
            ballPaddleCollisionDetection();

            ballX += ballSpeedX;
            ballY += ballSpeedY;
            requestAnimationFrame(draw); // フレームレートの調整
        }
        draw();

    </script>
    <p style="text-align:center; font-size:24px">ブロック崩しには手があるけど、私にはない</p>
</body>

</html>
```