Rocket Launcher :)

by Yunus Gaziev

HTML

<div id="rocket"></div>

SCSS

#rocket {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 6px;
    height: 20px;
    background-color: #000;
    transform-origin: center center;
    transition: transform .1s linear, top .5s linear, left .5s linear;
    
    &:before,
    &:after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 50%;
    }
    
    &:before {
        top: 0;
        background-color: red;
    }
    
    &:after {
        bottom: 0;
        background-color: blue;
    }
}

JavaScript

/**
 * Возвращает угол между двумя точками по отношению к оси X
 *
 * @param {number} pX   координата X первой точки
 * @param {number} pY   координата Y первой точки
 * @param {number} eX   координата X второй точки (динамической)
 * @param {number} eY   координата Y второй точки (динамической)
 * @returns {number}    угол
 */
var getAngle = (function(pX, pY, eX, eY) {
	
    var angle  = null;
    
    return function(pX, pY, eX, eY) {
    	
        angle = (Math.atan2(pX-eX, pY-eY) * (180/3.14)).toFixed(0);

        return Math.sign(angle) ? -(angle) : angle;
    }
})();

var rocket = document.getElementById('rocket');

document.addEventListener('click', function(event) {

	var x = $('#rocket').offset().left;
    var y = $('#rocket').offset().top;
    
    var angle = getAngle(x, y, event.pageX, event.pageY);
    
    $('#rocket').css({
    	top : event.pageY - 10, // коррекция по высоте (высота ракеты/2)
        left : event.pageX - 3, // коррекция по ширине (ширина ракеты/2)
    	transform : 'rotate(' + angle + 'deg)'
    });

}, false);


/*
document.addEventListener('mousemove', function(event) {

	var x = $('#rocket').offset().left;
    var y = $('#rocket').offset().top;
    
    $('#rocket').css({
    	transform : 'rotate(' + getAngle(x, y, event.pageX, event.pageY) + 'deg)'
    });

}, false);
*/