Javascript使图像在屏幕上反弹_Javascript

Javascript使图像在屏幕上反弹

javascript

Javascript使图像在屏幕上反弹,javascript,Javascript,我已经为反弹球编写了代码（在画布上使用arc（）方法）。我想知道如何使图像在屏幕上反弹。这是我以前的代码（注意launchBall（）函数将是运行反弹图像的函数）：分数：0 var-dx=3； var-dy=3； var x=100；变量y=100； var半径=20； var区间；函数startBall（）{ 间隔=设定间隔（发射球，20）； } 函数launchBall（）{ var c=document.getElementById（“画布”）； var ctx=c.getCon

我已经为反弹球编写了代码（在画布上使用arc（）方法）。我想知道如何使图像在屏幕上反弹。这是我以前的代码（注意launchBall（）函数将是运行反弹图像的函数）：




分数：0
var-dx=3；
var-dy=3；
var x=100；
变量y=100；
var半径=20；
var区间；
函数startBall（）{
间隔=设定间隔（发射球，20）；
}
函数launchBall（）{
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.clearRect（0,01275695）；
ctx.beginPath（）；
弧（x，y，半径，0，2*Math.PI）；
ctx.fillStyle=“红色”；
ctx.fill（）；
document.getElementById
如果（x1255）dx=-dx；
如果（y675）dy=-dy；
x=x+dx；
y=y+dy；
}
document.getElementById（“div”）.onmousemove=函数（e）{
document.getElementById（“image”）.style.top=e.pageY-25+“px”；
document.getElementById（“image”）.style.left=e.pageX-25+“px”；
}
var c=document.getElementById（“canvas”）什么画布？那只是我懒得删除的早期代码：）
<!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>