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

// Paint the "player"
paintPlayer(ctx, playerPositionX, playerPositionY);
// There's no need to go through all this logic on every frame
shouldRepaint = false;
// Set the previous timestamp, which will be used
// in the "next" loop.
// Subtract the difference between the delta and the interval
// to account for the time that it took the computer to
// process the function.
previousTs = ts - (delta % interval);
}
// Call requestAnimationFrame again
requestAnimationFrame(update);
}
function paintCell(ctx, x, y, w, h) {
// Set the colour to blue
ctx.strokeStyle = '#00F';
// Instead of drawing straight lines, draw dashed lines instead
w -= (cellWidth / 2);
h -= (cellWidth / 2);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + w, y + h);
ctx.stroke();
// Set the colour to gray
ctx.strokeStyle = '#ccc';
// Draw an outline
w += (cellWidth / 2);
h += (cellWidth / 2);
ctx.strokeRect(x, y, w, h);
}
function paintPlayer(ctx, x, y) {
// Set the colour to a dark red
ctx.fillStyle = '#CC0000';