Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
It's hard to separate animation from a great game. Here we look briefly at how to animate a 2D HTML game like our Boulder Bop example.
In WebGL, Canvas, or SVG? Choose the right API, we learned that SVG animation is typically straightforward. For example, if you have an SVG circle object called myCircle that you want to move, you just need to update its current positional values myCircle.cx.baseVal.value and myCircle.cy.baseVal.value. The browser handles the background drawing for you. If you repeat this in small enough increments, you get an animated circle moving across the screen. For more info about SVG animation, see the links in the Related topics section.