10

player stack

I am working on a simple stack for a game where players move numbered pieces around to keep track of how close they are to finishing collecting a winning hand of pieces.

Currently I went with jQuery UI's draggable and droppable. It is good for starting easily but pieces can be moved only one piece at a time: http://cssdeck.com/labs/cowmmudd/4.

  • I would like to outsource moving pieces around to a real JavaScript physics library rather than using jQuery UI. (So that when one moves the blue 4 in the upper row all the way left, it forces all pieces on that row together.)
  • I want to continue using normal HTML elements to represent my pieces as these are easier to style and reason about. (All the Javascript physics libraries I have taken a look at use canvas but I want to achieve te same as Google once did: http://mrdoob.com/projects/chromeexperiments/google-gravity/)

Can someone provide a minimalistic example of controlling placement and collisions of normal, not-in-canvas HTML elements using the best JavaScript physics library they know of?

Cetin Sert
  • 4,497
  • 5
  • 38
  • 76
  • Are you sure using an additional external library is the way to go? what about just checking the tiles in the same height when dropping and if they can be moved left animate them there? – Benjamin Gruenbaum Oct 15 '12 at 19:45
  • 1
    @BenjaminGruenbaum I do not want to write lots of unmaintainable code as I am a complete noob in physics and math and geometry, you name it. I want to declare properties of the game objects and have a proper library take care of collisions and placement for me. – Cetin Sert Oct 15 '12 at 19:48
  • 2
    The JS version of box2d has a debug renderer using canvas, but that's just the default. You can render the objects any way you want -- simulation and drawing are independent. – Stefan Haustein Oct 15 '12 at 23:07

1 Answers1

4

The simplest example I have found so far: http://bl.ocks.org/3411189

Update: A simple adaptation to my pieces: http://cssdeck.com/labs/fe3z2cfx/6

Cetin Sert
  • 4,497
  • 5
  • 38
  • 76
  • 1
    Are either of these links subject to deletion without warning, or are they permanent fixtures? In most cases, you're better off pasting the actual code in your answer, and referencing the link. Otherwise, your answer becomes useless if the resources suddenly disappear. See also http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – Robert Harvey Oct 16 '12 at 00:24
  • @RobertHarvey: you are right, I will edit the cssdeck as per your suggestions! – Cetin Sert Oct 16 '12 at 00:31
  • @RobertHarvey: I have updated my answer embedding the two short JS snippets and adding references to their original sources. – Cetin Sert Oct 16 '12 at 00:41
  • 1
    Here's another interesting project that looks promising: http://wellcaffeinated.net/PhysicsJS/ – Divey Mar 18 '14 at 22:32