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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1696閲覧

matter.jsのobjectの結合について2

masa_au_late

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/01/11 19:13

前回オブジェクトの結合の件でここで質問させていただいて、大変参考になりました。
しかし、carオブジェクトの上に箱のように四角形を配置しようとするとうまくいかず困っております。
どのようにすればうまく箱を固定できますか

lang

1<!DOCTYPE html> 2<html> 3<head> 4 <title>carGetList</title> 5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 6 7 <script src="./js/matter-0.8.0.js" type="text/javascript"></script> 8 <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script> 9 <div id = "canvas-container"></div> 10 <input id = "left" type = "button" value = "left"> 11 12</head> 13<body> 14<script> 15 var Engine = Matter.Engine, 16 Gui = Matter.Gui, 17 World = Matter.World, 18 Bodies = Matter.Bodies, 19 Body = Matter.Body, 20 Composite = Matter.Composite, 21 Composites = Matter.Composites, 22 Common = Matter.Common, 23 Events = Matter.Events; 24 MouseConstraint = Matter.MouseConstraint, 25 Constraint = Matter.Constraint; 26 27 28 var container = document.getElementById("canvas-container"); 29 30 var engine = Engine.create(container,{render: { 31 options: { 32 wireframes:false, 33 showIds:true 34 } 35 }}); 36 37 38 39 40 var offset = 5; 41 World.addBody(engine.world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true })); 42 World.addBody(engine.world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true })); 43 World.addBody(engine.world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true })); 44 World.addBody(engine.world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true })); 45 46 var mouseConstraint = MouseConstraint.create(engine); 47 World.add(engine.world, mouseConstraint); 48 49/* var testComp = Composite.create(); 50 var car = Composites.car(200, 400, 100, 40 , 30); 51 52 //ここのパラメータは要調整 53 var testBody = Bodies.rectangle(200,400,10,10); 54 55 //carメソッドの内部を参考に追加 ここのパラメータも要調整 56 var axelTest = Constraint.create({ 57 bodyA: car.bodies[0], 58 pointA: { x: 200, y:400 }, 59 bodyB: testBody, 60 stiffness: 0 61 }); 62 Composite.addBody(car,testBody); 63 Composite.addConstraint(car, axelTest); 64 65 //World.add(engine.world,Composite.add(car,testBody)); 66 67 World.add(engine.world, car); 68 //World.add(engine.world, testBody); ここで追加はしません 69 Engine.run(engine); 70 71 72 World.add(engine.world,Composite.addBody(car,testBody)); 73 //World.add(engine.world, testBody); 74*/ 75 var xx = 120; 76 var yy = 170; 77 var width = 200; 78 var height = 40; 79 var wheelSize = 20; 80 var groupId = Body.nextGroupId(), 81 wheelBase = 20, 82 wheelAOffset = -width * 0.5 + wheelBase, 83 wheelBOffset = width * 0.5 - wheelBase, 84 wheelYOffset = 40; 85 86 87 88 var car = Composite.create({ label: 'Car' }), 89 body = Bodies.rectangle(xx, yy, width, height, { 90 groupId: groupId, 91 friction: 0.01, 92 }); 93 94 var wheelA = Bodies.circle(xx + wheelAOffset, yy + wheelYOffset, wheelSize, { 95 groupId: groupId, 96 restitution: 0.5, 97 friction: 0.9, 98 density: 0.01 99 }); 100 101 var wheelB = Bodies.circle(xx + wheelBOffset, yy + wheelYOffset, wheelSize, { 102 groupId: groupId, 103 restitution: 0.5, 104 friction: 0.9, 105 density: 0.01 106 }); 107 108 var axelA = Constraint.create({ 109 bodyA: body, 110 pointA: { x: wheelAOffset, y: wheelYOffset }, 111 bodyB: wheelA, 112 stiffness: 0.5 113 }); 114 115 var axelB = Constraint.create({ 116 bodyA: body, 117 pointA: { x: wheelBOffset, y: wheelYOffset }, 118 bodyB: wheelB, 119 stiffness: 0.5 120 }); 121 122 Composite.addBody(car, body); 123 Composite.addBody(car, wheelA); 124 Composite.addBody(car, wheelB); 125 Composite.addConstraint(car, axelA); 126 Composite.addConstraint(car, axelB); 127 128 129 130 131 132 133 var box = Composite.create({ label: 'box' }); 134 135 var underBox = Bodies.rectangle(150,150,60,25); 136 var leftBox = Bodies.rectangle(110,127.5,25,70); 137 var rightBox = Bodies.rectangle(190,127.5,25,70); 138 139 140 var leftLabel = Constraint.create({ 141 bodyA: underBox, 142 pointA: { x: -20,y: 0 }, 143 bodyB: leftBox, 144 stiffness: 0.5 145 }); 146 var rightLabel = Constraint.create({ 147 bodyA: underBox, 148 pointA: { x: 20,y: 0 }, 149 bodyB: rightBox, 150 stiffness: 0.5 151 }); 152 153 154 155 156 // World.add(engine.world,underBox); 157 // World.add(engine.world,leftBox); 158 // World.add(engine.world,rightBox); 159 160 Composite.addBody(box,underBox); 161 Composite.addBody(box,leftBox); 162 Composite.addBody(box,rightBox); 163 Composite.addConstraint(box,leftLabel); 164 Composite.addConstraint(box,rightLabel); 165 166 167 var carLabel = Constraint.create({ 168 bodyA: body, 169 pointA: { x: 0,y: 10 }, 170 bodyB: underBox, 171 stiffness: 0.5 172 }); 173 var carLabel2 = Constraint.create({ 174 bodyA: body, 175 pointA: { x: -20,y: -10 }, 176 bodyB: leftBox, 177 stiffness: 0.5 178 }); 179 var carLabel3 = Constraint.create({ 180 bodyA: body, 181 pointA: { x: 20,y: -10 }, 182 bodyB: rightBox, 183 stiffness: 0.5 184 }); 185 186 Composite.addComposite(car,box); 187 Composite.addConstraint(car,carLabel); 188 189 190 World.add(engine.world,car); 191 192 Engine.run(engine); 193 194 195 $("#left").click(function(t){ 196 var carBodies = Composite.allBodies(car); 197 carBodies[1].force.x = 2; 198 }); 199 200</script> 201</body> 202</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問