元素未在画布上渲染

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() {

        alert('The score is now '

        playerscore + ' to ' + aiscore);

        this.x = 20;

        this.y = 24 30;

        this.xSpeed = 2;

        this.ySpeed = 0;

        

    },

应该

reset: function() {

        alert('The score is now ' + playerscore + ' to ' + aiscore);

        this.x = 20;

        this.y = 24 30;

        this.xSpeed = 2;

        this.ySpeed = 0;

    },

更新

发布此答案后，我发现了更多问题；

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) {

    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,

    playerscore: 0,

    aiscore: 0,

    reverseX: function() {

        this.xSpeed *= -1;

    },

    reverseY: function() {

        this.ySpeed *= -1;

    },

    reset: function() {

        alert('The score is now ' + this.playerscore + ' to ' + this.aiscore);

        this.x = 20;

        this.y = 24;

        this.xSpeed = 2;

        this.ySpeed = 0;

        

    },

    isBouncing: function() {

        return ball.ySpeed != 0;

    },

    modifyXSpeedBy: function(modification) {

        modification = this.xSpeed < 0 ? modification * -1 : modification;

        var nextValue = this.xSpeed + modification;

        nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;

        this.xSpeed = nextValue;

    },

    modifyYSpeedBy: function(modification) {

        modification = this.ySpeed < 0 ? modification * -1 : modification;

        this.ySpeed += modification;

    }

};

function tick() {

    updateGame();

    draw()

    window.setTimeout("tick()", 1000 / 60);

}

function updateGame() {

    ball.x += ball.xSpeed;

    ball.y += ball.ySpeed;

    if (ball.x < 0) {

        ball.reset();

        ball.aiscore = ball.aiscore + 1;

        

    }

    if (ball.x > 640) {

        ball.reset();

        ball.playerscore = ball.playerscore + 1

        

    }

    if (ball.y <= 0 || ball.y >= 480) {

        ball.reverseY();

    }

    var collidedWithPlayer = player.hasCollidedWith(ball);

    var collidedWithAi = ai.hasCollidedWith(ball);

    if (collidedWithPlayer || collidedWithAi) {

        ball.reverseX();

        ball.modifyXSpeedBy(0.25);

        var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;

        ball.modifyYSpeedBy(speedUpValue);

    }

    for (var keyCode in heldDown) {

        player.move(keyCode);

    }

    var aiMiddle = ai.y + (ai.height / 2);

    if (aiMiddle < ball.y) {

        ai.move(40);

    }

    if (aiMiddle > ball.y) {

        ai.move(38);

    }

    

}

function draw() {

    ctx.fillStyle = "black";

    ctx.fillRect(0, 0, 640, 480);

    renderPaddle(player);

    renderPaddle(ai);

    renderBall(ball);

}

function renderPaddle(paddle) {

    ctx.fillStyle = "blue";

    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

}

function renderBall(ball) {

    ctx.beginPath();

    ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);

    ctx.fillStyle = "pink";

    ctx.fill();

}

var heldDown = {};

window.addEventListener("keydown", function(keyInfo) {

    heldDown[event.keyCode] = true;

}, false);

window.addEventListener("keyup", function(keyInfo) {

    delete heldDown[event.keyCode];

}, false);

tick();

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