ES6類對象是不確定的

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，但隨後再次requestAnimationFrame(draw)調用它，將無法通過這些變量沿（而不是調用draw requestAnimationFrame用時間戳調用繪製方法）。

在這種情況下，由於您使用的是全局變量，我只需從繪圖函數中刪除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();