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.