<style>
    .qqstick {
        background: url("img/sticksprite.png");
        width: 256px;
        height: 256px;
        transform: scale(0.5, 0.5);
        animation: none;
        position: absolute;
        left: -120px;
    }

    .borderstick {
        width: 64px;
        height: 64px;
    }

    @keyframes avoid {
        from {
            background-position: -512px 0px
        }
        to {
            background-position: -512px -768px
        }
    }

    @keyframes walk {
        from {
            background-position: 0px 0px
        }
        to {
            background-position: 0px -768px
        }
    }

    @keyframes attack {
        from {
            background-position: -256px 0px
        }
        to {
            background-position: -256px -768px
        }
    }
</style>
<script>
    var look = 20,
        brake = 0.1,
        mouseX = 0,
        mouseY = 0,
        attackDistance = 32,
        walking = false,
        avoiding = false,
        height, distance;

    function updateMouse(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
        touchMe();
    }

    function touchMe() {
        lookForMouse();
        if (Math.abs(distance) < 8 && Math.abs(height) < 64) avoid();
    }

    function lookForMouse() {
        height = mouseY - $(".qqstick").offset().top - 32;
        distance = mouseX - ($(".qqstick").offset().left + 64);
    }

    function whereTo() {
        var howFar = Math.abs(distance) * brake;
        if (howFar > 10) howFar = 10;
        lookForMouse();
        if (!avoiding) {
            if (Math.abs(distance) < attackDistance) {
                if (Math.abs(height) < 64) attack();
                else wait();
            } else {
                walk();
                if (distance < 0) {
                    turnLeft();
                    moveLeft(howFar, look);
                } else {
                    turnRight();
                    moveRight(howFar, look);
                }
            }
            setTimeout(whereTo, look * 2);
        }
        $(".log").text(mouseX + " " + mouseY + " " + ($(".qqstick").offset().left + 64));
    }

    function avoid() {
        if (!avoiding) {
            $(".qqstick").css("animation", "avoid 0.3s steps(3) infinite");
            attackDistance = 64;
            if ($(".qqstick").offset().left + 64 > mouseX) {
                turnLeft();
                moveRight(150, 300);
            } else {
                turnRight();
                moveLeft(150, 300);
            }
            avoiding = true;
            setTimeout(function () {
                avoiding = false;
                whereTo();
            }, 300);
            walking = false;
        }
    }

    function attack() {
        $(".qqstick").css("animation", "attack 0.4s steps(3) infinite");
        attackDistance = 64;
        walking = false;
    }

    function wait() {
        $(".qqstick").css("animation", "none");
        attackDistance = 64;
        walking = false;
    }

    function turnLeft() {
        $(".qqstick").css("transform", "scale(-0.5,0.5)");
    }

    function turnRight() {
        $(".qqstick").css("transform", "scale(0.5,0.5)");
    }

    function moveLeft(x, t) {
        var left = {
            'left': "-=" + x + "px"
        };
        $(".qqstick").animate(left, t, "linear");
    }

    function moveRight(x, t) {
        var right = {
            'left': "+=" + x + "px"
        };
        $(".qqstick").animate(right, t, "linear");
    }

    function walk() {
        if (!walking) {
            $(".qqstick").css("animation", "walk 0.5s steps(3) infinite");
            attackDistance = 32;
            walking = true;
        }
    }

    function watchMouse() {
        look = true;
        $(".log").text("true?");
    }
    whereTo();
</script>


<div class="container">
    <div class="row">
        <div class="col-sm-9">
            <div class="qqstick" />
            <div class="borderstick"></div>
            <div class="log" />
        </div>
    </div>
</div>
<script>
    $(document).mousemove(function (event) {
        updateMouse(event);
    });
</script>