How to create a HTML draggable and scrollable map with inertia using Phaser framework

Today I am showing you how to create a HTML draggable and scrollable map with an inertia effect which can be used in several ways. I already blogged about a similar topic in the post Create an HTML5 level selection screen using a scrollable map like in “Hero Emblems” game using Phaser but I prefer the version I am about to show you now because it allows to drag the map and make it scroll swiping on it with an inertia effect. This is what we are going to build:

Drag the map to simply move it, or swipe to make it scroll with the inertia effect: the tendency of objects to keep moving in a straight line at constant velocity. Once the map is scrolling on its own, drag it again. It should work exactly as you imagine. Thanks to Phaser draggable inputs, making it was quite a joke, have a look at the source code:

var game;
var speedMult = 0.7;
// this is the friction which will slow down the map. Must be less than 1
var friction = 0.99;

window.onload = function() {	
	game = new Phaser.Game(480, 480, Phaser.AUTO, "");
     game.state.add("PlayGame", playGame);
     game.state.start("PlayGame");
}

var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          game.load.image("map", "map.png");
     },
     create: function(){  
          // the big map to scroll
          this.scrollingMap = game.add.image(0, 0, "map");
          // map will accept inputs
          this.scrollingMap.inputEnabled = true;
          // map can be dragged
          this.scrollingMap.input.enableDrag(false);
          // custom property: we save map position
          this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
          // custom property: the map is not being dragged at the moment
          this.scrollingMap.isBeingDragged = false; 
          // custom property: map is not moving (or is moving at no speed)
          this.scrollingMap.movingSpeed = 0; 
          // map can be dragged only if it entirely remains into this rectangle
          this.scrollingMap.input.boundsRect = new Phaser.Rectangle(game.width - this.scrollingMap.width, game.height - this.scrollingMap.height, this.scrollingMap.width * 2 - game.width, this.scrollingMap.height * 2 - game.height);
          // when the player starts dragging...
          this.scrollingMap.events.onDragStart.add(function(){
               // set isBeingDragged property to true
               this.scrollingMap.isBeingDragged = true;
               // set movingSpeed property to zero. This will stop moving the map
               // if the player wants to drag when it's already moving
               this.scrollingMap.movingSpeed = 0;
          }, this);
          // when the player stops dragging...
          this.scrollingMap.events.onDragStop.add(function(){
               // set isBeingDragged property to false
               this.scrollingMap.isBeingDragged = false;
          }, this);
     },
     update:function(){
          // if the map is being dragged...
          if(this.scrollingMap.isBeingDragged){
               // save current map position
               this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
          }
          // if the map is NOT being dragged...
          else{
               // if the moving speed is greater than 1...
               if(this.scrollingMap.movingSpeed > 1){
                    // adjusting map x position according to moving speed and angle using trigonometry
                    this.scrollingMap.x += this.scrollingMap.movingSpeed * Math.cos(this.scrollingMap.movingangle);
                    // adjusting map y position according to moving speed and angle using trigonometry
                    this.scrollingMap.y += this.scrollingMap.movingSpeed * Math.sin(this.scrollingMap.movingangle);
                    // keep map within boundaries
                    if(this.scrollingMap.x < game.width - this.scrollingMap.width){
                         this.scrollingMap.x = game.width - this.scrollingMap.width;
                    }
                    // keep map within boundaries
                    if(this.scrollingMap.x > 0){
                         this.scrollingMap.x = 0;
                    }
                    // keep map within boundaries
                    if(this.scrollingMap.y < game.height - this.scrollingMap.height){
                         this.scrollingMap.y = game.height - this.scrollingMap.height;
                    }
                    // keep map within boundaries
                    if(this.scrollingMap.y > 0){
                         this.scrollingMap.y = 0;
                    }
                    // applying friction to moving speed
                    this.scrollingMap.movingSpeed *= friction;
                    // save current map position
                    this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
               }
               // if the moving speed is less than 1...
               else{
                    // checking distance between current map position and last saved position
                    // which is the position in the previous frame
                    var distance = this.scrollingMap.savedPosition.distance(this.scrollingMap.position);
                    // same thing with the angle
                    var angle = this.scrollingMap.savedPosition.angle(this.scrollingMap.position);
                    // if the distance is at least 4 pixels (an arbitrary value to see I am swiping)
                    if(distance > 4){
                         // set moving speed value
                         this.scrollingMap.movingSpeed = distance * speedMult;
                         // set moving angle value
                         this.scrollingMap.movingangle = angle;
                    }
               }
          }
     }
}

There are a lot of possible uses for this kind of movement, I am showing you some of them this week, meanwhile download the source code.