Jump to content

  • Log In with Google      Sign In   
  • Create Account


#ActualHappyCoder

Posted 02 March 2013 - 07:47 PM

Well, I profiled your code using google chrome. If you don't know this feature this is an excellent time to learn it. It tells you where your code spends the most time. You use it by opening up the developer tools, clicking on the profiles tab, then select the javascript cpu profile. Run the profiler then go ahead and play your game normally. After a short time stop the profiler and it will show you where your code spends the most time. This is what I found

60.62% of the time your programming is running in the Jet.collision method. It seems you are doing collision on 525 bullets against 125 enemies. This is 65625 total checks. Speeding that up would give you the most benefits. Consider only updating the bullets or enemies on screen. That would greatly reduce the amount of work needed. But 65625 really isn't a very large number. It shouldn't be slowing down your game as much as I have seen.

I think the problem you are running into is that you are setting init to be the load callback for all of your images. That means every time an image is loaded, it calls init and init calls loop. You have 15 game loops running at the same time. Your set timeout interval is only 100, that means for a single game loop you have about 10 frames per second. You have 15 game loops so your game is trying to do 150 frames per second.

So to fix it. You should keep track of how many images you have to load, store that number somewhere. Have your images use a different callback function. This function should subtract one from your pending image count. If it reaches 0 then you call init.
var pendingImages = 15;

var plane2 = new Image();
plane2.src = 'images/PlaneRight.gif';
plane2.addEventListener('load', imageLoaded, false);

var bullet = new Image();
bullet.src = 'images/Bullet.gif';
bullet.addEventListener('load', imageLoaded, false);
...

function imageLoaded()
{
    --pendingImages;
    if (pendingImages == 0)
    {
        init();
    }
}
Once you add this your game will probably run slow because it will be running at 10 frames per second instead of trying to pull 150. So you will have to increase the velocity of all the objects on screen and change the timeout time to be less for a faster framerate. I would personally use just requestAnimationFrame.

EDIT:
Also, looking over your code I noticed that you are using three different rendering contexts. I would recommend only using one.

#3HappyCoder

Posted 02 March 2013 - 07:47 PM

Well, I profiled your code using google chrome. If you don't know this feature this is an excellent time to learn it. It tells you where your code spends the most time. You use it by opening up the developer tools, clicking on the profiles tab, then select the javascript cpu profile. Run the profiler then go ahead and play your game normally. After a short time stop the profiler and it will show you where your code spends the most time. This is what I found

60.62% of the time your programming is running in the Jet.collision method. It seems you are doing collision on 525 bullets against 125 enemies. This is 65625 total checks. Speeding that up would give you the most benefits. Consider only updating the bullets or enemies on screen. That would greatly reduce the amount of work needed. But 65625 really isn't a very large number. It shouldn't be slowing down your game as much as I have seen.

I think the problem you are running into is that you are setting init to be the load callback for all of your images. That means every time an image is loaded, it calls init and init calls loop. You have 15 game loops running at the same time. Your set timeout interval is only 100, that means for a single game loop you have about 10 frames per second. You have 15 game loops so your game is trying to do 150 frames per second.

So to fix it. You should keep track of how many images you have to load, store that number somewhere. Have your images use a different callback function. This function should subtract one from your pending image count. If it reaches 0 then you call init.
var pendingImages = 15;

var plane2 = new Image();
plane2.src = 'images/PlaneRight.gif';
plane2.addEventListener('load', imageLoaded, false);

var bullet = new Image();
bullet.src = 'images/Bullet.gif';
bullet.addEventListener('load', imageLoaded, false);
...

function imageLoaded()
{
    --pendingImages;
    if (pendingImages == 0)
    {
        init();
    }
}
Once you add this your game will probably run slow because it will be running at 10 frames per second instead of trying to pull 150. So you will have to increase the velocity of all the objects on screen and change the timeout time to be less for a faster framerate. I would personally use requestAnimationFrame.

EDIT:
Also, looking over your code I noticed that you are using three different rendering contexts. I would recommend only using one.

#2HappyCoder

Posted 02 March 2013 - 07:01 PM

Well, I profiled your code using google chrome. If you don't know this feature this is an excellent time to learn it. It tells you where your code spends the most time. You use it by opening up the developer tools, clicking on the profiles tab, then select the javascript cpu profile. Run the profiler then go ahead and play your game normally. After a short time stop the profiler and it will show you where your code spends the most time. This is what I found

60.62% of the time your programming is running in the Jet.collision method. It seems you are doing collision on 525 bullets against 125 enemies. This is 65625 total checks. Speeding that up would give you the most benefits. Consider only updating the bullets or enemies on screen. That would greatly reduce the amount of work needed. But 65625 really isn't a very large number. It shouldn't be slowing down your game as much as I have seen.

I think the problem you are running into is that you are setting init to be the load callback for all of your images. That means every time an image is loaded, it calls init and init calls loop. You have 15 game loops running at the same time. Your set timeout interval is only 100, that means for a single game loop you have about 10 frames per second. You have 15 game loops so your game is trying to do 150 frames per second.

So to fix it. You should keep track of how many images you have to load, store that number somewhere. Have your images use a different callback function. This function should subtract one from your pending image count. If it reaches 0 then you call init.
var pendingImages = 15;

var plane2 = new Image();
plane2.src = 'images/PlaneRight.gif';
plane2.addEventListener('load', imageLoaded, false);

var bullet = new Image();
bullet.src = 'images/Bullet.gif';
bullet.addEventListener('load', imageLoaded, false);
...

function imageLoaded()
{
    --pendingImages;
    if (pendingImages == 0)
    {
        init();
    }
}
Once you add this your game will probably run slow because it will be running at 10 frames per second instead of trying to pull 150. So you will have to increase the velocity of all the objects on screen and change the timeout time to be less so for a faster framerate. I would personally use requestAnimationFrame.

EDIT:
Also, looking over your code I noticed that you are using three different rendering contexts. I would recommend only using one.

#1HappyCoder

Posted 02 March 2013 - 06:52 PM

Well, I profiled your code using google chrome. If you don't know this feature this is an excellent time to learn it. It tells you where your code spends the most time. You use it by opening up the developer tools, clicking on the profiles tab, then select the javascript cpu profile. Run the profiler then go ahead and play your game normally. After a short time stop the profiler and it will show you where your code spends the most time. This is what I found

60.62% of the time your programming is running in the Jet.collision method. It seems you are doing collision on 525 bullets against 125 enemies. This is 65625 total checks. Speeding that up would give you the most benefits. Consider only updating the bullets or enemies on screen. That would greatly reduce the amount of work needed. But 65625 really isn't a very large number. It shouldn't be slowing down your game as much as I have seen.

I think the problem you are running into is that you are setting init to be the load callback for all of your images. That means every time an image is loaded, it calls init and init calls loop. You have 15 game loops running at the same time. Your set timeout interval is only 100, that means for a single game loop you have about 10 frames per second. You have 15 game loops so your game is trying to do 150 frames per second.

So to fix it. You should keep track of how many images you have to load, store that number somewhere. Have your images use a different callback function. This function should subtract one from your pending image count. If it reaches 0 then you call init.

var pendingImages = 15;

var plane2 = new Image();
plane2.src = 'images/PlaneRight.gif';
plane2.addEventListener('load', imageLoaded, false);

var bullet = new Image();
bullet.src = 'images/Bullet.gif';
bullet.addEventListener('load', imageLoaded, false);
...

function imageLoaded()
{
    --pendingImages;
    if (pendingImages == 0)
    {
        init();
    }
}
Once you add this your game will probably run slow because it will be running at 10 frames per second instead of trying to pull 150. So you will have to increase the velocity of all the objects on screen and change the timeout time to be less so for a faster framerate. I would personally use requestAnimationFrame.

PARTNERS