时间戳

首页 > 解决方案 > 未捕获的类型错误：无法读取网球比赛中未定义的属性“宽度”

javascript - 未捕获的类型错误：无法读取网球比赛中未定义的属性“宽度”

问题描述

请帮我解决我的错误。我已经花了一个小时尝试，但我似乎找不到它。错误在第 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>

标签： javascripthtmlfunctioncanvas

解决方案

您的代码在函数声明之后有一个放错位置的括号moveEverything，它在函数不应该结束时结束了该函数。另请注意，此代码还不能作为游戏运行，但错误已解决。

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>

推荐阅读