# Help with javascript problem.

Discussion and feedback on Construct 2

### » Sat Apr 02, 2011 11:09 pm

[color=#FF0000:37tqebsb]Note. I have done a bit more research and think i understand most of it, but i can't work out what the symbols marked in red mean?
[/color:37tqebsb]
// Version 3 - Basic collision (viewbox), perfectly elastic (no energy loss)

var ball = {
x: 300,
y: 200,
[color=#FF0000:37tqebsb] r: 15,[/color:37tqebsb]
vx: 0,
vy: 0
}

// Update ball (with Physics! =)

// 1 - apply velocity to position (vx -> x)
ball.x [color=#FF0000:37tqebsb]+=[/color:37tqebsb] ball.vx;
ball.y [color=#FF0000:37tqebsb]+=[/color:37tqebsb] ball.vy;

// 2 - apply drag/friction to velocity
ball.vx [color=#FF0000:37tqebsb]*=[/color:37tqebsb] .99;
ball.vy [color=#FF0000:37tqebsb]*=[/color:37tqebsb] .99;

// 3 - apply gravity to velocity
ball.vy [color=#FF0000:37tqebsb]+=[/color:37tqebsb] .25;

// 4 - check for collisions
if (ball.y + ball.r > canvas.height) {
ball.y = canvas.height - ball.r;
ball.vy = [color=#FF0000:37tqebsb]-Math.abs(ball.vy);[/color:37tqebsb]
}

// Draw ball
ctx.save();
ctx.translate(ball.x, ball.y);
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(0, 0, ball.r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.restore();

}, 1000 / 77);

please could somebody have a look at the above and post a quick line breakdown.

B
21
S
5
G
8
Posts: 1,215
Reputation: 7,838

### » Sun Apr 03, 2011 10:14 pm

r seem to be the "speed" of the ball

ball.x += ball.vx is the same as typing ball.x = ball.x + ball.vx. I've never done this with duplication but I assume it's the same there.

"The abs() method returns the absolute value of a number."
Math.abs(7.25) = 7.25
Math.abs(-7.25) = 7.25
Math.abs(null) = 0
Math.abs("Hello") = NaN
Math.abs(7.25-10) = 2.75
http://www.w3schools.com/jsref/jsref_abs.asp
B
2
S
1
G
1
Posts: 15
Reputation: 630

### » Sun Apr 03, 2011 10:27 pm

If you need general javascript help it might be better to try a dedicated programming forum or a site like Stackoverflow.

MDC is also an excellent reference for javascript - check out the doc for [url=https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/abs:39knppxy]Math.abs()[/url:39knppxy].
Scirra Founder
B
414
S
245
G
92
Posts: 25,198
Reputation: 200,327

### » Mon Apr 04, 2011 12:23 am

[quote:29t9f1ed]r seem to be the "speed" of the ball[/quote:29t9f1ed]
Actually I think it's the radius.
B
100
S
38
G
134
Posts: 5,552
Reputation: 85,317

### » Mon Apr 04, 2011 5:54 am

[quote="R0J0hound":30h1jfze][quote:30h1jfze]r seem to be the "speed" of the ball[/quote:30h1jfze]
Actually I think it's the radius.[/quote:30h1jfze]
Ah of course. Makes sense
B
2
S
1
G
1
Posts: 15
Reputation: 630

### » Mon Apr 04, 2011 4:16 pm

Thanks to everybody for your help.
I managed to find a good tutorial on Object collisions for games and apps and i will checkout the Js websites you have mentioned.

Heres a link to the files and tutorials if anybody is interested -

[url:d0md9bm0]http://dl.dropbox.com/u/22173473/Collisions.rar[/url:d0md9bm0]

Only (150k) containing - 2 Game physics tutorials (gravity a elasticity)
The Html/jscript file i that i mention in the post.
B
21
S
5
G
8
Posts: 1,215
Reputation: 7,838

### » Tue Apr 05, 2011 7:58 am

Hey that's pretty cool.

Here's a very basic implementation:
http://www.lionsinvests.com/scirra/physics/
http://www.lionsinvests.com/scirra/physics/physics.capx

You might recognize this game idea (click the mouse)
http://www.lionsinvests.com/scirra/copter/

Just needs a cave generator. Also, moon lander anyone?
B
2
S
1
G
1
Posts: 15
Reputation: 630

### » Tue Apr 05, 2011 8:44 am

Symbols marked in red:

ball.x += ball.vx;

Here's an easier example:

5 += 3;

This is 8. It's the same as:

5 = 5 + 3;

Same with *=:

100*= 0.99;

This will equal 99. It's the same as:

100 = 100*0.99;

Multiplying by 0.99 represents 99% of it's value. If you multiplied by 0.01 you would get 1% of it's value.

ball.vy = -Math.abs(ball.vy);

Maths.abs() takes the absolute (positive) value of it's input.

Math.abs(-454) = 454;
Math.abs(13) = 13 (does nothing, already positive number)

Doing -Math.abs() will get it's negative value, so it guarantees a negative number.

Hope that helps
Scirra Founder
B
181
S
42
G
34
Posts: 4,438
Reputation: 54,809

### » Tue Apr 05, 2011 11:01 am

(monsharen)
So thats how you do it!i was only getting a ball that constantly bounced around the screen. i will have a look at your capx. cheers.

(Tom)
I'm doing doing the old 'crash course in jscript' and it doesn't include descriptions for a lot of the equations, so thanks for your help.
B
21
S
5
G
8
Posts: 1,215
Reputation: 7,838

### » Tue Apr 05, 2011 11:13 am

No worries Any other questions, just ask.

Hopefully on the new site I'll be able to spend some time writing some JS tutorials/reference pages. They should be quite useful.
Scirra Founder
B
181
S
42
G
34
Posts: 4,438
Reputation: 54,809

Next