Question

JSFiddle

预期行为

样本值：速度：10;角度：45;红色;半径：50。

点击＆＃34;拍摄！＆＃34;按钮，球应移动，直到它最终消失在其中一个墙后面。请注意，我想用重力来模拟真实世界的球。

每次我们点击Shoot时，都应该在balls数组中添加一个球，这个球也将被绘制。

会发生什么

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

problem image

代码：

(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元素上设置width和height属性，而不是应用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/

显示一个椭圆黑球的帆布弹跳球

1 个答案: