元素未在画布上渲染

Question

我正在制作一款乒乓球游戏，一切都很顺利，直到我编写了评分系统，该系统有两个变量，一个用于玩家的得分，另一个用于人工智能的得分。当球经过球拍时，它会检测到它击中了哪堵墙，并将右侧得分变量加 1，然后提醒得分。现在，当我运行游戏时，画布元素只是空白。我想知道这里是否有人能弄清楚发生了什么事。这是我的代码。

<canvas id='my' width='640' height='480'></canvas>

<script>

  var canvas = document.getElementById("my");

  var ctx = canvas.getContext("2d");

  function paddle(x, y, width, height) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

    this.speedModifier = 0;

    this.hasCollidedWith = function(ball) {

      var paddleLeftWall = this.x;

      var paddleRightWall = this.x + this.width;

      var paddleTopWall = this.y;

      var paddleBottomWall = this.y + this.height;

      if (ball.x > paddleLeftWall &&

        ball.x < paddleRightWall &&

        ball.y > paddleTopWall &&

        ball.y < paddleBottomWall) {

        return true;

      }

      return false;

    };

    this.move = function(keyCode) {

      var nextY = this.y;

      if (keyCode == 40) {

        nextY += 5;

        this.speedModifer = 1.5;

      } else if (keyCode == 38) {

        nextY += -5;

        this.speedModifier = 1.5;

      } else {

        this.speedModifier = 0;

      }

      nextY = nextY < 0 ? 0 : nextY;

      nextY = nextY + this.height > 480 ? 480 - this.height : nextY;

      this.y = nextY;

    };

  }

  var player = new paddle(5, 200, 25, 100);

  var ai = new paddle(610, 200, 25, 100);

  var ball = {

    x: 320,

    y: 240,

    radius: 7,

    xSpeed: 2,

    ySpeed: 0,

    var playerscore = 0

    var aiscore = 0

    reverseX: function() {

      this.xSpeed *= -1;

    },

    reverseY: function() {

      this.ySpeed *= -1;

    },

Answer 1

错误似乎出现在您的reset函数中 - 您已进入新行而没有连接该行的其余部分；reset: function() {&nbsp; &nbsp; &nbsp; &nbsp; alert('The score is now '&nbsp; &nbsp; &nbsp; &nbsp; playerscore + ' to ' + aiscore);&nbsp; &nbsp; &nbsp; &nbsp; this.x = 20;&nbsp; &nbsp; &nbsp; &nbsp; this.y = 24 30;&nbsp; &nbsp; &nbsp; &nbsp; this.xSpeed = 2;&nbsp; &nbsp; &nbsp; &nbsp; this.ySpeed = 0;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; },应该reset: function() {&nbsp; &nbsp; &nbsp; &nbsp; alert('The score is now ' + playerscore + ' to ' + aiscore);&nbsp; &nbsp; &nbsp; &nbsp; this.x = 20;&nbsp; &nbsp; &nbsp; &nbsp; this.y = 24 30;&nbsp; &nbsp; &nbsp; &nbsp; this.xSpeed = 2;&nbsp; &nbsp; &nbsp; &nbsp; this.ySpeed = 0;&nbsp; &nbsp; },更新发布此答案后，我发现了更多问题；this.y = 24 30;应为 24或30；this.y = 24;这些在你的球对象中都被错误地定义了；var 玩家分数 = 0 var aiscore = 0应该playerscore: 0,aiscore: 0,var canvas = document.getElementById("my");var ctx = canvas.getContext("2d");function paddle(x, y, width, height) {&nbsp; &nbsp; this.x = x;&nbsp; &nbsp; this.y = y;&nbsp; &nbsp; this.width = width;&nbsp; &nbsp; this.height = height;&nbsp; &nbsp; this.speedModifier = 0;&nbsp; &nbsp; this.hasCollidedWith = function(ball) {&nbsp; &nbsp; &nbsp; &nbsp; var paddleLeftWall = this.x;&nbsp; &nbsp; &nbsp; &nbsp; var paddleRightWall = this.x + this.width;&nbsp; &nbsp; &nbsp; &nbsp; var paddleTopWall = this.y;&nbsp; &nbsp; &nbsp; &nbsp; var paddleBottomWall = this.y + this.height;&nbsp; &nbsp; &nbsp; &nbsp; if (ball.x > paddleLeftWall &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ball.x < paddleRightWall &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ball.y > paddleTopWall &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ball.y < paddleBottomWall) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; };&nbsp; &nbsp; this.move = function(keyCode) {&nbsp; &nbsp; &nbsp; &nbsp; var nextY = this.y;&nbsp; &nbsp; &nbsp; &nbsp; if (keyCode == 40) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextY += 5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.speedModifer = 1.5;&nbsp; &nbsp; &nbsp; &nbsp; } else if (keyCode == 38) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextY += -5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.speedModifier = 1.5;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.speedModifier = 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; nextY = nextY < 0 ? 0 : nextY;&nbsp; &nbsp; &nbsp; &nbsp; nextY = nextY + this.height > 480 ? 480 - this.height : nextY;&nbsp; &nbsp; &nbsp; &nbsp; this.y = nextY;&nbsp; &nbsp; };}var player = new paddle(5, 200, 25, 100);var ai = new paddle(610, 200, 25, 100);var ball = {&nbsp; &nbsp; x: 320,&nbsp; &nbsp; y: 240,&nbsp; &nbsp; radius: 7,&nbsp; &nbsp; xSpeed: 2,&nbsp; &nbsp; ySpeed: 0,&nbsp; &nbsp; playerscore: 0,&nbsp; &nbsp; aiscore: 0,&nbsp; &nbsp; reverseX: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.xSpeed *= -1;&nbsp; &nbsp; },&nbsp; &nbsp; reverseY: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.ySpeed *= -1;&nbsp; &nbsp; },&nbsp; &nbsp; reset: function() {&nbsp; &nbsp; &nbsp; &nbsp; alert('The score is now ' + this.playerscore + ' to ' + this.aiscore);&nbsp; &nbsp; &nbsp; &nbsp; this.x = 20;&nbsp; &nbsp; &nbsp; &nbsp; this.y = 24;&nbsp; &nbsp; &nbsp; &nbsp; this.xSpeed = 2;&nbsp; &nbsp; &nbsp; &nbsp; this.ySpeed = 0;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; },&nbsp; &nbsp; isBouncing: function() {&nbsp; &nbsp; &nbsp; &nbsp; return ball.ySpeed != 0;&nbsp; &nbsp; },&nbsp; &nbsp; modifyXSpeedBy: function(modification) {&nbsp; &nbsp; &nbsp; &nbsp; modification = this.xSpeed < 0 ? modification * -1 : modification;&nbsp; &nbsp; &nbsp; &nbsp; var nextValue = this.xSpeed + modification;&nbsp; &nbsp; &nbsp; &nbsp; nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;&nbsp; &nbsp; &nbsp; &nbsp; this.xSpeed = nextValue;&nbsp; &nbsp; },&nbsp; &nbsp; modifyYSpeedBy: function(modification) {&nbsp; &nbsp; &nbsp; &nbsp; modification = this.ySpeed < 0 ? modification * -1 : modification;&nbsp; &nbsp; &nbsp; &nbsp; this.ySpeed += modification;&nbsp; &nbsp; }};function tick() {&nbsp; &nbsp; updateGame();&nbsp; &nbsp; draw()&nbsp; &nbsp; window.setTimeout("tick()", 1000 / 60);}function updateGame() {&nbsp; &nbsp; ball.x += ball.xSpeed;&nbsp; &nbsp; ball.y += ball.ySpeed;&nbsp; &nbsp; if (ball.x < 0) {&nbsp; &nbsp; &nbsp; &nbsp; ball.reset();&nbsp; &nbsp; &nbsp; &nbsp; ball.aiscore = ball.aiscore + 1;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; if (ball.x > 640) {&nbsp; &nbsp; &nbsp; &nbsp; ball.reset();&nbsp; &nbsp; &nbsp; &nbsp; ball.playerscore = ball.playerscore + 1&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; if (ball.y <= 0 || ball.y >= 480) {&nbsp; &nbsp; &nbsp; &nbsp; ball.reverseY();&nbsp; &nbsp; }&nbsp; &nbsp; var collidedWithPlayer = player.hasCollidedWith(ball);&nbsp; &nbsp; var collidedWithAi = ai.hasCollidedWith(ball);&nbsp; &nbsp; if (collidedWithPlayer || collidedWithAi) {&nbsp; &nbsp; &nbsp; &nbsp; ball.reverseX();&nbsp; &nbsp; &nbsp; &nbsp; ball.modifyXSpeedBy(0.25);&nbsp; &nbsp; &nbsp; &nbsp; var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;&nbsp; &nbsp; &nbsp; &nbsp; ball.modifyYSpeedBy(speedUpValue);&nbsp; &nbsp; }&nbsp; &nbsp; for (var keyCode in heldDown) {&nbsp; &nbsp; &nbsp; &nbsp; player.move(keyCode);&nbsp; &nbsp; }&nbsp; &nbsp; var aiMiddle = ai.y + (ai.height / 2);&nbsp; &nbsp; if (aiMiddle < ball.y) {&nbsp; &nbsp; &nbsp; &nbsp; ai.move(40);&nbsp; &nbsp; }&nbsp; &nbsp; if (aiMiddle > ball.y) {&nbsp; &nbsp; &nbsp; &nbsp; ai.move(38);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;}function draw() {&nbsp; &nbsp; ctx.fillStyle = "black";&nbsp; &nbsp; ctx.fillRect(0, 0, 640, 480);&nbsp; &nbsp; renderPaddle(player);&nbsp; &nbsp; renderPaddle(ai);&nbsp; &nbsp; renderBall(ball);}function renderPaddle(paddle) {&nbsp; &nbsp; ctx.fillStyle = "blue";&nbsp; &nbsp; ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);}function renderBall(ball) {&nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);&nbsp; &nbsp; ctx.fillStyle = "pink";&nbsp; &nbsp; ctx.fill();}var heldDown = {};window.addEventListener("keydown", function(keyInfo) {&nbsp; &nbsp; heldDown[event.keyCode] = true;}, false);window.addEventListener("keyup", function(keyInfo) {&nbsp; &nbsp; delete heldDown[event.keyCode];}, false);tick();<canvas id='my' width='640' height='480'></canvas>