在p5.js中动态加载sketch.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，等等…)我只想在单击Button 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库可能会在这方面派上用场。