sprite.js | An efficient javascript sprite animation framework | Animation library

The issue is simple. The sprite sheet contains 8 images, with the indices from 0 to 7. But you have 9 entries in the JSON, with indices from 0 to 8. That causes that the last sprite can't be read from the sheet and greenJewel contains an "empty" entry at the end of the array.
Remove the last entry ("name": "sprite-08", ...) from the JSON, to solve the issue.

To play with left and top add position like this

Canvas is a pixel buffer you need to clear it and redraw animated content each frame. Use ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) at the start of your main render loop

As pointed out by blindman67's comment

The original command-line execution works because the bash shell expands the expression --exclude-dir={node_modules,libs} to --exclude-dir=node_modules --exclude-dir=libs before invoking grep. grep is happy to take multiple --exclude-dir arguments and it will exclude directories that match any of the specified names.

The problem with the command in package.json arises because npm does not use bash to run the command. It uses plain old sh to run the command.

On some systems sh is just another name for bash, and on those systems putting the original command in package.json will work. Presumably Ahmed's system is one of those.

However, on other systems (notably Debian and its descendants) sh is not the same as bash. On these systems sh is a much simpler shell, and it does not expand the --exclude-dir={node_modules,libs} expression. So grep sees the unexpanded argument and thinks it's being told to exclude a directory whose name is literally {node_modules,libs}. Obviously that's not going to produce the result you want.

There are two obvious ways to fix this. One is to tell npm to tell sh to launch a bash shell to execute the original command:

The problem is you have Game.canvasContext.fillReact instead of Game.canvasContext.fillRect.

You'll also want to pass Game.mainLoop into window.setTimeout instead of just mainLoop, as window.setTimeout(Game.mainLoop, 1000 / 60);. Having said that, you're probably actually looking for window.setInterval() rather than window.setTimeout() - the difference being that .setInterval() will loop repeatedly, whereas .setTimeout() will only fire once.

Here's an updated sample:

Upgrade your nodejs and npm version. The keyword let,const are not supported by v4.0. You have to update version

The module n makes version-management easy:

Your best option is likely to chunk the video requests. Check out the Service Worker Sample: Cache Video Sample from Google.

You can see in the fetch event they are checking for range requests and handling those as individual requests. You could request short ranges of a couple of seconds from the the video and users would only have to wait for that range to complete before starting to play.

As far as the question currently stands it sounds like one of the functions in startGame () is stuck in an infinite loop

Try debugging and placing some console.log ("getNextBubble ()") if you start seeing the name of the function more then once your in an infinite loop

If that doesn't solve your question I highly suggest you update your question with more details