HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

HTML5 Canvas game starts to lag 10 seconds after loading page

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
startsaftersecondslaggamehtml5loadingpagecanvas

Problem

I got bored and started making a game using HTML5, CSS3, and JavaScript/jQuery. I've been working on it for about 2 weeks and it was running pretty well.

Today I opened it and was moving the player's ship around the screen and noticed that it became very slow as the game went on, starting at 10 seconds after the page loaded. This happens whether the ship has been moving around the entire time or sat still and was then moved after the 10 seconds.

I have never made a game before and did this more as a learning exercise than anything else.

HTML:


    
        Flying Ship
        
        
        
        
        
    
    
        Your browser does not appear to support HTML5!
        

        Speed Boost:

        
        
        
        
    


JavaScript/jQuery:

```
$(document).ready(function() {

/ ----------------------------------------------------------------------------------------------------- /
/ Variables and Set-up /
/ ----------------------------------------------------------------------------------------------------- /

// Get the width and height of the browser view port.
var windowW = $(window).width();
var windowH = $(window).height();

// Number of images that will need to be loaded.
var imagesToLoad = 1;
// Initial number of images that we have loaded.
// The ReportAllImagesLoaded() function will increment imageLoaded each time
// an image is loaded until it equals imageToLoad.
var imagesLoaded = 0;

// Indicators of whether that specified border is being "touched" by
// the player's ship.
var borderLeft = false;
var borderTop = false;
var borderRight = false;
var borderBottom = false;

// The percentage of the player's speed boost.
var boost_bar_percent = 100;

// The player's ship. PNG image. The image is 150x300 pixels.
// The ship is 110px wide

Solution

I discovered why it would lag after 10 seconds. After some debugging I figured out it was coming from my DrawAbilitiesBar() function. Apparently it was because I was using

ctx.rect(windowW - 300 , windowH - 37, 270, 16);
ctx.stroke();


instead of

ctx.strokeRect(windowW - 300 , windowH - 37, 270, 16);


Using the second fixed my issue.

Code Snippets

ctx.rect(windowW - 300 , windowH - 37, 270, 16);
ctx.stroke();
ctx.strokeRect(windowW - 300 , windowH - 37, 270, 16);

Context

StackExchange Code Review Q#98936, answer score: 4

Revisions (0)

No revisions yet.