animate() 예제 (물고기 움직이기)

이번 예제는 jquery로 수족관속의 물고기를 움직이는 예제입니다. 예제의 조건은 다음과 같습니다.

1. xy좌표를 입력하면 입력 버튼을 누르면 물고기가 좌표로 움직인다.
2. 물고기를 누르면 랜덤한 위치로 이동한다.
3. 물고기가 수족관 밖으로 나가는 좌표를 입력하면 경고창을 띄운다.
4. 키보드 화살표를 이용해서 물고기를 10px씩 이동시킨다.
5. 물고기 src:https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332
   물고기 width:200px; position:relative;
   수족관 width:700px; height:442px; border:2px solid grey; margin:auto;
   

if문 ,Math.random, .animate를 알아야 합니다.

아래는 예제를 완성시킨 모습입니다.

x값 입력:
y값 입력:

이 예제의 코드입니다

<style media="screen"> #box{width:700px; height:442px; border:2px solid grey;margin:auto;} #pos_text{text-align: center;} #accept{ width:120px; border:1px blue solid; background-color: grey; margin-left:auto; margin-top:10px; margin-right:auto; } #fish1{width:200px; position:relative;} </style> <div onkeydown="moving()"> <div id="box"> <img id="fish1" src="https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332" alt="fish1" onclick="touchFish()"> </div> <div id="pos_text"> x값 입력:<input type="number" id="xbox"><br /> y값 입력:<input type="number" id="ybox"><br /> <input type="button" value="입력 또는 여기를 누르고 화살표" onclick="xy()"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var x=0; var y=0; function xy(){ x = Number(document.getElementById('xbox').value); y = Number(document.getElementById('ybox').value); if(0<=x && x<=500 && 0<=y && y<=300){ $("#fish1").animate({ left:x+'px', top:y+'px' }); }else{ alert("값이 초과되었습니다."); } } function moving(){ var keycode = event.keyCode; var fish = document.getElementById('fish'); if(keycode == 39 && x<500){ x+=20; }else if(keycode == 37 && x>0) { x-=20; }else if(keycode == 40 && y<300) { y+=20; }else if(keycode == 38 && y>0) { y-=20; } if(x>500){ x=500; }else if(x<0){ x=0; }else if(y>300){ y=300; }else if(y<0){ y=0; } console.log(x, y); fish1.style.left=x.toString()+"px"; fish1.style.top=y.toString()+"px"; } function touchFish(){ x=Math.random()*500; y=Math.random()*300; $("#fish1").animate({ left:x+'px', top:y+'px' }); console.log(x,y); } </script> </div>