S2JS - Making Sprites move : Smooth and fast

However, it isn't falling smoothly.

Try making it move in smaller steps:

y_pos = y_pos + 1;

Try making it move more quickly.

setInterval(MyTimer, 40);

For most games and movies, you need at least 25 frames-per-second for animations to appear smooth. But setInterval specifies the number of milliseconds between ticks, so for 25 frames-per-second, we use 1/25th of a second, or 1000 divided by 25 (which is 40).

Make these two changes to the code below so the rectangle falls smoothly and more quickly.

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); var y_pos = 0; function MyTimer () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); y_pos = y_pos + 4; ctx.strokeRect(120, y_pos, 60, 60); } setInterval(MyTimer, 500); </script> </body> </html>