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

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

javascript html object

在javascript中生成对象并删除它们,javascript,html,object,Javascript,Html,Object,我正在制作一个Javascript小游戏，有一个坏人和一个玩家，当玩家被点击时，他发射一颗子弹，子弹射向坏人，击中他后子弹消失，伤害了他我成功地繁殖了子弹，我也可以让它移动，问题是当试图繁殖超过1颗子弹时（射击两次），这样每个子弹都需要不同的ID，这就是iv'e尝试做的： <html> <head> <script type="text/javascript"> var hp = 4; var num = 1; function fire() {

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

我成功地繁殖了子弹，我也可以让它移动，问题是当试图繁殖超过1颗子弹时（射击两次），这样每个子弹都需要不同的ID，这就是iv'e尝试做的：

<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>


var-hp=4；
var-num=1；
函数fire（）
{
document.getElementById（“bodie”）.innerHTML+=“”；
bulletpos（）；
num++；
}
函数fireanim（）
{
document.getElementById（“player”）.src=“../project1/images/goodguyfire.png”
setTimeout（function still（）{document.getElementById（“player”）.src=“../project1/images/goodguystal.png”}，200）；
}
函数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（函数（）{bulletmove（）}，25）；
}
函数bulletmove（）
{
var bulletX=parseInt（document.getElementById（“bullet”）.style.left）；
document.getElementById（“bullet”）.style.left=bulletX-10；
}
函数hit（）
{
document.getElementById（“hpbar”）.src=“../project1/images/hp”+hp+”.png”；
如果（hpOk），我已经整理了您的代码，只留下了问题所在的元素：
<body id="bodie">
    <div id="player"  onClick="fire()" style="position:absolute;top:100px;left:600px; width: 50px; height: 50px; background-color: #ff0000"/>
</body>

在这里拉小提琴：
错误在于使用bulletmove
函数始终以最后一个项目符号为目标，因为您必须以每个仍在移动的项目符号为目标。我们通过传递创建的元素（bullet
）来实现这一点从一个函数到另一个函数。这样你就不需要跟踪id，如果你删除bullet.id
行，代码仍然会运行（正如我们所引用的）对象。
我建议你使用HTML5画布。问题在于你的bulletpos
函数。虽然你确实在用不同的bullet[id]生成子弹，您仍在移动项目符号
。请尝试将document.getElementById（“项目符号”）
更改为document.getElementById（“项目符号”+num）
。如果这不起作用，请将它放在jsfiddle.net上，我们将从那里开始。实际上……它不起作用，因为全局num…哦，天哪。哦，多么愚蠢的错误，它现在起作用了，但仍然有一个问题。函数“bulletmove（）”无法将所有项目符号移动到一起，如果id不断变化，它一次只能处理1个项目符号，如果您希望在没有解释的情况下更改代码，我很乐意将其发送到jsfiddle.netYes-每次生成项目符号时，它都会增加num
值。但是动画需要针对初始对象，不是最后一个。解决方案是使bulletpos
和bulletmove
函数参数化。我不是已经通过添加num使其参数化了吗？好的，这比我的要好得多，但是你能解释一下你做过的几件事吗：1.为什么要编写window.X=function（）而不是function X（），有区别吗？2.我不明白document.body.appendChild（bullet）做了什么
do，你能解释一下吗？否则谢谢你的帮助。1.没有区别。我这样做是因为JSFIDLE在编写function X
时遇到问题。总的来说，当你创建函数时，你实际上是在将它们分配给窗口范围，所以函数A（某物）
=window.A=函数（某物）
.2.如果使用JSdocument.createElement（“div”）；
创建元素，仍然需要将它们插入DOM。document.body.appendChild（项目符号）就是这样做的-在document.body的最后一个子元素之后插入新创建的元素。我也没有使用innerHTML，这不是一种很好的操作DOM的方法。明白了，如果你不介意的话，最后一个不相关的问题是：我不明白JSFIDLE是关于什么的，我是用它来共享代码还是像Notepad++这样的编辑器，我会开始使用它如果它能纠正我的代码，那就太麻烦了。如果你在这里发布代码，它会变得复杂，人们不会真正知道其中发生了什么。移动代码/库，设置一个测试环境来使用你计算机上的代码可能会变得单调乏味。因此，好的做法是提供一个例子，说明你有什么地方可以让所有人都知道访问它-jsfiddle.net（和其他类似的服务）就是这样做的。这样，即使我没有提供答案，其他人也可能会对我所写的内容做出贡献。这只会让生活更轻松：）
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";
}