What n Amazing Bouncing Ball to HTML & CSS Codding
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="cnv"></canvas>
<font size="8"><strong id="para">Bouncing Ball Created From MAA Blogger</b>
</font>
<script>
var a = 80;
var b = 2;//speed
var c = 70;
var d = 2;//speed
var w=window.innerWidth;
var h=window.innerHeight - 100;
var cnv=document.getElementById("cnv");
var ctx=cnv.getContext("2d");
cnv.width=w;
cnv.height=h;
setInterval(function (){
ctx.clearRect(0,0,w,h);
ctx.beginPath();
ctx.arc(c, a, 80, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#000080";
ctx.fill();
if(a>=h-20 || a<20){
b = - b;
}
if(c>w-20 || c<20){
d = -d;
}
a+= b;
c+= d;
},10)
</script>
</body>
</html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="cnv"></canvas>
<font size="8"><strong id="para">Bouncing Ball Created From MAA Blogger</b>
</font>
<script>
var a = 80;
var b = 2;//speed
var c = 70;
var d = 2;//speed
var w=window.innerWidth;
var h=window.innerHeight - 100;
var cnv=document.getElementById("cnv");
var ctx=cnv.getContext("2d");
cnv.width=w;
cnv.height=h;
setInterval(function (){
ctx.clearRect(0,0,w,h);
ctx.beginPath();
ctx.arc(c, a, 80, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#000080";
ctx.fill();
if(a>=h-20 || a<20){
b = - b;
}
if(c>w-20 || c<20){
d = -d;
}
a+= b;
c+= d;
},10)
</script>
</body>
</html>
CSS CODE
#cnv{
border:solid 10px #000;
background-color:#bff;
}
#para{
font-size:large;
}
OUTPUT
Posts
49 Comments
Great
ReplyDeleteBeautiful Ball
Amazing 😁😁😁😁
ReplyDeleteMind-blowing 😄😄😄
ReplyDeleteWow 😀😀😀
ReplyDeleteMind-blowing ☺☺☺
ReplyDeleteWonderful
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌 Awsm
ReplyDeleteKalllu
ReplyDeleteVery nice
Awesome Perfect 👌
ReplyDeletegood
ReplyDelete⚽
Perfect 👌
ReplyDelete100%
Superb
ReplyDeleteVery Nice
ReplyDeletePerfect 👌
ReplyDeleteVery nice
Interesting
ReplyDeleteWow Great work
ReplyDeletePerfect 👌
ReplyDeleteBeautiful Ball
ReplyDeleteVery Attractive
ReplyDeletePerfect 👌
ReplyDeleteGood
Amazing
ReplyDeletePerfect 👌
ReplyDeleteGreat Guys
ReplyDeleteBest
ReplyDeleteSuper
ReplyDeletesuper
DeleteOwsm
ReplyDeletePrefect Quality
ReplyDeleteVery Nice Work
ReplyDeleteGreat Work
ReplyDeleteUnique Quality
ReplyDeleteAmazing Bouncing Ball
ReplyDeletePerfect Guys
ReplyDeleteVery well done
ReplyDeleteInteresting
ReplyDeleteBeautiful
ReplyDeleteBest
ReplyDeletesuper
ReplyDeletesuper
ReplyDeletesuper
ReplyDeletesuper
ReplyDeletesuper
ReplyDeletesuper
ReplyDeleteSuper
ReplyDeleteLovely
ReplyDeleteKallu
ReplyDeleteVery nice
Wowwwwwwwww nice ball
ReplyDeleteKallu
ReplyDeleteNice ball