Help with Time Based Animation?

[Venks 0]

Hello all!
I'm completely new to HTML5 and javascript. Heck the only experience I have is messing around with Flixel.
Anyways I'm trying to learn by following this tutorial: http://blog.sklambert.com/html5-canvas-game-panning-a-background/

I've managed to create this thus far: http://berathen.com/space-shooter-demo.html

Arrows to move and Space/Enter to shoot.

 

Now it's working just fine in Google Chrome, but it's incredibly, painfully slow when viewed with the Wii U gamepad's browser.
At first I just assumed that this was simply how things are and that HTML5 games simply are slow on the Wii U.

But then I stumbled across the games  Onslaught Arena and Dragon Dash which both actually play nicely on my Wii U.

 

I scoured across the internet and found that apparently the Wii U gamepad plays a lot of HTML5 games at an incredibly low 10 FPS.
So that's when I started my search for animating and moving objects independently of the frame rate. Hopefully I'm on the right track here.

I came across this article here: http://viget.com/extend/time-based-animation

The sample on that site that showcases shooting bullet bills out of a canon actually works the same on both my laptop's browser and my Wii U.

My only problem is I have absolutely no idea how to use javascript really. I haven't the faintest clue how to utilize the code he's using.
Every attempt I've made has had no real impact on making my game run any faster on my Wii U.

So I'm wondering if anyone has any tips with the Wii U's browser in mind or any tutorials on time based animation for a complete beginner like myself.

 

Thanks for reading!

 

[OkijinGames 203]

Hi,

 

Had a quick look at your code, the ship animations are apparently time based since you use the frame delta to interpolate the distance however your firing rate is still frame based (counter++ with firing rate of 15). So the gameplay is still affected by the rate at which you render (at 10 FPS you cannot fire more than 1 bullet per seconds while at 60 FPS you can fire 4).

 

Assuming you want a fire rate of 10 bullets / sec.

var fireRate = 0.1;

Then in the update accumulate the time delta on counter:

counter += _delta;

 

Another thing I would do is to separate the firing action from the rendering / animation loop to increase the responsiveness for user actions by moving the ship.fire() call to your keydown event handler.

 

Good luck.