Alex Imperiale Alex Imperiale - 28 days ago 6
CSS Question

How to have image pop up based on meeting conditions

My question is: How do I make an image pop up based on meeting the correct condition. If this happens, this image pops up, if that happens, a different image pops up.

Im having trouble getting this to work.

The code you will be looking at is here:

function myMove()
{
var elemBluefish = document.getElementById("bluefish");
var elemTurtle = document.getElementById("turtle");

var posBluefish = 0;
var posTurtle = 0;

var id = setInterval(frame, 5);

function frame()
{
if(posBluefish >= 1150 && posTurtle >= 1150)
{
clearInterval(id);
return;
}

if(posBluefish < 1140)
{
posBluefish += Math.round(Math.random()*10);

if(posBluefish > 1140)
{
posBluefish = 1140;
}
elemBluefish.style.left = posBluefish + 'px';
}

if(posTurtle < 1140)
{
posTurtle += Math.round(Math.random()*10);

if(posTurtle > 1140)
{
posTurtle = 1140;
}
elemTurtle.style.left = posTurtle + 'px';
}
}
}

<!DOCTYPE html>






<body>
<button onclick="letsRace()">Start!</button>
<img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg"/>

<style>

body {
overflow: hidden;
}

#myStoplight {
position: absolute;
width: 10pc;
}

#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}

#turtle {
position: absolute;
width: 15pc;
top: 20pc;
left: .5pc;
}

body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}

.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}

#stoplight{
position:absolute;
width:10pc;
}
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<div id="container">
<div id="animate"></div>


Whats happening is basically the two images are racing to the position 1140 on random intervals so the same does not win each time.

I want to be able to show either an image on the turtle and "the turtle wins!" or an image of the blue fish and "the fish wins" depending on who makes it to 1140 first.

Any ideas?

Thanks in advance.

Answer

You just need another if statement within the if statement that terminates the setInterval. This will alert the user who has won after both complete the race.

function letsRace() 
    {
        var elemBluefish = document.getElementById("bluefish");
        var elemTurtle = document.getElementById("turtle");
        document.getElementById("winfish").style.visibility = "hidden";
        document.getElementById("winturtle").style.visibility = "hidden";
        var posBluefish = 0;
        var posTurtle = 0;
        var winner = null;
      
        var id = setInterval(frame, 5);

    function frame()
    {

        if(posBluefish < 1140)
        {
            posBluefish += Math.round(Math.random()*10);

            if(posBluefish > 1140)
            {
                posBluefish = 1140;
            }   
                elemBluefish.style.left = posBluefish + 'px';
        }

        if(posTurtle < 1140)
        {
            posTurtle += Math.round(Math.random()*10);

            if(posTurtle > 1140)
            {   
                posTurtle = 1140;
            }
                elemTurtle.style.left = posTurtle + 'px';
        }
      
        if(posBluefish >= 1140 || posTurtle >= 1140)
        {
          if(winner == null){
            if(posBluefish >= 1140 && posTurtle < 1140){
                  winner = "fish";
             }else if (posBluefish < 1140 && posTurtle >= 1140){
                  winner = "turtle";
             }else{
                   winner = "no one";
             }
          }
           if(posBluefish >= 1140 && posTurtle >= 1140){
              clearInterval(id);
               renderWinner();
           }
        }

    }
                 
 function renderWinner(){   
      document.getElementById("win" + winner).style.visibility = "visible";
    }
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <button onclick="letsRace()">Start!</button>
        <img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg"/>

    <style>

        body {
            overflow: hidden;
        }


        #myStoplight {
            position: absolute;
            width: 10pc;
        }

        #bluefish {
            position: absolute;
            top: 31pc;
            width: 17pc;
            left: -.5pc;
        }

        #turtle {
            position: absolute;
            width: 15pc;
            top: 20pc;
            left: .5pc;
        }

        body {
            background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
        }

        .finishline {
            position: absolute;
            right: -12pc;
            top: 18pc;
        }

        #stoplight{
            position:absolute;
            width:10pc;
        }
    </style>

    <img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
    <img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
    <img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

    <img id="winfish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png" style = "visibility: hidden">
    <img id="winturtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png" style = "visibility: hidden">



    <div id="container">
        <div id="animate"></div>