HTML5使用精灵图拼凑出来卡通宝贝

鼠标点击拖动时，宝贝的眼睛能随着转动，并喷射出火苗，有点像西游记里面的红孩儿。

html5, baby, cartoon, game

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5118
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

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);
};

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';

编译

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("/uploads/160301/cloud.png") center center;
    background-size: 100px;
    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("/uploads/1705/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);
    }
}

HTML

鼠标点击拖动时，宝贝的眼睛能随着转动，并喷射出火苗，有点像西游记里面的红孩儿。

html5, baby, cartoon, game

编辑器支持Emmet

快捷键

鼠标点击拖动时，宝贝的眼睛能随着转动，并喷射出火苗，有点像西游记里面的红孩儿。

html5, baby, cartoon, game

HTML5如何基于精灵图片实现卡通人物动作动画

HTML5一款带背景图片动画的用户档案社交卡片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：