尝试为我的残疾儿子制作一个简单的单人射击游戏,我让射手正常射击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
答案 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);
这可能会帮助您发射多个子弹。
感谢名单!