html> var height = 200, width …
CBSE, JEE, NEET, CUET
Question Bank, Mock Tests, Exam Papers
NCERT Solutions, Sample Papers, Notes, Videos
html>
<head>
<script>
var height = 200, width = 200,
canvas, ctx, interval,
h = height, a = 0.1, v = 0, ballAbsorption = 0.8,
ballSize = 20, ballRadius = ballSize / 2, frameRate = 20;
function drawBall() {
if(h <= 0 && v > 0) {
console.log('bong');
v *= -1 * ballAbsorption; // bounding with less velocity
if(v > -0.1 && v < 0.1) {
clearInterval(interval);
interval = null;
console.log('stop');
}
}
// Move the ball
v += a; // accelerating
h -= v; // falling (if v < 0)
// drawing ball
ctx.clearRect(0, 0, height, width);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(width/2, height - h - ballRadius, ballRadius, 0, Math.PI*2,true);
ctx.fill();
}
window.onload = function() {
canvas = document.getElementById('c');
canvas.height = height;
canvas.width = width;
ctx = canvas.getContext("2d");
interval = setInterval(drawBall, frameRate);
canvas.addEventListener('click', function(){
h = height;
v = 0;
if(!interval) {
interval = setInterval(drawBall, frameRate);
}
});
}
</script>
<style>
#c {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c">
Your antique browser does not support canvas...
</canvas>
</body>
</html>
Posted by Royal Thakur ? 4 years, 10 months ago
- 0 answers
ANSWER
Related Questions
Posted by Rihan Mehta 1 year, 2 months ago
- 0 answers
Posted by "Serai✨ Wallance" 1 year, 2 months ago
- 0 answers
Posted by Parneet Kaur 9 months, 2 weeks ago
- 0 answers
Posted by Naman Mehra 1 year, 2 months ago
- 0 answers
Posted by Shaila Bombe 1 year, 1 month ago
- 1 answers
myCBSEguide
Trusted by 1 Crore+ Students
Test Generator
Create papers online. It's FREE.
CUET Mock Tests
75,000+ questions to practice only on myCBSEguide app
