planck sample demo

by 亮 薛

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/planck-js/0.1.37/planck-with-testbed.js"></script>
<canvas id="stage"></canvas>

CSS

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
}

body {
  background: #f4f4f4;
  font-family: Ubuntu, Arial, sans-serif;
}

a {
  text-decoration: none;
  color: #1c83eb;
}

a:hover {
  text-decoration: underline;
}

.center {
  margin: 0 auto;
  max-width: 900px;
  position: relative;
}

.header {
  padding: 25px 0 15px;
}

.title {
  color: #444;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  margin: 3px 0 0;
}

.title a {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

.title a:hover {}

.control {
  float: right;
  margin: 0;
}

.github a {
  font-size: 0.95em;
  margin-right: 1em;
  color: #888;
}

.github iframe {
  display: inline-block;
  margin-right: 10px;
}

@media screen and (max-width: 600px) {
  .github {
    display: none;
  }
}

table.control td {
  vertical-align: center;
}

table.control tr,
table.control td {
  margin: 0;
  padding: 0;
  border: 0 none;
  border-spacing: 0;
}

select {
  vertical-align: top;
  line-height: 26px;
  height: 26px;
}

select {
  padding-left: 0.4em;
}

button {
  height: 26px;
  width: 1.7em;
  padding: 0 0;
  text-align: center;
}

button.narrow {
  width: 1.3em;
}

button:before {}

button.icon-small:before {
  vertical-align: 20%;
  font-size: 0.7em;
}

.links {
  margin: 1em 0;
  text-align: justify;
}

.links a {
  font-size: 0.8em;
  margin: 0 0.5em;
}

#stage {
  display: block;
  width: 100%;
  height: 600px;
  background: #222;
  border-radius: 2px;
}

#status {
  font-family: monospace;
  color: #333;
  margin: 1em 0;
}

#info {
  font-family: monospace;
  color: #333;
  margin: 1em 0;
}

#code {
  padding: 9px;
  border-radius: 2px;
  background: #f8f8f8;
  font-family: monospace;
  font-size: 0.9em;
}

#stage,
#code {
  display: block;
  width: 100%;
  height: 600px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#stage.hide,
#code.hide,
.hide...

JavaScript

planck.testbed('PolyShapes', function(testbed) {
  var pl = planck, Vec2 = pl.Vec2; // Vec2(x, y);
  var world = new pl.World(Vec2(0, -9.8)); // 水平方向加速度为0，垂直方向加速度为9.8

  // 采用默认值创建物体
  var ground = world.createBody();
  // 左右宽度各40，密度是0
  //  ground.createFixture(pl.Edge(Vec2(-40.0, 0.0), Vec2(40.0, 0.0)), 0);
  // 创建地面（地面也是物体）
  
  ground.createFixture(pl.Edge(Vec2(-20.0, 0.0), Vec2(20.0, 0.0)));
  ground.createFixture(pl.Edge(Vec2(20.0, 0.0), Vec2(20.0, 20.0)));
  ground.createFixture(pl.Edge(Vec2(-20.0, 0.0), Vec2(-20.0, 20.0)));
  ground.createFixture(pl.Edge(Vec2(-20.0, 0.0), Vec2(-20.0, 20.0)));


  var circle = pl.Circle(0.8);

  function Create() {

    var bd = {};
    bd.type = 'dynamic';

    bd.position = Vec2(0, 10.0);  // 水平居中，高度为10
    bd.angle = 0;	// 圆内横线的角度
    bd.angularDamping = 0.02;
    body = world.createBody(bd); {
      var fd = {};
      fd.density = 1.0;	// 密度
      fd.friction = 0.3;	// 摩擦力系数
      fd.restitution = 0.5;	// 弹性系数

      body.createFixture(circle, fd);
    }
  }

  testbed.keydown = function(code, char) {
    Create();
  };

  return world;
});