Applying Old-School Video Game Techniques in Modern Web Games - HTML5 Game Development Insights - page 110

// Calculate the delta between the previous timestamp and the new one
delta = ts - previousTs;
// Performing a calculation here means that it will be
// executed every 16.67 ms. at 60 frames per second
// Check whether or not something needs to be repainted in the scene
// if the velocity of the player is different than 0,
// we'll need to repaint the frame
if (playerVelocityX !== 0 || playerVelocityY !== 0) {
playerPositionX += playerVelocityX;
playerPositionY += playerVelocityY;
shouldRepaint = true;
}
// Only execute the paint routine if the delta is bigger
// than the interval and the shouldRepaint flag is set to true
if (delta > interval && shouldRepaint) {
// This bit will be executed only if it's bigger than the
// interval and therefore will be executed every 33.33 ms.
// at 30 frames per second (or the value of the "fps" variable)
// Paint the "background"
var i = 0,
j = 0;
for ( ; i < gridRows ; ++i ) {
for ( j = 0 ; j < gridCols ; ++j ) {
if (Grid[i][j] === 1) {
paintCell(ctx,
j * cellWidth,
i * cellHeight,
cellWidth,
cellHeight);
// Set that position as painted
Grid[i][j] = 0;
}
}
}