Hey Mini - would you be able to post a link with your image here? Unfortunately don't have images set up on chriscourses.com since it requires a bit of extra moderation when it comes to spammers.

A CodePen to what you have so far would be great also!

Thanks for getting back

I worked on it a bit more, I was able to create the mechanic I wanted but not sure if I went with the best approach. I eventually want to make this multiplayer.

(btw I restarted and not using the previous code I posted)

https://codepen.io/steve323/pen/XWeGjGx

So after checking things out, I think I have a better idea of where you're going with it. I haven't personally done a top-down game, but I found a CodePen that might push you in the right direction: https://codepen.io/martyzz/pen/KXVOOb?editors=1010

In there, check out the MapProcessor function as well as the Camera function, both should give you some tips in regards to how to set the game up correctly.

Basically, the MapProcessor will create rectangles and walls based on your map array, and then the Camera is responsible for moving the walls and everything in-between.

This sounds like something I'll cover in a future course, maybe after the Pacman one I'm doing next.

Thanks, I checked that out, and after a lot more trial and error, I was able to find what I think is the most simple solution.

Just in case anyone was following along with the same problem, I found what seems to be the best solution. My solution was to translate the canvas by (-myPosition.x + canvas.width/2, -myplayer.y + canvas.height/2)

This makes it so the player will always be seen in the center of the screen, regardless of its x and y coords.

Inside the after the translation between the save and restore, you can draw stuff that would appear on the games map, (example: game-borders, other players, ect...)

Outside that translation is where you can draw stuff that doesnt move according to the player. (exmaple: leaderboard, inventory, status bar etc...)

function loop() {
	if (GameState.runloop) GameState.loop = requestAnimationFrame(loop);


	c.fillStyle = GameState.backgroundColor;
	c.fillRect(0, 0, canvas.width, canvas.height);

	c.save(); // needs save before this translation
	c.translate(-myplayer.x + canvas.width / 2, -myplayer.y + canvas.height / 2);

	/* --- Entity Updates --- */
    myplayer.update();

    /* draw everything that should be moving with the games map in between this save/restore
 example: other players. 
coords example:
u can draw this at x:4000,y:4000, and as long as ur player is close to it, it will be visable on the screen
   */
	c.restore(); // if drawing inside this save/restore, it will draw on game borad (entities), if outside: will draw on screen (ui)

	// draws on real canvas width/height
	GameState.UI.draw();
}