CODEWITHSUNDEEP
click
Sha
Sha

Reputation: 1

Make button click more than once

Trying to make a simple single shooter game for my disabled son, I have the shooter working fine to shoot 1 bullet but can't seem to get it to fire the 2nd ,3rd, etc, when button is clicked. I am new to basic coding so an answer with actual line of coding would be helpful. Thank you this is my code Game tester 

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

Problem solved Thank you NickR

Upvotes: 0

Views: 205

Answers (2)

Amar
Amar

Reputation: 2243

A layman approach would be to repeat the code triggered upon a single click(event).

A single bullet getting fired by a piece of code for a single bullet(once), two bullets maybe repeat the code twice.

You can try firing a custom event when you function for first bullet finishes. Please refer Fire a custom event with javascript (or jquery) when my function finishes

This might help you for a start:

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

This might help you to fire multiple bullets.

Thanx!

Upvotes: 0

Nick R
Nick R

Reputation: 7794

You can do something like this:

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

Then in your callback function you're resetting the position, and if you click again, then the animation will run again.

Upvotes: 1

Related Questions