如何使用函数来更改另一个函数的属性？

我是很新的JS，并通过课程已经在网上了，但很令人沮丧，我只是似乎对我自己这样艰难的时刻，所以我很抱歉，如果这个问题有一个明显的答案。基本上，这个程序在一个盒子里反射一个彩色的球。每次遇到墙壁时，我都希望改变颜色。我想出了一个办法通过把所有的信息在一个功能，但我使用的教程这样做是说（为整洁的代码目的）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);

来源

2017-04-06 CKFire

你可以做的是传递参数，这将改变函数的行为。
在这种情况下，你会路过你想要的颜色。

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"); 
    } 
}

来源

2017-04-06 05:33:05

遗憾地说，但一个'function'是'object'，因为它继承自Object，因此可以做的一切对象可以做。例如'函数A（）{的console.log（ “A”）}; AB- = “B”; AC =函数（）{此（）;的console.log（this.b + “C” + “A是” +（typeof A））};'然后'Ac（）'将输出'Abc A是一个函数'。它可能会支付修正开头的段落。 – Blindman67

看来你混合了JavaScript的一些概念。所以出于可读性和设计的原因，我会为球创建一个'class'。事情是这样的：

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风格的属性：

ball.color = "#0095DD";

您还可以添加一些方法到你的球：

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(); 
    } 
}

您可以使用此类和代码扩展您的代码。我想，你明白了。

来源

2017-04-06 05:34:59 Guybrush

如何使用函数来更改另一个函数的属性？

回答

相关问题