var calibX = 9;
var calibX2 = 20;
var calibY = 15;
var beanSpeed = 10;
var refreshRate = 10;

document.addEventListener("click", function shootLazer(e) {
    var x = e.clientX + calibX; 
    var y = e.offsetY + calibY; 
    var bean = document.createElement('Bean');
        bean.style.width = '3px';
        bean.style.height = '22px';
        bean.style.backgroundColor = 'red';
        bean.style.left = x + 'px';
        bean.style.top = y + 'px';
        bean.style.position = 'absolute';
        bean.style.zIndex = '100';
        document.body.appendChild(bean);

    var x = e.clientX + calibX2; 
    var y = e.offsetY + calibY; 
    var bean = document.createElement('Bean');
        bean.style.width = '3px';
        bean.style.height = '22px';
        bean.style.backgroundColor = 'red';
        bean.style.left = x + 'px';
        bean.style.top = y + 'px';
        bean.style.position = 'absolute';
        bean.style.zIndex = '100';
        document.body.appendChild(bean);
        
});

function animateBeans(){
        var Beans = document.getElementsByTagName('Bean');
        var BeansL = document.getElementsByTagName('Bean').length;
    for (var i = 0; i < BeansL; i++){

        var beanpos = parseInt(Beans[i].style.top, 10);

        if (beanpos < 0) {
            delete Beans[i];
            Beans[i].style.backgroundColor = '';
        } else {
            Beans[i].style.top = beanpos - beanSpeed + 'px';
        }
    }

    setTimeout(animateBeans, refreshRate);
}

animateBeans();