What makes the ball move in this example of collision detection...................................
<!-- Created by Elizabeth🎈--> <!DOCTYPE html> <html> <head><title>tithle</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style type="text/css"> body{ margin:0%; padding:0%; background-color:#000; } </style> </head> <body> <canvas></canvas> <script type="text/javascript"> var canvas=document.querySelector("canvas"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; var context=canvas.getContext("2d"); var dx=4; var r=15; var x=Math.random()*(canvas.width-r*2)+r; var y=Math.random()*(canvas.height-r*2)+r; var dy=4; function animate(){ requestAnimationFrame(animate); context.beginPath(); context.clearRect(0,0,innerWidth,innerHeight); /*context.fillStyle = "rgba(0,0,0,0.3)";context.fillRect(0,0,innerWidth,innerHeight);*/ document.body.style.backgroundColor=bg(); context.arc(x,y,r,0,2*Math.PI,false); context.fillStyle="#0ff"; context.fill(); context.closePath(); if(x+r>innerWidth || x-r<0){ dx=-dx; } if(y+r>innerHeight || y-r<0){ dy=-dy; }
Often have questions like this?
Learn more efficiently, for free:
