document.body.dispatchEvent(new KeyboardEvent('keydown', {
  key: 'a',
  code: 'KeyA',
  bubbles: true
}));

<Table Border=2>
<TR>
<TD><Embed Src="ScratchProject.html" STYLE="width:480px; height:360px"></TD>
</TR>
<TR>
<TD><img src="controller.png" usemap="#controls" width="480" height="360"></TD>
</TR>
</Table>
<map name="controls">
  <area alt="Up Arrow Key" title="Up Arrow Key" coords="85,50,146,110" shape="rect">
  <area alt="Right Arrow Key" title="Right Arrow Key" coords="148,110,208,174" shape="rect">
  <area alt="Left Arrow Key" title="Left Arrow Key" coords="22,110,84,174" shape="rect">
  <area alt="Down Arrow Key" title="Down Arrow Key" coords="85,175,146,235" shape="rect">
  <area alt="Space Bar" title="Space Bar" coords="145,285,335,325" shape="rect">
  <area alt="B Button" title="B Button" coords="345,196,40" shape="circle">
  <area alt="A Button" title="A Button" coords="420,125,40" shape="circle">
</map>

document.body.dispatchEvent(new KeyboardEvent('keydown', {
  key: 'a',
  code: 'KeyA',
  bubbles: true
}));

<script>
 //this is a JS comment. JavaScript goes here
</script>

document.getElementById("ID attribute value of element that you want to fire the A key").addEventListener("touchstart", (event) => {
  document.body.dispatchEvent(new KeyboardEvent('keydown', {
    key: 'a',
    code: 'KeyA',
    bubbles: true
  }));
})

<script>
  document.getElementById("replace this text with the ID of the element you want to select. Equivalent of the text input in the hat block above").addEventListener("touchstart", (event) => {
    document.body.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'a', //replace the "a" with whatever key you want to fire
      code: 'KeyA', //replace the "A" here with whatever key you want to fire
      bubbles: true //ignore this, and leave it alone, you won't need to touch it
    }));
  })
  //repeat the above for each HTML element you want to detect taps on
</script>

<map name="controls">
  <area ID="Press B" alt="B Button" title="B Button" coords="345,196,40" shape="circle">
  <area ID="Press A" alt="A Button" title="A Button" coords="420,125,40" shape="circle">
 //Or does the ID="" part need to be named something else here? Does the ID need to be a number instead?
</map>

<script>
  document.getElementById("Press A").addEventListener("touchstart", (event) => {
    document.body.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'a', 
      code: 'KeyA',
      bubbles: true
    }));
  })

  document.getElementById("Press B").addEventListener("touchstart", (event) => {
    document.body.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'b', 
      code: 'KeyB',
      bubbles: true
    }));
  })
</script>

<script>
  document.getElementById("Right Arrow Key").addEventListener("touchstart", (event) => {
    document.body.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'right arrow key', 
      code: 'KeyRightArrowKey',
      bubbles: true
    }));
  })

<script>
  document.getElementById("RightArrow").addEventListener("touchstart", (event) => {
    document.body.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'rightarrow', 
      code: 'KeyRightArrow',
      bubbles: true
    }));
  })

  document.getElementById("Press Space").addEventListener("touchstart", (event) => {
    document.body.dispatchEvent(new KeyboardEvent('keydown', {
      key: ' ', 
      code: 'Space',
      bubbles: true
    }));
  })