ChatGPTを利用してHTML・javascript・CSSでブロック崩しゲームを作り遊んでみた

みこと

ChatGPTでは参考になるプログラムコードを自動で教えてくれるという噂を聞き本当かなとお試しでブロック崩しゲームを作ってみました

ChatGPTでブロック崩しゲームをHTML・javascript・CSSで実装するコードと入力すると約3分位でコードが完成しました

ブロック崩しゲームをHTML・javascript・CSSで実装するコード
ChatGPTに遊び方を聞いてみた?
ChatGPTを使いプログラミング学習ができる

ブロック崩しゲームをHTML・javascript・CSSで実装するコード

HTML

<html>
<head>
    <title>ブロック崩し</title>
    <style>
        #gameCanvas {
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <script>
        // ゲームの初期設定
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

        // パドルの設定
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;

        // ボールの設定
        var ballRadius = 10;
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;
        var ballSpeedX = 2;
        var ballSpeedY = -2;

        // ブロックの設定
        var brickRowCount = 5;
        var brickColumnCount = 9;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;

        var bricks = [];
        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 };
            }
        }

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

        // ライフの設定
        var lives = 3;

        // パドルの操作
        document.addEventListener("mousemove", mouseMoveHandler, false);

        function mouseMoveHandler(e) {
            var relativeX = e.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }

        // 衝突検出
        function collisionDetection() {
            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("ゲームクリア！");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

        // 描画
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            drawLives();
            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 {
                    lives--;
                    if (!lives) {
                        alert("ゲームオーバー！");
                        document.location.reload();
                    } else {
                        ballX = canvas.width / 2;
                        ballY = canvas.height - 30;
                        ballSpeedX = 2;
                        ballSpeedY = -2;
                        paddleX = (canvas.width - paddleWidth) / 2;
                    }
                }
            }

            ballX += ballSpeedX;
            ballY += ballSpeedY;

            requestAnimationFrame(draw);
        }

        // ブロックの描画
        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 = "#0095DD";
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }

        // ボールの描画
        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 drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: " + score, 8, 20);
        }

        // ライフの描画
        function drawLives() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
        }

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