matter.jsという物理演算ライブラリの使い方について

matter.jsについて自分でapiを見て色々調べているのですが、うまくいかないので質問させてください。

以下の2つほどで行き詰っております
・body要素をworldから削除する方法
・body要素に対してテキストを挿入する方法

コードを載せた方がよいということだったので、書いたコードを載せます

<!DOCTYPE html> <html> <head> <title>carTest</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="./js/matter-0.8.0.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<input id = "power" type = "button" value = "power"></input>
<input id = "remove" type = "button" value = "remove"></input>

<div id = "canvas-container"></div>

</head> <body> <script> var Engine = Matter.Engine, Gui = Matter.Gui, World = Matter.World, Bodies = Matter.Bodies, Body = Matter.Body, Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, Events = Matter.Events; MouseConstraint = Matter.MouseConstraint, Constraint = Matter.Constraint;

var container = document.getElementById("canvas-container");

var engine = Engine.create(container,{render: {
	options: {
  	  wireframes:false,
      showIds:true
	}
}});




 var offset = 5;
 World.addBody(engine.world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
 World.addBody(engine.world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
 World.addBody(engine.world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
 World.addBody(engine.world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));


 var mouseConstraint = MouseConstraint.create(engine);
 World.add(engine.world, mouseConstraint);



var car = Composites.car(150, 100, 100, 40 , 30);

World.addComposite(engine.world,car);

var box = Bodies.rectangle(30,30,100,100);
World.add(engine.world, box);
console.log(box);
Engine.run(engine);



$("#power").click(function(car){
	box.force.x = -1;
});

$("#remove").click(function(t){
	World.clear(car);
	World.clear(box);
});

</script> </body> </html>

World.clear(car)でcarのオブジェクトは消えるのですが、boxのほうが消えずにTypeError: composite.bodies is undefinedというエラーがでてしまいます。

行動規範の内容に同意します

回答1件

ベストアンサー

masa_au_lateさんの書いたコードや何がどのようにうまくいかないのかを書かれると皆さん回答しやすいと思います。

lang
1var box = Bodies.rectangle(30,30,100,100);

lang
1$("#power").click(function(car){
2        box.force.x = -1;
3     });

を

lang
1var box = Composite.create();
2var boxBody = Bodies.rectangle(30,30,100,100);
3Composite.addBody(box,boxBody);

lang
1$("#power").click(function(car){
2        boxBody.force.x = -1;
3     });

とすることでboxの削除が出来ました。
World.clearはCompositeのみをクリアするようです。

投稿2014/12/01 00:06

sho_cs

総合スコア3541

masa_au_late

2014/12/01 07:50

ありがとうございます。無事削除できました

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

matter.jsという物理演算ライブラリの使い方について

masa_au_lateさんの書いたコードや何がどのようにうまくいかないのかを書かれると皆さん回答しやすいと思います。

関連した質問