SVG Platformer “UP”


 

How to create a simple platformer prototype called “up”, only with SVG elements. This prototype is entirely made with code, no visual level designer was involved. All elements have certain values which can be changed to change the whole level/game behavior. Currently some of these values set to random, such as platform speed, platform width and platform position. Others are static like player speed, level speed, time, background etc..

Keep in mind, this is just a prototype, a visualization of a concept. There are no graphical elements which represents the player, enemies and other assets. The code is not perfect as well, but it is as easy as possible, which really helps to understand what happens and where it needs some optimization. Each line of the code is commented to help to understand whats happening there.

 

  The concept and the code should work with any other language or render type!

 

overview

Once you have downloaded the project, these are all the project files from the “/js” folder inside the project folder. The rest of the project files are fairly simple and basic, you should check them as well. The game is created an controlled entirely with these javascript files.

/js

 

conclusion

Creating a basic, fully computed platformer only with SVG elements worked fine. It is really easy to create basic game prototypes in pure SVG. Moving objects along x and y coordinates and checking for collision, is the same as on any other platform. While the prototype “UP” is really simple and basic, its a good starting point for a more complex and fun game. A game with different platforms, enemies, certain task etc., as well as good artwork.
Anyway there is clearly a performance problem on mobile devices, most of the devices the game was tested on, are running below 30 fps while playing. This is a common problem while moving too much DOM related elements, at the same time on the screen. There are already some workarounds, which should help increase the fps. Unless SVG elements are GPU accelerated on mobile devices, there is no chance to get more complex games running.