Question

我正在制作一个Javascript迷你游戏，一个坏人和玩家，当点击玩家时，他发射子弹，子弹发给坏人，一旦击中他就会消失，伤害他

我设法生成子弹，我也可以让它移动，问题是当试图产生超过1个子弹（射击两次）时，每个子弹需要一个不同的ID，这就是iv '试着做：

<html>
<head>
<script type="text/javascript">

var hp = 4;
var num = 1;

function fire()
{

    document.getElementById("bodie").innerHTML += "<img style='position:absolute;left:0px;top:0px;' id='bullet"+num+"' src='../project1/images/bullet.png'/>";
    bulletpos();
    num++;

}
function fireanim()
{
    document.getElementById("player").src = "../project1/images/goodguyfire.png"
    setTimeout(function still(){document.getElementById("player").src = "../project1/images/goodguystill.png"},200);
}


function bulletpos()
{

    var bulletX = parseInt(document.getElementById("player").style.left) - 20;
    var bulletY = parseInt(document.getElementById("player").style.top) + 35;
    document.getElementById("bullet").style.left = bulletX;
    document.getElementById("bullet").style.top = bulletY;
    setInterval(function(){bulletmove()}, 25);

}

function bulletmove()
{
    var bulletX = parseInt(document.getElementById("bullet").style.left);
    document.getElementById("bullet").style.left = bulletX - 10;
}

function hit()
{

    document.getElementById("hpbar").src = "../project1/images/hp"+ hp +".png";

    if(hp <= 0)
    {
        die();
    }

    if(hp != 0)
    {
        hp--;
    }


}

function die()
{
    var foeX = parseInt(document.getElementById("foe").style.left);
    document.getElementById("foe").style.left = foeX - 33; 
    document.getElementById("foe").src = "../project1/images/deadguy.png";
}

</script>
</head>
<body id="bodie">
<img id="player"  onClick="fire(),fireanim()" style="position:absolute;top:100px;left:600px;" src="../project1/images/goodguystill.png"/>
<img id="foe"  style="position:absolute;top:100px;left:150px;" src="../project1/images/badguy.png"/>
<img id="hpbar" style="position:absolute;top:80px;left:120px;" src="../project1/images/hp5.png"/>

</body>
</html>

正如你所看到的，我试图生成一个具有相同ID的子弹，但ID附近的数字不同，这样我就可以控制每一颗子弹，并在它们击中坏人后删除它们。但它仍然不让我这样做，不知道为什么。

如果有更好的方法可以做到这一点，请尽快接受它，随时纠正我的代码或绝对改变它。

感谢。

Answer 1

好的，我已经整理了一些代码，只留下了问题所在的元素：

<body id="bodie">
    <div id="player"  onClick="fire()" style="position:absolute;top:100px;left:600px; width: 50px; height: 50px; background-color: #ff0000"/>
</body>

和JS：

var hp = 4;
var num = 1;

window.fire = function()
{
    var bullet = document.createElement("div");
    bullet.style.position = "absolute";
    bullet.style.left = 0;
    bullet.style.top = 0;
    bullet.style.width = "5px";
    bullet.style.height = "5px";
    bullet.style.backgroundColor = "#00ff00";
    bullet.id = "bullet-"+num;
    document.body.appendChild(bullet);

    bulletpos(bullet);
    num++;
}



window.bulletpos = function(bullet)
{
    var bulletX = parseInt(document.getElementById("player").style.left) - 20;
    var bulletY = parseInt(document.getElementById("player").style.top) + 35;

    bullet.style.left = bulletX+"px";
    bullet.style.top = bulletY+"px";
    setInterval(function(){bulletmove(bullet)}, 25);

}

window.bulletmove = function(bullet)
{
    var bulletX = parseInt(bullet.style.left);
    bullet.style.left = (bulletX - 10)+"px";
}

在这里小提琴：http://jsfiddle.net/jKqvx/

错误在于尝试始终使用bulletmove函数定位最后一颗子弹，因为您必须锁定仍在移动的每颗子弹。我们通过将创建的元素（bullet）从一个函数传递给另一个函数来实现。这样您就不需要跟踪ID，如果您将删除bullet.id行，代码仍然可以正常运行（正如我们所引用的那样）。

在javascript中生成对象并删除它们

1 个答案: