Question

我为弹跳球制作了代码（在画布上使用arc（）方法）。我想知道如何让图像在屏幕上反弹。这是我之前的代码（请注意，launchBall（）函数将是运行弹跳图像的函数）：

<!DOCTYPE HTML>
<html>  

<body onload="startBall()" oncontextmenu="return false;" style="cursor: none; overflow: hidden;">
    <center>

    <div id="div" style="width: 1600px; height: 700px; border: 2px solid #000000; background-color: grey;">

    <br>
    <img draggable="false"id="image" style="position: absolute;" width="50" height="50"src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.hi.png"/>

    </div>
    <center>
    <p>Score: <a>0</a></p>
    </center>

    <script>
        var dx = 3;
        var dy = 3;
        var x = 100;
        var y = 100;
        var radius = 20;

        var interval;

        function startBall(){
            interval = setInterval(launchBall, 20);
        }

        function launchBall(){
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, 1275, 695);
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = "red";
            ctx.fill(); 
            document.getElementById
            if(x<20 || x>1255) dx=-dx;
            if(y<20 || y>675) dy=-dy;
            x = x + dx;
            y = y + dy; 
        }

    document.getElementById("div").onmousemove = function(e) {
        document.getElementById("image").style.top = e.pageY -25 + "px";
        document.getElementById("image").style.left = e.pageX -25 +"px";
    }
    </script>

</body>
</html>

Javascript使图像在屏幕周围反弹

0 个答案: