Cooldown 360 degree

Cooldown ÀÌÆåÆ®°¡ 360µµ±îÁö ȸÀüÇÏ¸é ·»´õ¸µ ·çÇÁ¸¦ ¹þ¾î³ªµµ·Ï Àû¿ëÇØ º¸ÀÚ.


css Ŭ·¡½º Ãß°¡ ¹× Á¦°Å

ĵ¹ö½º¿¡ Æ÷Ä¿½º°¡ ÀÖ´ÂÁö ³ªÅ¸³»±â À§Çؼ­ css Ŭ·¡½º¸¦ Ãß°¡ ¹× Á¦°ÅÇÏ´Â Äڵ带 Ãß°¡ ÇÏ¿´´Ù.

this.addNormalShadow = function() {
    if(canvas.classList.contains("select-shadow"))
        canvas.classList.remove("select-shadow");
    canvas.classList.add('normal-shadow');
}

this.addSelectShadow = function() {
    if(canvas.classList.contains("normal-shadow"))
        canvas.classList.remove("normal-shadow");   
    canvas.classList.add('select-shadow');
}   

360µµ¸é ·çÇÁ ¹þ¾î³ª±â

updateCooldown¿¡¼­ 360µµ°¡ ³ÑÀ¸¸é repeat °ªÀ» false·Î ¼³Á¤ÇÏ°í ·çÇÁ¸¦ ¹þ¾î ³­´Ù.

this.onFrameCooldown  = function() {
    var self = this;
    if (!timer)
        return;
       
    var now = getTime();
    var repeat = this.updateCooldown((now - lastTime)/1000.0);      
    if(repeat === false) {
        return;
    }
    lastTime = now;
    requestAnimationFrame(function() {
        self.onFrameCooldown();
    });
}

this.updateCooldown = function(deltaTime) {
    remainedTime = remainedTime + deltaTime;
    accumulatedTime += deltaTime;
    if (remainedTime > frameTime) {      
        remainedTime -= frameTime;
        var degree = 360*accumulatedTime/endTime;  
       
        var repeat = true;
        if(degree > 360) {
            degree = 360;
            repeat = false;
        }
        this.render(degree);
        return repeat;
    }


Å°º¸µå·Î Cooldown ÀÌÆåÆ® ½ÇÇà

'1', '2', '3' Å°¸¦ ´©¸£¸é °¢°¢ ù¹ø° , µÎ¹ø°, ¼¼¹ø° Äð´Ù¿î ÀÌÆåÆ®°¡ ½ÇÇà µÈ´Ù.

function onKeyDown(e) {
    if(e.keyCode === '1'.charCodeAt(0)) {
        cooldown1.addSelectShadow();
        cooldown1.play();
    }
    else if(e.keyCode === '2'.charCodeAt(0)) {
        cooldown2.addSelectShadow();
        cooldown2.play();
    }
    else if(e.keyCode === '3'.charCodeAt(0)) {
        cooldown3.addSelectShadow();
        cooldown3.play();
    }
}

´Ù¿î·Îµå:
test05.html
grass.jpg