[JS-보충] 22-09-29 경주마 경주 만들기

자바스크립트 javascript 

setTimeout 과 setInterval, clearInterval 경마 만들기 문제

---

    <button onclick="start()" id=start>start</button><br>

   <div id=line>

        <img src="https://i.pinimg.com/originals/eb/ed/e5/ebede532f6f5cf644a3fcf79d14b046c.gif" id="h1" width=60 height=50><br>

        <img src="https://i.pinimg.com/originals/eb/ed/e5/ebede532f6f5cf644a3fcf79d14b046c.gif" id="h2" width=60 height=50><br>

        <img src="https://i.pinimg.com/originals/eb/ed/e5/ebede532f6f5cf644a3fcf79d14b046c.gif" id="h3" width=60 height=50><br>

        <img src="https://i.pinimg.com/originals/eb/ed/e5/ebede532f6f5cf644a3fcf79d14b046c.gif" id="h4" width=60 height=50><br>

    </div>

var rank=[];
        //시작했을때 세팅
        function start(){
            //버튼숨김
            document.getElementById("start").style.display='none';
            // isEnd=[false,false,false,false];//false 안도착 true 도착
            // rank=[0,0,0,0];         //도착순위
            // rankCount=1;            //순위설정
            rank=[];
            //시작점지정
            document.getElementById("h1").style.marginLeft='0px';
            document.getElementById("h2").style.marginLeft='0px';
            document.getElementById("h3").style.marginLeft='0px';
            document.getElementById("h4").style.marginLeft='0px';
            //타임지정 - 특정시간마다 진행
            timerId=setInterval(gaming,100);
        }

function gaming(){
//뛰는것처럼 보이게끔 marginLeft값 랜덤으로 넣어 이동
document.getElementById("h1").style.marginLeft=
parseInt(document.getElementById("h1").style.marginLeft)+parseInt(Math.random()*50)+'px';
document.getElementById("h2").style.marginLeft=
parseInt(document.getElementById("h2").style.marginLeft)+parseInt(Math.random()*50)+'px';
document.getElementById("h3").style.marginLeft=
parseInt(document.getElementById("h3").style.marginLeft)+parseInt(Math.random()*50)+'px';
document.getElementById("h4").style.marginLeft=
parseInt(document.getElementById("h4").style.marginLeft)+parseInt(Math.random()*50)+'px';                        //결승선에 도달했을때
            if(parseInt(document.getElementById("h1").style.marginLeft)>800){
                document.getElementById("h1").style.marginLeft='810px';
              //includes()메서드 = 배열이 특정요소를 포함하고있는지 판별
                if(!rank.includes(1)){
                    rank.push(1);
                }              
            }
            if(parseInt(document.getElementById("h2").style.marginLeft)>800){
                document.getElementById("h2").style.marginLeft='810px';
                if(!rank.includes(2)){
                    rank.push(2);
                }
            }
            if(parseInt(document.getElementById("h3").style.marginLeft)>800){
                document.getElementById("h3").style.marginLeft='810px';
                if(!rank.includes(3)){
                    rank.push(3);
                }
            }
            if(parseInt(document.getElementById("h4").style.marginLeft)>800){
                document.getElementById("h4").style.marginLeft='810px';
                if(!rank.includes(4)){
                    rank.push(4);
                }
            }
            //결승선에 도달했을때
            if(parseInt(document.getElementById("h1").style.marginLeft)>800&&
            parseInt(document.getElementById("h2").style.marginLeft)>800&&
            parseInt(document.getElementById("h3").style.marginLeft)>800&&
            parseInt(document.getElementById("h4").style.marginLeft)>800){
              //타이머멈춤  
              clearInterval(timerId);
              //배열에넣은순서대로(들어온순서)출력
              alert(rank);
              //버튼다시보여주기
                document.getElementById("start").style.display='inline';
            }
        }

들어온 순서대로 말번호가 출력된다.

 

 

See the Pen racehorse by rebornbb (@bongcasso01) on CodePen.