0

我正在制作一个 Javascript 迷你游戏，有一个坏人和玩家，当点击玩家时，他发射子弹，子弹射向坏人，击中他后消失，伤害了他。

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

<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 附近编号不同的子弹，这样我可以控制每颗子弹，并在它们击中坏人后将其删除。但它仍然不让我这样做，不知道为什么。

如果有更好的方法可以很高兴地接受它，请随时更正我的代码或完全更改它。

谢谢。

4

1 回答 1

0

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

<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行，代码仍然会起作用（因为我们正在引用）对象。

于 2013-10-04T13:46:49.950 回答