Simple JavaScript Physics

2010 March 5
by FlashMonkey

Throw Physics

It’s been a fairly quiet Friday afternoon so I thought I’d play around with some more JavaScript. This time I’ve created some simple throw physics… you can click and throw the balls around the browser window. Each ball has a different bounce/weight depending on it’s size.

I thought it would be really nice that if you shook the browser window the balls went flying all over the screen, which I sort of implemented, although it seems to take a little while to register that the window has moved so it doesn’t really work as I imagined. Try it though, as they do move a bit. Also, it’s quite cool when you re-size the window.

Click here to view the throw physics example.

Wave Physics

This one is based on the brilliant Yugo Nakamura’s Flash wave effect. I also need to thank Paul Lewis for posting his AS2 wave example, from which I stole some of the physics code. Roll your cursor over the middle line to create a wave effect.

Click here to view the wave example.

10 Comments leave one →
2010 March 6
gabe permalink

Very cool to see you doing HTML 5 experiments!

2010 March 8

Really cool Steve. Cant wait till you’ve got it running smooth.

2010 March 19

This is cool! nice javascript port, runs pretty well even on my old laptop.

2010 March 19
FlashMonkey permalink

Thanks Dominic. I’m currently working on some Android stuff, porting some of my experiments to Java - is pretty fun! :)

2010 June 12
Ron permalink

Awesome! Great examples of what you can do with Canvas and JavaScript! Thanks for posting Flash Monkey!!

2010 November 22
spirit permalink

Great examples!

Hi there,

The same way you did it with balls, is there anyway to load some pictures then to be able to drag and throw them over the screen. They will bounce against the edges and If they meet a “droppable” area then some processing is done with the url of the picture.

Any clue ?

2010 December 2
FlashMonkey permalink

Spirit, yep that would be possible but I’m currently out of the country until Christmas so can’t help at the moment. I would be more than happy to look into it and give advice when I return in January though!

2011 January 19

[...] such comment I found was on my Simple JavaScript Physics post which asked about doing something similar with images. I quite enjoyed playing around with [...]

Pingback
2011 April 28
Atash permalink

Great examples. I am a beginner in HTML 5 game development and i am really impressed by what it is capable of. Do you have a zip file of the ball bounce project?.

2011 April 28
FlashMonkey permalink

Hey Atash, if you just view source you will find all of the code there. You might find the code for my HTML Snake game useful too. Good luck with your games, send me some examples when you’ve made some stuff! :)

Leave A Comment

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS