未捕獲的類型錯誤：無法讀取網球比賽中未定義的屬性“寬度”

Question

請幫我解決我的錯誤。 我已經花了一個小時嘗試，但我似乎找不到它。 錯誤在第 65 行，當我將 canvas.width 更改為絕對值時，錯誤會改變它的行。 我正在制作網球游戲（街機中的 1970 年經典網球游戲），但這讓我陷入了困境。 即使將 canvas.width 更改為變量 canvasWidth = "800" 然后通過 id 使用它也無法解決問題。

球做的主要事情不是重置或從牆上反彈，我離題了，我的錯誤導致球不再從牆上（或左槳）反彈並且不再重置，它只是像 canvas.widht 一樣逐步通過不存在（也許它不存在，因為沒有 canvas.width 作為球的邊界 - 即使一個多小時前我沒有這個錯誤）

    <!DOCTYPE html>
<html>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        var canvas;
        var canvasContext;

        var ballX = 50;
        var ballY = 50;
        var ballSpeedX = 10;
        var ballSpeedY = 4;

        var paddle1Y = 250;
        var paddle2Y = 250;
        const PADDLE_HEIGHT = 100;
        const PADDLE_WIDTH = 10;

        function calculateMousePos(evt) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = evt.clientX - rect.left - root.scrollLeft;
            var mouseY = evt.clientY - rect.top - root.scrollTop;
            return {
                x:mouseX,
                y:mouseY
            };
        }

        window.onload = function() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

            var framesPerSecond = 60;
            setInterval( function(){
                moveEverything();
                drawEverything();
            }, 1150/framesPerSecond );

            canvas.addEventListener('mousemove',
                function(evt){
                    var mousePos = calculateMousePos(evt);
                    paddle2Y = mousePos.y-(PADDLE_HEIGHT/2);
                })
        }

        function ballReset() {
            ballX = canvas.width/2;
            ballY = canvas.height/2;
        }

        function moveEverything() {
            ballX = ballX + ballSpeedX;
            ballY = ballY + ballSpeedY;

            }
            if(ballX < 0) {
                if(ballY > paddle1Y &&
                   ballY < paddle1Y+PADDLE_HEIGHT){
                ballSpeedX = -ballSpeedX;
                   } else {
                        ballReset()
                   }
            }

                   if(ballX > canvas.width) {
                       if (ballY > paddle2Y &&
                           ballY < paddle2Y + PADDLE_HEIGHT) {
                ballSpeedX = -ballSpeedX; 
                    } else {
                        ballReset();
                           }
            }

            if(ballY < 0) {
                ballSpeedY = -ballSpeedY;
            }

            if(ballY > canvas.height) {
                ballSpeedY = -ballSpeedY;
        }

        function drawEverything() {
            colorRect(0, 0,canvas.width,canvas.height,'black');

            colorRect(0,paddle1Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
            colorRect(canvas.width - PADDLE_WIDTH,paddle2Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');

            colorCircle(ballX,ballY, 10,'white');
        
        }

        function colorCircle(centerX, centerY, radius, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
            canvasContext.fill();
        }

        function colorRect( leftX, topY, width, height, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.fillRect(leftX, topY, width, height);
        }
    </script>
</html>

Answer 1

您的代碼在 moveEverything 的moveEverything聲明之后有一個放錯位置的括號，它在不應該結束時結束了 function。 另請注意，此代碼還不能作為游戲運行，但錯誤已解決。

 var canvas; var canvasContext; var ballX = 50; var ballY = 50; var ballSpeedX = 10; var ballSpeedY = 4; var paddle1Y = 250; var paddle2Y = 250; const PADDLE_HEIGHT = 100; const PADDLE_WIDTH = 10; function calculateMousePos(evt) { var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var mouseX = evt.clientX - rect.left - root.scrollLeft; var mouseY = evt.clientY - rect.top - root.scrollTop; return { x: mouseX, y: mouseY }; } window.onload = function() { canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); var framesPerSecond = 60; setInterval(function() { moveEverything(); drawEverything(); }, (1150 / framesPerSecond)); canvas.addEventListener('mousemove', function(evt) { var mousePos = calculateMousePos(evt); paddle2Y = mousePos.y - (PADDLE_HEIGHT / 2); }) } function ballReset() { ballX = canvas.width / 2; ballY = canvas.height / 2; } function moveEverything() { ballX = ballX + ballSpeedX; ballY = ballY + ballSpeedY; if (ballX < 0) { if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) { ballSpeedX = -ballSpeedX; } else { ballReset() } } if (ballX > canvas.width) { if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) { ballSpeedX = -ballSpeedX; } else { ballReset(); } } if (ballY < 0) { ballSpeedY = -ballSpeedY; } if (ballY > canvas.height) { ballSpeedY = -ballSpeedY; } } function drawEverything() { colorRect(0, 0, canvas.width, canvas.height, 'black'); colorRect(0, paddle1Y, PADDLE_WIDTH, PADDLE_HEIGHT, 'white'); colorRect(canvas.width - PADDLE_WIDTH, paddle2Y, PADDLE_WIDTH, PADDLE_HEIGHT, 'white'); colorCircle(ballX, ballY, 10, 'white'); } function colorCircle(centerX, centerY, radius, drawColor) { canvasContext.fillStyle = drawColor; canvasContext.beginPath(); canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true); canvasContext.fill(); } function colorRect(leftX, topY, width, height, drawColor) { canvasContext.fillStyle = drawColor; canvasContext.fillRect(leftX, topY, width, height); }

 <!DOCTYPE html> <html> <canvas id="gameCanvas" width="800" height="600"></canvas> </html>

未捕獲的類型錯誤：無法讀取網球比賽中未定義的屬性“寬度”

問題描述

1 個解決方案

解決方案1
0 2021-01-11 03:33:37

未捕獲的類型錯誤：無法讀取網球比賽中未定義的屬性“寬度”

問題描述

1 個解決方案

解決方案1 0 2021-01-11 03:33:37

解決方案1
0 2021-01-11 03:33:37