Mega Baby

index.html

<div class="container">
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="mega-baby" data-status="idle">
        <div class="body">
            <div class="upper-body">
                <div class="head">
                    <i class="face"></i>
                    <div class="eye left-eye"></div>
                    <div class="eye right-eye"></div>
                </div>
                <div class="arm left-arm">
                    <i class="hand left-hand"></i>
                    <i class="bicep left-bicep"></i>
                </div>
                <i class="torso"></i>
                <div class="arm right-arm">
                    <i class="bicep right-bicep"></i>
                    <i class="hand right-hand"></i>
                </div>
            </div>
            <div class="lower-body">
                <i class="abs"></i>
                <i class="leg left-leg"></i>
                <i class="leg right-leg"></i>
            </div>
        </div>
        <div class="feet">
            <i class="foot left-foot"></i>
            <i class="foot right-foot"></i>
        </div>
    </div>
</div>
<canvas class="fx"></canvas>

mega-baby.markdown

Mega Baby

A toddler hell-bent on D E S T R U C T I O N !

A Pen by Ilya on CodePen.

License.

script.js

'use strict';

var container = document.querySelector('.mega-baby');
var leftEye = document.querySelector('.left-eye');
var rightEye = document.querySelector('.right-eye');
var fx = document.querySelector('.fx');
var fxContext = fx.getContext('2d');
var flame = document.createElement('img');
var mrBurns = [];
var currentBurn = {};
var leftEyePosition = { x: 0, y: 0 };
var rightEyePosition = { x: 0, y: 0 };
var cursorPosition = { x: 0, y: 0 };
var isLasers = false;
var animationFrame = null;

var throttle = function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last = undefined,
        deferTimer = undefined;
    return function () {
        var context = scope || this;
        var now = +new Date(),
            args = arguments;
        if (last && now < last + threshhold) {
            // hold on to it
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            last = now;
            fn.apply(context, args);
        }
    };
};

var getEyePosition = function getEyePosition() {
    var left = leftEye.getBoundingClientRect();
    var right = rightEye.getBoundingClientRect();
    leftEyePosition = {
        x: left.left + left.width / 2,
        y: left.top + left.height / 2
    };
    rightEyePosition = {
        x: right.left + right.width / 2,
        y: right.top + right.height / 2
    };
};

var getRotation = function getRotation(el, _ref) {
    var x = _ref.x;
    var y = _ref.y;

    var diffX = cursorPosition.x - x;
    var diffY = cursorPosition.y - y;
    var rad = Math.atan2(diffY, diffX);
    return 'rotate(' + rad * (180 / Math.PI) + 'deg)';
};

var drawBurn = function drawBurn(_ref2) {
    var opacity = _ref2.opacity;
    var points = _ref2.points;

    var opacityBase = opacity * 0.8;
    var opacityDiff = opacity * 0.2;
    var lastX = 0;
    var lastY = 0;
    for (var i = 0; i < points.length; i++) {
        var _points$i = points[i];
        var x = _points$i.x;
        var y = _points$i.y;

        if (Math.abs(x - lastX) >= 30 || Math.abs(y - lastY) >= 30) {
            lastX = x;
            lastY = y;
            fxContext.save();
            fxContext.globalAlpha = opacityBase + opacityDiff * Math.random();
            fxContext.translate(x, y);
            fxContext.scale(opacity, opacity);
            fxContext.drawImage(flame, -30, -60, 60, 60);
            fxContext.restore();
        }
    }
};

var addNewBurn = throttle(function () {
    if (currentBurn.points) {
        currentBurn.points.push({
            x: cursorPosition.x,
            y: cursorPosition.y
        });
    }
}, 10);

var sickLasersMyDude = function sickLasersMyDude() {
    getEyePosition();

    fx.width = window.innerWidth;
    fx.height = window.innerHeight;

    // draw lasers
    if (isLasers) {
        fxContext.save();
        fxContext.beginPath();
        fxContext.lineWidth = 3;
        fxContext.lineCap = 'round';
        fxContext.moveTo(leftEyePosition.x, leftEyePosition.y);
        fxContext.lineTo(cursorPosition.x, cursorPosition.y);
        fxContext.moveTo(rightEyePosition.x, rightEyePosition.y);
        fxContext.lineTo(cursorPosition.x, cursorPosition.y);

        fxContext.shadowBlur = 10;
        fxContext.shadowColor = '#FD0100';

        fxContext.strokeStyle = '#FD0100';
        fxContext.globalAlpha = 0.7 + Math.random() * 0.3;
        fxContext.closePath();
        fxContext.stroke();

        fxContext.lineWidth = 2;
        fxContext.strokeStyle = '#FFF';
        fxContext.stroke();
        fxContext.restore();

        addNewBurn();
    }

    if (currentBurn.points) {
        drawBurn(currentBurn);
    }

    for (var i = mrBurns.length - 1; i >= 0; i--) {
        var burn = mrBurns[i];
        drawBurn(burn);
        burn.opacity -= 0.002;
        if (burn.opacity <= 0) {
            mrBurns.splice(i, 1);
        }
    }

    if (isLasers) {
        fxContext.save();
        fxContext.beginPath();
        fxContext.fillStyle = '#FFF';
        fxContext.arc(cursorPosition.x, cursorPosition.y, 4, 0, Math.PI * 2);
        fxContext.closePath();
        fxContext.fill();
        fxContext.shadowBlur = 10;
        fxContext.shadowColor = '#FD0100';
        fxContext.globalAlpha = 0.3 + Math.random() * 0.7;
        fxContext.fill();
        fxContext.fill();
        fxContext.restore();
    }

    animationFrame = window.requestAnimationFrame(sickLasersMyDude);
};

var cancelLasers = function cancelLasers() {
    container.dataset.status = 'idle';
    isLasers = false;
    if (currentBurn.points) {
        mrBurns.push(currentBurn);
    }
    currentBurn = {};
};

window.addEventListener('mousemove', function (e) {
    cursorPosition = {
        x: e.pageX,
        y: e.pageY
    };
    leftEye.style.transform = getRotation(leftEye, leftEyePosition);
    rightEye.style.transform = getRotation(rightEye, rightEyePosition);
});

window.addEventListener('resize', function () {
    getEyePosition();
    fx.width = window.innerWidth;
    fx.height = window.innerHeight;
    mrBurns = [];
});

window.addEventListener('mouseout', cancelLasers);

document.addEventListener('mousedown', function (e) {
    e.preventDefault();
    isLasers = true;
    currentBurn = {
        opacity: 1,
        points: []
    };
});

document.addEventListener('mouseup', function (e) {
    e.preventDefault();
    cancelLasers();
});

// start it up
getEyePosition();
sickLasersMyDude();

flame.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59639/fire.png';

style.css

html,
body {
  height: 100%;
}

body {
  cursor: crosshair;
  height: 100%;
  width: 100%;
}

.container {
  align-items: center;
  background: #81c8fe;
  border-radius: 40px;
  bottom: 20px;
  display: flex;
  justify-content: center;
  left: 20px;
  overflow: hidden;
  position: absolute;
  right: 20px;
  top: 20px;
}

.fx {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.cloud {
  background: no-repeat url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/59639/cloud.png") center center;
  height: 120px;
  position: absolute;
  top: 2%;
  width: 100%;
  animation: cloud 15s linear 0s infinite normal backwards;
}
.cloud:nth-child(2n) {
  background-position: 0% 50%;
  top: 10%;
  animation-duration: 11s;
}
.cloud:nth-child(3n) {
  background-position: 100% 50%;
  top: 18%;
  animation-duration: 11s;
}

.mega-baby {
  position: relative;
  text-align: center;
  z-index: 1;
}
.mega-baby i {
  background: no-repeat url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/59639/mega-baby.png");
  background-size: 120px 600px;
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px;
}
.mega-baby i.face {
  background-position: 0 0;
}
.mega-baby i.left-hand {
  background-position: 0 -60px;
}
.mega-baby i.right-hand {
  background-position: 0 -120px;
}
.mega-baby i.left-bicep {
  background-position: 0 -180px;
}
.mega-baby i.torso {
  background-position: 0 -240px;
}
.mega-baby i.right-bicep {
  background-position: 0 -300px;
}
.mega-baby i.abs {
  background-position: 0 -360px;
}
.mega-baby i.left-leg {
  background-position: 0 -420px;
}
.mega-baby i.right-leg {
  background-position: 0 -480px;
}
.mega-baby i.foot {
  background-position: 0 -540px;
}
.mega-baby .head {
  height: 60px;
  margin: 0 auto 4px;
  position: relative;
  width: 60px;
  z-index: 1;
}
.mega-baby .head:before, .mega-baby .head:after {
  background: no-repeat url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/59639/mega-baby.png") -60px -10px;
  background-size: 120px 600px;
  content: "";
  height: 15px;
  left: 12px;
  position: absolute;
  top: 28px;
  width: 15px;
  z-index: 1;
}
.mega-baby .head:after {
  background-position: -60px -27px;
  left: auto;
  right: 12px;
}
.mega-baby .head .face {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 3;
}
.mega-baby .head .eye {
  height: 9px;
  position: absolute;
  top: 31px;
  width: 9px;
  z-index: 2;
}
.mega-baby .head .eye:before {
  background: no-repeat url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/59639/mega-baby.png") -60px 0;
  background-size: 120px 600px;
  content: "";
  display: block;
  height: 100%;
  margin-left: 3px;
  width: 100%;
}
.mega-baby .head .eye.left-eye {
  left: 15px;
}
.mega-baby .head .eye.right-eye {
  right: 14px;
}
.mega-baby .upper-body .hand,
.mega-baby .upper-body .bicep,
.mega-baby .upper-body .arm,
.mega-baby .upper-body .torso {
  display: inline-block;
}
.mega-baby .leg,
.mega-baby .foot {
  display: inline-block;
}
.mega-baby .left-foot {
  margin: 0 70px 0 10px;
}
.mega-baby[data-status="idle"] {
  animation: breathe 2s ease-in-out 0s infinite alternate;
}
.mega-baby[data-status="idle"] .body,
.mega-baby[data-status="idle"] .hand,
.mega-baby[data-status="idle"] .abs,
.mega-baby[data-status="idle"] .head,
.mega-baby[data-status="idle"] .arm,
.mega-baby[data-status="idle"] .upper-body {
  animation: breathe 2s ease-in-out 0s infinite alternate;
}

@keyframes breathe {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 3px, 0);
  }
}
@keyframes cloud {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}