I am learning html5 game programming on Android, writing a space invaders clone. The game is rendered to a canvas using javascript.
SetTimeout is used to call a NewTurn function every 15 milliseconds. The NewTurn function calculates the movements and calls context.drawImage to draw the player and invaders on the screen.
On my Nexus 7, I have no issues. On the Samsung S4 everything is fine until the user touches the screen. When this happens, the SetTimeout to load the NewTurn is blocked.
Here is my code:
function NewTurn()
{
var timeStart = getTime();
UpdateSpritePositions();
RenderSprites(); // Uses context.drawImage()
var timeEnd = getTime();
setTimeout(NewTurn, 15);
}
If I hold my finger to the screen and drag it indefinitely, then NewTurn will not be called until I lift my finger.
timeEnd - timeStart is pretty constantly around 3 ms.
timeStart - timeEnd varies wildy depending on whether and how I touch the screen.
I tried removing all of the javascript onTouch handlers, but this had no effect on my issue. Then I tried removing all of the rendering and my issue went away. So it appears to me that touching the screen might block rendring, and possibly setTimeout cannot complete until rendering is complete.
Any ideas on why this is blocking?
