//define the player as the circ from the html 
var player = document.getElementById("car");

//to prove js is working on the css style
player.style.background = 'blue';
	
//call the gameloop every 20 milliseconds = 5fps
var intervalId = setInterval(gameloop, 20); 

//Add the Envent Listener for keyboard to trigger the Handler
document.addEventListener('keydown', EventHandler )

//define other movement global variables 
var x = 0;
var y = 0;

// end of the main program

function gameloop(){
    //game logic goes here

	//redraw (move) statement
	player.style.left = x;
	player.style.top = y;
	
} //end of gameloop


function EventHandler(){
//gloabals x,y and dx,dy can be used in this handler

  if (event.code == 'KeyD') {
    x = x + 10;
  }
  if (event.code == 'KeyA') {
    x = x - 10;
  }
  if (event.code == 'KeyW') {
    y = y -10;
  }
  if (event.code == 'KeyS') {
    y = y + 10;
  }
}; //end of the event handling loop