multiple cooldown

여러개의 cooldwon 오브젝트를 만들기 위해 오브젝트를 new로 생성한다.
특별히 주의할 점이라면 requestAnimationFrame 함수를 실행할때 this를 전달해야 한다.

requestAnimationFrame(onFrameCooldown) 이나 requestAnimationFrame(this.onFrameCooldown) 둘다 정상적으로 실행이 되지 않을 것이다.
this를 전달하는 방법은 다음과 같은 방법이 있다.

requestAnimationFrame에서 this 전달 하기

1. bind(this) 사용1

requestAnimationFrame(this.onFrameCooldown.bind(this));

2. bind(this) 사용2

this.onFrameCooldown = function() {
requestAnimationFrame(this.onFrameCooldown);
}.bind(this);

3. 새로운 함수 사용

this.onFrameCooldown = function() {
    var self = this;
    if (!timer)
        return;

    var now = getTime();
    this.updateCooldown((now - lastTime)/1000.0);
    lastTime = now;
    requestAnimationFrame(function() {
        self.onFrameCooldown();
    });
}

4. ES6 사용

requestAnimationFrame(() => { this.onFrameCooldown() } );

5. 생성자에서 바인딩 함수 사용

var Game = function () {
    this.counter = 0;
    this.loopBound = this.loop.bind(this);
    this.loopBound();
}
Game.prototype.loop = function () {
    console.log(this.counter++);
    requestAnimationFrame(this.loopBound);
}
var gameOne = new Game();

loopBound 이름 대신 loop 이름을 사용해도 문제가 없다.

이 방법은 꼭 프로토타입으로 해야 하는것인지 ???
나도 확실하게 모르겠다. 내부에서 함수 정의를 하면 문법 오류가 뜬다.

6. 클래스 생성자에서 바인딩 함수 사용

class Game {
    constructor() {
        this.counter = 0;
        this.loop = this.loop.bind(this);
    }

    loop() {
        console.log(this.counter++);
        requestAnimationFrame(this.loop);
    }
}

테스트 : test04.html

setTimeout을 사용하는 방법은 버그가 있다. setTimeout도 this를 바인딩 해주어야 한다.
이 버그는 나중에 수정할것이다.

전체 Cooldown 소스는 다음과 같다.

function Cooldown(elementName) {
    var canvas = document.getElementById(elementName);
    var timer;
    var timerStart;
    var lastTime;
    var nowTime;
    var accumulatedTime = 0;
    var remainedTime = 0;
    const frameTime = 0.03333;
    var radius = 100;

    this.render = function(degree) {
        var digits = 6;
        var radian = degree * Math.pi/180;
        var ctx = canvas.getContext('2d');

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.lineWidth = 3;
        ctx.fillStyle = 'rgba(200,100,100,0.6)';
        ctx.strokeStyle = 'rgba(200,100,100,0.3)';

        ctx.translate(canvas.width/2, canvas.height/2);
        ctx.rotate(-Math.PI/2);

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo( radius * Math.cos(0).toFixed(digits), radius * Math.sin(0).toFixed(digits));
        ctx.moveTo(0, 0);
        ctx.lineTo( radius * Math.cos(radian).toFixed(digits), radius * Math.sin(radian).toFixed(digits));
        ctx.arc(0, 0, radius, degree * Math.PI/180, Math.PI*2, false);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();
    }

    var clearCanvas = function() {
        var ctx = canvas.getContext('2d');
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    };

    var endCooldown = function() {
        clearCanvas();
        timer = null;
    }

    var getTime = function() { return new Date().getTime(); }
    this.onFrameCooldown = function() {
        var self = this;
        if (!timer)
            return;

        var now = getTime();
        this.updateCooldown((now - lastTime)/1000.0);
        lastTime = now;
        requestAnimationFrame(function() {
            self.onFrameCooldown();
        });
    }

    this.updateCooldown = function(deltaTime) {
        remainedTime = remainedTime + deltaTime;
        accumulatedTime += deltaTime;
        if (remainedTime > frameTime) {
            remainedTime -= frameTime;
            var degree = accumulatedTime*360;
            this.render(degree);
        }
    }

    this.initCooldown = function() {
        if (!timer) {
            radius = Math.sqrt(Math.pow(canvas.clientWidth, 2) + Math.pow(canvas.clientHeight, 2));

            timer = setTimeout(endCooldown, 3000);
            lastTime = getTime();
            timerStart = getTime();
            this.render(0);
            this.onFrameCooldown();
        }
    }

    this.play = function() {
        if (!timer)
            this.initCooldown();
    }
};

var cooldown = new Cooldown('myCanvas');
//cooldown.render(90);
cooldown.play();
var cooldown1 = new Cooldown('myCanvas1');
setTimeout(function(){ cooldown1.play(); } , 300);

var cooldown2 = new Cooldown('myCanvas2');
setTimeout(function() { cooldown2.play(); } , 900);

참고)
this 바인딩없이 requestAnimationFrame 사용하기
http://www.html5gamedevs.com/topic/20251-using-a-non-global-function-as-requestanimationframe-callback/
생성자에서 바인딩 함수 사용하기
https://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword