0

画面上を移動したい 3 つの画像 (車) があります。「スタート」ボタンをクリックすると、関連する車が画面上を移動するはずです。Car1、Car2、Car3。各ボタンは、3 つの異なるタイマー イベントをアクティブにする必要があります。各車は、「margin-left」スタイル プロパティを使用して移動する必要がありますが、移動したピクセルの量だけ距離パラメーターを増やします。

私も勝者が欲しいです。チェックされた画像を横切るかオーバーラップする車は、勝者を示し、すべてのタイマーを停止する警告ボックスを表示する必要があります。

これは私がこれまでに持っているものです：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to div races!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .style1
    {
        width: 134px;
        height: 51px;
    }
</style>
</head>

<body>

<div id="header">Div Races!</div>

<div id="track">

<div class="lane"><div id="Car1">
  <img id="Car1" alt="Car1" class="style1" longdesc="Car1" 
      src="Car1.jpg" /></div></div><!--Car1-->
<button onclick="Car1()">Start</button>

<div class="lane"><div id="Car2">
  <img id="Car2" alt="Car2" class="style1" longdesc="Car2" 
      src="Car2.jpg" /></div></div><!--Car2-->
<button onclick="Car2()">Start</button>

<div class="lane"><div id="Car3">
  <img id="Car3" alt="Car3" class="style1" longdesc="Car3" 
      src="Car3.jpg" /></div></div><!--Crankshaft-->
<button onclick="Car3()">Start</button>

</div><!--track-->

<div id="footer">Click on a start button to start a racecar!</div>

</body>
</html>




function Car1() {
var animate, left = 0, imgObj = null;
init();
    function init(){

       imgObj = document.getElementById('rusty');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';

       moveRight();
    }

    function moveRight(){
        left = parseInt(imgObj.style.left, 10);

        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';

            animate = setTimeout(function(){moveRight();},20); 

            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }

    function stop(){
       clearTimeout(animate);
    }

window.onload = function() {init();};
}

function Car2() {
var animate, left = 0, imgObj = null;
init();
    function init(){

       imgObj = document.getElementById('dusty');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';

       moveRight();
    }

    function moveRight(){
        left = parseInt(imgObj.style.left, 10);

        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';

            animate = setTimeout(function(){moveRight();},20); 

            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }

    function stop(){
       clearTimeout(animate);
    }

window.onload = function() {init();};
}

function Car3() {
var animate, left = 0, imgObj = null;
init();
    function init(){

       imgObj = document.getElementById('crankshaft');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';

       moveRight();
    }

    function moveRight(){
        left = parseInt(imgObj.style.left, 10);

        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';

            animate = setTimeout(function(){moveRight();},20); 

            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }

    function stop(){
       clearTimeout(animate);
    }

window.onload = function() {init();};
}

私は正しい軌道に乗っていますか？私が使用したコードはウェブサイトで見つけました。アドバイスをいただければ幸いです。

4

0 に答える 0