Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: 3 moving images

  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3 moving images

    I'm writing a program where when the user clicks the button it starts the race. Right now I'm just trying to get the images to move. The problem is I can't get it to work with passing variables in. When I learned it I used document.getElementById('id').style.left = leftLocation. But that was for one image. I'm trying to make one function to move 3 images so I passed in the variables that had the id's of the 3 images. The problem is, h only increases to 20 and stops, or 10 keeps increasing by 10 to 20 so I only see 20. Also my images don't move.

    I need to make the three images move across the screen.
    Code:
    <html>
    <head>
    <style>
    #hImg1{
    width:100px;
    height:67.4px;
    position:absolute;
    top:10px;
    }
    #hImg2{
    width:100px;
    height:67.4px;
    position:absolute;
    top:77.4px;
    }
    #hImg3{
    width:100px;
    height:67.4px;
    position:absolute;
    top:144.8px;
    }
    
    #startButton{
    position: relative;
    top:150px;
    }
    </style>
    
    <script>
    function startRace(){
    raceTimer1 = setInterval("moveHorse(document.getElementById('hImg1'))", 1000)
    raceTimer2 = setInterval("moveHorse(document.getElementById('hImg2'))", 1000)
    raceTimer3 = setInterval("moveHorse(document.getElementById('hImg3'))", 1000)
    }
    
    function moveHorse(h){
    a=h.style.left
    b=parseInt(a)
    b = b + 10
    h = b
    }
    </script>
    </head>
    <body>
    <img src="horse1.png" style="left:10px;" id="hImg1" /><br />
    <img src="horse2.png" style="left:10px;" id="hImg2" /><br />
    <img src="horse3.png" style="left:10px;" id="hImg3" /><br />
    <input type="button" id="startButton" value="Start the Race!" onclick="startRace()" />
    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You should have something random or else all horses will move with the same speed.
    Code:
    function moveHorse(h){
      h.style.left=parseInt(h.style.left) + Math.floor(Math.random()*10) + "px";
    }

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know, and I will I have an idea how to do that. Since the horsed will stop at a left = num then the timer will be reset. The rate at which the horse will move will be desided from round to round based on a random number between 1-10.

    But right now they don't move at all.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Did you try the code I posted?

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. But the spead changes. I need the speed to remain constant inorder to check for a winner. There is also another part to my program where the horses get another random number where they either gain or lost speed based on the random number. For example If horse 1 is set to a speed of 8, horse 2 is 6 and horse 3 is set to 4 then horse one wins. Random numbers of -1.4 , 2.3, and 3.7 are made. Then in the next race horse one will have a speed of 6.6 , horse 2 8.3 and horse 3 will have a speed of 7.7. Then horse two will win. And it repeats again.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Play around with this:
    Code:
    <html>
    <head>
    <style type="text/css">
    #Horse1{
    width:100px;
    height:67.4px;
    position:absolute;
    top:10px;
    }
    #Horse2{
    width:100px;
    height:67.4px;
    position:absolute;
    top:77.4px;
    }
    #Horse3{
    width:100px;
    height:67.4px;
    position:absolute;
    top:144.8px;
    }
    
    #startButton{
    position: relative;
    top:150px;
    }
    </style>
    
    <script type="text/javascript">
    var finishLine = 100; //x coordinate of the finished line
    var raceTimer1,raceTimer2,raceTimer3;
    var winner = new Array();
    
    function startRace(btn){
      btn.disabled=true;
      resetRace();
      raceTimer1 = setInterval("moveHorse(document.getElementById('Horse1'))", 1000)
      raceTimer2 = setInterval("moveHorse(document.getElementById('Horse2'))", 1000)
      raceTimer3 = setInterval("moveHorse(document.getElementById('Horse3'))", 1000)
    }
    
    function resetRace(){
      winner.length=0;
      clearInterval(raceTimer1);
      clearInterval(raceTimer2);
      clearInterval(raceTimer3);
      document.getElementById('Horse1').style.left="10px";
      document.getElementById('Horse2').style.left="10px";
      document.getElementById('Horse3').style.left="10px";
    }
    function moveHorse(h){
      h.style.left=parseInt(h.style.left) + Math.floor(Math.random()*10) + "px";
      if (parseInt(h.style.left)>=finishLine){
         var horseId = h.id;
         winner[winner.length] = horseId;
         clearInterval(window["raceTimer"+horseId.substring(horseId.length-1)])
         if (winner.length==3){
             document.getElementById('startButton').disabled=false;
             var rank = '';
             for (var i=0;i<winner.length;i++){
                rank += i + 1 + " - " + winner[i] + "\n";
             }
             alert("Race finished. Here are the ranks:\n"+rank);
         }
      }
    }
    
    function moveHorse2(h){
    var a=h.style.left
    varb=parseInt(a)
    varb = b + 10
    var h =  b
    }
    </script>
    </head>
    <body>
    <img src="horse1.png" style="left:10px;" id="Horse1" /><br />
    <img src="horse2.png" style="left:10px;" id="Horse2" /><br />
    <img src="horse3.png" style="left:10px;" id="Horse3" /><br />
    <form name="f">
    <input type="button" id="startButton" value="Start the Race!" onclick="startRace(this)" />
    </form>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •