How do I make an HTML button connect to a Javascript function for HTML5 Canvas to make the Spaceship Fire

I have the game Asteroids, written in vanilla javascript. I'm trying to make the game interactive for Touchscreens and Mouse Pointers..so i'm thinking just add some html buttons to accomplish that. But my buttons won't do anything. Please help as I've tried for 3 weeks and no luck.

document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);

// event listeners
function keyDown( /** @type [KeyboardEvent] */ ev) {
  if (ship.dead) {
    return;
  }

  switch (ev.key) {
    case "ArrowDown":
    case " ": // spacebar key
    case "Down":
      // case 32:  // spacebar (shoot lasers)
      shootLaser();
      break;
    case "ArrowLeft": // Keyboard Compatibility 
    case "Left": // IE Compatibility
      // case 37:  // left arrow (rotate ship left)
      ship.rot = TURN_SPEED / 180 * Math.PI / FPS;
      break;
    case "ArrowUp": // Keyboard Compatibility 
    case "Up": // IE Compatibility
      // case 38: // up arrow (thrust the ship forward)
      ship.thrusting = true;
      break;
      // case "KeyD":
    case "ArrowRight":
    case "Right":
      // case 39:  // right arrow (rotate ship right)
      ship.rot = -TURN_SPEED / 180 * Math.PI / FPS;
      break;
  }
}

function keyUp( /** @type [KeyboardEvent] */ ev) {
  if (ship.dead) {
    return;
  }

  switch (ev.key) {
    case "ArrowDown":
    case " ": // spacebar key
    case "Down": // down arrow (for one handed accessibility controls)
      // case 32:  // spacebar (allow shooting again)
      ship.canShoot = true;
      break;
    case "ArrowLeft": // Keyboard Compatibility 
    case "Left": // IE Compatibility
      // case 37:  // left arrow (stop rotate ship left)
      ship.rot = 0;
      break;
    case "ArrowUp":
    case "Up":
      // case 38:  // up arrow (stop thrusting)
      ship.thrusting = false;
      break;
    case "ArrowRight":
    case "Right":
      // case 39:  // right arrow (stop rotate ship right)
      ship.rot = 0;
      break;
  }
}

and here is what I'm trying to get working but i'm running out of hair to pull out:

in html file:

<div>
  <button type="button" name="btn-left-arrow" id="btn-left-arrow"><</button>
  <button type="button" name="btn-up-arrow" id="btn-up-arrow">^</button>
  <button type="button" name="btn-right-arrow" id="btn-right-arrow">></button>
  <button type="button" name="btn-down-arrow" id="btn-down-arrow">v</button>
  <button type="button" name="btnSpace" id="btnSpace">Shoot</button>
  <button onclick="shootLaser()">Shoot</button>
  <input id="btnSpace" type="button" value="clickme" onclick="shootLaser();" />
</div>

in js file:

<button onclick="shootLaser()">Shoot</button>

I have tried so many different things and nothing has working, I'm going insane...please help!

I probably don't need all these extra lines of code, but I'm almost out of deadline time and I'm trying everything.

even just to get the Shoot button to work would be a major hurdle.



Read more here: https://stackoverflow.com/questions/67378845/how-do-i-make-an-html-button-connect-to-a-javascript-function-for-html5-canvas-t

Content Attribution

This content was originally published by Logic Atom at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: