<canvas id="canvas" width=300 height=300 style="border: 1px solid black; background: #EEEEEE"></canvas>

<script>

	let canvas = document.getElementById('canvas')
	let ctx = canvas.getContext('2d')

	function drawRect(rect) {
		ctx.fillStyle = rect.color
		ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
	}
	
	function updateRect(rect) {
		rect.x += rect.xspeed
		rect.y += rect.yspeed
		
		if (rect.x > canvas.width)
			rect.x = -rect.width
		if (rect.y > canvas.height)
			rect.y = -rect.height
			
		if (rect.x < -rect.width)
			rect.x = canvas.width
		if (rect.y < -rect.height)
			rect.y = canvas.height
	}
	
	function updatePlayer(player) {
		player.xspeed = 0
		player.yspeed = 0
		
		let speed = 1;
		
		//we check keys that are being held stored on our keyboard object, check below.
		//if a property doesn't exist on the keyboard object yet, it's considered false
		if (keyboard.ArrowLeft)
			player.xspeed -= speed;
		if (keyboard.ArrowRight)
			player.xspeed += speed;
		if (keyboard.ArrowUp)
			player.yspeed -= speed;
		if (keyboard.ArrowDown)
			player.yspeed += speed;
	}
	
	let rect1 = { x: 0, y: 0, width: 32, height: 32, color: "blue", xspeed: 0.4, yspeed: 0.1 }
	let rect2 = { x: 0, y: 0, width: 20, height: 20, color: "green", xspeed: -0.2, yspeed: 0.05 }
	let rect3 = { x: 0, y: 0, width: 40, height: 40, color: "orange", xspeed: 0.5, yspeed: -0.1 }
	
	let player = { x: 150, y: 150, width: 32, height: 32, color: "red", xspeed: 1, yspeed: 1 }
	
	let rectArray = [player, rect1, rect2, rect3]
	
	//we create a blank object to store pressed keys
	let keyboard = {}
	
	//event for when a key is pressed
	function keyDownEvent(eventInfo) {
		//we add/set a new property to the keyboard object dynamically, with the name of the key code
		keyboard[eventInfo.code] = true
	}
	
	//event for when a key is released
	function keyUpEvent(eventInfo) {
		//we set the respective property to false
		keyboard[eventInfo.code] = false
	}
	
	addEventListener("keyup", keyUpEvent)
	addEventListener("keydown", keyDownEvent)
	
	function update() {
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		
		updatePlayer(player)
		
		for (let rect of rectArray) {
			updateRect(rect)
			drawRect(rect)
		}
	}
	
	setInterval(update, 4)


</script>