ぴょんぴょん（LSS with JavaScriptの場合）

　どうも！LSSです！！

ジャンプ！

↑こんなものを作ってみました！

なにこれ
作ったきっかけ
一応、コードはっておきます
タイマー使うとちょっと面白くなってきますね

なにこれ

　単なる「移動＋ジャンプ」の動きのサンプルです。

　ひたすら左右に往復する★にマウスカーソルを重ねるか、下にある「ジャンプ！」というリンクをクリックすると★がぴょんっとジャンプします。

作ったきっかけ

　はてなブログ仲間のさじさんが、最近動画作成を勉強されていて、AfterEffectsで可愛いキャラをぴょんぴょんさせる技術を習得されました。

のを見て、JavaScriptでやってみたくなったのです（真似しぃｗ）

　さじさんのは動きが凄く凝ってます！

　キャラも可愛いので、未見の方はぜひ見てきてください^^

　対して、LSSのは単に上下に★が動くだけで、真似というのもおこがましいのですが、「二次関数を使ってのジャンプの表現」をやってみたかったのですｗ
※ちなみに●は影のつもりですｗ

一応、コードはっておきます

<div id="gamen" style="position: relative; background-color: #eeeeee; width: 300px; height: 180px;"> </div>
<p><a href="#" onclick="if(j==0){j=1;};return false;">ジャンプ！</a></p>
<script>// <![CDATA[
x=0;
y=20;
mx=2;
j=0;
tm0=setInterval('jp()',50);

function jp(){
x+=mx;
if(x>=70){mx=-1;}
if(x<=0){mx=1;}
if(j>0 && j<20){
y=20+(100-(j-10)*(j-10));
j++;
}else{
y=20;
j=0;
}
gamen.innerHTML='<div style="position:absolute;bottom:10px;left:'+(x*4+2)+'px;color:gray;font-size:25px;">●</div>';
gamen.innerHTML+='<div style="position:absolute;bottom:'+y+'px;left:'+x*4+'px;font-size:20px;" onmouseover="if(j==0){j=1;}">★</div>';
}
// ]]></script>