画面が全く表示されない

シンプルなブロック崩しを動画を参考にしながら模写しているのですが、function drawで表示されるはずのボールやブロックが表示されません。ディベロッパーツールを見ても原因がさっぱりわかりませんでした。ご教授お願いします。

ソースコードを貼りなおしました。

javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブロック崩し</title>
</head>

<body>
    <canvas id="myCanvas" width="480" height="320"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        var x = canvas.width / 2;
        var y = canvas.height - 30;

        var dx = 2;
        var dy = -2;

        var ballRadius = 10;

        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;

        var rightPressed = false;
        var leftPressed = false;

        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;

        var bricks = [];

        for (var c = 0; c < brickColumnCount; c++) {
            brick[c] = [];
            for (var r = 0; r < brickRowCount; r++) {
                brick[c][r] = { x: 0, y: 0 };
            }
        }

        function drawBall() {
            ctx.beginPath();
            ctx.act(x, y, 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 drawBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                    var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
                    bricks[c][r].x = 0;
                    bricks[c][r].y = 0;

                    ctx.beginPath();
                    ctx.rect(brickX, brickY, brickWidth, brickHeight);
                    ctx.fillStyle = "#0095DD";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }

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

            if (y + dy < ballRadius) {
                dy = -dy;
            } else if (y + dy > canvas.height - ballRadius) {
                alert("GAME OVER");
                document.location.reload();
                clearInterval(interval);
            }

            if (x + dx > canvas.width - ballRadius | x + dx < ballRadius) {
                dx = -dx;
            }

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

            x += dx;
            y += dy;

        }

        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;
            }
        }

        var interval = setInterval(draw, 10);
    </script>
</body>

</html>

m.ts10806

2020/10/21 13:16

コードが一部過ぎてなんとも言えません。それにデベロッパツールでは「４２行に不具合がある」という出方はしないと思います。エラーは要約せず解釈せずそのままコピペで提示してください。コードも当然、コピペで他者が再現できるものである必要があります。

aoi68

2020/10/21 13:41

すいませんでした。コードを貼りなおします。

Daregada

2020/10/21 16:14

惜しい。「```」と「JavaScirpt」は別の行に分けて書いてください。末尾の「</html>```」も同様に。

aoi68

2020/10/21 18:55

ご指摘ありがとうございます。先頭のjavascriptを一行下にずらしました。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、エラーになる間違いと、エラーにならないがおかしい点を3つ発見した。

配列名bricksがbrickになっているのが2箇所ある。

Diff
1            var bricks = [];
2
3            for (var c = 0; c < brickColumnCount; c++) {
4-               brick[c] = [];
5+               bricks[c] = [];
6                for (var r = 0; r < brickRowCount; r++) {
7-                   brick[c][r] = {
8+                   bricks[c][r] = {
9                        x: 0,
10                        y: 0
11                    };
12                }
13            }

ボールを描画するために使うメソッドarcがactになっている。

Diff
1            function drawBall() {
2                ctx.beginPath();
3-               ctx.act(x, y, ballRadius, 0, Math.PI * 2);
4+               ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
5                ctx.fillStyle = "#0095DD";
6                ctx.fill();
7                ctx.closePath();
8            }

ボールが左右の壁で反射する処理の論理ORがビットORになっている。

Diff
1-               if (x + dx > canvas.width - ballRadius | x + dx < ballRadius) {
2+               if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
3                    dx = -dx;
4                }