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.
“String Avoider” HTML5 game updated to Phaser 2.6.2
Read all posts about "String Avoider" game
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: