おしえて

JavaScriptでたくさんの同じ図形を効率よく動かす書き方

解決済

質問者：settu1300
質問日時：2016/03/06 18:08
回答数：2件

JavaScriptで描画した20px*20pxの正方形を30個をブラウザの左端、縦一列に整列(間隔問わず)させ、それらをいっせいに右に300px(割とゆっくり)移動せるプログラムを作りたいのですが、コードが長すぎて困っています。効率の良い書き方を教えて頂けないでしょうか？

※HTML5のCanvas要素を使わずにお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2016/03/07 10:16

ANo1です。

よくわからないけれど、バラバラに動かす場合の考え方のサンプルを作成してみました。
（他にも方法はいろいろあると思いますので一例です）

※ 『図形』がどのようなものを想定しているのか不明なので、とりあえずDIV要素で代用。
※ ゆっくりとのことなので、ゆっくり目に設定してあります。

（インデントは全角空白にしてあります）
<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>
<style type="text/css">
#hoge div { width:20px; height:20px; position:relative; left:0; background-color:#F00; }
</style>
</head>
<body>

<div id="hoge"></div>

<script type="text/javascript">
(function(){

//移動用アニメーション関数
var move = function(elm, duration){
　var endPos = 300, step = 1; //終了位置、移動時の増加ピクセル数
　var position = 0, id;
　id = setInterval(function(){
　　position += step;
　　if(position > endPos) position = endPos;
　　elm.style.left = position + "px";
　　if(endPos == position) clearInterval(id);
　}, duration);
}

//#hoge内にdiv要素を作成して、順に速度を変えて呼び出してみる
var box = document.querySelector("#hoge");
var e, item = document.createElement("div");
for(var i = 0; i<30; i++){
　e = item.cloneNode();
　box.appendChild(e);
　move(e, 30 + i * 5);
}

})();
</script>
</body>
</html>

＃1にも書きましたが、バラバラに動かすのでなければ、#hogeを移動させればよいので、もっと簡単になりますね。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます、非常に参考になりました。

本当にJavaScriptを知り尽くした方の回答ですね。一行一行コードの意味を理解し、良いプログラムを書きたいと思います。

通報する

お礼日時：2016/03/08 06:34

No.1

回答者： fujillin
回答日時：2016/03/07 00:35

こんばんは。

＞いっせいに移動させる
というのが、整列したままを意味するのなら、図形全体を包括する要素を作成しておいて、その(親)要素を移動させることでこと足りそうですね。

移動のしかたがそれぞれバラバラであるのなら、それを引数にとる(距離と速度とか)移動用の関数を作っておいて、図形の個数だけループで呼び出すとかすればよいのではないでしょうか。