canvas小球碰撞

Html

Css


    Bouncing Balls

    One hundred balls bouncing

    Start

var context = document.getElementById('canvas').getContext('2d'),
    startButton = document.getElementById('startButton'),
    glasspane = document.getElementById('glasspane'),
    paused = true,
    circles = [];

drawGrid(context, 'lightgray', 10, 10);

context.lineWidth = 0.5;
context.font = '32pt Ariel';

//创建100个球
for (var i = 0; i < 100; ++i) {
    circles[i] = {
        x: 300,
        y: 300,
        velocityX: 3 * Math.random(), //x速度
        velocityY: 3 * Math.random(), //y速度
        radius: 50 * Math.random(), //半径
        color: 'rgba(' + (Math.random() * 255).toFixed(0) + ', ' +
            (Math.random() * 255).toFixed(0) + ', ' +
            (Math.random() * 255).toFixed(0) + ', 1.0)'
    };
}

startButton.onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();
    paused = !paused;
    startButton.innerText = paused ? 'Start' : 'Stop';
};

glasspane.onmousedown = function(e) {
    e.preventDefault();
    e.stopPropagation();
}

context.canvas.onmousedown = function(e) {
    e.preventDefault();
    e.stopPropagation();
};

setInterval(function() {
    if (!paused) {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        drawGrid(context, 'lightgray', 10, 10);

circles.forEach(function(circle) {
            context.beginPath();
            context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
            context.fillStyle = circle.color;
            context.fill();
            adjustPosition(circle);
        });
    }
}, 1000 / 60);

function adjustPosition(circle) {
    //边缘检测
    if (circle.x + circle.velocityX + circle.radius > context.canvas.width ||
        circle.x + circle.velocityX - circle.radius < 0)
        circle.velocityX = -circle.velocityX;

//边缘检测
    if (circle.y + circle.velocityY + circle.radius > context.canvas.height ||
        circle.y + circle.velocityY - circle.radius < 0)
        circle.velocityY = -circle.velocityY;

circle.x += circle.velocityX;
    circle.y += circle.velocityY;
}

function drawGrid(context, color, stepx, stepy) {
    context.strokeStyle = color;
    context.lineWidth = 0.5;

for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
        context.beginPath();
        context.moveTo(i, 0);
        context.lineTo(i, context.canvas.height);
        context.stroke();
    }

for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(context.canvas.width, i);
        context.stroke();
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas小球碰撞



代码描述：一个简单的canvas实现的小球碰撞页面

更新时间：2021-12-17 01:07:55
一个用canvas实现的简单的小球碰撞效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

偏执

相关代码

Bouncing Balls

canvas小球碰撞

最新