Simulate an object falling over with jQuery

Question

I'm simulating a bowling game in jQuery. So, I throw the ball (through animate function) and when it hits a pin I simulate it falling over (also through animate function). But I can only make it rotate. I want it to fall over in place, to the left or to the right. Like this. This is the jQuery code for the pin animation:

this.animation = function (pinID) {
    var rdm = ((Math.random()*10)+1);
    var degree;
    if (rdm <= 5)
        degree = -90;
    else
        degree = 90;
    $(pinID).animate({ deg: degree },
    {
        duration: 1000,
        step: function (now) {
            // In the step-callback (that is fired each step of the animation),
            // the pin will rotate to the current degree of the animation
            $(pinID).css({
                transform: 'rotate(' + now + 'deg)'
            });
        },
        complete: function () {
            // When the animation is complete, removes the pin from play
            $(pinID).css({
                "left": -200, "top": -200
            });
        }
    });
}

I tried to have a left and top in the beginning of the animate function the it just simulated a weird movement. I'd appreciate it if anyone could help me. Thanks.

EDIT Here's the result (thanks to Zs V):

this.animation = function (pinID) {
    if (knockedPins.indexOf(pinID) == -1) {
        var rdm = ((Math.random() * 10) + 1);
        var degree;
        var transFormOrigin;
        if (rdm <= 5) {
            degree = -90;
            transFormOrigin = '0% 100%';
        }
        else {
            degree = 90;
            transFormOrigin = '100% 100%';
        }
        $(pinID).css({ "transform-origin": transFormOrigin });
        knockedPins.push(pinID);

        $(pinID).animate({ deg: degree },
        {
            duration: 1000,
            step: function (now) {
                // In the step-callback (that is fired each step of the animation),
                // the pin will rotate to the current degree of the animation
                $(pinID).css({
                    transform: 'rotate(' + now + 'deg)'
                });
            },
            complete: function () {
                // When the animation is complete, removes the pin from play
                $(pinID).css({
                    "left": -200, "top": -200
                });
            }
        });
    }
}

I added the transform-origin property and had to make use of an array to store the ids of the pins that were already knocked, otherwise it would shake until it was put to rest. hehe

You might have to combine translation and rotation if, for example, you want to simulate someone slipping. — cst1992, Sep 02 '17 at 19:19
Hey, thanks. But it wasn't necessary as I didn't want to make a "slippery" effect (perhaps I explained myself poorly), rather rotate the div on a specific point instead of the middle, which is the defualt point of rotation. I edited the post with the code details, if you want to see what I meant. Thanks again. :) — taiko, Sep 02 '17 at 19:52

score 1 · Accepted Answer · answered Sep 02 '17 at 19:16

1

You have to rotate the object (the picture) around its corner instead of the center. Here it is a discussion how to do that: https://stackoverflow.com/a/6633676/6624619

answered Sep 02 '17 at 19:16

Zsolt V

517
3
8

That's just what I needed. Thanks. I also made a few modificications to make sure it would only run the function once (because of the random, as it would affect the transform-origin property). I edited the post with the detailed code. Thanks again! :) – taiko Sep 02 '17 at 19:49

Simulate an object falling over with jQuery

1 Answers1