Commit 0f32528e authored by Raphaël Bastide's avatar Raphaël Bastide

First commit

parents
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.matter-header-outer{display: none!important;}
.matter-demo{background: #777!important}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<meta name="theme-color" content="#000000">
<meta name="msapplication-navbutton-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/main.css">
<title>Ball On URL</title>
<script type="text/javascript" src="lib/decomp.js"></script>
<script type="text/javascript" src="lib/pathseg.js"></script>
<!-- Matter -->
<script src="lib/matter.min.js"></script>
<!-- MatterTools -->
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="lib/matter-tools.gui.js"></script>
<script src="lib/matter-tools.inspector.js"></script>
<script src="lib/matter-tools.demo.js"></script>
<!-- Plugins -->
<script src="lib/matter-wrap.js"></script>
<!-- Examples -->
<script src="js/car.js"></script>
</head>
<body>
<script src="js/launcher.js"></script>
</body>
</html>
var Example = Example || {};
Example.car = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
Events = Matter.Events;
var terrain = window.location.hash.substr(1);
var urlshapes = false
if (terrain.includes('%E')) {
urlshapes = true
terrain = terrain.split('%E')
}else {
terrain = terrain.split('')
}
console.log(terrain);
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
wireframes:false,
width: 1600,
height: 800,
showAngleIndicator: false,
showCollisions: false,
background: '#111'
}
});
Render.run(render);
// create runner
var runner = Runner.create();
runner.isFixed = true
Runner.run(runner, engine);
engine.world.gravity.y = 1;
var car = Composites.car(150, 100, 150, 30, 40)
var test = Bodies.circle(100, 100, 100, { friction:0, frictionAir:.003, restitution: 0.2})
// test.density = 1
car.bodies[1].friction = 0 // wheels friction
car.bodies[2].friction = 0
World.add(world, test);
// World.add(world, car);
var startX = 100
var startY = 200
var nextPos = 0
var lastDir = 0
// var realW = unit.bounds.max.x - unit.bounds.min.x
// var realH = unit.bounds.max.y - unit.bounds.min.y
var w = 400
var h = 10
for (var i = 0; i < terrain.length; i++) {
if (urlshapes) {
var t = "%E" + String(terrain[i])
}else {
t = terrain[i]
}
if (!nextPos){nextPos = {x:startX,y:startY}}
buildUnit(t, nextPos)
}
function buildUnit(char, nextPos){
var posY = nextPos.y
if (char == "%E2%80%94" || char == 'f') { // shape: —
var unit = Bodies.rectangle(nextPos.x, posY, w, h, { isStatic: true, angle: Math.PI * 0.0 , friction:0})
unit.name = 'flat'
unit.render.fillStyle = 'white'
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == '%E2%95%B1' || char == 'u') { // shape: ╱
var unit = Bodies.rectangle(nextPos.x, posY - 150, w, h, { isStatic: true, angle: Math.PI * -0.2 , friction:0})
unit.name = 'up'
unit.render.fillStyle = 'white'
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y -= unit.distances.h
}else if (char == '%E2%95%B2' || char == 'd') { // shape: ╲
var unit = Bodies.rectangle(nextPos.x, posY + 150, w, h, { isStatic: true, angle: Math.PI * 0.2, friction:0})
unit.name = 'down'
unit.render.fillStyle = 'white'
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == '%E2%96%B6' || char == 'b') { // shape: ▶
var unit = Bodies.rectangle(nextPos.x, posY, w, h, {isStatic: true, angle: Math.PI * 0.0, friction:0})
unit.name = 'boost'
unit.render.fillStyle = '#00FF00'
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}
World.add(world,unit);
}
function getDistances(unit){
var realW = unit.bounds.max.x - unit.bounds.min.x
var realH = unit.bounds.max.y - unit.bounds.min.y
return unit.distances = {w:realW, h:realH}
}
// vertices[1].x += 0.2;
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
// World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
Events.on( engine, 'afterTick', (e)=> {
// Render.lookAt( render, car.bodies[0].bounds.max, {x: 500, y: 500 },true );
Render.lookAt( render, test, {x: 500, y: 500 },true );
})
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
if (pair.bodyA.name === 'boost') {
// pair.bodyB.render.fillStyle = '#00FF00';
// Body.setVelocity(test, { x: 50, y: 0 });
} else if (pair.bodyB.name === 'boost') {
pair.bodyA.render.fillStyle = '#00FF00';
Body.setVelocity(test, { x: 50, y: 0 });
}
}
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};
/**
* The Matter.js demo page controller and example runner.
*
* NOTE: For the actual example code, refer to the source files in `/examples/`.
*
* @class Demo
*/
(function() {
var sourceLinkRoot = 'https://github.com/liabru/matter-js/blob/master/examples';
var urlcar = MatterTools.Demo.create({
// toolbar: false,
toolbar: {
title: 'urlcar',
// url: 'https://github.com/liabru/matter-js',
reset: false,
source: false,
inspector: false,
tools: false,
fullscreen: false,
exampleSelect: false
},
tools: {
inspector: false,
gui: false
},
inline: false,
preventZoom: false,
resetOnOrientation: true,
routing: false,
startExample: 'car',
examples: [
{
name: 'Car',
id: 'car',
init: Example.car,
sourceLink: sourceLinkRoot + '/car.js'
}
]
});
document.body.appendChild(urlcar.dom.root);
MatterTools.Demo.start(urlcar);
})();
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*!
* matter-wrap 0.2.0 by Liam Brummitt 2017-07-04
* https://github.com/liabru/matter-wrap
* License MIT
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("matter-js"));
else if(typeof define === 'function' && define.amd)
define(["matter-js"], factory);
else if(typeof exports === 'object')
exports["MatterWrap"] = factory(require("matter-js"));
else
root["MatterWrap"] = factory(root["Matter"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/libs";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var Matter = __webpack_require__(0);
/**
* A coordinate wrapping plugin for matter.js.
* See the readme for usage and examples.
* @module MatterWrap
*/
var MatterWrap = {
// plugin meta
name: 'matter-wrap', // PLUGIN_NAME
version: '0.1.3', // PLUGIN_VERSION
for: 'matter-js@^0.12.0',
// installs the plugin where `base` is `Matter`
// you should not need to call this directly.
install: function install(base) {
base.after('Engine.update', function () {
MatterWrap.Engine.update(this);
});
},
Engine: {
/**
* Updates the engine by wrapping bodies and composites inside `engine.world`.
* This is called automatically by the plugin.
* @function MatterWrap.Engine.update
* @param {Matter.Engine} engine The engine to update.
* @returns {void} No return value.
*/
update: function update(engine) {
var world = engine.world,
bodies = Matter.Composite.allBodies(world),
composites = Matter.Composite.allComposites(world);
for (var i = 0; i < bodies.length; i += 1) {
var body = bodies[i];
if (body.plugin.wrap) {
MatterWrap.Body.wrap(body, body.plugin.wrap);
}
}
for (i = 0; i < composites.length; i += 1) {
var composite = composites[i];
if (composite.plugin.wrap) {
MatterWrap.Composite.wrap(composite, composite.plugin.wrap);
}
}
}
},
Bounds: {
/**
* Returns a translation vector that wraps the `objectBounds` inside the `bounds`.
* @function MatterWrap.Bounds.wrap
* @param {Matter.Bounds} objectBounds The bounds of the object to wrap inside the bounds.
* @param {Matter.Bounds} bounds The bounds to wrap the body inside.
* @returns {?Matter.Vector} A translation vector (only if wrapping is required).
*/
wrap: function wrap(objectBounds, bounds) {
var x = null,
y = null;
if (typeof bounds.min.x !== 'undefined' && typeof bounds.max.x !== 'undefined') {
if (objectBounds.min.x > bounds.max.x) {
x = bounds.min.x - objectBounds.max.x;
} else if (objectBounds.max.x < bounds.min.x) {
x = bounds.max.x - objectBounds.min.x;
}
}
if (typeof bounds.min.y !== 'undefined' && typeof bounds.max.y !== 'undefined') {
if (objectBounds.min.y > bounds.max.y) {
y = bounds.min.y - objectBounds.max.y;
} else if (objectBounds.max.y < bounds.min.y) {
y = bounds.max.y - objectBounds.min.y;
}
}
if (x !== null || y !== null) {
return {
x: x || 0,
y: y || 0
};
}
}
},
Body: {
/**
* Wraps the `body` position such that it always stays within the given bounds.
* Upon crossing a boundary the body will appear on the opposite side of the bounds,
* while maintaining its velocity.
* This is called automatically by the plugin.
* @function MatterWrap.Body.wrap
* @param {Matter.Body} body The body to wrap.
* @param {Matter.Bounds} bounds The bounds to wrap the body inside.
* @returns {?Matter.Vector} The translation vector that was applied (only if wrapping was required).
*/
wrap: function wrap(body, bounds) {
var translation = MatterWrap.Bounds.wrap(body.bounds, bounds);
if (translation) {
Matter.Body.translate(body, translation);
}
return translation;
}
},
Composite: {
/**
* Returns the union of the bounds of all of the composite's bodies
* (not accounting for constraints).
* @function MatterWrap.Composite.bounds
* @param {Matter.Composite} composite The composite.
* @returns {Matter.Bounds} The composite bounds.
*/
bounds: function bounds(composite) {
var bodies = Matter.Composite.allBodies(composite),
vertices = [];
for (var i = 0; i < bodies.length; i += 1) {
var body = bodies[i];
vertices.push(body.bounds.min, body.bounds.max);
}
return Matter.Bounds.create(vertices);
},
/**
* Wraps the `composite` position such that it always stays within the given bounds.
* Upon crossing a boundary the composite will appear on the opposite side of the bounds,
* while maintaining its velocity.
* This is called automatically by the plugin.
* @function MatterWrap.Composite.wrap
* @param {Matter.Composite} composite The composite to wrap.
* @param {Matter.Bounds} bounds The bounds to wrap the composite inside.
* @returns {?Matter.Vector} The translation vector that was applied (only if wrapping was required).
*/
wrap: function wrap(composite, bounds) {
var translation = MatterWrap.Bounds.wrap(MatterWrap.Composite.bounds(composite), bounds);
if (translation) {
Matter.Composite.translate(composite, translation);
}
return translation;
}
}
};
Matter.Plugin.register(MatterWrap);
module.exports = MatterWrap;
/**
* @namespace Matter.Body
* @see http://brm.io/matter-js/docs/classes/Body.html
*/
/**
* This plugin adds a new property `body.plugin.wrap` to instances of `Matter.Body`.
* This is a `Matter.Bounds` instance that specifies the wrapping region.
* @property {Matter.Bounds} body.plugin.wrap
* @memberof Matter.Body
*/
/**
* This plugin adds a new property `composite.plugin.wrap` to instances of `Matter.Composite`.
* This is a `Matter.Bounds` instance that specifies the wrapping region.
* @property {Matter.Bounds} composite.plugin.wrap
* @memberof Matter.Composite
*/
/***/ })
/******/ ]);
});
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment