Help with jquery box2d

Discuss issues specific the Java port of Box2D
DigitalMediaGroup4
Posts: 1
Joined: Mon May 26, 2014 7:07 am

Help with jquery box2d

Postby DigitalMediaGroup4 » Mon May 26, 2014 7:14 am

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:

1.
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>
9.
10. <body>
11.
12. <img src="img/img1.png" alt="Background Image One" width=100% height=100%>
13.    
14.     <div class="box">
15.     <p class="boxtext">Just get me the keys, Henry</p>
16.    </div>   
17.    
18.     <div class="box">
19.     <p class="boxtext">Why? Why is he coming over?</p>
20.    </div>   
21.    
22.     <div class="box">
23.     <p class="boxtext">Please, just go and get them.</p>
24.    </div>   
25.    
26.     <div class="box">
27.     <p class="boxtext">What&#39;s going on?</p>
28.    </div>   
29.    
30.     <div class="box">
31.     <p class="boxtext">This is good, you know. I think you&#39;re getting better</p>
32.    </div>   
33.    
34.     <div class="box">
35.     <p class="boxtext">You&#39;re either sick or you&#39;re in trouble. And you don&#39;t look sick</p>
36.    </div>   
37.    
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>   
41.    
42.     <div class="box">
43.     <p class="boxtext">You&#39;re in trouble aren&#39;t you? You did something</p>
44.    </div>   
45.    
46.     <div class="box">
47.     <p class="boxtext">And you don&#39;t look sick</p>
48.    </div>   
49.    
50.     <div class="box">
51.     <p class="boxtext">It was really pretty</p>
52.    </div>   
53.    
54.     <div class="box">
55.     <p class="boxtext">Mia?!</p>
56.    </div>   
57.    
58.     <div class="box">
59.     <p class="boxtext">I wish you&#39;d draw me</p>
60.    </div>   
61.    
62.     <div class="box">
63.     <p class="boxtext">Why did they call?</p>
64.    </div>   
65.    
66.     <div class="box">
67.     <p class="boxtext">Just get me the keys Henry</p>
68.    </div>   
69.    
70.     <div class="box">
71.     <p class="boxtext">Not until you tell me</p>
72.    </div>   
73.    
74.     <div class="box">
75.     <p class="boxtext">Fine I&#39;ll find them</p>
76.    </div>   
77.    
78.     <div class="box">
79.     <p class="boxtext">Mia spit it out</p>
80.    </div>   
81.    
82.     <div class="box">
83.     <p class="boxtext">You don&#39;t, you won&#39;t. You don&#39;t want to know you&#39;ll hate me</p>
84.    </div>   
85.    
86.     <div class="box">
87.     <p class="boxtext">I could never hate you.</p>
88.    </div>   
89.    
90.     <div class="box">
91.     <p class="boxtext">What are they going to do to me?</p>
92.    </div>   
93.    
94.     <div class="box">
95.     <p class="boxtext">Who?</p>
96.    </div>   
97.    
98.     <div class="box">
99.     <p class="boxtext">The school, you fool. They&#39;re going to expel me, Hen. I just know they are, and Dad. Oh god</p>
100.    </div>   
101.    
102.     <div class="box">
103.     <p class="boxtext">Mia I don&#39;t care. I won&#39;t hate you. I promise I won&#39;t. I promise. Just tell me</p>
104.    </div>   
105.    
106.     <div class="box">
107.     <p class="boxtext">Fuck Fuck Fuck.</p>
108.    </div>
109.    
110.    
111.
112. <script type="text/javascript" src="../2014-05-21-jquery-box2d/box2d/js/lib/jquery.box2d.js"> </script>
113. <script type="text/javascript">
114.
115. $(document).ready(function(){
116.
117.     console.log("loaded");
118.     $('.box').each(function(index, elm){
119.
120.         var xPos = Math.floor((Math.random() * 1000) + 1);
121.         var yPos = Math.floor((Math.random() * 700) + 1);
122.  
123.         $(this).css("left", xPos + "px").css("top", yPos + "px");
124.
125.     });
126.
127.     $('.box').on('click', function(){
128.
129.          $(this).box2d({'y-velocity':10, 'density': 5, 'restitution': 0.4, 'friction': 0.3, 'shape': 'box'});        
130.             
131.     });
132.
133. --> I couldn't get this working:
134.
135. --> $('.box').click(function(){
136. --> $('#wrap').append('<embed id="embed_player" src="snd/track.wav" autostart="true" hidden="true"></embed>');
137.
138. });
139.
140.
141.
142.
143. </script>
144.
145.
146. </body>
147. </html>

Our CSS is as follows:

1.
2. @charset "UTF-8";
3. /* CSS Document */
4.
5.  html,
6.  body {
7.    width: 100%;
8.  height: 100%;
9. }
10.
11.  #bg {
12. width: 100%;
13. height: 100%;
14. background-color: #000000;
15. position: absolute;
16. margin: auto;
17. }
18.
19.      .box{
20.             position:absolute;
21.             background-color:#99F;
22.             width: flexible;
23.             height: flexible;
24. padding: 15px;
25.         }
26.
27.  .boxtext{
28.   font-family:helvetica;
29. color:#000;
30. font-size:14px;
31. text-align:center;
32.  
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 :o :o :o :o :o :o :o :o :o

S986S
Posts: 34
Joined: Sat Mar 01, 2014 7:39 am

Re: Help with jquery box2d

Postby S986S » Sun Jun 08, 2014 6:58 pm

Javascript is here
It may be confusing, but java is not the same as javascript. I'm sure your early in your programming career, however this is somehting you will learn over time or at the very least know it now. Java was created by Sun microsystems and currently owned and maintained by Oracle. Javascript is a standard developed by netscape, and obviously was implemented in most modern browsers. Additionally its also important to note, the javascript implementation at core doesn't actually use jquery at all. This is due to the way Box2d doesn't handle rendering at all. So the jquery implementation is not the standard, but simple a port of sorts.

That being said....
https://github.com/franzenzenhofer/box2d-jquery#todos
Apparently Collision detection still needs to be implemented

However
https://github.com/franzenzenhofer/box2 ... offee#L150
Apperntly the Collision detection is still implemented in a way

Now, that we know the collision detection is being implemented, we need to make sure we know how to know what the node's Box is
What you can do is...
1) when setting up your objects, you can initiate a .on("collisionStart", function(){}) handler
2) Unless your trying to implement this in a completely cross browser way, I'd suggest using HTML5 audio, that way you have access to simple to use audio api
3) Append a data-attribute to represent the specific audio you want it ot target. you may name it something like data-box2dAudio. Then you want to add a class or ID to each audio element.
4) so for each of your elements you may

Code: Select all

<div data-box2dAudio="box2dAudio1"></div>
<audio>
<source src="/mysourcepath" class="box2dAudio1" />
</audio>
<script>
$(".my-box2d-class").on("collisionStart", function(e){
var the_elem = $(this);
$("audio>."+the_elem.attr("data-box2dAudio")).get(0).play();
});
</script>



This may not work, but I don't know what will as i don't use this library that much. I just figured I'd point you in the right direction.


Return to “Java”



Who is online

Users browsing this forum: Google [Bot] and 2 guests