振盪函數

Question

試圖創建一個可以動態振盪對象屬性的函數。我已經設法在一個函數之外創建它，但是我無法使它在一箇中工作。這是因爲角度變量，這增加了每一幀。下面是一個例子，讓一個物體在一個圓圈內振動x和y道具。

Example fiddle.

初始化...

var obj = new Ball(arguments...), 
    target = { 
     x: 100, 
     y: 100 
    }, 
    angle = 0, 
    radius = 50, 
    speed = 0.1; 

環......

// clear canvas 
obj.x = target.x + Math.cos(angle) * radius; 
obj.y = target.y + Math.sin(angle) * radius; 
angle += speed; 
// rAF 

這工作得很好，但是當我試圖使其可重複使用，把它變成一個功能，它不起作用。

function oscillate(obj, target, angle, radius, speed) { 
    obj.x = target.x + Math.cos(angle) * radius; 
    obj.y = target.y + Math.sin(angle) * radius; 
    angle += speed; 
} 

如何讓它在一個函數中工作？

Answer 1

這是因爲angle未通過引用傳遞。 JS沒有通過引用。

你可以只修改外變量通過不聲明局部之一：

var map = document.getElementById('map'), 
 
    fx = map.getContext('2d'); 
 
var ball = { 
 
     x: 50, 
 
     y: 50, 
 
     radius: 50 
 
    }, 
 
    target = { 
 
     x: map.width/2, 
 
     y: map.height/2, 
 
    }, 
 
    angle = 0, 
 
    radius = 50, 
 
    speed = 0.1; 
 
ball.draw = function(fx) { 
 
    fx.beginPath(); 
 
    fx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 
 
    fx.fill(); 
 
}; 
 
function oscillate(obj, target, radius, speed) { 
 
    obj.x = target.x + Math.cos(angle) * radius; 
 
    obj.y = target.y + Math.sin(angle) * radius; 
 
    angle += speed; 
 
} 
 
(function update() { 
 
    fx.clearRect(0, 0, map.width, map.height); 
 
    oscillate(ball, target, radius, speed) 
 
    ball.draw(fx); 
 
    requestAnimationFrame(update); 
 
}());

<canvas id='map'></canvas>

或者，傳遞一個對象：

var map = document.getElementById('map'), 
 
    fx = map.getContext('2d'); 
 
var ball = { 
 
    x: 50, 
 
    y: 50, 
 
    radius: 50 
 
}, 
 
data = { 
 
    obj: ball, 
 
    target: { 
 
    x: map.width/2, 
 
    y: map.height/2, 
 
    }, 
 
    angle: 0, 
 
    radius: 50, 
 
    speed: 0.1 
 
}; 
 
ball.draw = function(fx) { 
 
    fx.beginPath(); 
 
    fx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 
 
    fx.fill(); 
 
}; 
 
function oscillate(data) { 
 
    data.obj.x = data.target.x + Math.cos(data.angle) * data.radius; 
 
    data.obj.y = data.target.y + Math.sin(data.angle) * data.radius; 
 
    data.angle += data.speed; 
 
} 
 
(function update() { 
 
    fx.clearRect(0, 0, map.width, map.height); 
 
    oscillate(data) 
 
    ball.draw(fx); 
 
    requestAnimationFrame(update); 
 
}());

<canvas id='map'></canvas>