Running multiple jquery functions together

Question

I know this question has been asked a lot of times, and I have seen the solutions to them on SO as well as other forums. Most of the times the solution suggested is to use Web Workers.

A game I'm developing requires me to run multiple functions at the same time. One of them is an on click function and other is a setInterval.
My approach at doing this can be seen here in this JSFiddle. (keep clicking in gray area to make player jump).

The whole idea is to continuously spawn those blue obstacles after an interval of 1000ms.

In my earlier approach the obstacles would spawn only when I click to make player jump, otherwise they wouldn't as expected.

How can I run such two functions side by side in order to achieve the aim of spawning obstacles while also making player jump.
Secondly, what would be the best approach to carry out this process in view of game development i.e attaining a certain level of efficiency so that the animations are not affected.

Here is the HTML and Javascript code I've been working on:

<div class="container">
    <div class="player"></div>
    <div class="obstacle-container">
        <div class="obstacle"></div>
    </div>
</div>

$.fn.animator = function () {
    var hit_list, done = false;

    $(".container").click(function () {
        if (!done) {
            $(".obstacle").stop().animate({
                left: "-=105%"
            }, 10000, "linear");
            $(".player").stop().animate({
                bottom: "+=100px"
            }, {
                duration: 300,
                complete: function () {
                    $(".player").animate({
                        bottom: "0"
                    }, 800);
                },
                step: function () {
                    //Test for collision
                    hit_list = $(".player").collision(".obstacle");
                    if (hit_list.length !== 0) {
                        $(function () {
                            if (!done) {
                                $(".container").append("Game Over!");

                                return false;
                            }
                        });
                        done = true;
                    }
                }
            });
        }
    });
};


$(function () {

    $('.container').animator();

});

var interval = null;
$(".obstacle-container").obstacle_generator();
$.fn.obstacle_generator = function () {
    interval = setInterval(function () {
        $(".obstacle-container").append('<div class="obstacle"></div>');
    }, 1000);
};

Nevett · Accepted Answer · 2014-02-25 16:14:07Z

The generic concept you want to investigate is known as a game loop.

Almost every game will be built using some variant of this system:

Initialise game
Loop:
- Check for user input
- Update any actors
- Draw the scene
- Wait until it's time to repeat

A game running at 60 frames per second would perform this loop 60 times per second, or about once every 16ms.

Compared to your original question, you wouldn't need to be running multiple execution threads (running multiple functions together) to achieve this.

You are, in a way, already using a similar loop. jQuery maintains its own loop for updating animations. Where you are checking for collisions as part of your animation step, this is the sort of thing you would do in a hypothetical Player.update() method. You want to move this code out of jQuery, and in to a loop that you control.

Since you're running in a browser, the generic game loop becomes a bit more simple:

Check for user input - this can still be handled by event handlers, jQuery or not. Rather than directly changing properties like CSS position, though, they should act upon the state of the game object. For example, by changing the velocity of a Player object.
Update any actors - the important part of your loop. You should check how many milliseconds have passed since you last looped, since the browser doesn't guarantee that your code will be run exactly, or at least, 60 times per second. You should then loop through all of your game objects and update them all. In your Player.update() method, you would want to move it according to its velocity and the time passed, for example.
Draw the scene - if you're using DOM elements, then the browser handles drawing for you, of course. If you were using a <canvas> element, then you would do drawing yourself as part of the loop here.
Wait until it's time to repeat - this will be up to the browser to do for you, as part of normal setInterval/setTimeout behavior.

A simple game loop in JavaScript can look like this:

var gameObjects = [];
// Initialise game, create player objects etc, add them to the array

var gameLoop = function() {
    // Loop through gameObjects, and call their respective update methods
};

setInterval(gameLoop, 16); // Try to run the loop 60 times per second.

In a complex game, you wouldn't have just a basic array to hold all game objects, this is just an basic example.

Thanks for pointing me in right direction. I found gameprogrammingpatterns.com/game-loop.html , I think that's the way to go ahead.

Collectives™ on Stack Overflow

Running multiple jquery functions together

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related