JavaScript 캔버스 색상 - 속성 간섭

Question

문제 : 블록의 색상은 회색이어야하지만 대신 빨간색 인 볼의 색상 속성을 상속합니다. block2는 파란색이어야하지만 회색 인 블록의 색상을 상속합니다. 이 문제를 어떻게 수정합니까? 난 그냥 내가 이런 것들로 많은 경험을하지 않아도 프로그램하는 방법을 배우기 시작했다 :/

코드 : 그래서

function Player(x, y, w, h, color) { 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.color = color; 
    this.dy = 3; 

    this.draw = function() { 
     c.fillRect(this.x, this.y, this.w, this.h); 
     c.fillStyle = this.color; 
     c.stroke(); 
     c.closePath(); 
    }; 

    this.update = function() { 
     if (keyW === true) { 
      block.y -= block.dy; 
     } 
     if (keyS === true) { 
      block.y += block.dy; 
     } 
     if (arrowUp === true) { 
      block2.y -= block2.dy; 
     } 
     if (arrowDown === true) { 
      block2.y += block2.dy; 
     } 


     if (this.y + this.h > canvas.height) { 
      this.y = canvas.height - this.h; 
     } 
     if (this.y < 0) { 
      this.y = 0; 
     } 

     this.draw(); 
    }; 
} 
block = new Player(10, (canvas.height/2) - 50, 250, 100, "grey"); 
block2 = new Player(canvas.width - 30, (canvas.height/2) - 50, 20, 100, "blue"); 

function Ball(x, y, radius, color) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.color = color; 
    this.dx = 3; 
    this.dy = 0; 

    this.draw = function() { 
     c.beginPath(); 
     c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 
     c.fillStyle = this.color; 
     c.fill(); 
     c.closePath(); 
    }; 

    this.update = function() { 
     this.x -= this.dx; 

     if (this.y + this.radius > canvas.height) { 
      this.y = canvas.height - this.radius; 
     } 
     if (this.y - this.radius < 0) { 
      this.y = this.radius; 
     } 
     if (this.x + this.radius > canvas.width) { 
      this.dx = -this.dx; 
     } 
     if (this.x - this.radius < 0) { 
      this.dx = -this.dx; 
     } 

     this.draw(); 
    }; 
} 
ball = new Ball(canvas.width/2 - 50, canvas.height/2, 10, "red"); 

Answer 1

당신은 색상을 변경하기 전에 플레이어 업데이트 방법 내부 구형 영역을 채우고 있습니다, red 인 이전 fillStyle 값을 사용합니다.

c.fillRect(x, y, w, h); 
c.fillStyle = this.color; 

해야 할 것 : 대신의

이

c.fillStyle = this.color; 
c.fillRect(x, y, w, h);