As you know, Phaser 2.6.2 is the latest and last official Phaser version, so while we are waiting for Phaser v3 I am updating the oldest prototypes to 2.6.2 in order to have a set of prototypes working with the latest Phaser version. Last month I started with Space is Key, and now t’s time to revamp String Avoider. The original game was published in 2006, more than 10 years ago, but the game is still fun. « Avoid colliding with walls and guide your string through each unique level. Time is of the essence as you must steadily travel through 26 levels to victory. » And this is what we are going to create: If you have a mobile device, you can play it directly from this link. Move the mouse around the canvas to make the string move, and watch how it reacts when it touches an obstacle. The game field is made by one single PNG blue image with transparent background. The string is an array of points with lines joining such points. Really easier than you may think. That’s why the source code is so short, although I commented it line by line:

var game

var gameOptions = {

     // game width
     gameWidth: 640,
     
     // game height
     gameHeight: 960,
     
     // number of segments which build the tail
     tailSegments: 300,
     
     // lenght of each segment
     segmentLength: 2     
}

// when the window loads
window.onload = function() {
    
     // game creation	
	game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight);
     
     // adding game state
     game.state.add("TheGame", TheGame);
     
     // starting game state
     game.state.start("TheGame");
}

var TheGame = function(){};

TheGame.prototype = {

     // when the state preloads
     preload: function(){
     
          // setting the game on maximum scale mode to cover the entire screen
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          
          // preloading maze image, a PNG image with transparency
          game.load.image("maze", "assets/sprites/maze.png");
     },
     
     // once the state has been created
     create: function(){
          
          // creation of a bitmap data with the same size as the game
          this.bitmap = game.make.bitmapData(game.width, game.height);
          
          // drawing "maze" image on the bitmap data
          this.bitmap.draw("maze");
          
          // updating bitmap data to let it have actual image data
          this.bitmap.update();
          
          // adding the bitmap data as a sprite
          game.add.sprite(0, 0, this.bitmap);  
          
          // segments is the array which will contain string segments
          this.segments = [];
          
          // populating segments array with gameOptions.tailSegments Point
          for(var i = 0; i < gameOptions.tailSegments; i++){
               this.segments[i] = new Phaser.Point(0, 0);
          } 
          
          // we create a graphics instance called "canvas", we'll draw the string on it
          this.canvas = game.add.graphics(0, 0);  
     },
     
     // at each update
     update: function(){
     
          // clearing the canvas, ready to be redrawn
          this.canvas.clear();
          
          // setting line style to a 4 pixel thick line, red, 100% opaque
          this.canvas.lineStyle(4, 0x00ff00, 1);
          
          // the head of the string is current input position
          var head = new Phaser.Point(game.input.x, game.input.y);
          
          // placing the pen on the head
          this.canvas.moveTo(head.x, head.y);
          
          // the first segment is the head itself
          this.segments[0] = new Phaser.Point(head.x, head.y);
          
          // looping through all segments starting from the second one
          for(var i = 1; i < gameOptions.tailSegments - 1; i++){
          
               // determining the angle between current segment and previous segment
               var nodeAngle = Math.atan2(this.segments[i].y - this.segments[i - 1].y, this.segments[i].x - this.segments[i - 1].x);
               
               // calculating new segment position according to previous segment position and the angle
               this.segments[i] = new Phaser.Point(this.segments[i - 1].x + gameOptions.segmentLength * Math.cos(nodeAngle), this.segments[i - 1].y + gameOptions.segmentLength * Math.sin(nodeAngle));
               
               // getting the color behind the segment
               var color = this.bitmap.getPixelRGB(Math.round(this.segments[i].x), Math.round(this.segments[i].y));
               
               // if the color alpha is different than zero, that is it's not a transparent pixel...
               if(color.a != 0){
               
                    // from now on, draw the string in red
                    this.canvas.lineStyle(4, 0xff0000, 1);
               } 
               
               // drawing the segment
               this.canvas.lineTo(this.segments[i].x, this.segments[i].y);    
          }
     }
}

Next time I’ll show you how to add animated obstacles, meanwhile download the source code.