Creation of a game like String Avoider tutorial

Read all posts about "" game

A really interesting “avoidance game” that was made in those days is String Avoider. The author of this “More than 1 million views” game in Newgrounds explains it in 12 words: “Avoid colliding with walls and guide your string through each unique level”.

String avoider

And that’s it. The aim of the game is guiding your string through some levels without touching the walls.

It’s very similar to the ball game I am discussing in this site, but this time the ball is controlled by the mouse and has a “tail” that responses in a very “real life” way.

Something very hard to code, you may say. It’s not that hard to reproduce a string movement in Flash, even if the built-in string class does not help us…

(laugh)

… but let’s start with the tutorial.

The string

A string is made of two objects: the head and the tail. The player will control the head, while the tail will follow the head. That’s it.

So, the first thing to do is the creation of the head. The picture below shows how to draw, position and link the head

head creation

Then in main scene first frame simply drop this actionscript

tail_len = 2;
tail_nodes = 100;
nodes = new Array();
_root.attachMovie("the_head", "the_head", 1, {_x:250, _y:200});
_root.createEmptyMovieClip("the_tail", 2);
for (x=1; x

Line 1: Defining tail_len variable at 2. What is tail_len? It's the length in pixels of the fixed part between two nodes.

Line 2: Defining tail_nodes as the number of nodes that will contain the tail.

Time to give some explication: in real world, a string can bend in any of its points. In flash world, we do not want it because it will use too much computer resources and we do not need it because it's just a game. So, if we want a string 200 pixels wide, we can use the "real world" method defining tail_len at 1 and tail_nodes at 200, or we can simplify computer's work setting tail_len at 2 and tail_nodes at 100. Just remember that tail_nodes*tail_len = real tail length for high values of tail_nodes.

Line 3: Declaration of the array where will store all nodes positions

Line 4: Attaching the "head" movie on the stage positioning it in middle of it.

Line 5: Creation of an empty movie clip called "tail" that will contain the tail of the string

Lines 6-8: Cycle that creates all nodes positions. Their starting positions, defined as coordinates, at the beginning are equals to head's _x and _y coordinates

Line 9: Function to be executed at every frame

Lines 10-11: Placing the head at current mouse x and y positions

Line 12: Clearing the tail movieclip

Line 13: Setting the line style of the tail movieclip with a stroke height of 2 filled with green. For more information about drawing and line styles, check this tutorial.

Line 14: Placing the "pen" that will draw the tail on the same head _x and _y positions

Line 15: Defining the first node coordinates (nodes[0]) and the same head _x and _y positions. The first node actually could be the head itself, but I wanted a bigger head so I designed it as a separate movieclip.

Line 16: Beginning of the main loop, that will scan all nodes except nodes[0]. In this case, nodes[1] to nodes[99]

Line 17: Obtaining the angle between the xth and the (x-1)th node. This is done using trigonometry. I wrote a tutorial about it here. You may notice that is a bit different than the atan formulas used in that tutorial, but I discovered atan2 is often more useful than atan in applications involving rotation by a specified amount, because it returns a positive beta for all angles between 0 and 180 degrees (even when x is negative).
Thus it eliminates the need for extra code to deal with different values in different quadrants of the circle.

Lines 18-19: Here trigonometry is involved to calculate new node[x] x and y positions according to its angle with node[x-1]

Line 20: New x and y positions are saved in node[x]

Line 21: Drawing a line from the previous pen position to new x and y positions

And that's it! We have our moving string. Time to test for some collisions!

Collisions

I created a movieclip linked as wall and placed it on the stage.

Then the actionscript is:

tail_len = 2;
tail_nodes = 100;
nodes = new Array();
_root.attachMovie("the_head", "the_head", 1, {_x:250, _y:200});
_root.createEmptyMovieClip("the_tail", 2);
_root.attachMovie("wall", "wall", 3, {_x:250, _y:200});
for (x=1; x

Line 6: Placing the wall on stage

Line 22: Hit test between pos_x, pos_y coordinates and the wall

Line 23: If the test is positive, then change the line color to red. In this way you can view where you collided.

And now you're ready to create some string game... download the source code and send me your works!

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers