Question

我正在尝试以一种可以根据事件播放或暂停它的方式将背景音乐添加到我的Javascript游戏中。我的操作方式：

为html中的每个mp3创建音频标签；
在我的js文件顶部声明了全局变量，并使用getElementById获取音频；
在函数内部，我正在使用 variable .play（），并且希望能够暂停音乐- variable .pause（）;

我的问题：

由于我需要能够在多个功能中播放和暂停背景音乐，因此我想我需要声明一个可以在任何地方访问的全局变量，对吗？但这不起作用，并且出现“ Uncaught TypeError：无法读取null的属性'play'”。
如果我在函数内部声明了该变量，那么它可以工作并且可以播放，但是后来我无法在其他函数内暂停它。

我的代码现在有点大了，但这是它的一部分（在这种情况下，是bgMusic.play（）；下面的函数下面的函数将返回上述错误。

在此先感谢您的帮助！

-

let bgMusic = document.getElementById("bg-music");
let victoryMusic = document.getElementById("victory");
let battleMusic = document.getElementById("battle-music");

let GameManager = {
  setGameStart: function(classe) {
    this.resetPlayer(classe);
    this.setPreFight();
  },

  resetPlayer: function(classe) {
    switch (classe) {
      case "Warrior":
        player = new Player(classe, 200, 0, 200, 100, 50);
        break;
      case "Mage":
        player = new Player(classe, 80, 200, 50, 180, 50);
        break;
      case "Cleric":
        player = new Player(classe, 100, 150, 80, 150, 70);
        break;
      case "Thief":
        player = new Player(classe, 100, 0, 100, 150, 200);
        break;
    }


    let getInterface = document.querySelector(".interface");
    getInterface.innerHTML = '<img src="art/' +
    classe.toLowerCase() + '.png" class="img-avatar"><div><h3>' + classe + '</h3><p class="health-player">Health: ' + player.health + '</p><p>Mana: ' + player.mana + '</p><p>Strength: ' + player.strength + '</p><p>Agility: ' + player.agility + '</p><p>Speed: ' + player.speed + '</p></div>';
  },

  setPreFight: function() {
    let getHeader = document.querySelector(".header");
    let getActions = document.querySelector(".action");
    let getArena = document.querySelector(".arena");

    bgMusic.play();

    getHeader.innerHTML = '<p>Task: Find an enemy!</p>';
    getActions.innerHTML = '<a href=# class="btn-prefight" onclick="GameManager.setFight()">Search for enemy</a>';
    getArena.style.visibility = "visible";

  },

  setFight: function() {
    let getHeader = document.querySelector(".header");
    let getActions = document.querySelector(".action");
    let getEnemy = document.querySelector(".enemy");

    let enemy00appears = document.getElementById("gosma-appears");
    let enemy01appears = document.getElementById("lagarto-appears");

    let enemy00 = new Enemy("Gosma", 100, 0, 150, 50, 50);
    let enemy01 = new Enemy("Lagarto", 100, 0, 50, 150, 150);

    let aleatorio = Math.floor(Math.random() * 2);
    switch (aleatorio) {
      case 0:
        enemy = enemy00;
        break;
      case 1:
        enemy = enemy01;
        break;
    }
    getHeader.innerHTML = '<p>Task: Choose your action</p>';
    getActions.innerHTML = '<a href=# class="btn-prefight" onclick="PlayerMove.calcAttack()">Attack!</a>';


    if (enemy === enemy00) {
      enemy00appears.play();
    } else {
      enemy01appears.play();
    }
    battleMusic.play();
    getEnemy.innerHTML = '<img src="art/' +
    enemy.especie.toLowerCase() + '.png" class="img-avatar"><div><h3>' + enemy.especie + '</h3><p class="health-enemy">Health: ' + enemy.health + '</p><p>Mana: ' + enemy.mana + '</p><p>Strength: ' + enemy.strength + '</p><p>Agility: ' + enemy.agility + '</p><p>Speed: ' + enemy.speed + '</p></div>';
  }

}

全局变量返回null。为什么？

0 个答案: