如何用 HTML 5 制作“子弹”

Question

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

我正在尝试制作坦克游戏，并且我对编程如何使用 JavaScript 和 HTML 一次多于一个子弹非常document.getElementById(id).style.top = bulletY.toString + "px";现在我使用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>