SVG Pivvot clone


 

Creating a game like Pivvot seems to be an easy task, until you really understand whats happening and how to achieve the same effect in a html5 manner. Certain things need to be done, accurate collision detection, create a random path trough a number of points, move along path with constant speed and place/replace Obstacles along path. Since this is just a prototype it does not contain all of the features of the original Pivvot game, such as dynamic background, path pattern, path start point, animated path width, etc.. The code as well is not optimized in any way, but it’s already a good starting point to create something like Pivvot.

 

  The game Pivvot, all it graphics and game concept belongs to Fixpoint production.

 

concept

This Pivvot clone prototype is made as easy as possible, instead of crating a endless random path which generates new path segments on the fly, we create a simple distorted circle which is naturally an endless path. There is an Obstacle pool which holds all the obstacles, once an obstacle is displayed at the screen, the objects shown flag is set to true. If an obstacle is not shown on the screen, but its shown flag is set, the object will be replaced.

Instead of moving the Player along the path, we move the path and keep the player at the center. Checking each frame the distance to the colliders that are currently on the screen, those which are  flagged as shown. Once a collision appears the level gets regenerated, and the game restarts.

 

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

  This is just a prototype, the code is not optimized and can contain some bugs and problems.

 

conclusion

A very decent html5/SVG Pivvot clone is the Result. Thankfully the SVG element supports the “getPointAtLength” function, which saves us a lot of time and power. Almost any part of the game is based or related to this function. It could go really tricky if this function would not exist, with a whole lot of curve math, parametrized curves and path subdivision, to get a clean and controlled animation. Even if the prototype just creates a circle path, it should be an easy task to create a endless path or spiral along a number of points.
Anyway, the prototype works quite well, even on slower mobile devices it runs around 30 fps. Which is not perfect in any way, but it’s not that bad for SVG animated elements.