teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JavaScript　ボタンクリックでマウスストーカーの数を増やしたい

編集履歴

質問編集履歴

16

文法の修正

2021/01/13 13:03

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -400,7 +400,7 @@
400
400
 
401
401
  ```
402
402
 
403
- この先どうしたらよいのか困っています。append？を使うのでしょうか。
403
+ この先どうしたらよいのか困っています。
404
404
 
405
405
 
406
406
 

15

文法の修正

2021/01/13 13:03

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -130,11 +130,11 @@
130
130
 
131
131
  */
132
132
 
133
- document.onmousemove=function (e){MX = e.pageX; MY = e.pageY;} //マウスカーソル位置を取得
133
+ document.onmousemove=function (e){MX = e.pageX; MY = e.pageY;}
134
-
135
-
136
-
134
+
135
+
136
+
137
- /*--------------------------------------犬を動かす--------------------------------------------*/
137
+ /*--------------------------------------犬アニメーション--------------------------------------------*/
138
138
 
139
139
  function inumove(){　　
140
140
 

14

文法の修正

2021/01/13 01:02

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -400,7 +400,7 @@
400
400
 
401
401
  ```
402
402
 
403
- この先どうしたらよいのか困っています。
403
+ この先どうしたらよいのか困っています。append？を使うのでしょうか。
404
404
 
405
405
 
406
406
 
@@ -408,4 +408,4 @@
408
408
 
409
409
  dream weaver2021を使っていて、ブラウザはSafariやChromeです。
410
410
 
411
- どうぞよろしくお願いします。
411
+ どうか、よろしくお願いします。

13

書式の改善

2021/01/13 01:01

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -401,3 +401,11 @@
401
401
  ```
402
402
 
403
403
  この先どうしたらよいのか困っています。
404
+
405
+
406
+
407
+ ###環境
408
+
409
+ dream weaver2021を使っていて、ブラウザはSafariやChromeです。
410
+
411
+ どうぞよろしくお願いします。

12

書式の改善

2021/01/13 00:38

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -380,7 +380,7 @@
380
380
 
381
381
  またね！ボタン
382
382
 
383
- <button id="removebutton">またね！</button>　で１匹減る、という風にしたいのですが、行き詰まっています...何かよい方法はないでしょうか...
383
+ <button id="removebutton">またね！</button>　で１匹減る、という風にしたいのですが、具体的にどうしたらよいのか分からず、行き詰まっています...よい方法はないか、教えていただけませんか。
384
384
 
385
385
 
386
386
 

11

書式の改善

2021/01/13 00:25

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -381,3 +381,23 @@
381
381
  またね！ボタン
382
382
 
383
383
  <button id="removebutton">またね！</button>　で１匹減る、という風にしたいのですが、行き詰まっています...何かよい方法はないでしょうか...
384
+
385
+
386
+
387
+ ###わからないこと
388
+
389
+ ```html
390
+
391
+ 　　　<button id="addbutton">おいで！</button>
392
+
393
+
394
+
395
+ <script>
396
+
397
+ var addbutton = document.getElementById("addbutton");
398
+
399
+ addbutton.addEventListener("click", function(){
400
+
401
+ ```
402
+
403
+ この先どうしたらよいのか困っています。

10

文法の修正

2021/01/13 00:23

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -2,14 +2,382 @@
2
2
 
3
3
  ### やりたいこと
4
4
 
5
- こちらのサイト
6
-
7
- [リンク:追いかけニャンコ](http://oekakirenn.webcrow.jp/mouse/e4/mouse_e4.html)　のマウスストーカーのネコちゃんを、ボタンクリックで増やす仕組みを作り、マウスを追いかけるネコちゃんの大群を作ってみたいのです。
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
- おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増える、という風にしたくて試行錯誤したのですが、行き詰まってしまいました。要素の複製がうまくいきません。何かよい方法はないでしょうか...。
5
+ 色んなサイトを参考にしながら、「犬がアニメーションしながらついてくるマウスストーカー」をつくりました。
6
+
7
+ プログラミングはじめて間もないのでメモ多くてすみません...。
8
+
9
+
10
+
11
+ ```JavaScript
12
+
13
+ <div class="oiinu">
14
+
15
+ <script type="text/javascript">
16
+
17
+
18
+
19
+ (function (){
20
+
21
+
22
+
23
+ var inuspd = 110; //犬の速さ
24
+
25
+ var fld2="INU/"; //ファイルパス
26
+
27
+
28
+
29
+ var inuG=[];
30
+
31
+ inuG[0]="mati2.png";
32
+
33
+ inuG[1]="mati2.";
34
+
35
+ inuG[4]="up1.png";
36
+
37
+ inuG[5]="up2.png";
38
+
39
+ inuG[6]="down1.png";
40
+
41
+ inuG[7]="down2.png";
42
+
43
+ inuG[16]="left1.png";
44
+
45
+ inuG[17]="left2.png";
46
+
47
+ inuG[20]="upleft1.png";
48
+
49
+ inuG[21]="upleft2.png";
50
+
51
+ inuG[22]="dwleft1.png";
52
+
53
+ inuG[23]="dwleft2.png";
54
+
55
+ inuG[24]="right1.png";
56
+
57
+ inuG[25]="right2.png";
58
+
59
+ inuG[28]="upright1.png";
60
+
61
+ inuG[29]="upright2.png";
62
+
63
+ inuG[30]="dwright1.png";
64
+
65
+ inuG[31]="dwright2.png";
66
+
67
+ inuG[32]="awake.png";
68
+
69
+ inuG[33]="pata2.png";
70
+
71
+ inuG[34]="kaki1.png";
72
+
73
+ inuG[35]="kaki2.png";
74
+
75
+ inuG[36]="sleep1.png";
76
+
77
+ inuG[37]="sleep2.png";
78
+
79
+ inuG[38]="mati3.png";
80
+
81
+
82
+
83
+ var load=new Array();　//画像先読み込み
84
+
85
+ for (var i=0;i<=38;i++){load[i]=new Image();load[i].src=fld2+inuG[i];}
86
+
87
+ document.write('<img src="" id="jsinu" style="position:absolute;width:110px;height:110px;">');
88
+
89
+
90
+
91
+ var IID=0,IID2=0;
92
+
93
+ var MX = 150, MY = 150; //マウスカーソルの位置
94
+
95
+ var IX = 0, IY = 0; //犬の左上位置
96
+
97
+ var ICYCLE = 250; //犬の移動周期(ms)
98
+
99
+
100
+
101
+ //犬の移動量
102
+
103
+ var IS = 20
104
+
105
+ var IS2 = IS*IS;
106
+
107
+ var IS_2 = IS >> 1;
108
+
109
+
110
+
111
+ var IA = 1; //アニメーションフラグ
112
+
113
+ var BI = 0; //一つ前に犬がしてたこと
114
+
115
+ /*
116
+
117
+ ２進数
118
+
119
+ Ｙ軸 移動無し 00
120
+
121
+ 上 10
122
+
123
+ 下 11
124
+
125
+ Ｘ軸 移動無し 00??
126
+
127
+ 左 10??
128
+
129
+ 右 11??
130
+
131
+ */
132
+
133
+ document.onmousemove=function (e){MX = e.pageX; MY = e.pageY;} //マウスカーソル位置を取得
134
+
135
+
136
+
137
+ /*--------------------------------------犬を動かす--------------------------------------------*/
138
+
139
+ function inumove(){　　
140
+
141
+ var DX = MX - IX;
142
+
143
+ var DY = MY - IY;
144
+
145
+ var DX2 = DX*DX;
146
+
147
+ var DY2 = DY*DY;
148
+
149
+ DX2 = ( DX2 == 0 && DY2 == 0 ) ? 1 : DX2;
150
+
151
+ var XF = (DX < 0 ) ? -1 : 1;
152
+
153
+ var YF = (DY < 0 ) ? -1 : 1;
154
+
155
+
156
+
157
+ //移動量
158
+
159
+ if ( DX2 + DY2 < IS2 ){
160
+
161
+ var IDX = DX;
162
+
163
+ var IDY = DY;
164
+
165
+ } else {
166
+
167
+ var IDX = XF*Math.ceil(Math.sqrt(IS2*DX2/(DX2+DY2)));
168
+
169
+ var IDY = YF*Math.ceil(Math.sqrt(IS2*DY2/(DX2+DY2)));
170
+
171
+ }
172
+
173
+
174
+
175
+ if ( IDX == 0 && IDY == 0 ) { //移動が無い場合
176
+
177
+ clearInterval(IID);
178
+
179
+ inustop();
180
+
181
+ } else { //移動する
182
+
183
+ var Idirect = 0;
184
+
185
+ if ( IDY < 0 && IDY + IS_2 <= 0) Idirect += 2
186
+
187
+ else if ( IDY > 1 && IDY - IS_2 >= 0) Idirect += 3;
188
+
189
+ if ( IDX < 0 && IDX + IS_2 <= 0) Idirect += 8
190
+
191
+ else if ( IDX > 1 && IDX - IS_2 >= 0) Idirect += 12;
192
+
193
+
194
+
195
+ IA = ( IA == 0 ) ? 1 : 0;
196
+
197
+ BI = Idirect;
198
+
199
+ chimg((Idirect<<1)+IA);
200
+
201
+ IX += IDX;
202
+
203
+ IY += IDY;
204
+
205
+ jsinu.style.left = IX - 16+"px";
206
+
207
+ jsinu.style.top = IY - 35+"px";
208
+
209
+ } // else
210
+
211
+ } //inumove
212
+
213
+
214
+
215
+ function chimg(num){jsinu.src =fld2+inuG[num];}
216
+
217
+ /*--------------------------------ストップ---------------------------*/
218
+
219
+ function inustop(){
220
+
221
+ IA = 0;
222
+
223
+ chimg(0);
224
+
225
+ OLDMX = MX;
226
+
227
+ OLDMY = MY;
228
+
229
+ IA = 0;
230
+
231
+ IPC = 0;
232
+
233
+ IID2 = setTimeout(inupata,ICYCLE*5);
234
+
235
+ //setTimeout(関数function, 一定時間の指定[, 引数1, 引数2, …]) 一定時間後に処理をおこなう
236
+
237
+ mousecheck();
238
+
239
+ }
240
+
241
+ /*--------------------------------耳パタパタ------------------------*/
242
+
243
+ function inupata(){
244
+
245
+ IPC++;
246
+
247
+ clearTimeout(IID2);
248
+
249
+ if ( IPC <= 10 ) {
250
+
251
+ if ( IPC & 1 == 1 ) chimg(33)
252
+
253
+ else chimg(0);
254
+
255
+ IID2 = setTimeout(inupata,ICYCLE>>1);
256
+
257
+ } else {
258
+
259
+ IKC = 0;
260
+
261
+ IID2 = setTimeout(inukai,ICYCLE);
262
+
263
+ }
264
+
265
+ mousecheck();
266
+
267
+ }
268
+
269
+ /*-------------------------------カイカイ---------------------------*/
270
+
271
+ function inukai(){
272
+
273
+ IKC++;
274
+
275
+ clearTimeout(IID2);
276
+
277
+ if ( IKC <= 8 ) {
278
+
279
+ if ( IKC & 1 == 1 ) chimg(34)
280
+
281
+ else chimg(35);
282
+
283
+ IID2 = setTimeout(inukai,ICYCLE>>1);
284
+
285
+ } else {
286
+
287
+ IID2 = setTimeout(inuakubi,ICYCLE);
288
+
289
+ }
290
+
291
+ mousecheck();
292
+
293
+ }
294
+
295
+ /*---------------------------------あくび---------------------------*/
296
+
297
+ function inuakubi(){
298
+
299
+ clearTimeout(IID2);
300
+
301
+ chimg(38);
302
+
303
+ IZC = 0;
304
+
305
+ IID2 = setTimeout(inuzzz,ICYCLE<<2);
306
+
307
+ mousecheck();
308
+
309
+ }
310
+
311
+ /*--------------------------寝る------------------------------------*/
312
+
313
+ function inuzzz(){
314
+
315
+ IZC++;
316
+
317
+ clearTimeout(IID2);
318
+
319
+ if ( IZC & 1 == 1 ) chimg(36)
320
+
321
+ else chimg(37);
322
+
323
+ IID2 = setTimeout(inuzzz,ICYCLE<<1);
324
+
325
+ mousecheck();
326
+
327
+ }
328
+
329
+
330
+
331
+ /*--------------------------起きる----------------------------------*/
332
+
333
+ function mousecheck(){
334
+
335
+ if ( OLDMX != MX || OLDMY != MY ) {
336
+
337
+ clearTimeout(IID2);
338
+
339
+ clearInterval(IID);
340
+
341
+ inustart();
342
+
343
+ }
344
+
345
+ }
346
+
347
+ IID2=setTimeout("" ,0);
348
+
349
+
350
+
351
+ function inustart(){
352
+
353
+ clearTimeout(IID2);
354
+
355
+ chimg(32);
356
+
357
+ IID = setInterval(inumove,inuspd);//即時関数にする
358
+
359
+ IID2 = setTimeout(IID,ICYCLE*6); //即時関数にする
360
+
361
+ }
362
+
363
+ inustart();
364
+
365
+ }());//即時関数終了
366
+
367
+
368
+
369
+ </script>
370
+
371
+ </div>
372
+
373
+ ```
374
+
375
+ この犬のマウスストーカーを、
376
+
377
+ おいで！ボタン
378
+
379
+ <button id="addbutton">おいで！</button>)　を一回クリックすると犬が１匹増え、
380
+
381
+ またね！ボタン
382
+
383
+ <button id="removebutton">またね！</button>　で１匹減る、という風にしたいのですが、行き詰まっています...何かよい方法はないでしょうか...

9

文法の修正

2021/01/13 00:13

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -13,7 +13,3 @@
13
13
 
14
14
 
15
15
  おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増える、という風にしたくて試行錯誤したのですが、行き詰まってしまいました。要素の複製がうまくいきません。何かよい方法はないでしょうか...。
16
-
17
-
18
-
19
- 基礎を理解しきれていないのに質問して、申し訳ないです。どうか、よろしくお願いいたします。

8

文法の修正

2021/01/12 23:57

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,10 @@
1
+ JavaScript触りたての入門者です。未熟な質問ですみません。
2
+
1
3
  ### やりたいこと
2
4
 
3
5
  こちらのサイト
4
6
 
5
- [リンク:追いかけニャンコ](http://oekakirenn.webcrow.jp/mouse/e4/mouse_e4.html)　のマウスストーカーのネコちゃんを、ボタンクリックで増やす仕組みを作り、マウスを追いかけるネコちゃんの大群を作りたいです。
7
+ [リンク:追いかけニャンコ](http://oekakirenn.webcrow.jp/mouse/e4/mouse_e4.html)　のマウスストーカーのネコちゃんを、ボタンクリックで増やす仕組みを作り、マウスを追いかけるネコちゃんの大群を作ってみたいのです。
6
8
 
7
9
 
8
10
 
@@ -14,4 +16,4 @@
14
16
 
15
17
 
16
18
 
17
- フワッとした質問で申し訳ないです。初心者のため、なるべく簡単な方法だとありがたいです。どうか、よろしくお願いいたします。
19
+ 基礎を理解しきれていないのに質問して、申し訳ないです。どうか、よろしくお願いいたします。

7

文法の修正

2021/01/12 23:49

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,3 @@
1
- プログラミング初心者すぎてフワッとした質問になってしまいますが、どうかお助けください...！
2
-
3
1
  ### やりたいこと
4
2
 
5
3
  こちらのサイト
@@ -12,8 +10,8 @@
12
10
 
13
11
 
14
12
 
15
- おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増える、という風にしたいのですが、行き詰まってしまいました。何かよい方法はないでしょうか。
13
+ おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増える、という風にしたくて試行錯誤したのですが、行き詰まってしまいました。要素の複製がうまくいきません。何かよい方法はないでしょうか...。
16
14
 
17
15
 
18
16
 
19
- 初心者のため、なるべく簡単な方法だとありがたいです。どうか、よろしくお願いいたします。
17
+ フワッとした質問で申し訳ないです。初心者のため、なるべく簡単な方法だとありがたいです。どうか、よろしくお願いいたします。

6

文法の修正

2021/01/12 23:41

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -12,14 +12,8 @@
12
12
 
13
13
 
14
14
 
15
- おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増え、
15
+ おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増える、という風にしたいのですが、行き詰まってしまいました。何かよい方法はないでしょうか。
16
-
17
- またね！ボタン`<button id="removebutton">またね！</button>`でマウスストーカーが一つ減る、という風にしたいのです。
18
-
19
- おいで！ボタンを押しまくったらゾロゾロとマウスを追いかけるネコちゃんの大群ができて楽しいだろうなと...
20
16
 
21
17
 
22
18
 
23
- 要素の複製の仕方がよくわからず、自分なりに調べて試してみたのですが、結局行き詰まってしまいました。何かよい方法はないでしょうか。
24
-
25
19
  初心者のため、なるべく簡単な方法だとありがたいです。どうか、よろしくお願いいたします。

5

文法の修正

2021/01/12 23:37

投稿

mopemope
mopemope

スコア2

test CHANGED
@@ -1 +1 @@
1
- JavaScript　ボタンクリックで数が増減するマウスストーカーを作りたい！
1
+ JavaScript　ボタンクリックでマウスストーカーの数を増やしたい
test CHANGED
File without changes

4

文法の修正

2021/01/12 23:35

投稿

mopemope
mopemope

スコア2

test CHANGED
@@ -1 +1 @@
1
- ボタンクリックで数が増減するマウスストーカーを作りたい！
1
+ JavaScript　ボタンクリックで数が増減するマウスストーカーを作りたい！
test CHANGED
@@ -1,5 +1,3 @@
1
- webサイト作りのためにJavaScriptを練習しています。
2
-
3
1
  プログラミング初心者すぎてフワッとした質問になってしまいますが、どうかお助けください...！
4
2
 
5
3
  ### やりたいこと
@@ -22,8 +20,6 @@
22
20
 
23
21
 
24
22
 
25
- 具体的にどうしたらよいのかわからず、自分なりに調べて試してみたのですが、結局行き詰まってしまいました。何かよい方法はないでしょうか。
23
+ 要素の複製の仕方がよくわからず、自分なりに調べて試してみたのですが、結局行き詰まってしまいました。何かよい方法はないでしょうか。
26
-
27
-
28
24
 
29
25
  初心者のため、なるべく簡単な方法だとありがたいです。どうか、よろしくお願いいたします。

3

文法の修正

2021/01/12 23:34

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -26,4 +26,4 @@
26
26
 
27
27
 
28
28
 
29
- 初心者のため、なるべく簡単だと嬉しいです。どうか、よろしくお願いいたします。
29
+ 初心者のため、なるべく簡単な方法だとありがたいです。どうか、よろしくお願いいたします。

2

文法の修正

2021/01/12 22:35

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  またね！ボタン`<button id="removebutton">またね！</button>`でマウスストーカーが一つ減る、という風にしたいのです。
20
20
 
21
- おいで！ボタンを押しまくったらゾロゾロとマウスを追いかけるネコちゃんの大群ができて楽しいだろうな...
21
+ おいで！ボタンを押しまくったらゾロゾロとマウスを追いかけるネコちゃんの大群ができて楽しいだろうなと...
22
22
 
23
23
 
24
24
 

1

文法の修正

2021/01/12 22:34

投稿

mopemope
mopemope

スコア2

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,9 @@
14
14
 
15
15
 
16
16
 
17
- おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増え、またね！ボタン`<button id="removebutton">またね！</button>`でマウスストーカーが一つ減る、という風にしたいのです。
17
+ おいで！ボタン`<button id="addbutton">おいで！</button>)`を一回クリックすると、マウスストーカー(ネコちゃん)が一つ増え、
18
+
19
+ またね！ボタン`<button id="removebutton">またね！</button>`でマウスストーカーが一つ減る、という風にしたいのです。
18
20
 
19
21
  おいで！ボタンを押しまくったらゾロゾロとマウスを追いかけるネコちゃんの大群ができて楽しいだろうな...
20
22