javascript - 这个小鸟动画是怎么画的？

Question

我发现了这个用 HTML5 和 javascript 制作的很棒的网站。网站的核心是随机飞来飞去的鸟儿。我对 canvas 和 Html5 没有什么经验。我可以拿另一个物体，一些简单的可能是圆圈之类的东西，然后像这样随机移动它。但是我不会得到这种自然效果。仔细观察，鸟儿先远后近，在高空飞翔时拍翅速度很快，而水平飞行时不拍翅，保持它直。看起来很棒。

我只想知道这个网站上的两件事，即

1)鸟是图片还是html5中使用路径创建

2) 小鸟的翅膀是怎样扇动的？他一定写了什么逻辑？我需要为此学习一些物理书吗？

我已经下载了整个网站，看看他一定写了什么代码，但 js 文件删除了所有空格，因此它与加密的一样接近；)而且我也没有找到任何这只鸟的图像。

我真的对这个简单但又如此漂亮的设计感到惊讶。向它的创造者致敬。

更新:我心不在焉，忘记放链接了。非常非常抱歉;)

http://thewildernessdowntown.com/

Answer 1

鸟是使用 Sprite 创建的，如果您搜索源代码，您可以找到对它们的引用:1 , 2 , 3 , 4 .

至于运动，它看起来像是某种蜂群算法，结合了一些(显然)人造 3D 效果。共有 3 个蜂群，分别移动。

处理每只鸟(以及其他事物) Sprite 的代码是 Sprite 类:

function sprite() {}
sprite.prototype = {
    create: function(c, b, f) {
        this.image = new Image();
        var a = this;
        this.image.onload = function() {
            a.onImage()
        };
        var e = new Date();
        this.image.src = c + "?" + e.getTime();
        this.step = 0;
        this.running = true;
        this.framerate = f;
        this.size = b;
        this.off_x = 0;
        this.off_y = 0;
        this.loop = true;
        this.offset = 0
    },
    onImage: function() {
        this.steps = this.image.height / this.size
    },
    blit: function(a, c, b, f) {
        if (!this.image.complete) {
            return
        }
        if (this.loop) {
            var e = ((f + this.offset) % 1);
            this.step = Math.floor(e * this.framerate) % this.steps
        } else {
            this.step = Math.floor(f * this.framerate);
            if (this.step > (this.steps - 1)) {
                this.step = this.steps - 1
            }
        }
        a.drawImage(this.image, 0, this.step * this.size, this.image.width, this.size, c - this.image.width / 2 + this.off_x, b - this.size / 2 + this.off_y, this.image.width, this.size)
    },
    start: function() {
        this.running = true
    },
    stop: function() {
        this.running = false;
        this.step = 0
    }
};

如果您有兴趣了解鸟类是如何初始化的，请查找 addBirds1: function()、addBirds2: function() 和 addBirds3: function ()，但这真的不会让你走得太远，因为由于缩小，不同变量的名称没有给出它们重要性的线索。