drop effect with boxboxjs - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

drop effect with boxboxjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://incompl.github.io/boxbox/boxbox/Box2dWeb-2.1.a.3.js"></script> 
      <script type="text/javascript" src="https://incompl.github.io/boxbox/boxbox/boxbox.js"></script> 
      <script type="text/javascript">
window.onload = function() {/*  w  ww  .  ja va 2 s  . c o  m*/
   var canvasElem = document.getElementById("game");
   var world = boxbox.createWorld(canvasElem);
   world.createEntity({
      name: "player",
      shape: "circle",
      radius: 1,
      imageStretchToFit: true,
      density: 4,
      x: 2,
      onKeyDown: function(e) {
         this.applyImpulse(200, 60);
      }
   });
   world.createEntity({
      name: "ground",
      shape: "square",
      type: "static",
      color: "rgb(0,100,0)",
      width: 20,
      height: .5,
      y: 12
   });
   var block = {
      name: "block",
      shape: "square",
      color: "brown",
      width: .5,
      height: 4,
      onImpact: function(entity, force) {
         if (entity.name() === "player") {
            this.color("black");
         }
      }
   };
   world.createEntity(block, {
      x: 15
   });
   world.createEntity(block, {
      x: 17
   });
   world.createEntity(block, {
      x: 16,
      y: 1,
      width: 4,
      height: .5
   });
};

      </script> 
   </head> 
   <body> 
      <canvas id="game" width="640" height="380">
          Text that you see if you don't support Canvas :( 
      </canvas>  
   </body>
</html>

Related Tutorials