Canvas 喜羊羊 - 踏得网

3只小羊，谁加工一下，变成喜羊羊、懒羊羊和美羊羊?

sheep

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1371
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const TWO_PI = Math.PI * 2;

// canvas settings
var viewWidth = 768,
    viewHeight = 512,
    drawingCanvas = document.getElementById("drawing_canvas"),
    ctx,
    timeStep = (1/60),
    time = 0;

var sheep = [];
var clicks = [];
var exploded = 0;

window.onload = function() {
    initDrawingCanvas();
    createSheep();
    addClickHandlers();
    requestAnimationFrame(loop);
};

function initDrawingCanvas() {
    drawingCanvas.width = viewWidth;
    drawingCanvas.height = viewHeight;
    ctx = drawingCanvas.getContext('2d');
}

function createSheep() {
    sheep[0] = new Sheep(128, 256);
    sheep[1] = new Sheep(384, 256);
    sheep[2] = new Sheep(640, 256);
}

function click(i) {
        sheep[i].timeStep += (1/18);
        sheep[i].scaleFactor += (1/10);

if (sheep[i].explode === true) {
            clicks[i].style.display = 'none';
            if (++exploded === 3) {
                setTimeout(function() {
                    document.getElementById('monster').style.display = 'block';
                }, 1000);
            }
        }
        else {
            clearTimeout(sheep[i].tid);
            clearInterval(sheep[i].iid);
            sheep[i].tid = setTimeout(function() {
                sheep[i].iid = setInterval(function() {
                    sheep[i].timeStep -= (1/18);
                    sheep[i].scaleFactor -= (1/10);

if (sheep[i].scaleFactor === 1) {
                        clearInterval(sheep[i].iid);
                    }
                }, 250);
            }, 750);
        }
    }
}

function update() {
    sheep.forEach(function(s) {
        s.update();
    });
}

function draw() {
    ctx.fillStyle = '#84e184';
    ctx.fillRect(0, 0, viewWidth, viewHeight);

sheep.forEach(function(s) {
        s.draw();
    });
}

function loop() {
    update();
    draw();
    time += timeStep;
    requestAnimationFrame(loop);
}

function Sheep(x, y) {
    this.x = x;
    this.y = y;
    this.time = Math.random() * 10;
    this._timeStep = (1/24);
    this._scaleFactor = 1;

this.explode = false;
    this.explosionTime = 0;
    this.explosionProgress = 0;
    this.alpha = 1;
    this.furScaleX = 1;
    this.furScaleY = 1;
    this.faceOffsetY = 0;
    this.faceRotation = 0;
    this.leftEarRotation = 0;
    this.rightEarRotation = 0;
}
Sheep.prototype = {
    set scaleFactor(s) {
        this._scaleFactor = Math.max(1, s);

if (this._scaleFactor > 3) {
            this.explode = true;
        }
    },
    get scaleFactor() {
        return this._scaleFactor;
    },
    set timeStep(s) {
        this._timeStep = Math.min(1, Math.max((1/24), s));
    },
    get timeStep() {
        return this._timeStep;
    },
    update:function() {
        if (this.explosionTime === 1) return;

this.time += this.timeStep;

if (this.explode) {
            this.explosionTime = Math.min(this.explosionTime + (1/30), 1);
            this.explosionProgress = Ease.inBack(this.explosionTime, 0, 1, 1);
            this.furScaleX = 1 + this.explosionProgress * 1.8;
            this.furScaleY = 1 + this.explosionProgress * 1.8;
            this.alpha = 1 - this.explosionProgress;
        }
        else {
            this.faceOffsetY = Math.sin(this.time) * 2;
            this.furScaleX = 1 + Math.sin(this.time) * 0.025 * this.scaleFactor;
            this.furScaleY = 1 + Math.cos(this.time) * 0.01 * this.scaleFactor;
            this.faceRotation = 0.05 * Math.cos(this.time);
            this.leftEarRotation = Math.sin(this.time) * 0.15;
            this.rightEarRotation = -this.leftEarRotation;
        }
    },
    draw:function() {
        if (this.explosionTime === 1) return;

ctx.save();
        ctx.translate(this.x, this.y);
        ctx.globalAlpha = this.alpha;
        // fur
        ctx.save();
        ctx.scale(this.furScaleX, this.furScaleY);
        ctx.fillStyle = '#fff';

for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 16; j++) {
                ctx.beginPath();
                ctx.arc(
                    Math.cos(j / 16 * TWO_PI) * i * 16,
                    Math.sin(j / 16 * TWO_PI) * i * 16,
                    18,
                    0,
                    TWO_PI
                );
                ctx.fill();
            }
        }

ctx.restore();

// face
        ctx.save();
        ctx.rotate(this.faceRotation);
        ctx.translate(0, this.faceOffsetY);
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.moveTo(-32, 0);
        ctx.arcTo(-32, -32, 0, -32, 32);
        ctx.arcTo(32, -32, 32, 0, 32);
        ctx.lineTo(32, 72);
        ctx.arcTo(32, 96, 0, 104, 32);
        ctx.arcTo(-32, 104, -32, 64, 32);
        ctx.closePath();
        ctx.fill();
        // left eye
        ctx.fillStyle = '#fff';
        ctx.beginPath();
        ctx.arc(-12, 0, 4, 0, TWO_PI);
        ctx.fill();
        // right eye
        ctx.fillStyle = '#fff';
        ctx.beginPath();
        ctx.arc(12, 0, 4, 0, TWO_PI);
        ctx.fill();
        // left ear
        ctx.save();
        ctx.rotate(this.leftEarRotation);
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.arc(-32, -12, 12, 0, Math.PI, true);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
        // right ear
        ctx.save();
        ctx.rotate(this.rightEarRotation);
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.arc(32, -12, 12, 0, Math.PI, true);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

ctx.restore();

ctx.restore();
    }
};

/**
 * easing equations from http://gizma.com/easing/
 * t = current time
 * b = start value
 * c = delta value
 * d = duration
 */
var Ease = {
    inCubic:function (t, b, c, d) {
        t /= d;
        return c*t*t*t + b;
    },
    outCubic:function(t, b, c, d) {
        t /= d;
        t--;
        return c*(t*t*t + 1) + b;
    },
    inOutCubic:function(t, b, c, d) {
        t /= d/2;
        if (t < 1) return c/2*t*t*t + b;
        t -= 2;
        return c/2*(t*t*t + 2) + b;
    },
    inBack: function (t, b, c, d, s) {
        s = s || 1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
    }
};

编译

CSS

HTML

3只小羊，谁加工一下，变成喜羊羊、懒羊羊和美羊羊?

sheep

编辑器支持Emmet

快捷键

3只小羊，谁加工一下，变成喜羊羊、懒羊羊和美羊羊?

sheep

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：