AS3 version of Nodes engine: full playable game with infinite solvable levels

Today I want to point you on a very interesting prototype I made more than four years ago… Creation of the engine behind “Nodes” game with Flash.

It’s a basic prototype of Nodes, a puzzle game which got some success years ago.

Why am I publishing this prototype today? First, because I improved and now it’s a “complete” game, which means you can play for real, trying to beat infinite random-generated solvable levels.

Second, and probably most important reason, is the gameplay is perfect for a mobile porting, which I am currently making.

Anyway, this is the game:

Drag the red nodes to highlight all blue targets with the laser. Once a level is completed, you will face another random generated level.

And this is the short source code I used to make it:

Let’s see the most interesting lines:

DRAGGABLES and TARGETS are respectively the amounts of red draggable nodes and blue targets.

draggableNode and target are variables to instantiate respectively DraggableNode and Target sprites, in the library

laserCanvas is the sprite we will use to draw the laser

draggableVector and targetVector are vectors we will fill respectively with draggable nodes and targets

isDragging is a Boolean variable to help us know whether the player is dragging a node.

This is the game itself, which works this way: first, draggable nodes are randomly placed on the stage, then target are randomly placed over lasers, generating a solvable levels, then draggable nodes are shuffled and finally the laser is shown.

A listener is added to trigger mouse movements.

And this is how we place draggable nodes:

The Boolean argument is used to let us know whether we just have to adjust nodes or we also have to physically add them to stage and fill draggableVector vector. When the game is run, we have to physically add the nodes, but when the player completes a level we just have to arrange nodes in different positions.

Look at the listeners attached to each node, and also look how we are ensuring there are at least 150 pixels of empty space around nodes.

Targets are placed/moved in the same way, just keeping at least 50 pixels of empty space before we find another target or a draggable node.

The interesting part starts at line 52 where I choose a random laser segment where to place the target.

Lines 53-54: Given the segment, I determine the nodes which delimit such segment

Line 55: Finding the angle of the segment

Line 56: Finding segment length

Lines 57-58: Once I know the start and end points of the segment, as well as its length and angle, it’s easy to place the target in a random point of the segment using trigonometry.

This is how draggable nodes are shuffled… just placing them in a random position.

And this is how the laser is placed on the stage, it’s just a line connecting all nodes in sequence, also connecting the latest node with the first node.

The last interesting function is the one which handles nodes movement. In this case, I just perform an hit test between nodes registration point and the laser line, so the strongest the line, the easier the game. Once all targets are touched by laser simultaneously, a new level starts.

And that’s all, download the source code, hope you enjoyed this prototype and you will enjoy the mobile porting too.

  • Hey Emanuele,
    I’m kind of confused as to why you handle your hit testing with hitTestPoint when the original nodes game (presumably) uses a hit test object method. It makes your game much harder, but also gives no real indication as to where the laser should land to activate the node. This is manageable with my mouse, but I think I would get pretty pissed playing this on my phone on the train!

  • James

    This game doesn’t have a good transition between levels.

  • Cool game, I really like the infinite level concept! Saves a lot of time from having to manually create all the levels. Thanks :)

  • Emanuele Feronato

    @greg: it should land in the center of the target. Anyway, the error-proof way to determine activation would be a point-segment distance. I’ll publish something about it later

  • robert

    hey Emanuele, i was wondering how i would be able to make the draggable nodes rotate so that the smallest arc distance for the lines is in front of them…
    i.e. i changed the graphics to people and i want them to rotate to make it seem like the lines are coming from the front of their body

    also how would i go about changing the “laser” to a movie clip i created?

  • Jeremy

    How would I go about making the line my own graphic? Say, a rope or chain? Thanks.
    Great stuff!

  • I wanted the dragable nodes look professional like in the real game and there should be a background in the game.And the laser should be changed into a chain.
    Can you please help me.
    Also can after that i publish it in my website.
    I will mention your name also

  • GoldenCheese

    When i change the DRAGGABLES:Number=2 and TARGETS:Number=2, the game would error when linked all targets. How can i fix this error.

  • Ciro

    Hi emanuele.

    After seeing how easily you created this in AS3, I decided to go about making a Facebook version of this game called ‘Nodes Social’. I used your logic as a rough guide, and built it from scratch. I’ve credited this site, and the maker of the original game in the about section.

    The cool thing about this game is that after each level it tells you what friends you beat.

    Let me know what you think.

  • Hey its Eggy, making of nodes. Nice adapation Ciro^ Its good to see my work expanded. Nodes 2 uses a full 360 degree hittest on each circle to get rid of the hittest only in the middle of the node.

  • Sergio

    Hey Emanuele,

    I am making a node game with the help of this tutorial,
    but when I want to put a background in it the targets are
    behind the background and I can’t make them visible by putting
    the background to the back or code it before it adds the targets.
    Do you have a solution for this please?