Animating a 2D SVG HTML5 game
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.