javascriptで今現在、見える画面上だけにランダムな位置にイメージを表示させたいです。

###前提・実現したいこと
横幅100%,縦幅100vhのareaの中にクリックする度にイメージをランダム表示させたいです。（どんなデバイスで見てもそのデバイスの横幅、縦幅に合わせてランダムに出せるために100%,100vhにしました。）
スクロールもなくし、あくまでデバイスで見える領域上に全てのイメージが収まって、かつ、ランダムに散らばっていくことが理想です。

###発生している問題・エラーメッセージ
javascriptでclientHeightで縦の幅を取ってます。
そして、overflow:hidden;で範囲外は見えないようにしてます。
teratailで似た質問があって応用してやってみたのですが、ランダムに出る数値が見える範囲に収まらない数値で出てデベロッパーツールでは見えて、通常の画面では見えなかったりしています。
ランダム値を出す範囲設定ができない、どうすれば範囲内に収まったランダム値が出せるのかいまいち分からないです。
ランダムの部分に関しては理解が足りない状態ですが、何かご教授いただけたら幸いです。
何卒宜しくお願い申し上げます。

###該当のソースコード

html
1<body>
2      
3    <div id = "area">
4    </div>
5   
6</body>

css
1body {
2    text-align: center;
3    overflow: hidden;
4    line-height: 1;
5    background-image: url(img/texture03.jpg);
6    background-position: center center;
7    background-repeat: no-repeat;
8    background-attachment: fixed;
9    background-size: cover;
10}
11
12div{
13    display: inline-block;
14}
15
16#area{
17    width: 100%;
18    height: 100vh;
19    display: flex;
20    align-items: center;
21    flex-direction: column;
22}
23

javascript
1var ch = document.getElementById("area").clientHeight;
2console.log(ch);
3
4function setRandomLeft(imageWidth) {
5    return (Math.random() * (document.getElementById("area").clientWidth - imageWidth));
6}
7
8function setRandomTop(imageHeight) {
9    return (Math.random() * (document.getElementById("area").clientHeight - imageHeight));
10}
11
12document.getElementById("start").addEventListener("click", function () {
13var image = document.createElement("img");
14    image.src = "img/neko00.png";
15    image.style.position = "relative";
16    
17    var rT = setRandomTop("150");
18    var rL = setRandomLeft("150");
19   
20    image.style.top = rT+"px";
21    image.style.left = rL+"px";
22}

行動規範の内容に同意します

回答1件

ベストアンサー

おおよそこんな感じになりそうです。適宜修正・改変してみてください。
startが見当たらなかったのでareaをクリックしたらランダムに表示する形にしています。

昔の構文に変換する場合 → https://babeljs.io/repl/

ランダムな数値を返す関数は1つでよい（引数の使い方で最小値、最大値を指定できる）
位置の範囲はareaの幅・高さから画像の幅・高さをそれぞれ引く必要がある。

参考：Math.random()（ここに掲載されているmin から max までの乱整数を返す関数をそのまま流用しています）

css
1body {
2    text-align: center;
3    overflow: hidden;
4    line-height: 1;
5    background-color: #DDD;
6    background-position: center center;
7    background-repeat: no-repeat;
8    background-attachment: fixed;
9    background-size: cover;
10}
11
12div{
13    display: inline-block;
14}
15
16#area{
17    width: 100%;
18    height: 100vh;
19}
20

javascript
1class RandomImg {
2  constructor() {
3    this.area = document.getElementById('area');
4    // ランダム表示する画像の幅・高さの定義
5    this.imageHeight = 100;
6    this.imageWidth = 200;
7    
8    this.bindEvent();
9  }
10  bindEvent() {
11    this.area.addEventListener('click', () => {
12      this.displayImage();
13    });
14  }
15  getRandomInt(min, max) {
16    return Math.floor(Math.random() * (max - min + 1)) + min;
17  }
18  displayImage() {
19    const image = document.createElement('img'),
20      { clientWidth, clientHeight } = this.area,
21      { imageWidth, imageHeight } = this,
22      /* topの範囲は 0 ~ (areaの高さ - ランダム表示する画像の高さ)*/
23      top = this.getRandomInt(0, clientHeight - imageHeight),
24      /* leftの範囲は 0 ~ (areaの幅 - ランダム表示する画像の幅)*/
25      left = this.getRandomInt(0, clientWidth - imageWidth);
26
27    image.src = 'sample.jpg';
28    image.style.position = 'absolute';
29    image.style.top = top + 'px';
30    image.style.left = left + 'px';
31
32    this.area.appendChild(image);
33  }
34};
35
36new RandomImg();