ぴょんぴょんしまくる - アーシの毎日インプット

ブログでできる動くプログラムを学ぶべく、既存プログラムを勝手に書き換えてみます。

今回はソースを公開してくださっているこちらを使っていきます。

little-strange.hatenablog.com

LSSさんにはいつもお世話になっております。

ぴょんぴょんプログラムをお借りしました。（また無断ですみません）

今回は原本を基に改修を加え、見た目や動きが異なる2つのぴょんぴょんプログラムを作ってみました。

まずは原本および、作成したプログラム2つの動作を見てください。

【原本(LSSさんが作成したもの)】

ジャンプ！

【プログラム１】

じゃんぷ！

【プログラム２】

ジャンプ！

3つ全て、微妙に違ったかと思います。

----------

まずは原本となるソースをご覧ください。

f:id:arshii:20200408164331p:plain

基本的なぴょんぴょんプログラムが記述されています。

----------

これを基に今回、私が学習という名目で分解と再構築を行ったプログラムの1つ目がこちら

f:id:arshii:20200408164348p:plain

枠内が変更点の主な部分ですが、まず最初に、以下の置換をしています。

gamen⇒gamen1
j⇒j1
x⇒x1
y⇒y1
mx⇒mx1
jp⇒jp1

この置換を行わないと、同じ記事中に同一変数が複数存在することになり、同じ挙動をしてしまうためです。

続いて、①の部分について、

基本的な見た目を変えるために3箇所に修正を施しました。

１．背景色の修正

background-colorを#cccc00に修正。

#cccc00はおそらくRGBの各256色を16進数で表記したものでしょう。

２．背景の範囲の拡張

widthを20pxだけ拡張して画面にどのように反映されるのか見てみました。

３．ジャンプ！のボタン名の変更

名前を変えてもジャンプ操作に影響がないことを見てみました。

そして、②の部分について、

こちらは処理の部分をいじってみました。

１．左右に動く範囲を修正

左右に動く範囲を修正しました。背景を無視して動くことが出来るのかを確認するため、わざと多めに動くようにしました。

２．ジャンプの修正

ジャンプの滞空時間と上下へ動く範囲を修正しました。

y1=20+(400-(j1-20)*(j1-20));　j1が経過時間の2次関数で表現されています。

こちらも、背景を無視して動くことが出来るのかを確認するため、わざと多めに動くようにしました。

----------

2つ目のプログラムの修正箇所はこちら

f:id:arshii:20200408164404p:plain

①の部分について、

今回は丸と星を独立して動作させるため、変数を独立させました。

②の部分について、

①で変数を独立させたため、それらに対する処理を加えました。

特筆すべきポイントを2つ。

・丸の横方向への移動速度は、星の状態も参照していること。（複数の変数を組み合わせて処理ができることを確認）

・ジャンプすると最終的に丸と星は下の方に落ちていってしまうが、ジャンプの処理が終わると一瞬で基に戻る事。（連続して動作する必要はなく、ただ計算された座標に表示されているだけだということを確認）

③の部分について、

変数を独立させたため、丸の縦方向の座標を固定値から変数に修正しました。

----------

見様見真似でJavaScriptを触ってみましたが、だいぶJavaScrpitでどんなことができるのかがわかった気がします。

まだまだ気になることはありますが（例えば、秒間何回jの値が更新されるのだろうとか）、

今後、私だけのプログラムを公開できるよう頑張ります。

最後に、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>
<p>
<script>// <![CDATA[
x=0;
y=20;
mx=2;
j=0;
tm0=setInterval('jp()',50);