HTML5 Terry Cavanagh’s vvvvvv game prototype

One platform I really love is Terry Cavanagh‘s vvvvvv (six “v” in a row), in my opinion one of the most playable games of its genre since Jet Set Willy has been released.

It’s a platform game but you cannot jump: instead, you can switch the gravity which affects the player so you can walk both on the floor and on the ceiling.

To create this interesting kind of movement, I will start from the prototype I uploaded last week: Creation of an HTML5 tile based platform game with no engines behind: pure code!

It’s pure javascript, so you won’t need any gramework or game engine to have your game up and running.

The code is fully commented and new lines are highlighted, anyway we need two steps:

MAKING THE HERO SMALLER THAN A TILE

This is necessary when we want the hero to be able to easily move into one tile sized tunnels.

The main script does not change, we only have to adjust a bit collision detection when we check for right and bottom walls. Left and upper walls collision code remain intact because in our case the hero has the origin at (0,0).

Here is the script:

And this is the result

Move the hero with WASD keys and you will be able to easily walk in and out of the center of the stage, in the middle of the four blocks.

Now we have to add gravity.

ADDING AND FLIPPING PLAYER GRAVITY

In order to create gravity, we first need to disable UP and DOWN movement, and in this case we will assign UP arrow key the function to switch gravity.

Gravity acts as an acceleration on the player, and we will also set a maximun free fall speed for a gaming experience purpose. We don’t want the player to fall too fast, like it would happen in a real world.

Since the gravity wins on every other force, this time we’ll need to give vertical collisions a priority over horizontal collisions, so I am checking for horizontal collisions after I managed vertical collisions.

Here is the script:

And this is the result:

Move with A and D keys, switch gravity with W.

Download the source code of the entire project.

  • Hi!
    Well done, Your tutorials on HTML5 with the explained code are really useful!

    Tnx

  • Pingback: Control your HTML5 game character like in vvvvvv mobile game with Construct2 - Emanuele Feronato()

  • Alan Rostem

    Hello!
    Amazing work! I love how this is pure code and no specific engine is involved. I have one problem with this though. Whenever I increase the player size above 32 pixels, the tile collision is very glitchy. Try it yourself. Is there any optimal way to manage tile collision with a player bigger than 32 pixels?