What is the bug here??

Question

I am making a rpg game in html canvas. I started to code on Sololearn itself. But when I hosted it with GitHub Pages, it is not taking full height and width and also nothing is working neatly.
Please check the code and help me.

https://github.com/AshokDawande/Game.git

And this is the pages site:
https://ashokdawande.github.io/Game/

https://sololearn.com/compiler-playground/WBTW0CoZXr0s/?ref=app

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

`нттp⁴⁰⁶ The move function is called whenever the user clicks on the buttons so that the circle can move so there is no problem there.
(In fact there is no problem in the js if you have checked my GitHub pages site. The script is working perfectly now as I came to know that I hadn't linked the script perfectly and corrected the code.)

Now there is problem with only the width and height.

Will you please teach me to add an eventlistener for resize event as I don't know much about that eventlistener.

Also thanks for your help 😊.

Answer 4

Thanks `нттp⁴⁰⁶ now it is resizing properly 😊 also thanks for explaining eventlistener to me.

Answer 5

You're welcome Web Developer AD