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값 입력:

이 예제의 코드입니다

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