Search jQuery

jQuery Forum

Screen name:
Artie Jones

Artie Jones's Profile

1 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Problems with JQuery (Box2D) - Sound on collision
[6Replies]
- 26-May-2014 10:11 AM
- Forum: Using jQuery
Good afternoon fellow JQuery users.

My group at University and I are trying to create an interactive site using box2d and sound on collision. So far we have this:
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <title>Remediation</title>
6. <link rel="stylesheet" type="text/css" href="../2014-05-21-jquery-box2d/css/main.css">
7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
8. </head>
10. <body>
12. <img src="img/img1.png" alt="Background Image One" width=100% height=100%>
14. <div class="box">
15. <p class="boxtext">Just get me the keys, Henry</p>
16. </div>
18. <div class="box">
19. <p class="boxtext">Why? Why is he coming over?</p>
20. </div>
22. <div class="box">
23. <p class="boxtext">Please, just go and get them.</p>
24. </div>
26. <div class="box">
27. <p class="boxtext">What's going on?</p>
28. </div>
30. <div class="box">
31. <p class="boxtext">This is good, you know. I think you're getting better</p>
32. </div>
34. <div class="box">
35. <p class="boxtext">You're either sick or you're in trouble. And you don't look sick</p>
36. </div>
38. <div class="box">
39. <p class="boxtext">I think I saw one of your paintings by the station. Did you do one there? On the wall behind the car park? </p>
40. </div>
42. <div class="box">
43. <p class="boxtext">You're in trouble aren't you? You did something</p>
44. </div>
46. <div class="box">
47. <p class="boxtext">And you don't look sick</p>
48. </div>
50. <div class="box">
51. <p class="boxtext">It was really pretty</p>
52. </div>
54. <div class="box">
55. <p class="boxtext">Mia?!</p>
56. </div>
58. <div class="box">
59. <p class="boxtext">I wish you'd draw me</p>
60. </div>
62. <div class="box">
63. <p class="boxtext">Why did they call?</p>
64. </div>
66. <div class="box">
67. <p class="boxtext">Just get me the keys Henry</p>
68. </div>
70. <div class="box">
71. <p class="boxtext">Not until you tell me</p>
72. </div>
74. <div class="box">
75. <p class="boxtext">Fine I'll find them</p>
76. </div>
78. <div class="box">
79. <p class="boxtext">Mia spit it out</p>
80. </div>
82. <div class="box">
83. <p class="boxtext">You don't, you won't. You don't want to know you'll hate me</p>
84. </div>
86. <div class="box">
87. <p class="boxtext">I could never hate you.</p>
88. </div>
90. <div class="box">
91. <p class="boxtext">What are they going to do to me?</p>
92. </div>
94. <div class="box">
95. <p class="boxtext">Who?</p>
96. </div>
98. <div class="box">
99. <p class="boxtext">The school, you fool. They're going to expel me, Hen. I just know they are, and Dad. Oh god</p>
100. </div>
102. <div class="box">
103. <p class="boxtext">Mia I don't care. I won't hate you. I promise I won't. I promise. Just tell me</p>
104. </div>
106. <div class="box">
107. <p class="boxtext">Fuck Fuck Fuck.</p>
108. </div>
112. <script type="text/javascript" src="../2014-05-21-jquery-box2d/box2d/js/lib/jquery.box2d.js"> </script>
113. <script type="text/javascript">
115. $(document).ready(function(){
117. console.log("loaded");
118. $('.box').each(function(index, elm){
120. var xPos = Math.floor((Math.random() * 1000) + 1);
121. var yPos = Math.floor((Math.random() * 700) + 1);
123. $(this).css("left", xPos + "px").css("top", yPos + "px");
125. });
127. $('.box').on('click', function(){
129. $(this).box2d({'y-velocity':10, 'density': 5, 'restitution': 0.4, 'friction': 0.3, 'shape': 'box'});
131. });
133. --> I couldn't get this working:
135. --> $('.box').click(function(){
136. --> $('#wrap').append('<embed id="embed_player" src="snd/track.wav" autostart="true" hidden="true"></embed>');
138. });
143. </script>
146. </body>
147. </html>
Our CSS is as follows:
2. @charset "UTF-8";
3. /* CSS Document */
5. html,
6. body {
7. width: 100%;
8. height: 100%;
9. }
11. #bg {
12. width: 100%;
13. height: 100%;
14. background-color: #000000;
15. position: absolute;
16. margin: auto;
17. }
19. .box{
20. position:absolute;
21. background-color:#99F;
22. width: flexible;
23. height: flexible;
24. padding: 15px;
25. }
27. .boxtext{
28. font-family:helvetica;
29. color:#000;
30. font-size:14px;
31. text-align:center;
33. }
We need help with individual sounds playing per box. Although we are aware that the code uses only one class, is it possible to play unique sounds per box? Or can anyone point us in the right direction on how to include sound when the boxes collide (even if the same sound, as a start).
Cheers

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend