js自由落体动画模拟（点击生成球体）

js simulate ball free drop

js, 物理, 仿真, 物体掉落

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    W = canvas.width, // simplified for demo
    H = canvas.height,
    gravity = .5,
    bounceFactor = .7;

function Ball(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 15;
    this.color = "blue";
    this.vx = 0;
    this.vy = 1
}

Ball.prototype = {
    draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    },

update: function() {
        this.y += this.vy;
        this.vy += gravity; // u can add air resistance factor here 
        if (this.y + this.radius > H) {
            this.y = H - this.radius;
            this.vy *= -bounceFactor;
        }
    }
};

function clearCanvas() {
    ctx.clearRect(0, 0, W, H);
}

var balls = []; // define an array to hold the balls

canvas.addEventListener('click', function(event) {
    var rect = this.getBoundingClientRect(), // adjust mouse position
        x = event.clientX - rect.left,
        y = event.clientY - rect.top;
    balls.push(new Ball(x, y)); // add a new instance
});

(function update() {
    clearCanvas();

for (var i = 0, ball; ball = balls[i]; i++) {
        ball.draw(); // this will draw current ball
        ball.update(); // this will update its position
    }

requestAnimationFrame(update);
})();

编译

CSS

HTML

js simulate ball free drop

js, 物理, 仿真, 物体掉落

编辑器支持Emmet

快捷键

js simulate ball free drop

js, 物理, 仿真, 物体掉落

Three.js 火鸡（烤鸭/叫花鸡）自由落体

Three.js 立方体组成的球体动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：