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

あなたは色を変更する前に、プレーヤーのアップデート方法内部RECTを充填され、以前のfillStyleの値は赤です。

の代わりに：

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

の操作を行います。

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