单击“按钮”不止一次

时间:2014-02-19 11:16:27

标签: click

尝试为我的残疾儿子制作一个简单的单人射击游戏,我让射手正常射击1子弹,但是当点击按钮时似乎无法点击第2,第3等。我是基本编码的新手,所以对实际编码行的答案会有所帮助。 谢谢 这是我的代码                    游戏测试员     

<style id="game-css">
#missile{
position:fixed;
top: 640px;
left:820px;
width:0px;
height:0px;
background:#ffffff;
}
#missile>div{
position:absolute;
top: -4px;
width:4px;
height:10px;
border-radius:10px 10px 0 0 ;
background:black;
}
#fire{
image:shooter.jpg;
width:140px;
height:190px;
}
</style>

</head>
<body bgcolor="#ffffff">
<marquee behavior="scroll" direction="left" scrollamount="15">
<img src="diamond.jpg"  /><img src="diamond.jpg"  />
<img src="star.jpg"  /><img src="diamond.jpg"  /><img src="star.jpg"  />
<img src="bomm.jpg" /><img src="diamond.jpg"  /><img src="star.jpg"  /></marquee>
<br><marquee behavior="scroll" direction="right" scrollamount="10">
<img src="diamond.jpg"  /><img src="diamond.jpg"  /><img src="bomm.jpg" />
<img src="diamond.jpg"  /><img src="diamond.jpg"  /><img src="diamond.jpg"  />
<img src="bomm.jpg" /><img src="diamond.jpg"  /><img src="star.jpg"  /></marquee>
<br><marquee behavior="scroll" direction="left" scrollamount="20">
<img src="diamond.jpg"  /><img src="star.jpg"  /><img src="bomm.jpg" />
<img src="diamond.jpg"  /><img src="star.jpg"  /><img src="diamond.jpg"  />
<img src="star.jpg"  /></marquee>
<TABLE borderColor="#ffffff" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR valign=bottom align=center>
<!--LEFT-->
<TD align=center width="30%" bgcolor="#ffffff"><font face="arial, helvetica" size="6"
color="#000000"><br><br><br><br><br><img src="rules.jpg"></font></TD>
<!--MIDDLE-->
<TD align=center width="40%" bgcolor="#ffffff"><font face="arial, helvetica" size="6" 
color="#000000"><br><br><br><br><br><img src="shooter.jpg" border="0" id="fire" alt="Click to  
shoot"></font></TD>
<!--RIGHT-->
<TD align=center width="30%" bgcolor="#ffffff"><font face="arial, helvetica" size="6" 
color="#000000"><br><br><br><br><br><img src="goal.jpg">
<br><br><img src="bullets.jpg"></font></TD>
</TR>
</TABLE>
<div id="missile"><div></div></div> 

<script>$(document).ready(function(){

         $('#fire').click(function(){
         $('#missile').animate({top:-400},1500);

 });

 });

 </script>


</body>
</html>

问题解决了 谢谢NickR

2 个答案:

答案 0 :(得分:1)

您可以这样做:

$('#fire').click(function(){
    $('#missile').animate({top:-400},1500, function() {
        // your callback
        $('#missile').css({top: 'auto', bottom: '-100px'});
    });
});

然后在你的回调函数中你重置了位置,如果再次点击,那么动画将再次运行。

答案 1 :(得分:0)

外行人的方法是重复单击(事件)时触发的代码。

一枚子弹被一条子弹射击(一次),两颗子弹可能会重复两次。

您可以尝试在第一次子弹完成时触发自定义事件。 请参阅Fire a custom event with javascript (or jquery) when my function finishes

这可能对您有所帮助:

var isRunning = false;
document.getElementById('fire').addEventListener('click', function () {
    if (isRunning) {
        isRunning = false;
        //code for stop fire
    } else {
        isRunning = true;
        //code for start fire
    }
}, true);

这可能会帮助您发射多个子弹。

感谢名单!