Question

您好我正在制作一个基本的乒乓球游戏，当我将玩家对象传递给drawPlate时，它看起来像打印信息但是然后抛出一个未捕获的TypeError异常。

似乎在我的draw（）方法中打印信息很好。

这是我的代码：

"use strict";

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 20;
var offX = 5;
var offY = -5;
var radius = 8;

/**
 * This is the constructor of a player object, parameters are the coordinates of x and y
 */
class Player {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.moveRight = false;
        this.moveLeft = false;
    }
}

/**
 * Here we add an event listener to see when the user presses a keyd, and make the plate move.
 */
document.addEventListener("keydown", handleKeyDown, false);
document.addEventListener("keyup", handleKeyUp, false);

function handleKeyDown(event) {
    switch (event.key) {

        case "ArrowRight":
            player1.moveRight = true;
            break;

        case "ArrowLeft":
            player1.moveLeft = true;
            break;

        default:
            return;
    }
}


function handleKeyUp(event) {
    switch (event.key) {
        case "ArrowRight":
            player1.moveRight = false;
            break;

        case "ArrowLeft":
            player1.moveLeft = false;
            break;

        default:
            return;
    }
}

function drawPlate(player1, player2) {
    console.log(player1.x);

    ctx.beginPath();

    if (player1.moveRight == true) {
        player1.x += 7;
    } else if (player1.moveLeft == true) {
        player1.x -= 7;
    }

    ctx.rect(player1.x, player1.y, canvas.width / 7, 8);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.rect(player2.x, player2.y, canvas.width / 7, 8);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}

function draw(player1, player2) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBall();

    drawPlate(player1, player2);

    if (x + radius > canvas.width || x - radius < 0) {
        offX = -offX;
    }

    if (y - radius < 0) {
        offY = -offY;
    } else if (y + radius > canvas.height) {
        alert("GAME OVER");
        location.reload();
    }

    x += offX;
    y += offY;

    requestAnimationFrame(draw);
}
var player1 = new Player(canvas.width / 2 - 20, 0);
var player2 = new Player(canvas.width / 2 - 2, canvas.height - 8);
//console.log(player2.x);

draw(player1, player2);

Answer 1

问题是您首先通过传入player1和player2来调用draw，然后再使用requestAnimationFrame(draw)再次调用它，这将不会传递这些变量（而不是requestAnimationFrame调用绘制带时间戳的方法。

在这种情况下，由于您无论如何都要使用全局变量，我只需从draw函数中删除person1和person2参数，并将player1 / player2变量视为全局变量。

所以你所要做的就是将绘图功能更改为：

function draw() {
    // Rest of the code
}

稍后调用它而不传递任何内容：

var player1 = new Player(canvas.width / 2 - 20, 0);
var player2 = new Player(canvas.width / 2 - 2, canvas.height - 8);
draw();

es6类对象未定义

1 个答案: