Phaser P2 Physics Test

In this example below you will see how to do a Phaser P2 Physics Test with some HTML / CSS and Javascript

Bossman in a bouncy castle! Playing around with some of the Phaser.io p2 physics examples.http://twitter.com/benjaminmiles

Thumbnail
This awesome code was written by benjaminmiles, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright benjaminmiles ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Phaser P2 Physics Test</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="game"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='js/d14661d23aaff5e33949bd197.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.2/phaser.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/benjaminmiles/phaser-p2-physics-test-avbFK */
body {
  background: #222;
}

#game {
  width: 800px;
  height: 600px;
  margin: 50px auto;
  border: 15px solid black;
  border-radius: 20px;
}


/*Downloaded from https://www.codeseek.co/benjaminmiles/phaser-p2-physics-test-avbFK */
(function() {
  //PREVIEW IMAGE
  var bmd, create, game, launch, preload, preview, render, sprite, update;

  preview = new PreviewImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/physics-test.jpg");

  //SCOPE VARS
  sprite = null;

  bmd = null;

  //PRELOAD
  preload = function() {
    var bossman, bouncycastle;
    bouncycastle = game.load.image("bouncycastle", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/bouncycastle.jpg");
    bossman = game.load.image("bossman", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/bossman.png");
    
    //this is needed to run Phaser.AUTO / WebGL instead of just Phaser.CANVAS
    bossman.crossOrigin = "Anonymous";
    return bouncycastle.crossOrigin = "Anonymous";
  };

  //CREATE
  create = function() {
    var bg, text;
    
    //remove preview image
    preview.clear();
    
    //enable p2 physics
    game.physics.startSystem(Phaser.Physics.P2JS);
    
    //background  
    bg = game.add.sprite(0, 0, 'bouncycastle');
    bg.width = game.width;
    bg.height = game.height;
    
    //world settings
    game.physics.p2.gravity.y = 300;
    game.physics.p2.restitution = 0.8;
    
    //add bossman sprite
    sprite = game.add.sprite(32, 450, "bossman");
    game.physics.p2.enable(sprite);
    
    //render some insturctions text
    text = game.add.text(20, 20, "p2 physics test :: click around", {
      fill: "#ffffff",
      font: "14pt Arial"
    });
    //bind launch function to mouse down
    return game.input.onDown.add(launch, this);
  };

  //LAUNCH
  launch = function() {
    if (game.input.x < sprite.x) {
      sprite.body.velocity.x = -200;
      sprite.body.velocity.y = -200;
      return sprite.body.angularVelocity -= -3;
    } else {
      sprite.body.velocity.x = 200;
      sprite.body.velocity.y = -200;
      return sprite.body.angularVelocity += 3;
    }
  };

  
  //UPDATE
  update = function() {};

  
  //RENDER
  render = function() {};

  
  //INIT
  game = new Phaser.Game(800, 600, Phaser.AUTO, "game", {
    preload: preload,
    create: create,
    update: update,
    render: render
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTtBQUFBLE1BQUEsR0FBQSxFQUFBLE1BQUEsRUFBQSxJQUFBLEVBQUEsTUFBQSxFQUFBLE9BQUEsRUFBQSxPQUFBLEVBQUEsTUFBQSxFQUFBLE1BQUEsRUFBQTs7RUFDQSxPQUFBLEdBQVUsSUFBSSxZQUFKLENBQWlCLHNFQUFqQixFQURWOzs7RUFJQSxNQUFBLEdBQVM7O0VBQ1QsR0FBQSxHQUFNLEtBTE47OztFQVFBLE9BQUEsR0FBVSxRQUFBLENBQUEsQ0FBQTtBQUVSLFFBQUEsT0FBQSxFQUFBO0lBQUEsWUFBQSxHQUFlLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBVixDQUFnQixjQUFoQixFQUFnQyxzRUFBaEM7SUFFZixPQUFBLEdBQVUsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFWLENBQWdCLFNBQWhCLEVBQTJCLGlFQUEzQixFQUZWOzs7SUFLQSxPQUFPLENBQUMsV0FBUixHQUFzQjtXQUN0QixZQUFZLENBQUMsV0FBYixHQUEyQjtFQVJuQixFQVJWOzs7RUFtQkEsTUFBQSxHQUFTLFFBQUEsQ0FBQSxDQUFBO0FBR1AsUUFBQSxFQUFBLEVBQUEsSUFBQTs7O0lBQUEsT0FBTyxDQUFDLEtBQVIsQ0FBQSxFQUFBOzs7SUFHQSxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQWIsQ0FBeUIsTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUF4QyxFQUhBOzs7SUFNQSxFQUFBLEdBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFULENBQWdCLENBQWhCLEVBQWtCLENBQWxCLEVBQW9CLGNBQXBCO0lBQ0wsRUFBRSxDQUFDLEtBQUgsR0FBVyxJQUFJLENBQUM7SUFDaEIsRUFBRSxDQUFDLE1BQUgsR0FBWSxJQUFJLENBQUMsT0FSakI7OztJQVdBLElBQUksQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUF4QixHQUE0QjtJQUM1QixJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxXQUFoQixHQUE4QixJQVo5Qjs7O0lBZUEsTUFBQSxHQUFTLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBVCxDQUFnQixFQUFoQixFQUFvQixHQUFwQixFQUF5QixTQUF6QjtJQUNULElBQUksQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLE1BQWhCLENBQXVCLE1BQXZCLEVBaEJBOzs7SUFtQkEsSUFBQSxHQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBVCxDQUFjLEVBQWQsRUFBa0IsRUFBbEIsRUFBc0IsaUNBQXRCLEVBQ0w7TUFBQSxJQUFBLEVBQU0sU0FBTjtNQUNBLElBQUEsRUFBTTtJQUROLENBREssRUFuQlA7O1dBeUJBLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEdBQWxCLENBQXNCLE1BQXRCLEVBQThCLElBQTlCO0VBNUJPLEVBbkJUOzs7RUFrREEsTUFBQSxHQUFTLFFBQUEsQ0FBQSxDQUFBO0lBQ1AsSUFBRyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQVgsR0FBZSxNQUFNLENBQUMsQ0FBekI7TUFDRSxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFyQixHQUF5QixDQUFDO01BQzFCLE1BQU0sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQXJCLEdBQXlCLENBQUM7YUFDMUIsTUFBTSxDQUFDLElBQUksQ0FBQyxlQUFaLElBQStCLENBQUMsRUFIbEM7S0FBQSxNQUFBO01BS0UsTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBckIsR0FBeUI7TUFDekIsTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBckIsR0FBeUIsQ0FBQzthQUMxQixNQUFNLENBQUMsSUFBSSxDQUFDLGVBQVosSUFBK0IsRUFQakM7O0VBRE8sRUFsRFQ7Ozs7RUE2REEsTUFBQSxHQUFTLFFBQUEsQ0FBQSxDQUFBLEVBQUEsRUE3RFQ7Ozs7RUFpRUEsTUFBQSxHQUFTLFFBQUEsQ0FBQSxDQUFBLEVBQUEsRUFqRVQ7Ozs7RUFxRUEsSUFBQSxHQUFPLElBQUksTUFBTSxDQUFDLElBQVgsQ0FBZ0IsR0FBaEIsRUFBcUIsR0FBckIsRUFBMEIsTUFBTSxDQUFDLElBQWpDLEVBQXVDLE1BQXZDLEVBQ0w7SUFBQSxPQUFBLEVBQVMsT0FBVDtJQUNBLE1BQUEsRUFBUSxNQURSO0lBRUEsTUFBQSxFQUFRLE1BRlI7SUFHQSxNQUFBLEVBQVE7RUFIUixDQURLO0FBckVQIiwic291cmNlc0NvbnRlbnQiOlsiI1BSRVZJRVcgSU1BR0VcbnByZXZpZXcgPSBuZXcgUHJldmlld0ltYWdlKFwiaHR0cHM6Ly9zMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbS9zLmNkcG4uaW8vMTUwNTg2L3BoeXNpY3MtdGVzdC5qcGdcIilcblxuI1NDT1BFIFZBUlNcbnNwcml0ZSA9IG51bGxcbmJtZCA9IG51bGxcblxuI1BSRUxPQURcbnByZWxvYWQgPSAtPlxuICBcbiAgYm91bmN5Y2FzdGxlID0gZ2FtZS5sb2FkLmltYWdlIFwiYm91bmN5Y2FzdGxlXCIsIFwiaHR0cHM6Ly9zMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbS9zLmNkcG4uaW8vMTUwNTg2L2JvdW5jeWNhc3RsZS5qcGdcIlxuICBcbiAgYm9zc21hbiA9IGdhbWUubG9hZC5pbWFnZSBcImJvc3NtYW5cIiwgXCJodHRwczovL3MzLXVzLXdlc3QtMi5hbWF6b25hd3MuY29tL3MuY2Rwbi5pby8xNTA1ODYvYm9zc21hbi5wbmdcIlxuICBcbiAgI3RoaXMgaXMgbmVlZGVkIHRvIHJ1biBQaGFzZXIuQVVUTyAvIFdlYkdMIGluc3RlYWQgb2YganVzdCBQaGFzZXIuQ0FOVkFTXG4gIGJvc3NtYW4uY3Jvc3NPcmlnaW4gPSBcIkFub255bW91c1wiXG4gIGJvdW5jeWNhc3RsZS5jcm9zc09yaWdpbiA9IFwiQW5vbnltb3VzXCJcblxuI0NSRUFURVxuY3JlYXRlID0gLT5cbiAgXG4gICNyZW1vdmUgcHJldmlldyBpbWFnZVxuICBwcmV2aWV3LmNsZWFyKClcbiAgXG4gICNlbmFibGUgcDIgcGh5c2ljc1xuICBnYW1lLnBoeXNpY3Muc3RhcnRTeXN0ZW0gUGhhc2VyLlBoeXNpY3MuUDJKU1xuICBcbiAgI2JhY2tncm91bmQgIFxuICBiZyA9IGdhbWUuYWRkLnNwcml0ZSgwLDAsJ2JvdW5jeWNhc3RsZScpXG4gIGJnLndpZHRoID0gZ2FtZS53aWR0aFxuICBiZy5oZWlnaHQgPSBnYW1lLmhlaWdodFxuICBcbiAgI3dvcmxkIHNldHRpbmdzXG4gIGdhbWUucGh5c2ljcy5wMi5ncmF2aXR5LnkgPSAzMDBcbiAgZ2FtZS5waHlzaWNzLnAyLnJlc3RpdHV0aW9uID0gMC44XG4gIFxuICAjYWRkIGJvc3NtYW4gc3ByaXRlXG4gIHNwcml0ZSA9IGdhbWUuYWRkLnNwcml0ZSgzMiwgNDUwLCBcImJvc3NtYW5cIilcbiAgZ2FtZS5waHlzaWNzLnAyLmVuYWJsZSBzcHJpdGVcbiAgXG4gICNyZW5kZXIgc29tZSBpbnN0dXJjdGlvbnMgdGV4dFxuICB0ZXh0ID0gZ2FtZS5hZGQudGV4dCgyMCwgMjAsIFwicDIgcGh5c2ljcyB0ZXN0IDo6IGNsaWNrIGFyb3VuZFwiLFxuICAgIGZpbGw6IFwiI2ZmZmZmZlwiXG4gICAgZm9udDogXCIxNHB0IEFyaWFsXCJcbiAgKVxuXG4gICNiaW5kIGxhdW5jaCBmdW5jdGlvbiB0byBtb3VzZSBkb3duXG4gIGdhbWUuaW5wdXQub25Eb3duLmFkZCBsYXVuY2gsIHRoaXNcblxuI0xBVU5DSFxubGF1bmNoID0gLT5cbiAgaWYgZ2FtZS5pbnB1dC54IDwgc3ByaXRlLnhcbiAgICBzcHJpdGUuYm9keS52ZWxvY2l0eS54ID0gLTIwMFxuICAgIHNwcml0ZS5ib2R5LnZlbG9jaXR5LnkgPSAtMjAwXG4gICAgc3ByaXRlLmJvZHkuYW5ndWxhclZlbG9jaXR5IC09IC0zXG4gIGVsc2VcbiAgICBzcHJpdGUuYm9keS52ZWxvY2l0eS54ID0gMjAwXG4gICAgc3ByaXRlLmJvZHkudmVsb2NpdHkueSA9IC0yMDBcbiAgICBzcHJpdGUuYm9keS5hbmd1bGFyVmVsb2NpdHkgKz0gM1xuICAgIFxuI1VQREFURVxudXBkYXRlID0gLT5cbiAgIFxuICBcbiNSRU5ERVJcbnJlbmRlciA9IC0+XG4gIFxuICBcbiNJTklUXG5nYW1lID0gbmV3IFBoYXNlci5HYW1lKDgwMCwgNjAwLCBQaGFzZXIuQVVUTywgXCJnYW1lXCIsXG4gIHByZWxvYWQ6IHByZWxvYWRcbiAgY3JlYXRlOiBjcmVhdGVcbiAgdXBkYXRlOiB1cGRhdGVcbiAgcmVuZGVyOiByZW5kZXJcbikiXX0=
//# sourceURL=coffeescript

Comments