<html>
<head>
<script>
var height = 400, width = 400,
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 *= -2 * ballAbsorption; // bounding with more velocity
if(v > -0.1 && v < 0.1) {
clearInterval(interval);
interval = null;
console.log(‘stop’);
}
}
// Move the ball
v += a; // deaccelerating
h -= v; // rising (if v < 0)
// drawing circle
ctx.clearRect(0, 0, height, width);
ctx.fillStyle = “blue”;
ctx.beginPath();
ctx.arc(width/2, height – h – ballRadius, ballRadius, 20, 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”>
</canvas>
</body>
</html>
(The code I choose to do was one of a bouncing ball. Here are some of my drawings for the design.)
