Feliz AñoNuevo FernetJS

by pjnovas

HTML

<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
    
<div class="ctn">
    <canvas id="canvas" width="600" height="600"></canvas>
    <div class="estado">
        <label>Luces</label>
        <span id="luces">000</span>
        <label id="felicidad">FELIZ AÑO!!</label>        
    </div>
    <div id="fin" style="display:none;">
        <p>APAGóN!</p>
        <p>Feliz Año desde FernetJS!</p>
        <a id="reiniciar">reiniciar</a>
    </div>
</div>

CSS

.ctn {
    position: relative;
    width: 600px;
}

canvas, #fin {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#fin {
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 316px;
    z-index: 2;
    color: white;
    font-family: 'Press Start 2P', cursive;
}

#fin p {
    font-size: 20px;
    margin: 30px 20px;
}

#fin a {
    font-size: 25px;
    margin: 30px 20px;
    color: black;
    text-decoration: underline;
    float: right;
    display: inline-block;
    width: 224px;
    background-color: white;
    padding: 5px;
    cursor: pointer;
}

#fin a:hover {
    color: white;
    background-color: black;
}

canvas {
    background: url('http://fernetjs.com/wp-content/uploads/2013/12/newyear_game.png');
}

.estado {
    position: absolute;
    top: 320px;
    left: 0;
    width: 100%;
    height: 70px;
    font-family: 'Press Start 2P', cursive;
    color: white;
    font-size: 26px;
    padding-left: 8px;
    line-height: 2.5;
    overflow: hidden;
    z-index: 3;
}

JavaScript

var fernetjs = {};

fernetjs.juego = (function(){
    var reqAnimId,
        lastTime = Date.now(),
        time = 0,
        seleccion = null,
        prendidas = [],
        falladas = [],
        fallar = 0,
        fallarCoef = 3,
        fallasCant = 1,
        chispas = [],
        canvas,
        contexto,
        lucesTotal = 0;
    
    function actualizar(dt) {
        var luces = fernetjs.config.luces;
        
        for(var i=0; i<luces.length; i++){
            var luz = luces[i]; 
            
            if (seleccion){
                if (seleccionEnLuz(seleccion, luz)){
                    luz.golpe = 0.3;
                    seleccion = null;
                }
            }
            
            if (luz.golpe) {
                luz.falla = -1;
                luz.golpe -= dt;
                
                var idx = falladas.indexOf(i);
                if (idx >= 0) falladas.splice(idx, 1);
                
                if (luz.golpe <= 0){
                    prendidas.push(i);
                    lucesTotal++;
                    luz.golpe = null;
                    luz.x = luz.baseX;
                    luz.y = luz.baseY;
                    
                    fallarCoef -= 0.25;
                    if (fallarCoef < 1) fallarCoef = 1;
                }
                else {
                    luz.x += (Math.random() > 0.5 ? 1 : -1) * 0.5;
                    luz.y += (Math.random() > 0.5 ? 1 : -1) * 0.5;
                }
            }
            
            if(luz.falla > 0){
                luz.falla -= dt;
                if (luz.falla <= 0){
                    luz.falla = 0;   
                }
            }
        }
        
        fallar -= dt;
        
        function hacerFallo(){
            var rnd = Math.floor(Math.random()*(prendidas.length));
            var i = prendidas[rnd];
            var l = luces[i];
            if (l && l.falla === -1 && !l.golpe){
                l.falla = 0.6;
               ...