EffectHub.com: your best source for gaming

Recommendation

More Effects...

$(document).ready(function() {
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("#canvas").height();
    
    var msTimer = 0.0;
    var lightningTimer;
    
    var lightningAlpha;
    
    var rainArr = [50];
    var rainSpeed = 4;
    
    // CODE IS UGLY. NEEDS CLEANING
  
    // initialize
    function init() {
        var windowWidth = $( window ).width() + 4;
        $(canvas).width( windowWidth );  
        create_rain();
        lightningTimer = 8000.0;
        lightningAlpha = 0.0;
        
        // 1 frame every 30ms
        if (typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(mainLoop, 30);
    }
    init();
    
    function create_rain() {
        var length = 500;
        rainArr = []; //Empty array to start with
        for (var i = length - 1; i >= 0; i--) {
            rainArr.push({
                x: 1,
                y: 0,
                z: 0
            });
        }
        
        for (var j = 0; j < 500; j++) {
            rainArr[j].x = Math.floor((Math.random() * 820) - 9);
            rainArr[j].y = Math.floor((Math.random() * 520) - 9);
            rainArr[j].z = Math.floor((Math.random() * 2) + 1);
            rainArr[j].w = Math.floor((Math.random() * 3) + 2);
        }
    }
    
    function mainLoop() {
        msTimer += 30;
        
        if (lightningTimer < 0.0)  {
            lightningTimer = 8000.0;
        }
        else {
            lightningTimer -= 30.0;
        }
        
        var grd = ctx.createRadialGradient(0, 0, 0, 141, 0, 150);
        
        ctx.fillStyle = "#202426";
        ctx.fillRect(0,0,w,h);
        
        lamp();        
        rain();
        
        if (lightningTimer < 500.0) {
            weather(lightningTimer);
        }
        
        ctx.fillStyle = 'rgba(255, 255, 255, .1)';
        ctx.font = '30px Sans-Serif';
        ctx.fillText(".rain", w - 70, 492);
    }
  
  
    // lamp visuals
    function lamp() {
        var grd = ctx.createLinearGradient(150, 210, 150, 500);
        grd.addColorStop(0.000, 'rgba(60, 60, 60, 1.000)');
        grd.addColorStop(0.2, 'rgba(80, 80, 80, 1.000)');
        grd.addColorStop(1, 'rgba(45, 45, 45, 1.000)');        
        ctx.fillStyle = grd;
        ctx.fillRect(247, 210, 6, 290);

lightningAlpha = 0.0;
    
        if ( _lTimer > 350.0) {
            lightningAlpha = (500.0 - _lTimer) * 0.004;
        }
                
        else if (_lTimer < 350.0 && _lTimer > 250.0) {
            lightningAlpha = (_lTimer - 250.0) * 0.006;
        }    
        
        else if (_lTimer < 250.0 && _lTimer >= 100.0) {
            lightningAlpha = (250.0 - _lTimer) * 0.004;
        }
        
        else if (_lTimer < 100.0 && _lTimer >= 0.0) {
            lightningAlpha = _lTimer * 0.006;
        }
       
        if (lightningAlpha > 0.0) {
            ctx.fillStyle = 'rgba(250, 250, 245, ' + lightningAlpha + ')';
            ctx.fillRect(0,0,w,h);
        }
    }
    
    /*
    // keyboard controls (not using)
    $(document).keydown(function(e) {
        var key = e.which;
        if (key == "37" && d != "right") d = "left";
        else if (key == "38" && d != "down") d = "up";
        else if (key == "39" && d != "left") d = "right";
        else if (key == "40" && d != "up") d = "down";
    })*/
})

CSS

HTML

Recommendation

Join Effecthub.com