画面上を動き回る玉
解説
骨組みは イヌでもわかるJavaScript講座 の
Step45 と
Step93 を組み合わせて作りました。
動かすものを画像から文字に変えてその文字色を変化させています。
このサンプルでは文字を「●」にしているので玉が動いているように見えます。
以下は改変した部分の簡単な解説です。
色の変化
まず乱数で R, G, B それぞれの初期値と変化値を設定します。
移動するたびに初期値に変化値を加えていき、0 か 255 を越えたら反転させます。
動き
オリジナルでは等速直線運動をするだけなのでランダムで加速度を設定して
より複雑な動きをするように設定してあります。
JavaScriptソース (DownLoad)
<SCRIPT type="text/JavaScript">
<!--
//
// 画面上を動き回る玉
// MovingBall.js Ver. 2.0.0, 2008/05/19 最終更新
// by michi[at]ep.sci.hokudai.ac.jp
// http://www.ep.sci.hokudai.ac.jp/~michi/
//
// Reference : イヌでもわかるJavaScript講座
// http://www.red.oit-net.jp/tatsuya/java/
//
/* 変数をセット */
var M_B = MovingBall_Init("movingball", 40, 40);
/* サブ関数 */
/* メイン関数 */
//-->
</SCRIPT>
|
HTMLソース
<BODY onLoad="MovinBall()"> (BODY 内のどこかに以下のタグを入れる) <SPAN id="movingball" style="position:absolute;font-size:40px">●</SPAN> |