Answer 1

Here, is the code snippet of an event listener for the resize event to update the canvas size whenever the window is resized:

window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});

Place this code inside your window.onload function, so it updates the canvas size dynamically. About event listener, it is a function or procedure that waits for and responds to an event. An event can be any occurrence or action that happens in the program, such as a mouse click, keyboard press, page load, or data input. Event listeners are commonly used in graphical user interfaces (GUIs), web development, and other event-driven programming environments.

For detail: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

You mentioned that "nothing is working neatly." I noticed that you're calling the move() function only once after initializing the game pieces (gp and gh). This function updates the positions of the game pieces, but it's not called continuously to animate the game. You need to call the move() function repeatedly to update the game state continuously. This will continuously clear the canvas, update the game state, and then request the next animation frame.

Also you're setting the canvas size based on window.innerWidth and window.innerHeight only once during the window.onload event. If the window is resized after the initial load, the canvas won't adjust accordingly. To fix this, you can add an event listener for the resize event to update the canvas size whenever the window is resized. Try implementing these fixes, and see what happens.

Answer 3

You're welcome Web Developer AD