javascript - Drawing Balls in a Canvas - How to Replicate One Ball into Many Balls -
i want simulate box of random moving balls. have created canvas 1 moving ball. want replicate ball other balls start specific direction , move in random directions independently. code below used create canvas of 1 moving ball. can guys me replicate balls , have them move in random directions?
i using javascript, html5 , php.emphasized text
thank you.
<html> <head> <style> canvas { margin:0 20px 10px 200px; width:700; height:400; border:solid #cc0000; border-radius:15px;} </style> <canvas id="move"></canvas> <script type="text/javascript"> var canvas = document.getelementbyid('move'); canvas.width = window.innerwidth; canvas.height = window.innerheight; var x = canvas.width / 2 + 100; //starting position var y = canvas.height / 2 + 100; var ball = canvas.getcontext('2d'); ball.fillstyle = '#ff0000'; //color var radius = 30; var dx = 10; var dy = 10; var delta = 55; // range (from 0) of possible dx or dy change var max = 215; // maximum dx or dy values canvas.addeventlistener("click", togglestart); function togglestart() { if (interval == undefined) interval = window.setinterval(animate, 10000 / 60); // 60 fps else { interval = clearinterval(interval); console.log(interval); } } var interval = window.setinterval(animate, 1000 / 60); function animate() { var d2x = (math.random() * delta - delta / 2); //change dx , dy random value var d2y = (math.random() * delta - delta / 2); if (math.abs(d2x + dx) > max) // start slowing down if going fast d2x *= -1; if (math.abs(d2y + dy) > max) d2y *= -1; dx += d2x; dy += d2y; if ((x + dx) < 0 || (x + dx) > canvas.width) // bounce off walls dx *= -1; if ((y + dy) < 0 || (y + dy) > canvas.height) dy *= -1; x += dx; y += dy; ball.beginpath(); //drawing ball ball.arc(x, y, radius, 0, 2 * math.pi, false); ball.clearrect(0, 0, canvas.width, canvas.height); // cls clear canvas ball.fill(); } </script> </head> </html>
Comments
Post a Comment