# Simulate planet gravity with Phaser + Box2D as seen on Angry Birds Space

I am sure you are playing Angry Birds Fight! during these days. I do, and having a new Angry Bird game on my phone reminded me of the old Angry Birds Space and the AS3+Box2D tutorial I made three years ago.

Following the same concept, I made the same thing using Phaser and the Box2D plugin. This is what I created with just a few lines:

Here we have two planets with their gravity zones, click anywhere on the stage to place a crate and watch it fall on the planet or remain floating in the space.

The source code is really easy:

var game;

// groups containing crates and planets

var crateGroup;
var planetGroup;

// a force reducer to let the simulation run smoothly

var forceReducer = 0.005;

// graphic object where to draw planet gravity area

var gravityGraphics;

game = new Phaser.Game(800, 600, Phaser.AUTO, "");
game.state.start("PlayGame");
}

var playGame = function(game){};

playGame.prototype = {
},
create: function(){

gravityGraphics.lineStyle(2,0xffffff,0.5);

// stage setup

game.stage.backgroundColor = "#222222";

// physics initialization

game.physics.startSystem(Phaser.Physics.BOX2D);

// adding a couple of planets. Arguments are:
// x position
// y position
// gravity force
// graphic asset

// waiting for player input

},
update: function(){

// looping through all crates

for(var i=0;i<crateGroup.total;i++){
var c = crateGroup.getChildAt(i);

// looping through all planets

for(var j=0;j<planetGroup.total;j++){
var p = planetGroup.getChildAt(j);

// calculating distance between the planet and the crate

var distance = Phaser.Math.distance(c.x,c.y,p.x,p.y);

// checking if the distance is less than gravity radius

// calculating angle between the planet and the crate

var angle = Phaser.Math.angleBetween(c.x,c.y,p.x,p.y);

// add gravity force to the crate in the direction of planet center

c.body.applyForce(p.gravityForce*Math.cos(angle)*forceReducer,p.gravityForce*Math.sin(angle)*forceReducer);
}
}
}
}
}

// function to add a crate

var crateSprite = game.add.sprite(e.x, e.y, "crate");
game.physics.box2d.enable(crateSprite);
}

// function to add a planet

var planet = game.add.sprite(posX, posY, asset);
planet.gravityForce = gravityForce
game.physics.box2d.enable(planet);
planet.body.static = true;

// look how I create a circular body

planet.body.setCircle(planet.width / 2);
}

And here we have our planet gravity made with Phaser and Box2D. As usual you can download the source code.

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 10000000
// 2 Cars
// 2048
// Avoider
// Ballz
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Breakout
// Bricks
// Columns
// CubesOut
// Dots
// DROP'd
// Dudeski
// Eskiv
// Filler
// Fling
// Globe
// HookPod
// Hundreds
// InkTd
// Iromeku
// Lumines
// Magick
// MagOrMin
// Maze
// Memdot
// Nano War
// Nodes
// o:anquan
// Ononmin
// Pacco
// Phyballs
// Platform
// Poker
// Pool
// Poux
// Pudi
// qomp
// Racing
// Renju
// SameGame
// Security
// Sling
// Slingy
// Sokoban
// Splitter
// Sproing
// Stack
// Stairs
// Stringy
// Sudoku
// Tetris
// Threes
// Toony
// Turn
// TwinSpin
// vvvvvv
// Wordle
// Worms
// Yanga
// Zhed
// zNumbers