var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

var sprite;

function preload() {
  game.load.baseURL = 'http://examples.phaser.io/assets/';
  game.load.crossOrigin = 'anonymous';
  
  //load sprites
  game.load.image('phaser', 'sprites/arrow.png');
  game.load.image('ball', 'sprites/green_ball.png');
  
  //load font
  //game.load.bitmapFont('desyrel', 'fonts/bitmapFonts/desyrel-pink.png', 'fonts/bitmapFonts/desyrel-pink.xml');
  
  
}

var sprite;
var balls = [];

function create() {
  
  game.physics.startSystem(Phaser.Physics.ARCADE);
  //game.stage.backgroundColor = '#fb007f';
  sprite = game.add.sprite(400, 300, 'phaser');
  sprite.anchor.setTo(0.5, 0.5);

  //  Enable Arcade Physics for the sprite
  game.physics.enable(sprite, Phaser.Physics.ARCADE);

  //  Tell it we don't want physics to manage the rotation
  sprite.body.allowRotation = false;
  
  //----
  
  //Add text
  //bmpText = game.add.bitmapText(200, 100, 'desyrel', 'dsaf', 64);
  var style = { font: "bold 15px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
  //  The Text is positioned at 0, 100
  text = game.add.text(110, 130, "Landmark 1", style);
  text2 = game.add.text(610, 130, "Landmark 2", style);
  text3 = game.add.text(110, 530, "Landmark 3", style);
  text4 = game.add.text(610, 530, "Landmark 4", style);
  
  
  //Ben's code to add balls
  ball = game.add.sprite(400, 300, 'ball');
  ball.anchor.setTo(0.5, 0.5);
  
  balls[0] = game.add.sprite(300, 400, 'ball');
  balls[0].anchor.setTo(0.5, 0.5);
  balls[0].alpha = 0.5;
  balls[1] = game.add.sprite(700, 400, 'ball');
  balls[1].anchor.setTo(0.5, 0.5);
  
  //Ben's code to add landmarks
  
  var graphics = game.add.graphics(0, 0);
  graphics.lineStyle(2, 0xffd900, 1);
  graphics.beginFill(0xFF0000, 1);
  graphics.drawCircle(150, 100, 25);
  graphics.alpha= 0.5;
  
  var graphics2 = game.add.graphics(0, 0);
  graphics.lineStyle(2, 0xffd900, 1);
  graphics.beginFill(0xFF0000, 1);
  graphics.drawCircle(650, 100, 25);
  graphics.alpha= 0.5;
  
  var graphics4 = game.add.graphics(0, 0);
  graphics.lineStyle(2, 0xffd900, 1);
  graphics.beginFill(0xFF0000, 1);
  graphics.drawCircle(650, 500, 25);
  graphics.alpha= 0.5;
  
  var graphics3 = game.add.graphics(0, 0);
  graphics.lineStyle(2, 0xffd900, 1);
  graphics.beginFill(0xFF0000, 1);
  graphics.drawCircle(150, 500, 25);
  graphics.alpha= 0.5;
  
  //Ben's code to draw initial particles!
  
  for (i = 0; i < 100; i++) {
    var x = Math.floor((Math.random() * 700) + 1);
    var y = Math.floor((Math.random() * 500) + 1);
    particles[i] = game.add.sprite(x, y, 'ball');
    particles[i].anchor.setTo(0.5, 0.5);;
    }
  
}

// update isn't called until 'create' has completed. If you need to process stuff before that point (i.e. while the preload is still happening)
// then create a function called loadUpdate() and use that

var count = 0;
var count_2 = 0;
var particles = [];

function update() {
  sprite.rotation = game.physics.arcade.moveToPointer(sprite, 60, game.input.activePointer, 500);
  //console.log(sprite.x)
  //console.log(sprite.angle)
  
  
  if (count <50) {
    count++;
  } else {
    console.log(count_2);
    count_2++;
    count=0;
          
    for (i = 0; i < 100; i++) {
    particles[i].destroy();
    particles[i].destroy();
    }
        
    for (i = 0; i < 100; i++) {
    var x = Math.floor((Math.random() * 700) + 1);
    var y = Math.floor((Math.random() * 500) + 1);
    particles[i] = game.add.sprite(x, y, 'ball');
    particles[i].anchor.setTo(0.5, 0.5);;
    }    
    
  }  
}

function render() {
  game.debug.spriteInfo(sprite, 32, 32);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.4/phaser.min.js