Create a web page that displays a bouncing ball inside a box. You may extend the
ID: 3574344 • Letter: C
Question
Create a web page that displays a bouncing ball inside a box. You may extend the given code.
var context; //declare other GLOBAL VARIABLES (e.g. canvas's height and width) function mBa x, y, radi, color, xSpeed, ySpeed) this x-x; this y; this radi rad this color Color this Speed -xSpeed; this Speed -ySpeed; this draw E draw; this move move; Write methods draw and move of the class mBall see above) draw to draw a color color ball at position (x, y) with radius radi. move(): to move the ball from current position (x,y) to (x xspeed, y yspeed) Write the function 'update() for the setlnterval() method for timer. Clear canvas (context), move the ball, and draw the ball(context) rite 'init function. context- myCanvas.getContext('2d'); set values (e.g. canvas's height and width); include setlnterval(update, which calls update() at every tick of the timer create an mBall objectExplanation / Answer
Please check the following code. Include it in html file.
<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>
</head>
<body>
<h1>Bouncing a Ball Around with HTML5 and JavaScript</h1>
<div id="container">
<canvas id="myCanvas" width="300" height="300"></canvas>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.