- ベストアンサー
javascriptでクラスから作ったインスタンスを移動させる方法
- javascript初心者の方が、クラスから作ったインスタンスを移動させる方法について質問しています。
- 緑の正方形が予想通りに移動しない問題について、解決方法をお知らせください。
- setIntervalを使用して座標を変更しようとしているが、うまくいかないようです。どのように修正すれば移動させることができるでしょうか。
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数4
- ありがとう数8
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
うごくかな？ とめるときはどうする？ かってにとまるようにしたよ！ はんかくくうはくは、ぜんかくくうはくに、ちかんしてくださいね。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> body{ position : relative; } #a{ width : 100px; height : 100px; position : absolute; background : #0F0; } </style> <body> <div id="a"> </div> <script> function Character (element, x, y, interval) { this.e = element; this.x = x; this.y = y; this.i = interval; this.t = null; } Character.prototype.move = function () { var s = this.e.style; this.x += 10; this.y += 10; s.left = this.x + 'px'; s.top = this.y + 'px'; }; Character.prototype.start = function () { var that = this; var callBackFunc = function () { that.move (); }; if (! this.t) { this.t = setInterval (callBackFunc, this.i); } }; Character.prototype.stop = function () { if (this.t) clearInterval (this.t); this.t = null; }; Character.create = function (element, x, y, interval) { if (arguments.length < 1) throw new Error; return new Character (element, x || 10, y || 10, interval || 1000); }; function init () { var div = document.getElementById ('a'); var obj = Character.create (div); obj.start (); setTimeout (function () { obj.stop (); }, 10000); } init (); </script>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
taloo 様、 ご指摘ありがとうございます。(凹)
お礼
ありがとうございます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.2 ちょっとだけ突っ込み。 new Character()のところで、 x || 10, y || 10 とされてますが、 この書き方では(0px, 0px)から始めたくてCharacter.create(div, 0, 0)としても、Character.create(div, 10, 10)と見なされてしまいます。 初期値が0なら x || 0 でもいいのですが、0を指定可能で0以外の数値を初期値にする場合は、面倒ですが、 (x==undefined || x===false )? 10 : x (y==undefined || y===false)? 10 : y としなければなりません。（nullやfalseが渡されたときも考慮して。） ---------- 新しいブラウザならbindが使えますので、 Character.prototype.start = function () { if (! this.t) { this.t = setInterval (this.move.bind(this), this.i); } }; と書けます。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
お礼
ありがとうございます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
chaをグローバル変数にしてみてください。 関連して、「変数のスコープ」について勉強してみてください。
お礼
ありがとうございます。教えていただいたとおり、グローバル変数にしてみます。
お礼
ありがとうございます。サンプルまで作っていただき助かりました。