Simple JavaScript Physics

11 Comments 5 March 2010

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.

Posted in HTML5, JavaScript, Physics

11 Responses to Simple JavaScript Physics

  1. 6 March 2010

    Very cool to see you doing HTML 5 experiments!

  2. 8 March 2010

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

  3. 19 March 2010

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

  4. 19 March 2010

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

  5. 12 June 2010

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

  6. 22 November 2010

    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 ?

  7. 2 December 2010

    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!

  8. Simple image physics with HTML5 Canvas | Flash Monkey

    [...] 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 [...]

  9. 28 April 2011

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

  10. 28 April 2011

    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! :)

  11. 20 September 2012
    Can Şahin Bakır

    Thanks for your Awesome example.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>