JSFiddle - React, Tailwind, and code Playground

by Thiago Figueiredo

HTML

<script src="http://anzol.biz/physicsjs-mpss/physicsjs-full.js"></script>
<canvas
    id="viewport"
    >
</canvas>

CSS

body {
    margin: 0;
}

JavaScript

var
    metre;

metre = 30;

Physics(function (world) {

    'use strict';

    var
        bodyImpulseResponse,
        edgeBounce,
        kickDuration,
        kicking,
        metrePerSecond,
        mppsvi,
        renderer,
        viewHeight,
        viewportBounds,
        viewWidth,
        yellowBall,
        yellowBallRadius,
        yellowBallRadiusInMetres;

    viewWidth = window.innerWidth;
    viewHeight = window.innerHeight;
    metrePerSecond = metre / 1000;

    yellowBallRadiusInMetres = 1;
    yellowBallRadius = yellowBallRadiusInMetres * metre;

    kickDuration = 0;
    kicking = false;

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

    bodyImpulseResponse = Physics.behavior('body-impulse-response');

    // constrain objects to these bounds
    edgeBounce = Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds,
        restitution: 0.25
    });

    // create yellow ball
    yellowBall = Physics.body('circle', {
        x: 100,
        y: viewHeight * 0.5,
        mass: 0.45,
        radius: yellowBallRadius,
        styles: {
            angleIndicator: '#000',
            fillStyle: '#ffea00'
        }
    });

    // metre per second squared verlet integrator
    mppsvi = Physics.integrator('metre-per-second-squared-verlet', {
        metre: metre
    });

    // create a renderer
    renderer = Physics.renderer('canvas', {
        el: 'viewport',
        width: viewWidth,
        height: viewHeight
    });

    // add things to the world
    world.add([
        bodyImpulseResponse,
        edgeBounce,
        mppsvi,
        renderer,
        yellowBall
    ]);

    // subscribe to ticker to advance the simulation
    Physics.util.ticker.on(function (time) {
        if (kicking) {
            if (kickDuration > 50) {
                kicking = false;
                console.log(kickDuration);
            } else {
                yellowBall.applyForce({ x: 270, y: 0...