I'm in the process of developing a basic game that utilizes HTML5 Canvas technology.
Within the canvas, I've incorporated multiple rectangles to enhance gameplay.
However, one issue I've encountered is related to how I control the rectangles using X and Y coordinates. While the game performs well on my current display, it presents a problem on smaller screens where objects can stray beyond the designated "map" area. Conversely, on larger displays, more of the map becomes visible.
How can I make this game responsive to different screen sizes?
Below is an excerpt of the code I'm using to initialize the canvas:
this.canvas.width = document.body.clientWidth - 15;
this.canvas.height = 700;
this.context = this.canvas.getContext("2d");
Additionally, here's a snippet illustrating how the rectangles are moved within the game loop:
cursor.x += 1;