https://github.com/safrmo/vue-matter

Vue matter-js mixin
https://github.com/safrmo/vue-matter

Last synced: 6 days ago
JSON representation

Vue matter-js mixin

• Host: GitHub
• URL: https://github.com/safrmo/vue-matter
• Owner: SaFrMo
• Created: 2020-07-20T12:01:17.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2020-07-27T21:33:14.000Z (over 4 years ago)
• Last Synced: 2024-10-11T05:11:05.769Z (about 1 month ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
**Docs in progress**

**Nuxt**: Copy and paste the contents of `src` to `/mixins`. Then:

```html

    import matter from '~/mixins/matter'

    export default {

        mixins: [matter],

        mounted() {

            // create a matter world and add walls to it

            this.matterInit()

            this.matterWalls()

        },

    }

```

### Docs

```html

    import matter from '~/mixins/matter'

    export default {

        mixins: [matter],

        mounted() {

            // default options shown throughout

            // create a simple matter scene

            this.matterInit({

                // whether or not to clear the current scene, if any

                clear: true,

            })

            // add walls around the scene. returns array of wall bodies

            this.matterWalls({

                // wall padding, in px

                padding: 20,

                // target world (null == world created in `matterInit`)

                world: null,

                // target canvas (null == canvas created in `matterInit`)

                canvas: null,

            })

            // create your bodies - for example:

            const body = Bodies.rectangle(

                // width and height are computed props that return matterInit's created canvas's width and height

                this.width / 2,

                this.height / 2,

                50,

                50

            )

        },

    }

```