javascript - 如何使用 HTML 5 生成 "bullets"

Question

我正在做的项目在这里https://tank-paint.glitch.me/

我正在尝试制作一款坦克游戏，而且我对编程还很陌生，如何使用 JavaScript 和 HTML 一次处理多个子弹，基本上现在我使用 document.getElementById(id)。 style.top =BulletY.toString +“px”;其中bulletY是所需的位置，但它只允许一个项目符号。有没有办法使用 getElementsByClassName 或克隆图像然后设置克隆样式的方法？

var turnTurret = 0;
var turretSpeed = 1;
var y;
var bulletY = 220;
var bulletSpeed = 1;
var time = 10;
var turnTank = 0;
function turnRight() {
  let x = document.getElementById("turret");
  turnTurret += turretSpeed;
  x.style.transform = "rotate(" + (turnTurret % 360) + "deg)";
}
function turnLeft() {
  let x = document.getElementById("turret");
  turnTurret -= turretSpeed;
  x.style.transform = "rotate(" + (turnTurret % 360) + "deg)";
  tankX-=1;
  turretX-=1;
}
function turnTankLeft() {
  let x = document.getElementById("tank");
  turnTank += tankSpeed;
  x.style.transform = "rotate(" + (turnTank % 360) + "deg)";
  tankX+=1;
  turretX+=1;
}
function turnTankRight() {
  let x = document.getElementById("tank");
  turnTank -= tankSpeed;
  x.style.transform = "rotate(" + (turnTank % 360) + "deg)";
}
var turretY = 200;
var tankY = 230;
var turretX = 200;
var tankX = 185.9;
var tankSpeed = 1;
var ratio = 0;
function moveForward() {
  turretY -= tankSpeed;
  tankY -= tankSpeed;
  bulletY = tankY + 20;
  document.getElementById("tank").style.top = tankY.toString() + "px";
  document.getElementById("turret").style.top = turretY.toString() + "px";
  ratio += 1;
  if(ratio = turnTank*360){}
}
function moveBackward() {
  turretY += tankSpeed;
  tankY += tankSpeed;
  bulletY = tankY + 20;
  document.getElementById("tank").style.top = tankY.toString() + "px";
  document.getElementById("turret").style.top = turretY.toString() + "px";

}
function upgradeTurret() {
  turretSpeed += 1;
}
document.onkeydown = keydown;
function keydown(evt) {
  if (!evt) evt = event;
  //to find key code | console.log(evt.keyCode)
  if (evt.keyCode == 39) {
    // right arrow key
    evt.preventDefault();
    turnRight();
  }
  if (evt.keyCode == 37) {
    //left arrow key
    evt.preventDefault();
    turnLeft();
  }
  if (evt.keyCode == 32) {
    //space
    evt.preventDefault();
    document.getElementById("bullet").style.top = bulletY.toString + "px";
    shoot();
  }
  if (evt.keyCode == 87) {
    //w
    evt.preventDefault();
    moveForward();
  }
  if (evt.keyCode == 65) {
    //a
    evt.preventDefault();
    turnTankRight();
  }
  if (evt.keyCode == 83) {
    //s
    evt.preventDefault();
    moveBackward();
  }
  if (evt.keyCode == 68) {
    //d
    evt.preventDefault();
    turnTankLeft();
  }
}
function upgradeSpeed() {
  tankSpeed += 1;
}
function shoot() {
  for (var i = 0; i < 2000; i++) {
    time += 10;
    setTimeout(function() {
      bulletY -= bulletSpeed;
      document.getElementById("bullet").style.top = bulletY.toString() + "px";
    }, time);
  }
}
//function recoil(){} gavin's idea
//Make the DIV element draggagle:
dragElement(document.getElementById("tank_body"));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#turret {
  position: absolute;
}

#bullet {
  position: absolute;
}

#tank {
  position: absolute;
}

#mydiv {
  position: absolute;
  z-index: 10;
  text-align: center;
}

#mydivheader {
  cursor: move;
  z-index: 11;
}
#tank_body {
  position: absolute;
  z-index: 9;
  text-align: center;
}

#tank_bodyheader {
  cursor: move;
  z-index: 10;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="/script.js"></script>
    <link rel="stylesheet" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="mydiv">
      <div id="mydivheader">
        <img
          onload="document.getElementById('turret').style.top = '200px';document.getElementById('turret').style.left = '200px';"
          id="turret"
          src="https://cdn.glitch.com/194a1798-8f9f-4c5c-b888-d5ab8f60b5fd%2Ftank_turret.png?v=1627145594928"
          data-rotate="45"
        />
      </div>
    </div>

    <script>
      //Make the DIV element draggagle:
      dragElement(document.getElementById("mydiv"));

      function dragElement(elmnt) {
        var pos1 = 0,
          pos2 = 0,
          pos3 = 0,
          pos4 = 0;
        if (document.getElementById(elmnt.id + "header")) {
          /* if present, the header is where you move the DIV from*/
          document.getElementById(
            elmnt.id + "header"
          ).onmousedown = dragMouseDown;
        } else {
          /* otherwise, move the DIV from anywhere inside the DIV*/
          elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
          e = e || window.event;
          e.preventDefault();
          // get the mouse cursor position at startup:
          pos3 = e.clientX;
          pos4 = e.clientY;
          document.onmouseup = closeDragElement;
          // call a function whenever the cursor moves:
          document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
          e = e || window.event;
          e.preventDefault();
          // calculate the new cursor position:
          pos1 = pos3 - e.clientX;
          pos2 = pos4 - e.clientY;
          pos3 = e.clientX;
          pos4 = e.clientY;
          // set the element's new position:
          elmnt.style.top = elmnt.offsetTop - pos2 + "px";
          elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
        }

        function closeDragElement() {
          /* stop moving when mouse button is released:*/
          document.onmouseup = null;
          document.onmousemove = null;
        }
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <body>
    <img
      id="bullet"
      src="https://cdn.glitch.com/194a1798-8f9f-4c5c-b888-d5ab8f60b5fd%2Fbullet.png?v=1627145599587"
      onload="document.getElementById('bullet').style.top='180px';document.getElementById('bullet').style.left='221.4px';"
    />
    <div id="tank_body">
      <div id="tank_bodyheader">
        <img
          onload="document.getElementById('tank').style.top='230px';document.getElementById('tank').style.left='185.9px';"
          id="tank"
          src="https://cdn.glitch.com/194a1798-8f9f-4c5c-b888-d5ab8f60b5fd%2Ftank_body.png?v=1627145596565"
          data-rotate="45"
        />
      </div>
    </div>
  </body>
</html>

Answer 1

您可以使用 cloneNode 创建元素的副本:

var itm = document.getElementById("bullet");

for(let i=1; i<4; i++){ 
   var cln = itm.cloneNode(true);
   cln.style.top = (i * 25) + "px";
   document.body.appendChild(cln);
}

img{
    position: absolute
}

<body>
     <img id="bullet" src="https://cdn.glitch.com/194a1798-8f9f-4c5c-b888-d5ab8f60b5fd%2Fbullet.png?v=1627145599587" style="top: 5px; left: 221.4px;">

</body>