回答編集履歴

2

追記

2018/05/28 16:15

投稿

set0gut1
set0gut1

スコア2413

test CHANGED
@@ -70,6 +70,8 @@
70
70
 
71
71
  これ系の「初期値は違うけど同じロジックで動くたくさんのオブジェクト」は、オブジェクト指向を使うとさっぱり書けることが多いです。
72
72
 
73
+ これだとliの数が100個とかいっちゃってもそんなにコードを複雑化させずに対応できます。
74
+
73
75
 
74
76
 
75
77
  ```javascript

1

追記: オブジェクト指向を導入した書き方

2018/05/28 16:15

投稿

set0gut1
set0gut1

スコア2413

test CHANGED
@@ -57,3 +57,85 @@
57
57
  }
58
58
 
59
59
  ```
60
+
61
+
62
+
63
+ ---------
64
+
65
+
66
+
67
+ ■追記: オブジェクト指向を導入した書き方
68
+
69
+
70
+
71
+ これ系の「初期値は違うけど同じロジックで動くたくさんのオブジェクト」は、オブジェクト指向を使うとさっぱり書けることが多いです。
72
+
73
+
74
+
75
+ ```javascript
76
+
77
+ class MovingLi {
78
+
79
+ constructor(selector, movement) {
80
+
81
+ this.element = $(selector);
82
+
83
+ this.movement = movement;
84
+
85
+ }
86
+
87
+ move () {
88
+
89
+ let posLeft = parseFloat(this.element.css('left'));
90
+
91
+ let posTop = parseFloat(this.element.css('top'));
92
+
93
+ posLeft += this.movement.x;
94
+
95
+ posTop += this.movement.y;
96
+
97
+ if(posLeft < 0 || posLeft + this.element.width() > window.innerWidth){
98
+
99
+ this.movement.x *= -1;
100
+
101
+ }
102
+
103
+ if(posTop < 0 || posTop + this.element.height() > window.innerHeight){
104
+
105
+ this.movement.y *= -1;
106
+
107
+ }
108
+
109
+ this.element.css({left:posLeft, top:posTop});
110
+
111
+ }
112
+
113
+ }
114
+
115
+
116
+
117
+ $(function () {
118
+
119
+ const movingLiArray = [
120
+
121
+ new MovingLi('.maru01', {x:9, y:2}),
122
+
123
+ new MovingLi('.maru02', {x:-2, y:9}),
124
+
125
+ new MovingLi('.maru03', {x:9, y:-2}),
126
+
127
+ new MovingLi('.maru04', {x:7, y:4})
128
+
129
+ ];
130
+
131
+ function redraw () {
132
+
133
+ movingLiArray.forEach(movingLi => movingLi.move());
134
+
135
+ }
136
+
137
+ setInterval(redraw, 60);
138
+
139
+ });
140
+
141
+ ```