0 Favourites

# Help with javascript problem.

• 10 posts
• I downloaded a couple of Javascript tutorials about 'Baasic physics', and i'm stuck on page 1.

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?

// Version 3 - Basic collision (viewbox), perfectly elastic (no energy loss)

var ball = {

x: 300,

y: 200,

r: 15,

vx: 0,

vy: 0

}

// Update ball (with Physics! =)

// 1 - apply velocity to position (vx -> x)

ball.x += ball.vx;

ball.y += ball.vy;

// 2 - apply drag/friction to velocity

ball.vx *= .99;

ball.vy *= .99;

// 3 - apply gravity to velocity

ball.vy += .25;

// 4 - check for collisions

if (ball.y + ball.r > canvas.height) {

ball.y = canvas.height - ball.r;

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

}

// 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.

• 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

• 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 Math.abs().

Develop games in your browser. Powerful, performant & highly capable.

Construct 3 users don't see these ads
• [quote:29t9f1ed]r seem to be the "speed" of the ball

Actually I think it's the radius.

• [quote:30h1jfze]r seem to be the "speed" of the ball

Actually I think it's the radius.

Ah of course. Makes sense

• 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 -

http://dl.dropbox.com/u/22173473/Collisions.rar

Only (150k) containing - 2 Game physics tutorials (gravity a elasticity)

The Html/jscript file i that i mention in the post.

• 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?

• 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

• (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.

• 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.

• 10 posts