javascript - 显示椭圆形黑球的 Canvas 弹跳球

Question

<强> JSFiddle

预期行为

示例值:速度:10； Angular :45°；红色;半径:50。

点击“射击!”按钮，球应该移动，直到它最终消失在一堵墙后面。请注意，我想模拟具有重力的现实世界球。

每次我们单击“射击”时，都会在 balls 数组中添加一个球，该数组也会被绘制。

发生了什么

单击一次/多次拍摄时会显示一个黑色椭圆。没有看到控制台错误。

代码:

(function () {
    var canvas = document.querySelector("canvas"),
        ctx = canvas.getContext("2d"),
        WIDTH = canvas.width,
        HEIGHT = canvas.height;

    // our ball object
    function Ball(radius, color) {
        this.radius = radius;
        this.color = color;
        this.x = 50; // start coordinates
        this.y = 50;
        this.velX = 0;
        this.velY = 0;
        this.accX = 0;
        this.accY = 0;
        this.gravity = 0;

        this.start = function (angle, velocity) {
            this.gravity = 9.8;
            this.angle = angle / 180 * Math.PI; // convert to radians
            this.velX = velocity * Math.cos(this.angle);
            this.velY = velocity * Math.sin(this.angle);
            this.accX = 0; // zero intially
            this.accY = 0; // TODO: set option for user to set himself
        };

        this.update = function () {
            this.velY -= this.gravity;
        };

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

    // balls array
    var balls = [];

    document.querySelector("input[type='button']").onclick = function () {
        var color = gId("color").value,  // getElementById; defined in jsfiddle
            velocity = gId("velocity").value,
            angle = gId("angle").value,
            radius = gId("radius").value;

        var ball = new Ball(radius, color);
        ball.start(angle, velocity);
        balls.push(ball);
    };

    setInterval(function () {
        for (var i = 0, len = balls.length; i < len; i++) {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            balls[i].draw();
            balls[i].update();
        }
    }, 1000 / 60); // 1000/x depicts x fps

我不知道为什么它不起作用。系统:最新的 Chrome/Firefox 上的 Windows 7。

感谢任何帮助。请评论以获取更多信息。

Answer 1

1) 在 Canvas 元素上设置宽度和高度属性，而不是应用 css 样式，即:

    <canvas width="400px" height="400px">You don't support canvas.</canvas>

2) 将重力值除以 60，因为更新函数每 1/60 秒调用一次，即:

    this.start = function (angle, velocity) {
        this.gravity = 9.8 / 60;
        this.angle = angle / 180 * Math.PI; // convert to radians
        this.velX = velocity * Math.cos(this.angle);
        this.velY = velocity * Math.sin(this.angle);
        this.accX = 0; // zero intially
        this.accY = 0; // TODO: set option for user to set himself
    };

3)将更新函数更改为:

    this.update = function () {
        this.velY += this.gravity;
        this.x += this.velX;
        this.y += this.velY;
    };

4) 将 ctx.clearRect 方法移到 for 循环之外，否则您只会看到一个球始终处于动画状态，即

setInterval(function () {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    for (var i = 0, len = balls.length; i < len; i++) {            
        balls[i].draw();
        balls[i].update();
    }
}, 1000 / 60); // 1000/x depicts x fps

这里是更新的 js-fiddle:http://jsfiddle.net/km6ozj6L/1/