Simple game loop with time control

by erickzanardo

HTML

<canvas id="game" width="300" height="300">

CSS

canvas {
    border: 1px solid #000;
}

JavaScript

var renderCar = function() {
    var rendered = document.createElement('canvas');
    rendered.width = 100;
    rendered.height = 70;
    
    var renderedCtx = rendered.getContext('2d');
    renderedCtx.fillStyle = '#E5E5E5';
    renderedCtx.fillRect(5, 30, 90, 30); // Lateral
    renderedCtx.fillRect(30, 5, 40, 30); // Lateral
    
    renderedCtx.fillStyle = '#000';
    
    // Roda 1
    renderedCtx.beginPath();
    renderedCtx.arc(30, 60, 10, 0, Math.PI*2, true); 
    renderedCtx.closePath();
    renderedCtx.fill();
    
    // Roda 2
    renderedCtx.beginPath();
    renderedCtx.arc(75, 60, 10, 0, Math.PI*2, true); 
    renderedCtx.closePath();
    renderedCtx.fill();
    return rendered;
}

var car = renderCar(); // Pré renderiza a imagem de nosso carro
var ctx = document.getElementById("game").getContext("2d");

document.body.onkeypress = function(e) {
    processInput(e.keyCode || e.which);
}

// KEYS - Constantes para referenciar o código a tecla (lower case)
var A = 97
var D = 100
var S = 115
var W = 119

/*
    Controla nosso input, para este exemplo simplesmente armazenamos
    a última tecla pressionada pelo jogador
*/
var lastKeyPressed;
var processInput = function(keyCode) {
    lastKeyPressed = keyCode;
};

/*
    A Lógica de nosso jogo é bem simples, precisamos de duas variáveis
    para armazenar a posição atual do carro e de acordo com a tecla pressionada
    incrementamos ou decrementamos as coordenadas para mover o objeto
*/

var calcSpeed = function(delta, pixelsPerSec) {
    return ((pixelsPerSec * delta) / 1000);
};

var x = 0, y = 0;
var updateGame = function(delta) {
    if (lastKeyPressed == A) {
        x -= calcSpeed(delta, 100);
    } else if (lastKeyPressed == D) {
        x += calcSpeed(delta, 100);
    } else if (lastKeyPressed == W) {
        y -= calcSpeed(delta, 100);
    } else if (lastKeyPressed == S) {
        y += calcSpeed(delta, 100);
    }
    lastKeyPressed = null;
};

var render = function() {
    // Limpamos o que...