Michael Meis Michael Meis - 7 months ago 11
Javascript Question

Display an image as part of a function

I am trying to make a race using javascript. I have two images that start on the left side. Once the user clicks go, they move at random intervals towards the right side. Once they reach the right side they stop. I need to display an image indicating which image reached the end first. I have the race portion of it working but when they reach the end, the winners image never shows up. Thanks for any help?

function move_img(str)
{
var x=document.getElementById('i1').offsetTop;
x= x +100;
document.getElementById('i1').style.top= x + "px";
}

function playerOne()
{
var step = Math.random();
var y1=document.getElementById('i1').offsetTop;
var x1=document.getElementById('i1').offsetLeft;
if(x1 < 500 ){x1= x1 +step;
document.getElementById('i1').style.left= x1 + "px";
}

return x1;
}

function playerTwo()
{
var step = Math.random();
var y2=document.getElementById('i2').offsetTop;
var x2=document.getElementById('i2').offsetLeft;
if(x2 < 500 ){x2= x2 +step;
document.getElementById('i2').style.left= x2 + "px";
}

return x2;
}

function timer()
{
var x1 = 0;
var x2 = 0;

if ( (x1 < 500 && x2 < 500))
{
playerOne();
playerTwo();
var x=document.getElementById('i1').offsetLeft;
var y=document.getElementById('i1').offsetTop;
my_time=setTimeout('timer()',10);
x1 = document.getElementById('i1').offsetLeft;
} else if ( (x1 == 500 && x2 < 500))
{
function winnerPlayerOne()
{
var img = document.createElement('img');
img.src = "/images/winner_ford.png";
document.body.appendChild(img);
}

} else {
function winnerPlayerTwo()
{
var img = document.createElement('img');
img.src = "/images/winner_meis.png";
document.body.appendChild(img);
}
}

}

Answer

For anyone interested who finds this later, this is how I got it working:

HTML:

    <html>
        <head>
            <title>The Race for an A!</title>
            <link rel="stylesheet" type="text/css" href="race.css"> 
            <script type='text/JavaScript' src="race.js" language=javascript>
            </script>
        </head>

        <body>

            <h1 class = "amazing"> The Amazing Race For an A! </h1>

            <h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1>

            <div id="traffic-light">
            <div id="stopLight" class="bulb"></div>
            <div id="slowLight" class="bulb"></div>
            <div id="goLight" class="bulb"></div>
            </div>

            <input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;">

            <img src=images/teacher.jpg id='i1' style="position:absolute; left: 25; top: 325; z-index:2;" width ="100" >
                <br><br><br><br>
            <img src=images/meis.png id='i2' style="position:absolute; left: 25; top: 500; z-index:2;" width ="100">
            <img src=images/road.jpg id='road' style="position:absolute; left: 30; top: 325; z-index:1;" height = "133" width ="1180">
            <img src=images/road.jpg id='road' style="position:absolute; left: 30; top: 500; z-index:1;" height = "133" width ="1180">
            <img src=images/winner_ford.png id='image1' style="position:absolute; left: 5; top: 0; z-index:3;" width ="100%" height = "100%" onclick="reset()">
                <br><br><br><br>
            <img src=images/winner_meis.png id='image2' style="position:absolute; left: 5; top: 0; z-index:3;" width ="100%" height = "100%" onclick="reset()">

            <script>
                illuminateRed()
                hideImage()
            </script>

        <div class="vertical-line" />

        </body>
    </html>

JS:

<!--

function hideImage() 
{
    document.getElementById("image1").src = "images/winner_ford.png";
    document.getElementById("image2").src = "images/winner_meis.png";

    document.getElementById("image1").style.visibility = "hidden";
    document.getElementById("image2").style.visibility = "hidden";

}

function meis()
{
    document.getElementById("image2").style.visibility = "visible";
}

function ford()
{
    document.getElementById("image1").style.visibility = "visible";
}

function timer()
{
    var x1 = 0;
    var x2 = 0;
    var step1 = Math.random();
    var step2 = Math.random();
    var x1=document.getElementById('i1').offsetLeft;
    var x2=document.getElementById('i2').offsetLeft;

    if(x1 < 1100 && x2 < 1100)
    {
        x1 = x1 + step1;
        x2 = x2 + step2;

        document.getElementById('i1').style.left= x1 + "px";
        document.getElementById('i2').style.left= x2 + "px";

        setTimeout('timer()', 1);
    }else if ( x1 >= 1100 )
        {
            ford();
        }
        else if ( x2 >= 1100 )
        {
            meis()
        }
}

function illuminateRed()
    {
    clearLights();
    document.getElementById('stopLight').style.backgroundColor = "red";
    }

function illuminateGreen() {
    clearLights();
    document.getElementById('goLight').style.backgroundColor = "green";
    }

function clearLights() {
    document.getElementById('stopLight').style.backgroundColor = "black";
    document.getElementById('goLight').style.backgroundColor = "black";
    }

function reset()
{
    location.reload()
}

//-->
Comments