Load sketch.js dynamically


#1

Hello im a newbie here in p5.js and i need some help:

Im trying to launch sketch.js when i click on start game… but i cant get it…

This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pacman</title>
  <link rel="icon" href="images/ghost.png" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>
  <script src="library/p5.js" type="text/javascript"></script>
  <script src="library/addons/p5.dom.js" type="text/javascript"></script>
  <script src="library/addons/p5.sound.js" type="text/javascript"></script>
  <!-- <script src="sketch.js" type="text/javascript"></script> -->
  <script src="roca.js" type="text/javascript"></script>
  <script src="maze.js" type="text/javascript"></script>
  <script src="food.js" type="text/javascript"></script>
  <script src="grapes.js" type="text/javascript"></script>
  <script src="pacman.js" type="text/javascript"></script>
  <script>
  function startGame(){
   preload();
   setup();
   draw();

    document.write("<script src='sketch.js' type='text\/javascript'><\/script>");

}
  </script>
  <header> <h1> Pacman Game by Eduardo</h1> </header>
  <img src="./images/splash-image.jpg" alt="Splash image of Pacman" />
  <nav class="topnav">
              <a href="/">Settings</a>
              <a href="">Start Game</a>
              <button onclick="startGame()" class="topnav"> Start Game</button>
              <a href="">Credits</a>
  </nav>
</body>

</html>

So if i comment ( like in the code) the loading of sketch.js i cant go to my sketch.js where i load the maze and the game background… But i have tried many things ( document.write, innerHTML, etc…) i just want to load sketch when i click on Button startGame ( so the function startGame would be launched)…

If you know of anything easier would be nice…

Also i hav another doubt… i want to print some text like scores, lives and time remaining… do you use another canvas to put text on it ( perhaps in a side of the screen or in the bottom), o in the same canvas you make room to have enough space to write ??

Thanks