티스토리 뷰

HTML&CSS&Javscript&Jquery

190730 물고기 경주하기

猫猫 2019. 7. 30. 10:04
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body{
            font-size : 9pt;
        }
        #panel{
            width: 600px;
            height: 300px;
            border: 1px solid #999;
            position: relative;
        }

        #bar{
            position:absolute; /*절대주소라는뜻*/
            left:50px;
            top:190px;
            width:500px;
            height:20px;
            background: #F30;
        }

        #img1 {
            position:absolute;
            left:50px;
            top:50px;        
        }
        #img2{
            position:absolute;
            left:50px;
            top:150px;
        }
        #nav{
            text-align: center;
            width: 600px;
        }
    </style>
    <script>
     $(document).ready(function(){
    	 var sum = 50;
    	 var sum1 =50;
         var $fish = $("#img1"); //물고기 노드 구하기
         var $fish1 = $("#img2");
         
         $("#btn_run").click(function(){ // or .on(click,function(){  })
        	
        	if(sum<=500&&sum1<=500){
        		$fish.css("left", sum);
        		sum += (Math.random()+1)*10;
        		$fish1.css("left",sum1);
         		sum1 +=(Math.random()+1)*10;         	
        	}
        	else if(sum>=sum1) alert("1번 우승");
        	else if(sum1>=sum) alert("2번 우승");
        		
         });
     })
    
    
    </script>
</head>
<body>
      <div>

        <div id="panel">
            <div id="bar"></div>
            <div id="img1">
                <img src="image/fish.png">
            </div>
            <div id="img2">
                <img src="image/fish.png">
            </div>
        </div>
        <div id="nav">
            <button id="btn_start">
                좌표값 입력
            </button>
            <button id="btn_run">
            run!
            </button>

        </div>
    </div>
</body>
</html>

물고기 두마리로 경주하기

각 물고기는 500px에서 경주를 끝낸다. 

버튼을 누를때마다 생기는 left 좌표값은 랜덤으로 발생. 

반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190820 과정평가형 시험 예상문제  (0) 2019.08.20
190809 클래스 있없 체크하기  (0) 2019.08.09
190809 클릭 시 이미지 변화하기  (0) 2019.08.09
190809 each 연습  (0) 2019.08.09
190809 버튼 배경색 자동으로 바꾸기  (0) 2019.08.09