physicsjs + requirejs: can't get script to actually do anything

StackOverflow https://stackoverflow.com/questions/23396247

  •  13-07-2023
  •  | 
  •  

Question

I'm new to using requirejs. I'm trying to use it to learn a physics module. I'm following a very basic tutorial, but I'm stuck. Basically, I want to simply create a circle using a module, but nothing is happening. Dev tools in chrome isn't throwing any errors and all the dependencies are being loaded as I'd expect.

This is the html:

<!DOCTYPE html>
<html>
    <head>
        <title>Physics project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="main" src="lib/require.js"></script>
        <link rel="stylesheet" type="text/css" href="lib/css/style.css"
    </head>
    <body>
        <div class="content">
        <h2>Physics</h2>
        <canvas id="viewport" width="500" height="500"></canvas>
    </div>
    </body>
</html>

main.js:

require(['lib/config/require-config'], function(){
    require(['lib/modules/template']);
});

require-config:

require.config({
    paths: {
         "jquery": "http://code.jquery.com/jquery-latest.min",
         "underscore": "lib/underscore",
         "physicsjs":"lib/physicsjs-0.6.0/physicsjs-full-0.6.0.min",

    }

template.js: All the physics stuff is just pulled from an example for the creator of the module, so it seems like I'm not "calling" the physics function correctly or something. 

    define(
    [
    'underscore',
    'jquery',
    'physicsjs',
        'lib/physicsjs-0.6.0/bodies/circle'

    ], 
    function(
        Physics
   ) {

        Physics(function(world){
      var viewWidth = 500;
      var viewHeight = 500;

      var renderer = Physics.renderer('canvas', {
        el: 'viewport',
        width: viewWidth,
        height: viewHeight,
    meta: false, // don't display meta data
    styles: {
        // set colors for the circle bodies
        'circle' : {
          strokeStyle: '#351024',
          lineWidth: 1,
          fillStyle: '#d33682',
          angleIndicator: '#351024'
        }
      }
    });

  // add the renderer
  world.add( renderer );
  // render on each step
  world.on('step', function(){
    world.render();
  });

  // bounds of the window
  var viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight);

  // constrain objects to these bounds
  world.add(Physics.behavior('edge-collision-detection', {
    aabb: viewportBounds,
    restitution: 0.99,
    cof: 0.99
  }));

  // add a circle
  world.add(
    Physics.body('circle', {
        x: 50, // x-coordinate
        y: 30, // y-coordinate
        vx: 0.2, // velocity in x-direction
        vy: 0.01, // velocity in y-direction
        radius: 20
      })
    );

  // ensure objects bounce when edge collision is detected
  world.add( Physics.behavior('body-impulse-response') );

  // add some gravity
  world.add( Physics.behavior('constant-acceleration') );

  // subscribe to ticker to advance the simulation
  Physics.util.ticker.on(function( time, dt ){

    world.step( time );
  });

  // start the ticker
  Physics.util.ticker.start();

  });
  });
Était-ce utile?

La solution

The define signature is wrong:

define( [
  'underscore',
  'jquery',
  'physicsjs',
  'lib/physicsjs-0.6.0/bodies/circle'
], 
function(Physics) {
    // ...
})

define array's elements are bound to function's arguments one-to-one so Physics variable actually refers to UnderscoreJS. Correct function signature would be:

// ...
function(underscore, $, Physics, circle) {
    // ...
})
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top