Call a Phaser function from HTML/JS

Phaser 3
1

Hi,

I’m trying to understand how to call a Phaser function (JS) from a regular HTML / JS function. I can do it the other way round, but I’m at a loss as to how to call it from the HTML page. It’s for a mute button that I want in the site navigation – not within Phaser itself.

In Phaser:

mutesound() {
  this.scene.sound.setMute(true);
  if (this.scene.sound.mute) {
    this.scene.sound.setMute(false);
  }
}

In the HTML page:

<a href="javascript:void(0);" onclick="mute()" style="color:#fff;">Mute</a>
<script>
    function mute() {
     mutesound(); //THIS DOES NOT WORK BUT WHAT SHOULD IT BE??
    }

  </script>

Thanks!

2

So I worked this out thanks to this other post. For anyone interested, it’s simpler than expected:


//DEFINE THE VARIABLE IN THE CLASS
var mutebutton

//IN CREATE
mutebutton = document.getElementById('mutesound');
mutebutton.addEventListener('click', (e) => this.mutesound(e)); 

//OUTSIDE CREATE - GLOBAL FUNCTION
mutesound() {
  this.scene.scene.sound.setMute(true);
  if (this.scene.scene.sound.mute) {
    this.scene.scene.sound.setMute(false);
  }
}

Then in HTML just use a link with the ID

 <a id="mutesound" href="javascript:void(0);" >Mute</a>