回答編集履歴

4

メソッド修正

2017/02/07 16:38

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -128,7 +128,7 @@
128
128
 
129
129
 
130
130
 
131
- this.area.append(image);
131
+ this.area.appendChild(image);
132
132
 
133
133
  }
134
134
 

3

コードの修正

2017/02/07 16:38

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -80,17 +80,7 @@
80
80
 
81
81
 
82
82
 
83
- this.setAreaSize();
84
-
85
83
  this.bindEvent();
86
-
87
- }
88
-
89
- setAreaSize() {
90
-
91
- this.width = this.area.clientWidth;
92
-
93
- this.height = this.area.clientHeight;
94
84
 
95
85
  }
96
86
 
@@ -99,16 +89,6 @@
99
89
  this.area.addEventListener('click', () => {
100
90
 
101
91
  this.displayImage();
102
-
103
- });
104
-
105
-
106
-
107
- // リサイズした場合にareaの幅・高さの数値を更新する
108
-
109
- this.area.addEventListener('resize', () => {
110
-
111
- this.setAreaSize();
112
92
 
113
93
  });
114
94
 
@@ -124,15 +104,17 @@
124
104
 
125
105
  const image = document.createElement('img'),
126
106
 
107
+ { clientWidth, clientHeight } = this.area,
108
+
127
- { width, height } = this,
109
+ { imageWidth, imageHeight } = this,
128
110
 
129
111
  /* topの範囲は 0 ~ (areaの高さ - ランダム表示する画像の高さ)*/
130
112
 
131
- top = this.getRandomInt(0, height - this.imageHeight),
113
+ top = this.getRandomInt(0, clientHeight - imageHeight),
132
114
 
133
115
  /* leftの範囲は 0 ~ (areaの幅 - ランダム表示する画像の幅)*/
134
116
 
135
- left = this.getRandomInt(0, width - this.imageWidth);
117
+ left = this.getRandomInt(0, clientWidth - imageWidth);
136
118
 
137
119
 
138
120
 

2

参考リンク追加

2017/02/07 15:57

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -11,6 +11,10 @@
11
11
  - ランダムな数値を返す関数は1つでよい(引数の使い方で最小値、最大値を指定できる)
12
12
 
13
13
  - 位置の範囲はareaの幅・高さから画像の幅・高さをそれぞれ引く必要がある。
14
+
15
+
16
+
17
+ 参考:[Math.random()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)(ここに掲載されているmin から max までの乱整数を返す関数をそのまま流用しています)
14
18
 
15
19
 
16
20
 

1

シンタックスハイライト

2017/02/07 15:52

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
 
62
62
 
63
- ```js
63
+ ```javascript
64
64
 
65
65
  class RandomImg {
66
66