Question

我写了一个程序，在单击按钮时为球设置动画。这是一个更大项目的实验的一部分：
这是屏幕截图：
Website
这是代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Random Bouncing Ball</title>
<style type="text/css">
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }

#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
</style>
<script type="text/javascript">
function myFunction () {

        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            context= myCanvas.getContext('2d');
            context.clearRect(0,0,400,400);
            context.beginPath();
            context.fillStyle="#000000";
            context.arc(x,y,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
            if( x<0 || x>400)
            dx=-dx;
            if( y<0 || y>300)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
        setInterval(draw,10); 
}
</script>

</head>
<body>

<div id="container">

    <canvas id="myCanvas" width="400" height="300"></canvas>



</div>
<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>

</body>
</html>

按下按钮时如何让球从上到下掉落？

Answer 1

您需要执行的步骤很少，首先，禁用垂直速度（您不需要删除它，只需将其设置为0），然后在＆＃34;绘制＆＃34; function删除if循环，并创建一个新的，如下所示：

if (y >= 300) { y = 290; // Set the ball's Y position to the bottom of the canvas dy = 0; //And finally this set the falling is zero }

如果你想让它更复杂，可以创建一个新的变量＆＃34; gravity＆＃34;，然后在每一个回合中用重力增加dy变量。那么上面的代码必须如下所示：

if (y >= 300) { y = 290; // Set the ball's Y position to the bottom of the canvas dy = 0; //And finally this set the falling is zero gravity = 0; }

Answer 2

以下是代码，您需要的内容：

 function myFunction () {
            var context;
            var dy=4;  //First: dx must be 0;
            var dx = 0;
            var y=150;
            var x=10;
            function draw(){
                context= myCanvas.getContext('2d');
                context.clearRect(0,0,400,400);
                context.beginPath();
                context.fillStyle="#000000";
                context.arc(x,y,10,0,Math.PI*2,true);
                context.closePath();
                context.fill();
                if (y >= 300) {  //Second: delete all if loop and add this
                    y = 290;     //                                     |
                    dy = 0;      //     <-------------------------------|                               
                }
                x+=dx;
                y+=dy;
            }
            setInterval(draw,10); 
    }`

编辑：

提示：在浏览器中按F12，然后单击控制台（或在某些浏览器下登录），您将收到所有错误消息。

Answer 3

我做的是：

function myFunction () {

    var context;
    var dx= 4;  
    var dy=4;
    var y=50;
    var x=10;
    function draw(){
        context= myCanvas.getContext('2d');
        context.clearRect(0,0,400,400);
        context.beginPath();
        context.fillStyle="#FFBAA3";
        context.arc(x,y,10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
        if( x<0 || x>100)
            dx=-dx;
        if( y<0 || y>300)
            dy=0;
            //x+=dx;
             y+=dy;

    }
    setInterval(draw,10); 
}

Answer 4

如果你愿意，让球直接落下，那就不要让他垂直运动了。

编辑：

如果你需要，球不会离开屏幕，然后只需在墙旁边设置x和y位置。

单击按钮使球从上到下掉落

4 个答案: