es6 클래스 객체가 정의되지 않았습니다.

Question

안녕하세요 저는 기본 퐁 게임을 만들고 있는데 플레이어 객체를 drawPlate에 전달하면 정보를 인쇄하지만 Uncaught 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

문제는 먼저 (대신에 따라 그 변수를 전달하지 것이다 requestAnimationFrame(draw)에 다시 호출 한 후 재생기 및 player2를 전달하지만,에 의해 draw를 호출하고 있다는 점이다 requestAnimationFrame : 여기

내 코드입니다 타임 스탬프로 draw 메소드를 호출).

이 경우 어쨌든 전역 변수를 사용하고 있으므로 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();