javascript - 在 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(当我按下按钮开始游戏而不是之前)

如果你知道任何更简单的事情就好了......

我还有一个疑问......我想打印一些文本，比如分数，生命和剩余时间......你是否使用另一个 Canvas 在上面放置文本(可能在屏幕的一侧或底部)，o 在同样的 Canvas ，你腾出空间来写东西？？

谢谢

Answer 1

您可以将游戏是否开始存储在草图顶部的变量中:

var started = false;

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

function mousePressed(){
  started = true;
}

您可以在按下按钮时将 started 设置为 true。

或者您可以查看实例模式，它允许您动态加载草图。您可以阅读有关实例模式的更多信息 here .

Also i have 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 ??

这两种方法都可以。这完全取决于你。您还可以修改网页并在那里打印乐谱。 P5.dom图书馆可以为此派上用场。