javascript - 了解 HTML5 Canvas

Question

我正在努力掌握并了解如何使用 HTML5 Canvas 创建碰撞球，我看过的示例有很多 JavaScript，但我需要将其分解成更小的 block 以便更好地理解发生了什么事。

在我的example到目前为止，我所了解的是，我每 40 毫秒将圆圈重新绘制到 Canvas 上，并且每次都调用 animate 函数。每次这被称为圆的位置改变，因为我用

改变它

circles[0].x+=1;
circles[0].y+=-1.5;

所以我的圆圈对象在一个数组中，我想实现两件事:

1)不要让小球逃出 Canvas 区域

2) 如果球发生碰撞然后相互弹开并反转方向。

不过，我首先要解决的问题是不要让球脱离 Canvas ，以及我将如何着手解决这个问题。

我可以访问 window.width 和 window.height，因此需要了解如何获取每个球在数组中的位置，并确保它不会跨越这些边界。

我不想让它正常工作，更愿意了解正在发生的事情。

Answer 1

这将检查 Canvas 边界上的碰撞。我更新了您的对象以存储 vx 和 vy(速度)以及 draw() 函数以根据这些属性进行移动。我添加了 checkBounds()，它在圆圈超出边界时反转速度。

编辑:修改，以便它也考虑到圆的半径。

在圆圈之间进行碰撞检测可以遵循类似的模式

http://jsfiddle.net/3tfUN/5/

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius = 50;
    var strokewidth = 2;
    var strokestyle = '#666';
    var frameCount = 0;
    var w = canvas.width;
    var h = canvas.height;

    // Circle Objects
    var yellowCircle = {
        x: 50,
        y: h / 2,
        radius: radius,
        color: 'yellow',
        vx: 1,
        vy: 1.5
    }

    var redCircle = {
        x: 450,
        y: h / 2,
        radius: radius,
        color: 'red',
        vx: 1,
        vy: -1
    }

    var blueCircle = {
        x: 850,
        y: h / 2,
        radius: radius,
        color: 'blue',
        vx: -1,
        vy: -1.5
    }

    // Create empty array and then push cirlce objects into array
    var circles = [];
    circles.push(yellowCircle, blueCircle, redCircle);

    function checkBounds() {
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            if (c.x > w - c.radius || c.x < c.radius) {
                c.vx = -c.vx;
            }
            if (c.y > h - c.radius || c.y < c.radius) {
                c.vy = -c.vy;
            }
        }
    }

    // Clear last circle and draw again
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height); // Clear the circle from the from page
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            context.beginPath();
            context.fillStyle = c.color // Set the color of the circle using key:valuecontext.fill();
            context.lineWidth = strokewidth;
            context.strokeStyle = strokestyle;
            context.stroke();
            context.arc(c.x, c.y, c.radius, 0, Math.PI * 2); // X-axis Position, y-axis Position, radius, % of fill, ?
            context.closePath();
            context.fill();
        }
    }

    function animate() {
        for (i = 0; i <= 2; i++) {
            circles[i].x += circles[i].vx;
            circles[i].y += circles[i].vy;
        }
        checkBounds();
        draw();
    }

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius = 50;
    setInterval(animate, 40);