Restart button for snake game

Question

I started studying JS from a couple of weeks. I was trying to do this guided exercise, adding functions like the restart button. I know I'm doing something wrong, can someone help me understand?

here is my code: https://github.com/StefaniaGalazzo/snake-game

Answer 1

Your code looks good so far. From your JS file, it seems like the problem is with this function:

function main() {

    if (has_game_ended()) return;

    changing_direction = false;
    setTimeout(function onTick() {
    clear_board();
    drawFood();
    move_snake();
    drawSnake();
    // Call main again
    main();
    }, 100)
    
}

Specifically this line:

if (has_game_ended()) return;

If you want the restartButton:

restartBtn.addEventListener("click", () => {
  return main();  
});

To reset the board when you press it, you should remove that if statement. Or, you can change add a ! to it

if (!has_game_ended()) return;

So, if has_game_ended is true, then that line will be skipped and your reset game functions below that in your main() function will actually be executed. At the moment, you return (exit) out of the function if your game has ended which is not what you want.