用js写碰撞反弹算法

以下是一个简单的碰撞反弹算法的示例：

// 获取画布对象和上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 定义小球的半径、颜色、初始位置和速度
var ballRadius = 10;
var ballColor = '#0095DD';
var ballX = canvas.width / 2;
var ballY = canvas.height - 30;
var ballSpeedX = 2;
var ballSpeedY = -2;

// 定义球拍的高度、宽度、颜色和初始位置
var paddleHeight = 10;
var paddleWidth = 75;
var paddleColor = '#0095DD';
var paddleX = (canvas.width - paddleWidth) / 2;

// 监听键盘事件，控制球拍左右移动
document.addEventListener('keydown', function(event) {
    if (event.keyCode == 37) { // 左箭头键
        paddleX -= 7;
        if (paddleX < 0) {
            paddleX = 0;
        }
    } else if (event.keyCode == 39) { // 右箭头键
        paddleX += 7;
        if (paddleX > canvas.width - paddleWidth) {
            paddleX = canvas.width - paddleWidth;
        }
    }
});

// 绘制小球
function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = ballColor;
    ctx.fill();
    ctx.closePath();
}

// 绘制球拍
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = paddleColor;
    ctx.fill();
    ctx.closePath();
}

// 碰撞检测和反弹
function collisionDetection() {
    // 碰到左右边界反弹
    if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
        ballSpeedX = -ballSpeedX;
    }
    // 碰到上边界反弹
    if (ballY + ballSpeedY < ballRadius) {
        ballSpeedY = -ballSpeedY;
    }
    // 碰到球拍反弹
    if (ballY + ballSpeedY > canvas.height - ballRadius - paddleHeight) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballSpeedY = -ballSpeedY;
        } else {
            alert('Game Over');
            document.location.reload();
        }
    }
}

// 渲染画布
function draw() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制小球和球拍
    drawBall();
    drawPaddle();

    // 碰撞检测和反弹
    collisionDetection();

    // 更新小球位置
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // 循环渲染
    requestAnimationFrame(draw);
}

// 开始渲染
draw();

这段代码实现了一个简单的弹球游戏，包含了小球和球拍的绘制、碰撞检测和反弹、键盘事件监听等功能。其中，碰撞检测和反弹的实现主要通过判断小球是否碰到了边界或球拍来实现。如果小球碰到了左右边界，就反弹；如果碰到了上边界，也反弹；如果碰到了球拍，则根据碰撞的位置来确定反弹的方向。如果小球掉落到了底部，则游戏结束。整个游戏的画面是通过不断地更新小球位置和重新绘制画布来实现的。