関数を使用して別の関数のプロパティを変更する方法は？

Question

私はJSにはかなり新しく、オンラインでコースを受講しましたが、非常にイライラしています。私自身はとても苦労しているようです。基本的に、このプログラムは箱の中に色のついたボールを跳ね返します。私はその色が壁に当たるたびに変わることを望んでいます。私は、すべての情報を1つの関数の下に置くことによってそのようにする方法を考え出しましたが、私が使っているチュートリアルでは、（ちょっとしたコード目的のために）2つの関数がうまくいくと言っています。私が将来それをしなければならないことを知っているので、情報が異なる機能で利用可能なときに行うこと。私は重要なコード行についてコメントします。お手伝いできる人には本当にありがとうございます。

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var x = canvas.width/2; 
var y = canvas.height-30; 

var dx = 4; 
var dy = -4; 

var ballRadius = 30; 

function drawBall() {       \\draws the ball 
    ctx.beginPath(); 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
    ctx.fillStyle = "#ff0000"; 
    ctx.fill(); 
    ctx.closePath(); 
} 

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawBall(); 
    x += dx; 
    y += dy; 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { \\says when to bounce 
     dx = -dx; 
     drawBall.ctx.fillStyle = "#ff0000"; \\this line and next line are lines I wrote 
     drawBall.ctx.fill();     \\that are obviously incorrect (same goes for 
    }           \\ if statement below). What am I doing wrong? 
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { 
     dy = -dy; 
     drawBall.ctx.fillStyle = "#0095DD"; 
     drawBall.ctx.fill(); 
    } 
} 
setInterval(draw, 10); 

Answer 1

あなたができることは、関数の動作を変更するパラメータを渡すことです。
この場合、希望の色を渡します。

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var x = canvas.width/2; 
var y = canvas.height-30; 

var dx = 4; 
var dy = -4; 

var ballRadius = 30; 

function drawBall(color) {       // draws the ball 
    ctx.beginPath(); 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
} 

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawBall(); 
    x += dx; 
    y += dy; 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { // says when to bounce 
     dx = -dx; 
     drawBall("#ff0000");  
    }           
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { 
     dy = -dy; 
     drawBall("#0095DD"); 
    } 
} 

Answer 2

JavaScriptの概念をいくつか混在しているようです。読みやすさとデザインのために、私はボールのための「クラス」を作りました。あなたはまた、いくつかを追加することができます

ball.color = "#0095DD"; 

：

function Ball(x, y, radius, color) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.color = color; 
} 

あなたはこれであなたのボールのインスタンスを作成することができます：

var ball = new Ball(x, y, radius, color); 

とJavaスタイルのプロパティにアクセスし、このような何かあなたのボールへの方法：

function Ball(x, y, radius, color) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.color = color; 

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

このクラスとコードでコードを拡張することができます。私はあなたがそれを得ると思う。