Динамически загружать sketch.js в p5.js

Question

Я пытаюсь запустить sketch.js, когда нажимаю кнопку "начать игру".

Это мой код:

//THIS IS THE CODE FOR SKETCH.JS WITH THE PACMAN GAME....

var rocaImage;
var foodImage;
var grapeImage;
var pacManImage;
var roca;
var myMaze;
var arrayRocasMapa = [];
var arrayComidaMapa = [];
var arrayGrapesMapa = [];
var myPacman;
var font;
var username = "Eduardo";
var song;
//Pacman resources: http://www.classicgaming.cc/classics/pac-man/
function preload() {
  rocaImage = loadImage("images/roca.bmp");
  foodImage = loadImage("images/food.png");
  grapeImage = loadImage("images/grape.png");
  pacManImage = loadImage("images/pac.png");
  song = loadSound("assets/pacman_chomp.wav");
  //  font = loadFont('assets/SourceSansPro-Regular.otf');
}

function setup() {
  createCanvas(COLUMNS * IMAGE_SIZE, ROWS * IMAGE_SIZE + HEIGHT_TEXT);
  roca = new Roca(200, 300);
  myMaze = new Maze();

  for (var i = 0; i < myMaze.rows; i++)
    for (var j = 0; j < myMaze.columns; j++) {
      if (myMaze.mapa[i][j] == 0) {
        arrayRocasMapa.push(new Roca(j * IMAGE_SIZE, i * IMAGE_SIZE));
      } else if (myMaze.mapa[i][j] == 1) {
        arrayComidaMapa.push(new Food(j * IMAGE_SIZE, i * IMAGE_SIZE));
      } else if (myMaze.mapa[i][j] == 2) {
        arrayGrapesMapa.push(new Grapes(j * IMAGE_SIZE, i * IMAGE_SIZE));
      } else if (myMaze.mapa[i][j] == 3) {
        myPacman = new Pacman(j * IMAGE_SIZE, i * IMAGE_SIZE);
      }
    }
  // Set text characteristics
  textFont("monospace"); //https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts
  textSize(14);
  textAlign(LEFT, CENTER); // 	Constant:horizontal alignment, vertical aligntment either LEFT, CENTER, or RIGHT
  textStyle(NORMAL); //Italic o Bold
}

function draw() {
  background(0);
  //  roca.show();
  //with i i count the rows, with j the columns
  for (var i = 0; i < arrayRocasMapa.length; i++) {
    console.log("Imprimo una roca:" + i);
    arrayRocasMapa[i].show();
  }
  i = 0;
  for (i = 0; i < arrayComidaMapa.length; i++) {
    console.log("Imprimo una bola de comida:" + i);
    arrayComidaMapa[i].show();
  }
  i = 0;
  for (i = 0; i < arrayGrapesMapa.length; i++) {
    console.log("Imprimo una uva de poder:" + i);
    arrayGrapesMapa[i].show();
  }

  myPacman.show();

  for (i = 0; i < arrayComidaMapa.length; i++) {
    console.log("Compruebo si hay comida en la :" + i);
    if (myPacman.eatFood(arrayComidaMapa[i])) {
      arrayComidaMapa.splice(i, 1);
    }
  }

  for (i = 0; i < arrayGrapesMapa.length; i++) {
    if (myPacman.eatGrapes(arrayGrapesMapa[i])) {
      arrayGrapesMapa.splice(i, 1);
    }
  }

  for (i = 0; i < arrayRocasMapa.length; i++) {
    if (myPacman.eatRock(arrayRocasMapa[i])) {
      //arrayRocaMapa.splice(i,1);
    }
  }


  drawtext();
  //  addSound();
  if (arrayGrapesMapa.length == 0 && arrayComidaMapa.length == 0) {

    alert("Victory !!!");
    remove();
  }

  if (myPacman.lives == 0) {

    alert("Defeat !!!");
    remove();
  }
}

function addSound() {
  if (song.isPlaying()) { // .isPlaying() returns a boolean

  } else {
    song.play(); // playback will resume from the pause position

  }
}

function drawtext() {
  //  textSize(18);
  var textCoordY = ROWS * IMAGE_SIZE + HEIGHT_TEXT / 2;
  var txtUser = "User :" + username;
  var txtScore = "Score :" + myPacman.score;
  var txtLives = "Lives :" + myPacman.lives;

  fill('white');
  text(txtUser, 30, textCoordY);
  var cWidthUser = textWidth(txtUser) + 10 + 30;

  fill('blue');
  text(txtScore, cWidthUser, textCoordY);

  cWidthScore = textWidth(txtScore) + 10;
  fill('red');
  text(txtLives, cWidthUser + cWidthScore, textCoordY);
  // /*
  //   textSize(24);
  //   text('User', 30, ROWS*32+HEIGHT_TEXT/2);
  //   fill(0, 102, 153);
  //   text('Score', 100, ROWS*32+HEIGHT_TEXT/2);
  //   fill(0, 102, 153, 51);
  //   fill(0);
  //   text('Lives', 250, ROWS*32+HEIGHT_TEXT/2);
}

function mousePressed() {
  if (song.isPlaying()) { // .isPlaying() returns a boolean
    song.pause();
    background(255, 0, 0);
  } else {
    song.play(); // playback will resume from the pause position
    background(0, 255, 0);
  }
}

function keyPressed() {
  //  console.log("Algo pasa nenn");
  if (keyCode === 68 || keyCode === RIGHT_ARROW) //Letra d
  {
    console.log("Estoy dentro de mover derecha");
    myPacman.moveRight();
    //console.log("Estoy dentro de mover derecha");
  }
  if (keyCode === 65 || keyCode === LEFT_ARROW) // Letra a
  {
    console.log("Estoy dentro de mover izquierda");
    myPacman.moveLeft();
    //console.log("Estoy dentro de mover derecha");
  }
  if (keyCode === 87 || keyCode === UP_ARROW) // Letra W
  {
    console.log("Estoy dentro de mover arriba");
    myPacman.moveUp();
    //console.log("Estoy dentro de mover derecha");
  }
  if (keyCode === 88 || keyCode === DOWN_ARROW) // Letra X
  {
    console.log("Estoy dentro de mover abajo");
    myPacman.moveDown();
    //console.log("Estoy dentro de mover derecha");
  }
}

<!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() {

      //HERE I WANT TO LAUNCH SKETCH.JS BUT I CANT I HAVE TESTED MANY DIFFERENT ORDERS
      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>

Так что, если я прокомментирую (как в коде) загрузку скрипта sketch.js, я не смогу перейти к своему sketch.js, где я загружаю лабиринт и фон игры… Но я пробовал много вещей (document.write, innerHTML и т. д.) я просто хочу загрузить эскиз, когда нажимаю на кнопку startGame (чтобы запустить функцию startGame)… Если я удаляю комментарии и использую скрипт, он работает нормально, но я хочу контролировать, когда запускать sketch.js (когда я нажимаю кнопку «Начать игру», а не раньше)

Если бы вы знали что-нибудь проще, было бы неплохо ...

Также у меня есть еще одно сомнение ... я хочу напечатать какой-нибудь текст, например, партитуры, жизни и оставшееся время ... Вы используете другой холст, чтобы нанести на него текст (возможно, сбоку экрана или внизу), o в тот же холст вы делаете место, чтобы иметь достаточно места, чтобы написать ??

Спасибо

Answer 1

Вы можете хранить информацию о том, запущена ли игра, в переменной вверху эскиза:

var started = false;

function draw(){
  if(started){
    // draw your game
  }
}

function mousePressed(){
  started = true;
}

Вы можете установить started равным true при нажатии кнопки.

Или вы можете посмотреть режим экземпляра , который позволяет загружать эскиз на лету. Вы можете прочитать больше о режиме экземпляра здесь .

Также у меня есть еще одно сомнение ... я хочу напечатать какой-нибудь текст, например, партитуры, жизни и оставшееся время ... Вы используете другой холст, чтобы нанести на него текст (возможно, сбоку экрана или внизу), o в тот же холст вы делаете место, чтобы иметь достаточно места, чтобы написать ??

Любой подход в порядке. Это полностью зависит от вас. Вы также можете изменить веб-страницу и распечатать счет там. Библиотека P5.dom может пригодиться для этого.