質問編集履歴
2
ソースコードの編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,89 +17,249 @@
|
|
|
17
17
|
(anonymous) @ physics.js:2
|
|
18
18
|
|
|
19
19
|
```
|
|
20
|
+
```Javascript
|
|
21
|
+
//box2dクラスの短縮変数
|
|
22
|
+
var b2Vec2 = Box2D.Common.Math.b2Vec2, b2AABB = Box2D.Collision.b2AABB, b2BodyDef = Box2D.Dynamics.b2BodyDef, b2Body = Box2D.Dynamics.b2Body, b2FixtureDef = Box2D.Dynamics.b2FixtureDef, b2Fixture = Box2D.Dynamics.b2Fixture, b2World = Box2D.Dynamics.b2World, b2MassData = Box2D.Collision.Shapes.b2MassData, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape, b2DebugDraw = Box2D.Dynamics.b2DebugDraw, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef;
|
|
20
23
|
|
|
24
|
+
//クッキーの画像URLと頂点の座標
|
|
25
|
+
var cookieImages = {
|
|
21
|
-
|
|
26
|
+
'logo': {
|
|
22
|
-
|
|
27
|
+
'width': 420,
|
|
23
|
-
|
|
28
|
+
'height': 211,
|
|
24
|
-
<html>
|
|
25
|
-
<head>
|
|
26
|
-
<meta charset="utf-8">
|
|
27
|
-
<link rel="stylesheet" href="test.css">
|
|
28
|
-
|
|
29
|
+
'src': './images/cookies/logo.png',
|
|
30
|
+
'vertices': [
|
|
31
|
+
[0, -106],
|
|
32
|
+
[160, -71],
|
|
33
|
+
[211, 0],
|
|
34
|
+
[122, 83],
|
|
35
|
+
[0, 106],
|
|
36
|
+
[-156, 73],
|
|
37
|
+
[-209, 0],
|
|
38
|
+
[-155, -73]
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
'cookies': [
|
|
42
|
+
{
|
|
43
|
+
'width': 83,
|
|
44
|
+
'height': 48,
|
|
29
|
-
|
|
45
|
+
'src': './images/cookies/01.png',
|
|
46
|
+
'vertices': [
|
|
47
|
+
[42, -11],
|
|
48
|
+
[31, 17],
|
|
49
|
+
[-37, 24],
|
|
50
|
+
[-37, 24],
|
|
51
|
+
[-41, -12],
|
|
52
|
+
[0, -24],
|
|
53
|
+
[26, -21]
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
'width': 86,
|
|
30
|
-
|
|
58
|
+
'height': 109,
|
|
59
|
+
'src': './images/cookies/02.png',
|
|
60
|
+
'vertices': [
|
|
61
|
+
[0, -55],
|
|
62
|
+
[23, -30],
|
|
63
|
+
[43, 39],
|
|
64
|
+
[0, 54],
|
|
65
|
+
[-42, 44],
|
|
66
|
+
[-28, 5]
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
'width': 79,
|
|
71
|
+
'height': 55,
|
|
72
|
+
'src': './images/cookies/03.png',
|
|
73
|
+
'vertices': [
|
|
74
|
+
[32, -24],
|
|
75
|
+
[37, 23],
|
|
76
|
+
[-38, 26],
|
|
77
|
+
[-25, -20],
|
|
78
|
+
[-7, -25]
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
'width': 65,
|
|
83
|
+
'height': 71,
|
|
84
|
+
'src': './images/cookies/04.png',
|
|
85
|
+
'vertices': [
|
|
86
|
+
[-6, -34],
|
|
87
|
+
[29, 10],
|
|
88
|
+
[32, 29],
|
|
89
|
+
[3, 36],
|
|
90
|
+
[-31, 23],
|
|
91
|
+
[-23, -8]
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
'width': 151,
|
|
96
|
+
'height': 94,
|
|
97
|
+
'src': './images/cookies/05.png',
|
|
98
|
+
'vertices': [
|
|
99
|
+
[-74, -29],
|
|
100
|
+
[-17, -46],
|
|
101
|
+
[48, -17],
|
|
102
|
+
[74, 37],
|
|
103
|
+
[-49, 41],
|
|
104
|
+
[-69, 0]
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
'width': 107,
|
|
109
|
+
'height': 60,
|
|
110
|
+
'src': './images/cookies/06.png',
|
|
111
|
+
'vertices': [
|
|
112
|
+
[54, -12],
|
|
113
|
+
[37, 24],
|
|
114
|
+
[-18, 27],
|
|
115
|
+
[-52, -6],
|
|
116
|
+
[7, -29],
|
|
117
|
+
[31, -25]
|
|
118
|
+
]
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
'width': 181,
|
|
122
|
+
'height': 82,
|
|
123
|
+
'src': './images/cookies/07.png',
|
|
124
|
+
'vertices': [
|
|
125
|
+
[0, -40],
|
|
126
|
+
[56, -23],
|
|
127
|
+
[91, 29],
|
|
128
|
+
[-27, 41],
|
|
129
|
+
[-90, 24],
|
|
130
|
+
[-54, -24]
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
};
|
|
31
|
-
|
|
135
|
+
//ロゴを再生成
|
|
136
|
+
Physics.prototype.recreateLogo = function () {
|
|
137
|
+
if (this.logoExist) {
|
|
138
|
+
this.destroyLogo();
|
|
139
|
+
this.createLogo();
|
|
140
|
+
}
|
|
141
|
+
};
|
|
32
142
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
143
|
+
//クッキーを創る
|
|
144
|
+
Physics.prototype.createCookie = function () {
|
|
145
|
+
var random = (Math.random() + Math.random()) / 2;
|
|
146
|
+
var cookieNum = Math.floor(random * (cookieImages['cookies'].length - 0.000001));
|
|
147
|
+
var cookie = cookieImages['cookies'][cookieNum];
|
|
148
|
+
var canvasWidth = this.canvas.width;
|
|
149
|
+
var applyForce;
|
|
150
|
+
if (this.canvas.width < 769) {
|
|
151
|
+
applyForce = (10 * Math.random()) - 5;
|
|
152
|
+
} else {
|
|
153
|
+
applyForce = (30 * Math.random()) - 15;
|
|
154
|
+
}
|
|
155
|
+
this.createBody({ type: 'dynamic', x: (canvasWidth * Math.random()), y: -30, width: cookie['width'], height: cookie['height'], angle: 360 * Math.random(), force: [applyForce, 0], image: cookie });
|
|
156
|
+
};
|
|
157
|
+
//すべてのオブジェクトを消す
|
|
158
|
+
Physics.prototype.destroyAll = function () {
|
|
159
|
+
for (var bodyItem = this.world.GetBodyList(); bodyItem; bodyItem = bodyItem.GetNext()) {
|
|
160
|
+
this.world.DestroyBody(bodyItem);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
55
163
|
|
|
56
|
-
<div class="content">
|
|
57
|
-
<div class="content__inner">
|
|
58
|
-
<div class="content__area content__area--01 fadeElement" style="visibility: visible; opacity: 1;">
|
|
59
|
-
<h3 class="content__name"><img src="images/content_name_01.png" alt="チョコレートクッキー" width="100%"></h3>
|
|
60
|
-
<p class="content__txt">ハーゲンダッツオリジナルの<br>ほろ苦く香ばしい<br class="sp_view">チョコレートクッキー</p>
|
|
61
|
-
|
|
164
|
+
//box2dのbodyを生成
|
|
62
|
-
|
|
165
|
+
Physics.prototype.createBody = function (opts) {
|
|
63
|
-
<h3 class="content__name"><img src="images/content_name_02.png" alt="バニラアイスクリーム" width="100%"></h3>
|
|
64
|
-
<p class="content__txt">濃厚なバニラアイスクリームと<br>絶妙なハーモニーを奏でて、<br class="sp_view">しっとりとした食感に。</p>
|
|
65
|
-
|
|
166
|
+
//オプションのデフォルト値
|
|
66
|
-
|
|
167
|
+
var defaults = {
|
|
67
|
-
<h3 class="content__name"><img src="images/content_name_03.png" alt="チョコレートクッキー" width="100%"></h3>
|
|
68
|
-
<p class="content__txt">優しい甘さのチョコレートに<br>ザクザクと散りばめて。</p>
|
|
69
|
-
|
|
168
|
+
type: 'static',
|
|
169
|
+
x: 0,
|
|
170
|
+
y: 0,
|
|
70
|
-
|
|
171
|
+
width: 10,
|
|
71
|
-
<h3 class="content__name"><img src="images/content_name_04.png" alt="チョコレートコーティング" width="100%"></h3>
|
|
72
|
-
|
|
172
|
+
height: 10,
|
|
173
|
+
angle: 0,
|
|
73
|
-
|
|
174
|
+
restitution: 0.2,
|
|
74
|
-
|
|
175
|
+
friction: 0.7,
|
|
75
|
-
|
|
176
|
+
density: 2.65,
|
|
177
|
+
force: [0, 0],
|
|
178
|
+
image: null
|
|
179
|
+
};
|
|
76
180
|
|
|
77
|
-
<div class="bottom">
|
|
78
|
-
<div class="bottomvis">
|
|
79
|
-
<div class="bottomvis__inner">
|
|
80
|
-
<p class="bottomvis__txt">
|
|
81
|
-
<img src="images/bottomvis_txt_sp.png" alt="しっとり＆ザクザクのダブルの食感を楽しんで。" width="100%" class="sp_view">
|
|
82
|
-
<img src="images/bottomvis_txt_pc.png" alt="しっとり＆ザクザクのダブルの食感を楽しんで。" class="pc_view">
|
|
83
|
-
</p>
|
|
84
|
-
<div class="bottomvis__ice">
|
|
85
|
-
<img src="images/bottomvis_ice_sp.png" alt="" width="100%" class="sp_view">
|
|
86
|
-
<img src="images/mainvis_ice_pc.png" alt="" class="pc_view">
|
|
87
|
-
|
|
181
|
+
//デフォルト値を上書き
|
|
88
|
-
<h2 class="bottomvis__ttl">
|
|
89
|
-
<img src="images/bottomvis_ttl_sp.png" alt="ダブルクッキー&クリーム" width="100%" class="sp_view">
|
|
90
|
-
<img src="images/bottomvis_ttl_pc.png" alt="ダブルクッキー&クリーム" class="pc_view">
|
|
91
|
-
</h2>
|
|
92
|
-
<img src="images/bottomvis_cookie_01.png" class="bottomvis__cookie-01">
|
|
93
|
-
<img src="images/bottomvis_cookie_02.png" class="bottomvis__cookie-02">
|
|
94
|
-
|
|
182
|
+
$.extend(defaults, opts);
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
<div id="cookie-canvas-bg"></div>
|
|
100
|
-
<canvas id="cookie-canvas"></canvas>
|
|
101
183
|
|
|
184
|
+
var type;
|
|
102
|
-
|
|
185
|
+
switch (defaults['type']) {
|
|
103
|
-
|
|
186
|
+
case 'static':
|
|
187
|
+
type = b2Body.b2_staticBody;
|
|
188
|
+
break;
|
|
189
|
+
case 'dynamic':
|
|
190
|
+
type = b2Body.b2_dynamicBody;
|
|
191
|
+
break;
|
|
192
|
+
default:
|
|
193
|
+
type = b2Body.b2_staticBody;
|
|
194
|
+
break;
|
|
195
|
+
}
|
|
196
|
+
var x = this.pixelToMeter(defaults['x']);
|
|
197
|
+
var y = this.pixelToMeter(defaults['y']);
|
|
198
|
+
var width = this.pixelToMeter(defaults['width']);
|
|
199
|
+
var height = this.pixelToMeter(defaults['height']);
|
|
200
|
+
var angle = this.degreeToRadians(defaults['angle']);
|
|
201
|
+
var restitution = defaults['restitution'];
|
|
202
|
+
var friction = defaults['friction'];
|
|
203
|
+
var density = defaults['density'];
|
|
204
|
+
var force = defaults['force'];
|
|
205
|
+
var image = defaults['image'];
|
|
104
206
|
|
|
207
|
+
//bodyを生成
|
|
208
|
+
var body = this.world.CreateBody(bodyDef);
|
|
209
|
+
body.CreateFixture(fixDef);
|
|
210
|
+
|
|
211
|
+
//物体に力を作用させる
|
|
212
|
+
body.ApplyForce(new b2Vec2(force[0], force[1]), body.GetWorldCenter());
|
|
213
|
+
|
|
214
|
+
return body;
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
//描く
|
|
218
|
+
Physics.prototype.draw = function () {
|
|
219
|
+
for (var bodyItem = this.world.GetBodyList(); bodyItem; bodyItem = bodyItem.GetNext()) {
|
|
220
|
+
//if ( bodyItem.GetType() == b2Body.b2_dynamicBody ) {
|
|
221
|
+
var position = bodyItem.GetPosition();
|
|
222
|
+
var userData = bodyItem.GetUserData();
|
|
223
|
+
|
|
224
|
+
this.context.save();
|
|
225
|
+
if (userData && userData.img && userData.img.complete) {
|
|
226
|
+
if (userData.shape_type && userData.shape_type == 'circle') {
|
|
227
|
+
var slideX = position.x * this.worldScale;
|
|
228
|
+
var slideY = position.y * this.worldScale;
|
|
229
|
+
|
|
230
|
+
this.context.translate(slideX, slideY);
|
|
231
|
+
this.context.rotate(bodyItem.GetAngle());
|
|
232
|
+
this.context.drawImage(userData.img, -userData.radius, -userData.radius);
|
|
233
|
+
}
|
|
234
|
+
if (userData.shape_type && userData.shape_type == 'box') {
|
|
235
|
+
var slideX = position.x * this.worldScale;
|
|
236
|
+
var slideY = position.y * this.worldScale;
|
|
237
|
+
|
|
238
|
+
this.context.translate(slideX, slideY);
|
|
239
|
+
this.context.rotate(bodyItem.GetAngle());
|
|
240
|
+
this.context.drawImage(userData.img, -userData.width / 2.0, -userData.height / 2.0, userData.width, userData.height);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
this.context.restore();
|
|
244
|
+
//}
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
//重力加速度を変える
|
|
249
|
+
Physics.prototype.setGravity = function (gravity) {
|
|
250
|
+
if (typeof gravity === "undefined") { gravity = [0, 9.8]; }
|
|
251
|
+
this.world.SetGravity(new b2Vec2(gravity[0], gravity[1]));
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
//座標の配列をb2Vec2の配列で出力
|
|
255
|
+
Physics.prototype.getB2Vec2 = function (array) {
|
|
256
|
+
var b2Vec2Array = new Array(array.length);
|
|
257
|
+
for (var i = 0; i < array.length; i++) {
|
|
258
|
+
b2Vec2Array[i] = new b2Vec2(this.pixelToMeter(array[i][0]) * this.getViewScale(), this.pixelToMeter(array[i][1]) * this.getViewScale());
|
|
259
|
+
}
|
|
260
|
+
return b2Vec2Array;
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
105
265
|
```
|
1
申し訳ありません。長すぎて投稿できず分割いたしました。https://teratail.com/questions/102553?modal=q-comp
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|