Q&A
自身が書いたコードがなく「基礎を理解しきれていない」という後書き
アドバイスを得るのは難しいのではないでしょうか。
まずは基礎を十分に理解できてから。
コピペツギハギでは動かないのは当然でしょうし、得られた回答を理解できないままではアドバイスも無駄になります。
JavaScript触りたての入門者です。未熟な質問ですみません。
やりたいこと
色んなサイトを参考にしながら、「犬がアニメーションしながらついてくるマウスストーカー」をつくりました。
プログラミングはじめて間もないのでメモ多くてすみません...。
JavaScript
1<div class="oiinu"> 2 <script type="text/javascript"> 3 4 (function (){ 5 6 var inuspd = 110; //犬の速さ 7 var fld2="INU/"; //ファイルパス 8 9 var inuG=[]; 10 inuG[0]="mati2.png"; 11 inuG[1]="mati2."; 12 inuG[4]="up1.png"; 13 inuG[5]="up2.png"; 14 inuG[6]="down1.png"; 15 inuG[7]="down2.png"; 16 inuG[16]="left1.png"; 17 inuG[17]="left2.png"; 18 inuG[20]="upleft1.png"; 19 inuG[21]="upleft2.png"; 20 inuG[22]="dwleft1.png"; 21 inuG[23]="dwleft2.png"; 22 inuG[24]="right1.png"; 23 inuG[25]="right2.png"; 24 inuG[28]="upright1.png"; 25 inuG[29]="upright2.png"; 26 inuG[30]="dwright1.png"; 27 inuG[31]="dwright2.png"; 28 inuG[32]="awake.png"; 29 inuG[33]="pata2.png"; 30 inuG[34]="kaki1.png"; 31 inuG[35]="kaki2.png"; 32 inuG[36]="sleep1.png"; 33 inuG[37]="sleep2.png"; 34 inuG[38]="mati3.png"; 35 36 var load=new Array(); //画像先読み込み 37 for (var i=0;i<=38;i++){load[i]=new Image();load[i].src=fld2+inuG[i];} 38 document.write('<img src="" id="jsinu" style="position:absolute;width:110px;height:110px;">'); 39 40 var IID=0,IID2=0; 41 var MX = 150, MY = 150; //マウスカーソルの位置 42 var IX = 0, IY = 0; //犬の左上位置 43 var ICYCLE = 250; //犬の移動周期(ms) 44 45 //犬の移動量 46 var IS = 20 47 var IS2 = IS*IS; 48 var IS_2 = IS >> 1; 49 50 var IA = 1; //アニメーションフラグ 51 var BI = 0; //一つ前に犬がしてたこと 52 /* 53 ２進数 54 Ｙ軸 移動無し 00 55 上 10 56 下 11 57 Ｘ軸 移動無し 00?? 58 左 10?? 59 右 11?? 60 */ 61 document.onmousemove=function (e){MX = e.pageX; MY = e.pageY;} 62 63 /*--------------------------------------犬アニメーション--------------------------------------------*/ 64 function inumove(){ 65 var DX = MX - IX; 66 var DY = MY - IY; 67 var DX2 = DX*DX; 68 var DY2 = DY*DY; 69 DX2 = ( DX2 == 0 && DY2 == 0 ) ? 1 : DX2; 70 var XF = (DX < 0 ) ? -1 : 1; 71 var YF = (DY < 0 ) ? -1 : 1; 72 73 //移動量 74 if ( DX2 + DY2 < IS2 ){ 75 var IDX = DX; 76 var IDY = DY; 77 } else { 78 var IDX = XF*Math.ceil(Math.sqrt(IS2*DX2/(DX2+DY2))); 79 var IDY = YF*Math.ceil(Math.sqrt(IS2*DY2/(DX2+DY2))); 80 } 81 82 if ( IDX == 0 && IDY == 0 ) { //移動が無い場合 83 clearInterval(IID); 84 inustop(); 85 } else { //移動する 86 var Idirect = 0; 87 if ( IDY < 0 && IDY + IS_2 <= 0) Idirect += 2 88 else if ( IDY > 1 && IDY - IS_2 >= 0) Idirect += 3; 89 if ( IDX < 0 && IDX + IS_2 <= 0) Idirect += 8 90 else if ( IDX > 1 && IDX - IS_2 >= 0) Idirect += 12; 91 92 IA = ( IA == 0 ) ? 1 : 0; 93 BI = Idirect; 94 chimg((Idirect<<1)+IA); 95 IX += IDX; 96 IY += IDY; 97 jsinu.style.left = IX - 16+"px"; 98 jsinu.style.top = IY - 35+"px"; 99 } // else 100 } //inumove 101 102 function chimg(num){jsinu.src =fld2+inuG[num];} 103 /*--------------------------------ストップ---------------------------*/ 104 function inustop(){ 105 IA = 0; 106 chimg(0); 107 OLDMX = MX; 108 OLDMY = MY; 109 IA = 0; 110 IPC = 0; 111 IID2 = setTimeout(inupata,ICYCLE*5); 112 //setTimeout(関数function, 一定時間の指定[, 引数1, 引数2, …]) 一定時間後に処理をおこなう 113 mousecheck(); 114 } 115 /*--------------------------------耳パタパタ------------------------*/ 116 function inupata(){ 117 IPC++; 118 clearTimeout(IID2); 119 if ( IPC <= 10 ) { 120 if ( IPC & 1 == 1 ) chimg(33) 121 else chimg(0); 122 IID2 = setTimeout(inupata,ICYCLE>>1); 123 } else { 124 IKC = 0; 125 IID2 = setTimeout(inukai,ICYCLE); 126 } 127 mousecheck(); 128 } 129 /*-------------------------------カイカイ---------------------------*/ 130 function inukai(){ 131 IKC++; 132 clearTimeout(IID2); 133 if ( IKC <= 8 ) { 134 if ( IKC & 1 == 1 ) chimg(34) 135 else chimg(35); 136 IID2 = setTimeout(inukai,ICYCLE>>1); 137 } else { 138 IID2 = setTimeout(inuakubi,ICYCLE); 139 } 140 mousecheck(); 141 } 142 /*---------------------------------あくび---------------------------*/ 143 function inuakubi(){ 144 clearTimeout(IID2); 145 chimg(38); 146 IZC = 0; 147 IID2 = setTimeout(inuzzz,ICYCLE<<2); 148 mousecheck(); 149 } 150 /*--------------------------寝る------------------------------------*/ 151 function inuzzz(){ 152 IZC++; 153 clearTimeout(IID2); 154 if ( IZC & 1 == 1 ) chimg(36) 155 else chimg(37); 156 IID2 = setTimeout(inuzzz,ICYCLE<<1); 157 mousecheck(); 158 } 159 160 /*--------------------------起きる----------------------------------*/ 161 function mousecheck(){ 162 if ( OLDMX != MX || OLDMY != MY ) { 163 clearTimeout(IID2); 164 clearInterval(IID); 165 inustart(); 166 } 167 } 168 IID2=setTimeout("" ,0); 169 170 function inustart(){ 171 clearTimeout(IID2); 172 chimg(32); 173 IID = setInterval(inumove,inuspd);//即時関数にする 174 IID2 = setTimeout(IID,ICYCLE*6); //即時関数にする 175 } 176 inustart(); 177 }());//即時関数終了 178 179 </script> 180 </div>
この犬のマウスストーカーを、
おいで！ボタン
<button id="addbutton">おいで！</button>) を一回クリックすると犬が１匹増え、
またね！ボタン
<button id="removebutton">またね！</button> で１匹減る、という風にしたいのですが、具体的にどうしたらよいのか分からず、行き詰まっています...よい方法はないか、教えていただけませんか。
###わからないこと
html
1 <button id="addbutton">おいで！</button> 2 3 <script> 4 var addbutton = document.getElementById("addbutton"); 5 addbutton.addEventListener("click", function(){
この先どうしたらよいのか困っています。
###環境
dream weaver2021を使っていて、ブラウザはSafariやChromeです。
どうか、よろしくお願いします。
現状「やりたいこと」しか書かれていないことにお気づきでしょうか。
ん－。
これだと「ちょっとなおして」とかいうレベルにならないんじゃないでしょうか・・・。
まず
参考にした先：http://oekakirenn.webcrow.jp/mouse/e4/mouse_e4.html
が古い。2016年1月最終更新、SSL対応してない、など。
利用しているブラウザ、想定のブラウザにもよるかもしれませんが、
document.write()を利用している点からも安全な実装ではないです。
動かないことはないでしょうけど、自身がやりたいことをやるためには、
この参考先のコードをきちんと理解していないことには始まらないと思います。
コメントありがとうございます。ひどい質問をして本当に申し訳ありませんでした。大幅修正しました。
JavaScriptに関しては参考先のコードの内容を何とか理解できているだけの状態なのでぐうの字も出ません。
学校の課題で作っていて、作品の一部の要素として私のMacの中だけで動けば十分なので安全性は気にしていないんです...。今のところ問題なく動いているので、とりあえずいいかなと...
本当に時間がないため、せめてここだけはというところを藁にもすがる思いで質問してしまいました。
質問することは悪いとは思いません。
ただ、焦って飛ばしたところで「書いたとおりにしか動かないプログラム」において
それで進むわけがなく、1歩1歩積み重ねていくしかないということ。
何かを参考にすることは悪いことではないです。
それが自分のものにならなければ作ろうとしているものが（言い方悪いけど）ゴミになる、だけの話。
課題である場合、作ったコードの意図を説明できなければ評価はされないと思いますよ。
ベストアンサーの方がとても分かりやすいサンプルを作ってくださったので、自力で「またね」まで実装することができました！
回答1件
0
ベストアンサー
こんにちは。
とりあえず、「おいで」の方のサンプルを示します。
概要としては以下の通りです。
- 即時関数は再利用できないので、名前を付けました。
- idは一意的なので、犬画像での使用をやめました。代わりにエレメントを変数で保持しました。
- document.write() は非推奨なので、ここでは template 要素を使いました。
- onmousemove では複数のイベントリスナを設定できないので、document.addEventListener() に変更しました。
js
1<div class="oiinu"> 2 3<!-- ここから追加 --> 4 <template id="jsinu"> 5 <img src="" style="position:absolute;width:110px;height:110px;"> 6 </template> 7<!-- ここまで --> 8 9 <script type="text/javascript"> 10 11// (function (){ 12 function inu() { 13 14// 略 15 16// document.write('<img src="" id="jsinu" style="position:absolute;width:110px;height:110px;">'); 17 var jsinu = document.getElementById('jsinu').content.querySelector('img').cloneNode(true); 18 document.body.insertAdjacentElement('beforeend', jsinu); 19 20// 略 21 22// document.onmousemove=function (e){MX = e.pageX; MY = e.pageY;} 23 document.addEventListener( 'mousemove', function (e) { MX = e.pageX; MY = e.pageY; } ); 24 25 26// 略 27 28// }());//即時関数終了 29 };//即時関数終了 30 </script> 31 </div> 32 33<!-- ここから追加 --> 34 <button id="addbutton">おいで！</button> 35 <script> 36 var addbutton = document.getElementById("addbutton"); 37 addbutton.addEventListener("click", inu); 38 </script> 39<!-- ここまで -->
投稿2021/01/13 05:12
総合スコア36115
うまく動かなかった理由がわかって、感動しています(涙)おかげで、「またね」の方も作ることができました...！
悩みに悩んでこの質問を投稿した時、私の知識が無さすぎてガチめに怒られてしまいとても落ち込んでいたので、貴方様が神様にしか見えません。泣きました。まさかサンプルまでいただけるとは...。とても嬉しいです。
貴重なお時間を回答に割いていただいて、ありがとうございました...！！！
どういたしまして。
この状態から「またね」の方を自力で実装できるのであれば、すぐにJavaScriptに習熟できるのではないかと思います。
偉そうに言いながら、私も初心者と大して変わらないアマグラマなので、お互い頑張りましょう。
あなたの回答
tips
プレビュー
