如何使用 HTML 和 JavaScript 构建弹跳球？

弹跳球可以使用 HTML、CSS 和 JavaScript 创建，并对该球执行一些弹跳操作。您可以查看相关文章如何使用 CSS 制作平滑的弹跳动画。 .
本文将其分为两个部分，1^日部分，我们将决定在哪里反弹球将执行跳跃，基本上，我们将创建其中弹跳将被执行的画布的面积。^第二部分将设计弹跳球并在其上添加一些弹跳功能。
HTML 和 CSS 代码： HTML 和 CSS 代码用于创建球会弹跳的画布区域。我们将使用画布标签，并通过使用 JavaScript 为画布内的球构造圆圈。并且画布区域的画布区域和背景颜色由 CSS 定义。

html

 

    
    

 

    
        
GeeksforGeeks
        
Bouncing ball using JavaScript
        
        
    

 

JavaScript 代码：这是本文的核心部分，我们将在其中构建球并执行弹跳任务。我们将分配 4 个变量，2 个用于创建的圆（球）坐标，另外两个用于弹跳球的各自速度。半径变量用于球的半径。我们还需要清除画布区域，因此我们将使用clearReact()函数。所有的弹跳和坐标将由math.random()函数决定。

javascript

    var canvas = document.querySelector("canvas");
 
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
 
    var l = canvas.getContext('2d');
 
    // x and y are the coordinates of the circle
    // vx and vy are the respective speeds
    var x = Math.floor(Math.random() * innerWidth);
    var y = Math.floor(Math.random() * innerHeight);
    var vx = Math.floor(Math.random() * 2);
    var vy = Math.floor(Math.random() * 4);
    var radius = 20;
 
    move();
   
    // This function will do the animation
    function move() {
        requestAnimationFrame(move);
 
        // It clears the specified pixels within
        // the given rectangle
        l.clearRect(0, 0, innerWidth, innerHeight);
 
        // Creating a circle
        l.beginPath();
        l.strokeStyle = "black";
        l.arc(x, y, radius, 0, Math.PI * 2, false);
        l.stroke();
 
        // Conditions so that the ball bounces
        // from the edges
        if (radius + x > innerWidth)
            vx = 0 - vx;
 
        if (x - radius < 0)
            vx = 0 - vx;
 
        if (y + radius > innerHeight)
            vy = 0 - vy;
 
        if (y - radius < 0)
            vy = 0 - vy;
 
        x = x + vx;
        y = y + vy;
 
    }

完整代码：是以上两部分的组合，即结合HTML、CSS和JavaScript代码。此代码将创建一个输出，其中设计值将以随机模式弹跳。

html

 

    
        Bouncing Ball!!
    
    
        h1 {
            color: green;
        }
         
        canvas {
            background-color: #F08080;
            width: 600px;
            height: 400px;
            position: absolute;
            top: 20%;
            left: 20%;
        }
    
 

 

    
        GeeksforGeeks
        Bouncing ball using JavaScript
        
        
        
            var canvas = document.querySelector("canvas");
 
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
 
            var l = canvas.getContext('2d');
 
            // x and y are the co-ordinates of the circle
 
            // vx and vy are the respective speeds
 
            var x = Math.floor(Math.random() * innerWidth);
            var y = Math.floor(Math.random() * innerHeight);
            var vx = Math.floor(Math.random() * 2);
            var vy = Math.floor(Math.random() * 4);
            var radius = 20;
 
            move();
           
            // This function will do the animation
            function move() {
                requestAnimationFrame(move);
 
                // It clears the specified pixels within
                // the given rectangle
                l.clearRect(0, 0, innerWidth, innerHeight);
 
                // Creating a circle
                l.beginPath();
                l.strokeStyle = "black";
                l.arc(x, y, radius, 0, Math.PI * 2, false);
                l.stroke();
 
                // Conditions sso that the ball bounces
                // from the edges
                if (radius + x > innerWidth)
                    vx = 0 - vx;
 
                if (x - radius < 0)
                    vx = 0 - vx;
 
                if (y + radius > innerHeight)
                    vy = 0 - vy;
 
                if (y - radius < 0)
                    vy = 0 - vy;
 
                x = x + vx;
                y = y + vy;
 
            }
        
    

 

输出：