下に行くとマウスを最後まで追いかけないというエラー

実現したいこと

サイトのように、範囲を決めて、マウスを追いかけ、クリックで画像がランダムに表示され、一定枚数で、すべてが消滅する繰り返し処理を実現したい。

発生している問題・分からないこと

基本的には、マウスをイラストが追いかけるのだが、下の方に行くと追いかけなくなり、また、画像がランダムに表示されるが、一回出現したものが再び出現してしまう。

エラーメッセージ

error
1うまく処理が行われません

該当のソースコード

Html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <title>カーソル追従イラストとランダム画像</title>
7    <style>
8        body {
9            margin: 0;
10            position: relative;
11            height: 200vh;
12            width: 100%;
13            background-color: #e97d7d;
14        }
15
16        #hero {
17            width: 100vw;
18            height: 120vh;
19            background-color: rgb(129, 125, 236);
20            margin-top: 0;
21            position: absolute;
22        }
23
24
25        .illustration {
26            position: absolute;
27            pointer-events: none;
28            will-change: transform;
29            z-index: 5;
30            display: none;
31        }
32
33        .active {
34            display: block;
35        }
36
37        .random-image {
38            position: absolute;
39            transition: opacity 0.5s linear;
40            opacity: 1;
41        }
42
43        * {
44            outline: 2px solid red;
45        }
46    </style>
47</head>
48
49
50<body>
51    <img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
52    <div id="hero">
53
54    </div>
55
56    <script>
57
58        var mouseX = window.innerWidth / 2;
59        var mouseY = window.innerHeight / 2;
60        var illustrationX = mouseX;
61        var illustrationY = mouseY;
62
63        const illustration = document.querySelector(".illustration");
64
65        illustration.onload = function () {
66   
67
68            illustrationX = mouseX;
69            illustrationY = mouseY;
70
71            updateIllustration();
72        
73        };
74
75
76        // 遅延付きでイラストの位置を更新★
77        function updateIllustration() {
78            var dx = mouseX - illustrationX;
79            var dy = mouseY - illustrationY;
80
81
82            var delayFactor = 0.1;
83            // 遅延の調整
84
85            illustrationX += dx * delayFactor;
86            illustrationY += dy * delayFactor;
87
88
89            illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)';
90
91
92            requestAnimationFrame(updateIllustration);
93
94        }
95
96
97
98        // マウス位置の更新
99        document.addEventListener('mousemove', onMouseMove);
100
101
102        function onMouseMove(event) {
103            mouseX = event.clientX;
104            mouseY = event.clientY;
105 
106
107        }
108
109
110
111
112
113
114
115        hero.addEventListener('mouseover', () => handlerMouseStoker(true));
116        hero.addEventListener('mouseout', () => handlerMouseStoker(false));
117
118        function handlerMouseStoker(isActive) {
119            illustration.classList.toggle('active', isActive);
120        }
121
122
123
124
125
126        // 画像を管理する配列
127        var imagesArray = [];
128
129        // クリック回数をカウントする変数
130        var clickCounter = 0;
131        var maxClicks = 6; // 6回目のクリック後に画像がフェードアウト
132
133        // ランダム画像のURL配列
134        var randomImages = [
135            'https://via.placeholder.com/100x100/ff0000/ffffff?text=1',
136            'https://via.placeholder.com/100x100/00ff00/ffffff?text=2',
137            'https://via.placeholder.com/100x100/0000ff/ffffff?text=3',
138            'https://via.placeholder.com/100x100/ffff00/ffffff?text=4',
139            'https://via.placeholder.com/100x100/00ffff/ffffff?text=5'
140        ];
141
142
143        // クリック時にランダム画像を生成
144        document.addEventListener('click', onClick);
145
146        function onClick(event) {
147            clickCounter++; // クリックカウンターを増加
148
149            var randomImage = document.createElement('img');
150            var randomIndex = Math.floor(Math.random() * randomImages.length);
151            randomImage.src = randomImages[randomIndex];
152            randomImage.classList.add('random-image');
153            randomImage.style.opacity = 1;
154            document.body.appendChild(randomImage);
155
156            // 画像の読み込み後に位置を設定
157            randomImage.onload = function () {
158                randomImage.style.left = (mouseX - randomImage.width / 2) + 'px';
159                randomImage.style.top = (mouseY - randomImage.height / 2) + 'px';
160            };
161
162            // 画像を配列に追加
163            imagesArray.push(randomImage);
164
165            // 6回目のクリック後に全ての画像をフェードアウト
166            if (clickCounter === maxClicks) {
167                imagesArray.forEach(function (image) {
168                    image.style.opacity = 0;
169                    // フェードアウト後にDOMから削除
170                    image.addEventListener('transitionend', function () {
171                        if (image.parentNode) {
172                            image.parentNode.removeChild(image);
173                        }
174                    });
175                });
176                // 配列をクリア
177                imagesArray = [];
178                // クリックカウンターをリセット
179                clickCounter = 0;
180            }
181        }
182    </script>
183</body>
184
185</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

display:noneとblockの切り替えがうまくいっていないようにも思われるが分かりません。

補足

特になし

Lhankor_Mhy

2024/09/26 07:13

重複質問、マルチポスト。 https://teratail.com/questions/l5d27100zipt4x#reply-dyq901o5dn6vwc https://qiita.com/codeazuki/questions/dadc116cbe4d631697aa https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10304520465

TakaiY

2024/09/26 07:34

マルチに反応するのもあれですが >下の方に行くと追いかけなくなりこの「下の方」とは具体的にどういう領域ですか？画面の半分より下？ > 一回出現したものが再び出現してしまうたった5つの画像をランダムに表示しているだけなので、同じものが複数出るのはあたりまえと思いますが、どうしたいのですか？

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

回答1件

ベストアンサー

ざっくりリファクタリングしときました
実際には使ってないソースが残っているかもしれませんが、あしからず

html
1<style>
2body {
3margin: 0;
4position: relative;
5height: 200vh;
6width: 100%;
7background-color: #e97d7d;
8}
9#hero {
10width: 100vw;
11height: 120vh;
12background-color: rgb(129, 125, 236);
13margin-top: 0;
14position: absolute;
15}
16.illustration {
17position: absolute;
18pointer-events: none;
19will-change: transform;
20z-index: 5;
21}
22.random-image {
23position: absolute;
24transition: opacity 0.5s linear;
25opacity: 1;
26}
27* {
28outline: 2px solid red;
29}
30</style>
31<script>
32window.addEventListener('DOMContentLoaded', ()=>{
33  const mouse={X:window.innerWidth / 2,Y:window.innerHeight};
34  const illust={X:mouse.X,Y:mouse.Y,elem:document.querySelector(".illustration")};
35  illust.elem.setAttribute('hidden',1);
36  illust.X = mouse.X;
37  illust.Y = mouse.Y;
38  const updateIllustration=()=>{
39    let dx = mouse.X - illust.X;
40    let dy = mouse.Y - illust.Y;
41    let delayFactor = 0.1;
42    illust.X += dx * delayFactor;
43    illust.Y += dy * delayFactor;
44    illust.elem.style.transform = 'translate(' + (illust.X - illust.elem.width / 2) + 'px, ' + (illust.Y - illust.elem.height / 2) + 'px)';
45    requestAnimationFrame(updateIllustration);
46  }
47  updateIllustration();
48  document.addEventListener('mousemove',e=>{
49    illust.elem.removeAttribute('hidden');
50    const orgY = document.body.getBoundingClientRect().top;
51    const r = e.target.getBoundingClientRect();
52    mouse.X = e.offsetX + r.left;
53    mouse.Y = e.offsetY + r.top - orgY;
54  });
55  const maxClicks = 6;
56  const randomImages = [
57    'https://via.placeholder.com/100x100/ff0000/ffffff?text=1',
58    'https://via.placeholder.com/100x100/00ff00/ffffff?text=2',
59    'https://via.placeholder.com/100x100/0000ff/ffffff?text=3',
60    'https://via.placeholder.com/100x100/ffff00/ffffff?text=4',
61    'https://via.placeholder.com/100x100/00ffff/ffffff?text=5'
62    ].map(x=>Object.assign(document.createElement('img'),{src:x,className:'random-image'}));
63  document.addEventListener('click',()=>{
64    const clickCounter=document.querySelectorAll('.random-image').length;
65    if (clickCounter < maxClicks-1) {
66      const randomIndex = Math.floor(Math.random() * randomImages.length);
67      const randomImage = randomImages[randomIndex].cloneNode(true);
68      randomImage.style.left = `${mouse.X - randomImage.width  / 2}px`;
69      randomImage.style.top  = `${mouse.Y - randomImage.height / 2}px`;
70      document.body.appendChild(randomImage);
71    }else{
72      document.querySelectorAll('.random-image').forEach(image=>{
73        image.style.opacity = 0;
74        image.addEventListener('transitionend',()=>{
75          image.remove();
76        });
77      });
78    }
79  });
80});
81</script>
82<img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
83<div id="hero"></div>