teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問上からイメージが落下してきて溜まっていくようなJSを組んだサイト

編集履歴

質問編集履歴

2

ソースコードの編集

2017/11/29 06:41

投稿

sasanohasarasar
sasanohasarasar

スコア12

test CHANGED
File without changes
test CHANGED
@@ -36,173 +36,493 @@
36
36
 
37
37
  ```
38
38
 
39
-
40
-
41
- ###該当のhtmlソースコード
42
-
43
- ```html
44
-
45
- <!doctype html>
46
-
47
- <html>
48
-
49
- <head>
50
-
51
- <meta charset="utf-8">
52
-
53
- <link rel="stylesheet" href="test.css">
54
-
55
- <script type="text/javascript" src="test.js"></script>
56
-
57
- <script type="text/javascript" src="physics.js"></script>
58
-
59
- <title>さんぷる</title>
60
-
61
- </head>
62
-
63
-
64
-
65
- <body>
66
-
67
-
68
-
69
- <div id="wrapper">
70
-
71
- <div id="main">
72
-
73
- <div class="mainvis">
74
-
75
- <div class="mainvis__inner">
76
-
77
- <div class="mainvis__logo"><a href="/"><img src="images/logo.png" width="100%"></a></div>
78
-
79
- <h1 class="mainvis__ttl">
80
-
81
- <img src="images/mainvis_title_sp.png" alt="ダブルクッキー&amp;クリーム" width="100%" class="sp_view">
82
-
83
- <img src="images/mainvis_title_pc.png" alt="ダブルクッキー&amp;クリーム" width="100%" class="pc_view">
84
-
85
- </h1>
86
-
87
- <div class="mainvis__ice">
88
-
89
- <img src="images/mainvis_ice_sp.png" alt="" width="100%" class="sp_view">
90
-
91
- <img src="images/mainvis_ice_pc.png" alt="" width="100%" class="pc_view">
92
-
93
- </div>
94
-
95
- <div class="mainvis__txt">
96
-
97
- <img src="images/mainvis_txt_sp.png" alt="ザクザク、しっとり。" width="100%" class="sp_view">
98
-
99
- <img src="images/mainvis_txt_pc.png" alt="ザクザク、しっとり。" width="100%" class="pc_view">
100
-
101
- </div>
102
-
103
- <div class="mainvis__package"><img src="images/mainvis_package.png" width="100%"></div>
104
-
105
- </div>
106
-
107
- </div>
108
-
109
-
110
-
111
- <div class="content">
112
-
113
- <div class="content__inner">
114
-
115
- <div class="content__area content__area--01 fadeElement" style="visibility: visible; opacity: 1;">
116
-
117
- <h3 class="content__name"><img src="images/content_name_01.png" alt="チョコレートクッキー" width="100%"></h3>
118
-
119
- <p class="content__txt">ハーゲンダッツオリジナルの<br>ほろ苦く香ばしい<br class="sp_view">チョコレートクッキー</p>
120
-
121
- </div>
122
-
123
- <div class="content__area content__area--02 fadeElement" style="visibility: visible; : 1;">
124
-
125
- <h3 class="content__name"><img src="images/content_name_02.png" alt="バニラアイスクリーム" width="100%"></h3>
126
-
127
- <p class="content__txt">濃厚なバニラアイスクリームと<br>絶妙なハーモニーを奏でて、<br class="sp_view">しっとりとした食感に。</p>
128
-
129
- </div>
130
-
131
- <div class="content__area content__area--03 fadeElement" style="visibility: visible; opacity: 1;">
132
-
133
- <h3 class="content__name"><img src="images/content_name_03.png" alt="チョコレートクッキー" width="100%"></h3>
134
-
135
- <p class="content__txt">優しい甘さのチョコレートに<br>ザクザクと散りばめて。</p>
136
-
137
- </div>
138
-
139
- <div class="content__area content__area--04 fadeElement" style="visibility: visible; opacity: 1;">
140
-
141
- <h3 class="content__name"><img src="images/content_name_04.png" alt="チョコレートコーティング" width="100%"></h3>
142
-
143
- <p class="content__txt">パリッとした食感の<br>ミルクチョコレートコーティング。</p>
144
-
145
- </div>
146
-
147
- </div>
148
-
149
- </div>
150
-
151
-
152
-
153
- <div class="bottom">
154
-
155
- <div class="bottomvis">
156
-
157
- <div class="bottomvis__inner">
158
-
159
- <p class="bottomvis__txt">
160
-
161
- <img src="images/bottomvis_txt_sp.png" alt="しっとり＆ザクザクのダブルの食感を楽しんで。" width="100%" class="sp_view">
162
-
163
- <img src="images/bottomvis_txt_pc.png" alt="しっとり＆ザクザクのダブルの食感を楽しんで。" class="pc_view">
164
-
165
- </p>
166
-
167
- <div class="bottomvis__ice">
168
-
169
- <img src="images/bottomvis_ice_sp.png" alt="" width="100%" class="sp_view">
170
-
171
- <img src="images/mainvis_ice_pc.png" alt="" class="pc_view">
172
-
173
- </div>
174
-
175
- <h2 class="bottomvis__ttl">
176
-
177
- <img src="images/bottomvis_ttl_sp.png" alt="ダブルクッキー&amp;クリーム" width="100%" class="sp_view">
178
-
179
- <img src="images/bottomvis_ttl_pc.png" alt="ダブルクッキー&amp;クリーム" class="pc_view">
180
-
181
- </h2>
182
-
183
- <img src="images/bottomvis_cookie_01.png" class="bottomvis__cookie-01">
184
-
185
- <img src="images/bottomvis_cookie_02.png" class="bottomvis__cookie-02">
186
-
187
- </div>
188
-
189
- 　　　　　　</div>
190
-
191
- </div>
192
-
193
- </div>
194
-
195
- </div>
196
-
197
- <div id="cookie-canvas-bg"></div>
198
-
199
- <canvas id="cookie-canvas"></canvas>
200
-
201
-
202
-
203
- </body>
204
-
205
- </html>
39
+ ```Javascript
40
+
41
+ //box2dクラスの短縮変数
42
+
43
+ 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;
44
+
45
+
46
+
47
+ //クッキーの画像URLと頂点の座標
48
+
49
+ var cookieImages = {
50
+
51
+ 'logo': {
52
+
53
+ 'width': 420,
54
+
55
+ 'height': 211,
56
+
57
+ 'src': './images/cookies/logo.png',
58
+
59
+ 'vertices': [
60
+
61
+ [0, -106],
62
+
63
+ [160, -71],
64
+
65
+ [211, 0],
66
+
67
+ [122, 83],
68
+
69
+ [0, 106],
70
+
71
+ [-156, 73],
72
+
73
+ [-209, 0],
74
+
75
+ [-155, -73]
76
+
77
+ ]
78
+
79
+ },
80
+
81
+ 'cookies': [
82
+
83
+ {
84
+
85
+ 'width': 83,
86
+
87
+ 'height': 48,
88
+
89
+ 'src': './images/cookies/01.png',
90
+
91
+ 'vertices': [
92
+
93
+ [42, -11],
94
+
95
+ [31, 17],
96
+
97
+ [-37, 24],
98
+
99
+ [-37, 24],
100
+
101
+ [-41, -12],
102
+
103
+ [0, -24],
104
+
105
+ [26, -21]
106
+
107
+ ]
108
+
109
+ },
110
+
111
+ {
112
+
113
+ 'width': 86,
114
+
115
+ 'height': 109,
116
+
117
+ 'src': './images/cookies/02.png',
118
+
119
+ 'vertices': [
120
+
121
+ [0, -55],
122
+
123
+ [23, -30],
124
+
125
+ [43, 39],
126
+
127
+ [0, 54],
128
+
129
+ [-42, 44],
130
+
131
+ [-28, 5]
132
+
133
+ ]
134
+
135
+ },
136
+
137
+ {
138
+
139
+ 'width': 79,
140
+
141
+ 'height': 55,
142
+
143
+ 'src': './images/cookies/03.png',
144
+
145
+ 'vertices': [
146
+
147
+ [32, -24],
148
+
149
+ [37, 23],
150
+
151
+ [-38, 26],
152
+
153
+ [-25, -20],
154
+
155
+ [-7, -25]
156
+
157
+ ]
158
+
159
+ },
160
+
161
+ {
162
+
163
+ 'width': 65,
164
+
165
+ 'height': 71,
166
+
167
+ 'src': './images/cookies/04.png',
168
+
169
+ 'vertices': [
170
+
171
+ [-6, -34],
172
+
173
+ [29, 10],
174
+
175
+ [32, 29],
176
+
177
+ [3, 36],
178
+
179
+ [-31, 23],
180
+
181
+ [-23, -8]
182
+
183
+ ]
184
+
185
+ },
186
+
187
+ {
188
+
189
+ 'width': 151,
190
+
191
+ 'height': 94,
192
+
193
+ 'src': './images/cookies/05.png',
194
+
195
+ 'vertices': [
196
+
197
+ [-74, -29],
198
+
199
+ [-17, -46],
200
+
201
+ [48, -17],
202
+
203
+ [74, 37],
204
+
205
+ [-49, 41],
206
+
207
+ [-69, 0]
208
+
209
+ ]
210
+
211
+ },
212
+
213
+ {
214
+
215
+ 'width': 107,
216
+
217
+ 'height': 60,
218
+
219
+ 'src': './images/cookies/06.png',
220
+
221
+ 'vertices': [
222
+
223
+ [54, -12],
224
+
225
+ [37, 24],
226
+
227
+ [-18, 27],
228
+
229
+ [-52, -6],
230
+
231
+ [7, -29],
232
+
233
+ [31, -25]
234
+
235
+ ]
236
+
237
+ },
238
+
239
+ {
240
+
241
+ 'width': 181,
242
+
243
+ 'height': 82,
244
+
245
+ 'src': './images/cookies/07.png',
246
+
247
+ 'vertices': [
248
+
249
+ [0, -40],
250
+
251
+ [56, -23],
252
+
253
+ [91, 29],
254
+
255
+ [-27, 41],
256
+
257
+ [-90, 24],
258
+
259
+ [-54, -24]
260
+
261
+ ]
262
+
263
+ }
264
+
265
+ ]
266
+
267
+ };
268
+
269
+ //ロゴを再生成
270
+
271
+ Physics.prototype.recreateLogo = function () {
272
+
273
+ if (this.logoExist) {
274
+
275
+ this.destroyLogo();
276
+
277
+ this.createLogo();
278
+
279
+ }
280
+
281
+ };
282
+
283
+
284
+
285
+ //クッキーを創る
286
+
287
+ Physics.prototype.createCookie = function () {
288
+
289
+ var random = (Math.random() + Math.random()) / 2;
290
+
291
+ var cookieNum = Math.floor(random * (cookieImages['cookies'].length - 0.000001));
292
+
293
+ var cookie = cookieImages['cookies'][cookieNum];
294
+
295
+ var canvasWidth = this.canvas.width;
296
+
297
+ var applyForce;
298
+
299
+ if (this.canvas.width < 769) {
300
+
301
+ applyForce = (10 * Math.random()) - 5;
302
+
303
+ } else {
304
+
305
+ applyForce = (30 * Math.random()) - 15;
306
+
307
+ }
308
+
309
+ 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 });
310
+
311
+ };
312
+
313
+ //すべてのオブジェクトを消す
314
+
315
+ Physics.prototype.destroyAll = function () {
316
+
317
+ for (var bodyItem = this.world.GetBodyList(); bodyItem; bodyItem = bodyItem.GetNext()) {
318
+
319
+ this.world.DestroyBody(bodyItem);
320
+
321
+ }
322
+
323
+ };
324
+
325
+
326
+
327
+ //box2dのbodyを生成
328
+
329
+ Physics.prototype.createBody = function (opts) {
330
+
331
+ //オプションのデフォルト値
332
+
333
+ var defaults = {
334
+
335
+ type: 'static',
336
+
337
+ x: 0,
338
+
339
+ y: 0,
340
+
341
+ width: 10,
342
+
343
+ height: 10,
344
+
345
+ angle: 0,
346
+
347
+ restitution: 0.2,
348
+
349
+ friction: 0.7,
350
+
351
+ density: 2.65,
352
+
353
+ force: [0, 0],
354
+
355
+ image: null
356
+
357
+ };
358
+
359
+
360
+
361
+ //デフォルト値を上書き
362
+
363
+ $.extend(defaults, opts);
364
+
365
+
366
+
367
+ var type;
368
+
369
+ switch (defaults['type']) {
370
+
371
+ case 'static':
372
+
373
+ type = b2Body.b2_staticBody;
374
+
375
+ break;
376
+
377
+ case 'dynamic':
378
+
379
+ type = b2Body.b2_dynamicBody;
380
+
381
+ break;
382
+
383
+ default:
384
+
385
+ type = b2Body.b2_staticBody;
386
+
387
+ break;
388
+
389
+ }
390
+
391
+ var x = this.pixelToMeter(defaults['x']);
392
+
393
+ var y = this.pixelToMeter(defaults['y']);
394
+
395
+ var width = this.pixelToMeter(defaults['width']);
396
+
397
+ var height = this.pixelToMeter(defaults['height']);
398
+
399
+ var angle = this.degreeToRadians(defaults['angle']);
400
+
401
+ var restitution = defaults['restitution'];
402
+
403
+ var friction = defaults['friction'];
404
+
405
+ var density = defaults['density'];
406
+
407
+ var force = defaults['force'];
408
+
409
+ var image = defaults['image'];
410
+
411
+
412
+
413
+ //bodyを生成
414
+
415
+ var body = this.world.CreateBody(bodyDef);
416
+
417
+ body.CreateFixture(fixDef);
418
+
419
+
420
+
421
+ //物体に力を作用させる
422
+
423
+ body.ApplyForce(new b2Vec2(force[0], force[1]), body.GetWorldCenter());
424
+
425
+
426
+
427
+ return body;
428
+
429
+ };
430
+
431
+
432
+
433
+ //描く
434
+
435
+ Physics.prototype.draw = function () {
436
+
437
+ for (var bodyItem = this.world.GetBodyList(); bodyItem; bodyItem = bodyItem.GetNext()) {
438
+
439
+ //if ( bodyItem.GetType() == b2Body.b2_dynamicBody ) {
440
+
441
+ var position = bodyItem.GetPosition();
442
+
443
+ var userData = bodyItem.GetUserData();
444
+
445
+
446
+
447
+ this.context.save();
448
+
449
+ if (userData && userData.img && userData.img.complete) {
450
+
451
+ if (userData.shape_type && userData.shape_type == 'circle') {
452
+
453
+ var slideX = position.x * this.worldScale;
454
+
455
+ var slideY = position.y * this.worldScale;
456
+
457
+
458
+
459
+ this.context.translate(slideX, slideY);
460
+
461
+ this.context.rotate(bodyItem.GetAngle());
462
+
463
+ this.context.drawImage(userData.img, -userData.radius, -userData.radius);
464
+
465
+ }
466
+
467
+ if (userData.shape_type && userData.shape_type == 'box') {
468
+
469
+ var slideX = position.x * this.worldScale;
470
+
471
+ var slideY = position.y * this.worldScale;
472
+
473
+
474
+
475
+ this.context.translate(slideX, slideY);
476
+
477
+ this.context.rotate(bodyItem.GetAngle());
478
+
479
+ this.context.drawImage(userData.img, -userData.width / 2.0, -userData.height / 2.0, userData.width, userData.height);
480
+
481
+ }
482
+
483
+ }
484
+
485
+ this.context.restore();
486
+
487
+ //}
488
+
489
+ }
490
+
491
+ };
492
+
493
+
494
+
495
+ //重力加速度を変える
496
+
497
+ Physics.prototype.setGravity = function (gravity) {
498
+
499
+ if (typeof gravity === "undefined") { gravity = [0, 9.8]; }
500
+
501
+ this.world.SetGravity(new b2Vec2(gravity[0], gravity[1]));
502
+
503
+ };
504
+
505
+
506
+
507
+ //座標の配列をb2Vec2の配列で出力
508
+
509
+ Physics.prototype.getB2Vec2 = function (array) {
510
+
511
+ var b2Vec2Array = new Array(array.length);
512
+
513
+ for (var i = 0; i < array.length; i++) {
514
+
515
+ b2Vec2Array[i] = new b2Vec2(this.pixelToMeter(array[i][0]) * this.getViewScale(), this.pixelToMeter(array[i][1]) * this.getViewScale());
516
+
517
+ }
518
+
519
+ return b2Vec2Array;
520
+
521
+ };
522
+
523
+
524
+
525
+
206
526
 
207
527
 
208
528
 

1

申し訳ありません。長すぎて投稿できず分割いたしました。https://teratail.com/questions/102553?modal=q-comp

2017/11/29 06:41

投稿

sasanohasarasar
sasanohasarasar

スコア12

test CHANGED
File without changes
test CHANGED
File without changes