canvas笔记-绘制运动小球（落地弹起，遇边回弹）- 前端开发

程序运行截图如下：

就是这个球，遇到底端及左右两边都可以弹

源码如下：

canvas4.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
    <canvas id="canvas" style="display: block; margin: 50px auto;">
    </canvas>
 
    <script src="js/test4.js"></script>
</body>
</html>

test4.js


;
 
const WIDTH = 1024;
const HEIGHT = 768;
const RADIUS = 15;
 
let ball = {
 
    x: WIDTH / 2,
    y: 30,
    g: 1.5 + Math.random(),
    vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4,
    vy: -5,
    color: '#CC0000'
};
 
 
window.onload = function(){
 
    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
 
    contextBuffer.width = WIDTH;
    contextBuffer.height = HEIGHT;
 
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
 
    render(context, contextTmp);
 
    setInterval(
        function(){
 
            render(context, contextTmp);
            update();
        },
        50
    );
}
 
function update(){
 
    ball.x += ball.vx;
    ball.y += ball.vy;
    ball.vy += ball.g;
 
    //最顶端不放
    if(ball.y > HEIGHT - RADIUS){   //最低端
 
        ball.y = HEIGHT - RADIUS;
        ball.vy = -ball.vy * 0.75;
    }
 
    if(ball.x < 0 + RADIUS){    //最左端
 
        ball.x = RADIUS;
        ball.y = HEIGHT - RADIUS;
        ball.vy = -Math.random() * 100 + 30;
        ball.vx = Math.random() * 100 + 30;
    }
 
    if((WIDTH - RADIUS) - ball.x < 0){    //最右端
 
        ball.x = WIDTH - RADIUS;
        ball.y = HEIGHT - RADIUS;
        ball.vy = -Math.random() * 100 + 30;
        ball.vx = -Math.random() * 100 + 30;
    }
}
 
function render(cxt){
 
    cxt.clearRect(0, 0, WIDTH, HEIGHT);
    cxt.fillStyle = ball.color;
    cxt.beginPath();
    cxt.arc(ball.x, ball.y, 15, 0, 2 * Math.PI);
    cxt.closePath();
    cxt.fill();;
}