-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (73 loc) · 2.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<title>fisics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<!-- Main block -->
<div class="navSideAndContent">
<!-- Navigation sidebar -->
<div class="navSide">
<p>My Simulations</p>
<a href="#">Basic Simulator</a>
</div>
<!-- Main content -->
<div class="content">
<script src="matter.js"></script>
<script>
let engine = Matter.Engine.create();
let render = Matter.Render.create({
element: document.body,
engine:engine,
options : {
width: 1200,
height: 700,
wireframes: false
}
});
let ground = Matter.Bodies.rectangle(960,600,340,20,{ isStatic: true});
/* let boxA = Matter.Bodies.rectangle(400,200,80,80);
let boxB = Matter.Bodies.rectangle(470,50,80,80);
let boxC = Matter.Bodies.rectangle(420,-50,80,80); */
let mouse = Matter.Mouse.create(render.canvas);
let mouseConstraint = Matter.MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
render: {visible: false}
}
});
render.mouse = mouse;
let ball = Matter.Bodies.circle(200,500,20);
let sling = Matter.Constraint.create({
pointA: {x:200, y:500},
bodyB: ball,
stiffness: 0.05
});
let stack = Matter.Composites.stack(880,-900,4,8,15,5, function(x,y){
//return Matter.Bodies.rectangle(x,y,80,80);
//let sides = Math.round(Matter.Common.random(2,8));
return Matter.Bodies.polygon(x,y,4,20/*sides, Matter.Common.random(20,50) */);
});
let firing = false;
Matter.Events.on(mouseConstraint,'enddrag', function(e){
if (e.body === ball) firing = true;
});
Matter.Events.on(engine,'afterUpdate',function(){
if (firing && Math.abs(ball.position.x-200) < 20 && Math.abs(ball.position.y-500) < 20) {
ball = Matter.Bodies.circle(200,500,20);
Matter.World.add(engine.world,ball);
sling.bodyB = ball;
firing = false;
}
});
Matter.World.add(engine.world,[/* boxA,boxB,boxC, */stack,ground,ball,sling,mouseConstraint]);
Matter.Engine.run(engine);
Matter.Render.run(render);
</script>
</div>
</div>
</main>
</body>
</html>