https://github.com/pablopunk/build-your-own-basic-physics-engine-in-javascript

Extensible physics engine in Javascript
https://github.com/pablopunk/build-your-own-basic-physics-engine-in-javascript

engine es6 extensible javascript physics plugins

Last synced: 1 day ago
JSON representation

Extensible physics engine in Javascript

• Host: GitHub
• URL: https://github.com/pablopunk/build-your-own-basic-physics-engine-in-javascript
• Owner: pablopunk
• Created: 2018-05-27T14:17:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-20T18:56:48.000Z (over 6 years ago)
• Last Synced: 2024-10-19T08:58:37.779Z (4 months ago)
• Topics: engine, es6, extensible, javascript, physics, plugins
• Language: JavaScript
• Homepage: https://physics.now.sh
• Size: 66.4 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Physics engine in Javascript

> https://physics.now.sh

## Run

```sh

$ npm install   # install dependencies

$ npm run dev   # watch for files to change

$ npm start     # init server

$ npm run build # build for production (dist/ folder)

```

## Structure

```

+-- index.html            (the view)

+-- src/                  (the JS code)

    +-- index.js          (the logic entry point)

    +-- object.js         (the physical object model)

    +-- plugins/          (extensible plugins for object behaviour)

    |   +-- bounds.js     (make sure the objects are inside the frame)

    |   +-- draw.js       (draw each object into the canvas)

    |   +-- index.js      (export objectPlugins and playerPlugins)

    |   +-- keys.js       (make WASD move the player)

    |   +-- mouse.js      (mouse and touch move the player)

    |   +-- speedLimit.js (make sure objects don't get a fine)

    +-- render.js         (the main loop)

```

## Plugins

Plugins contain the logic that happens to each object on each frame.

Let's say you wanna add **gravity** to this world. You can create a plugin inside `src/plugins/gravity.js` and then export it in `src/plugins/index.js`:

```js

export objectPlugins = [

  // ...

  require('./gravity')

]

```

A plugin looks like this:

### `init` function

It takes all world `objects` as an argument and also a `props` object containig the canvas context, the world object and the height/width: `{ ctx, world, w, h }`.

```js

// src/plugins/gravity.js

module.exports.init = (objects, props) => {

  // You can initialize here anything you want based on all objects and props

}

```

### `run` function

This is the logic that the plugin actually does. In this example, we can make things fall. It takes the object as an argument as well as the props.

```js

// src/plugins/gravity.js

const g = 0.1 // value of gravity on each render

module.exports.run = (object, props) => {

  object.speedY(g)

  // You should NOT check here if there's a collision with the ground.

  // Collisions should be a separate plugin

}

```

[*Inspired by*](https://www.graphitedigital.com/blog/build-your-own-basic-physics-engine-in-javascript)