“String Avoider” HTML5 game prototype updated to Phaser 3 with a new end of level effect

Talking about String Avoider game, Game development, HTML5, Javascript and Phaser.
Learn cross platform HTML5 game development
Check my Gumroad page for commented source code, games and books.
One prototype I always wanted to update is String Avoider
I made the first ActionScript 2 version back in 2007 then it was built with AS3, Corona, Starling and Stencyl.
And obviously the HTML5 version was powered by Phaser 2, so now it’s time to update it to Phaser 3 and add one more feature: the string gets shorter and shorter as it reaches the goal, as if it was going inside goal target.
Touch the canvas, and “start” circle will disappear revealing the string, drag your finger anywhere and see how the string follows your finger movements.
Reach the end to advance to next level. Once the string is on the stage, you can drag anywhere and the string will follow your finger/mouse movement.
Just like previous versions, the code is commented line by line. If you want to find the most important differences between Phaser 2 and Phaser 3 versions, Phaser.Point class has been removed and Phaser.Math.Vector2 was used. Moreover, all methods to handle pixel colors to generate the background gradients and to get pixel alpha have been changed used new methods.
Look at the completely commented source code:
// the game itself
let game
 
// all game options are defined in this object
let gameOptions = {
 
    // game width
    gameWidth: 640,
 
    // game height
    gameHeight: 960,
 
    // number of segments which build the tail
    tailSegments: 300,
 
    // lenght of each segment
    segmentLength: 2,
 
    // number of levels. Useful to preload each level PNGs
    levels: 3,
 
    // current level
    currentLevel: 1
}
 
// levels information are stored here
let gameLevels = [
    {
        startSpot: {
            x: 320,
            y: 120
        },
        endSpot: {
            x: 320,
            y: 840
        }
    },
    {
        startSpot: {
            x: 80,
            y: 80
        },
        endSpot: {
            x: 280,
            y: 80
        }
    },
    {
        startSpot: {
            x: 80,
            y: 830
        },
        endSpot: {
            x: 80,
            y: 130
        }
    }
]
 
// when the window loads
window.onload = function() {
    let gameConfig = {
        width: gameOptions.gameWidth,
        height: gameOptions.gameHeight,
        scene: playGame
    }
    game = new Phaser.Game(gameConfig);
    window.focus()
    resize();
    window.addEventListener("resize", resize, false);
}
 
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
 
    preload(){
 
        // preloading all level images, PNG images with transparency
        for(let i = 1; i <= gameLevels.length; i ++){
            this.load.image("level" + i, "assets/sprites/level" + i + ".png");
        }
 
        // preloading game icons as spritesheet
        this.load.spritesheet("icons", "assets/sprites/icons.png", {
            frameWidth: 80,
            frameHeight: 80
        });
    }
 
    create(){
 
        //
        // GRADIENT BACKGROUND
        //
 
        // creation of a graphic object without adding it to the game
        let background = this.make.graphics({
            x: 0,
            y: 0,
            add: false
        });
 
        // we are going to create a gradient background, that is a series of retangles filled with different colors
        let gradientSteps = game.config.height / 2;
 
        // determining rectangle height according to game height and gradient steps
        let rectangleHeight = Math.floor(game.config.height / gradientSteps);
 
        // looping through all gradient steps
        for(let i = 0; i <= gradientSteps; i ++){
 
            // ColorWithColor method interpolates the two given colors based on "gradientSteps" steps returns the i-th step
            let color = Phaser.Display.Color.Interpolate.ColorWithColor(Phaser.Display.Color.ValueToColor("0x0e2be3"), Phaser.Display.Color.ValueToColor("0xa6e1ff"), gradientSteps, i);
 
            // setting background fill stile
            background.fillStyle(Phaser.Display.Color.RGBToString(Math.round(color.r), Math.round(color.g), Math.round(color.b), 0, "0x"));
 
            // drawing a filled rectangle covering the full width of the game and "rectangleHeight" height
            background.fillRect(0, rectangleHeight * i, game.config.width, rectangleHeight);
        }
 
        // generating a texture called "gradient" from the graphics
        background.generateTexture("gradient", game.config.width, game.config.height);
 
        // no need to keep the grahpic object anymore
        background.destroy();
 
        // adding the texture data as a sprite
        this.add.sprite(game.config.width / 2, game.config.height / 2, "gradient");
 
        //
        // LEVEL MAZE
        //
 
        this.add.sprite(game.config.width / 2, game.config.height / 2, "level" + gameOptions.currentLevel);
 
        //
        // GAME ICONS
        //
 
        // temp variable to access more quicly to level information
        let levelObject = gameLevels[gameOptions.currentLevel - 1];
 
        // adding start icon
        this.startSpot = this.add.sprite(levelObject.startSpot.x, levelObject.startSpot.y, "icons", 0);
 
        // adding end icon
        this.endSpot = this.add.sprite(levelObject.endSpot.x, levelObject.endSpot.y, "icons", 1);
 
        //
        // INPUT MANAGEMENT
        //
 
        // just a flag to inform us if we already had an input, that is if the player already clicked/touched the canvas
        this.firstInput = true;
 
        // flag to check if the player can drag
        this.canDrag = false;
 
        // input listeners
        this.input.on("pointerdown", this.startMoving, this);
        this.input.on("pointermove", this.dragString, this);
        this.input.on("pointerup", this.stopMoving, this);
 
        //
        // GAME STUFF
        //
 
        // we create a graphics instance called "canvas", we'll draw the string on it
        this.canvas = this.add.graphics(0, 0);
 
        // segments is the array which will contain string segments
        this.segments = [];
 
        // it's not game over yet
        this.gameOver = false;
 
        // do not consume the string
        this.consumeString = false;
 
    }
 
    // startMoving method, will be called each time the player touches/clicks the canvas
    startMoving(e){
 
        // if it's not game over...
        if(!this.gameOver){
 
            // the player cna not dragg
            this.canDrag = true;
 
            // checking if it's the first input: player clicks/touches the canvas for the first time
            if(this.firstInput){
 
                // not the first input anymore
                this.firstInput = false;
 
                // making start icon invisible
                this.startSpot.visible = false;
 
                // populating segments array with an amount of "gameOptions.tailSegments" Phaser Vector2 objects
                for(let i = 0; i < gameOptions.tailSegments; i++){
 
                    // I want the string to be a circle at first, so I am using a little trigonometry to place these points accordingly
                    let radians = 12 * Math.PI * i / gameOptions.tailSegments + Math.PI / 4;
 
                    // creating Vector2 objects and placing them into segments array. "10" is the radius of the circle
                    this.segments[i] = new Phaser.Math.Vector2(this.startSpot.x + 10 * Math.cos(radians), this.startSpot.y + 10 * Math.sin(radians));
                }
 
                // calling moveString function. Actually this function moves and renders the string, and the two arguments represent
                // respectively the x and y movement to apply to string's head. We set them to zero because there's no movement yet
                this.moveString(0, 0);
            }
 
            // add a move callback to be fired when the player moves the mouse/finger and call dragString method
            //game.input.addMoveCallback(this.dragString, this);
 
            // add a up callback to be fired when the player releases the finger/mouse button and call endMove method
            //game.input.onUp.add(this.endMove, this);
 
            // saving current event position, that is the position where the player is currently touching/clicking
            this.startPosition = e.position;
        }
    }
 
    // moveString method updates and renders the string
    moveString(x, y){
 
        // the head of the string is current input position
        let head = new Phaser.Math.Vector2(this.segments[0].x + x, this.segments[0].y + y);
 
        // the first segment is the head itself
        this.segments[0] = new Phaser.Math.Vector2(head.x, head.y);
 
        // renders the string and checks for game over
        this.gameOver = this.renderString();
 
        // if it's game over or the head of the string is fairly inside the end spot...
        if(this.segments[0].distance(new Phaser.Math.Vector2(this.endSpot.x, this.endSpot.y)) < this.endSpot.width / 4 || this.gameOver){
 
            // can't drag anymore
            this.canDrag = false;
 
            // if it's not game over, this means the player solved the level and we consume the string
            if(!this.gameOver){
                this.consumeString = true;
            }
 
            // wait 2 seconds before restarting the game.
            this.time.addEvent({
                delay: 2000,
                callbackScope: this,
                callback: function(){
 
                    // if it's not game over, this means the player solved the level so we move on to next level
                    if(!this.gameOver){
                        gameOptions.currentLevel = (gameOptions.currentLevel % gameLevels.length) + 1;
                    }
                    this.scene.start("PlayGame");
                }
            });
        }
    }
 
    // dragString method is called when the player moves the finger or the mouse while keeping mouse button pressed
    dragString(e){
 
        // if the player can drag
        if(this.canDrag){
 
            // calling moveString function. Actually this function moves and renders the string, and the two arguments represent
            // respectively the x and y movement to apply to string's head.
            // We set them to represent the distance from current input position and previous input position
            this.moveString(e.position.x - this.startPosition.x, e.position.y - this.startPosition.y);
 
            // updating startPosition variable
            this.startPosition = new Phaser.Math.Vector2(e.position.x, e.position.y);
        }
    }
 
    // method to render the string, returns true if the string collided with the maze
    renderString(){
 
        // did the string collide?
        let collided = false;
 
        // clearing the canvas, ready to be redrawn
        this.canvas.clear();
 
        // only draw if there's something to draw
        if(this.segments.length > 0){
 
            // setting line style to a 4 pixel thick line, black, 100% opaque
            this.canvas.lineStyle(4, 0x000000, 1);
 
            // placing the pen on the head
            this.canvas.moveTo(this.segments[0].x, this.segments[0].y);
 
            // looping through all segments starting from the second one
            for(let i = 1; i < this.segments.length - 1; i++){
 
                // determining the angle between current segment and previous segment
                let 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.Math.Vector2(this.segments[i - 1].x + gameOptions.segmentLength * Math.cos(nodeAngle), this.segments[i - 1].y + gameOptions.segmentLength * Math.sin(nodeAngle));
 
                // getting the transparency behind the segment
                let alpha = this.textures.getPixelAlpha(Math.round(this.segments[i].x), Math.round(this.segments[i].y), "level" + gameOptions.currentLevel);
 
                // if the color alpha is different than zero, that is it's not a transparent pixel...
                if(alpha != 0){
 
                    // from now on, draw the string in red
                    this.canvas.lineStyle(4, 0xff0000, 1);
 
                    // collision...
                    collided = true;
 
                }
 
                // drawing the segment
                this.canvas.lineTo(this.segments[i].x, this.segments[i].y);
                this.canvas.moveTo(this.segments[i].x, this.segments[i].y);
 
            }
 
            this.canvas.strokePath();
        }
 
        return collided;
    }
 
    // method to be executed at each frame
    update(){
 
        // if we need to consume the string...
        if(this.consumeString){
 
            // if there are more than 5 segments...
            if(this.segments.length >= 5){
 
                // remove the latest 5 segments
                this.segments.length = this.segments.length - 5;
            }
            else{
                this.segments.length = 0;
            }
 
            // then render the string
            this.renderString();
        }
    }
 
    // stopMoving method, the player cannot drag anymore
    stopMoving(e){
        this.canDrag = false;
    }
}
function resize() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;
    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else{
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}
I wonder if this gameplay would still work in 2019 on mobile devices. Download the source code and play with it.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.