Write a JavaScript Code about simulate balls bouncing in a box.When mouse click, a new ball will be created at the mouse location.The ball will experience gravity and bounce off the wall, ceiling,and floor. The ball will detect collision and it will change colorwhen they hit each other. Upon collision, balls change velocitiesin a realistic way.
Solution
<script type=”text/javascript”>
var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
context= myCanvas.getContext(‘2d’);
context.clearRect(0,0,300,300);
context.beginPath();
context.fillStyle=”#0000ff”;
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
if( x<0 || x>300)
dx=-dx;
if( y<0 || y>300)
dy=-dy;
x+=dx;
y+=dy;
}
setInterval(draw,10);
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>HTML5 Bouncing Ball</title>
<style type=”text/css”>
<!–
body { background-color:#ededed; font:normal