Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
画像を3つ表示、ボタンを５つ表示して、
1つ目のボタン→１つの画像を左右に跳ね返り移動
２→２つの画像をそれぞれ上下に跳ね返り移動、
３→3つの画像をそれぞれ好きな向きに跳ね返り移動
４→リセット
５→タイマーストップ
をしたいです。
１，４，５のボタンはできましたが、そのほかの
２，３のボタンが点滅表示や動かなかったりしてうまくできません。
助言をお願いいたします。
###発生している問題・エラーメッセージ
The key "initial" is not recognized and ignored. 284002IgarashiEri-kimatukadai2.html:5 The key "1" is not recognized and ignored. (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at <anonymous>:1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at <anonymous>:1:1 ・ ・ ・ (unknown) Uncaught ReferenceError: draw_kare is not defined at <anonymous>:1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at <anonymous>:1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at <anonymous>:1:1 ・ ・ ・ (unknown) Uncaught ReferenceError: draw_kare is not defined at <anonymous>:1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at <anonymous>:1:1 ・ ・ ・
###該当のソースコード
Javascript
1```<!doctype html> 2<html><head> 3<meta http-equiv="X-UA-Compatible" content="IE=edge"> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial=scale=1"> 6<title>プログラミング演習2</title> 7 <script> 8 //グローバル変数 9 var canvas=null; //canvas要素 10 var context=null; //グラフィックの2D描画用コンテキスト 11 var backimg=null; //背景画像 12 var hatoimg=null; //hatoの画像 13 var yasaiimg=null; //yasaiの画像 14 var kareimg=null; //kareの画像 15 var rectX=450; //x軸方向の位置 16 var rectY=150; //y軸方向の位置 17 var shiftX1=100; //x軸方向の位置（hato） 18 var shiftY1=80; //y軸方向の位置（hato） 19 var dx=7.0; //x軸方向の移動位置 20 var dy=5.0; //y軸方向の移動位置 21 var shiftX2=100; //x軸方向の位置（hato） 22 var shiftY2=250; //y軸方向の位置（hato） 23 var dx2=6.0; //x軸方向の移動位置 24 var dy2=4.0; //ｙ軸方向の移動位置 25 var shiftX3=800; //x軸方向の位置（yasai） 26 var shiftY3=30; //y軸方向の位置（yasai） 27 var dx3=8.0; //x軸方向の移動位置 28 var dy3=6.0; //ｙ軸方向の移動位置 29 var shiftX4=800; //x軸方向の位置（hato） 30 var shiftY4=300; //y軸方向の位置（hato） 31 var dx4=10.0; //x軸方向の移動位置 32 var dy4=8.0; //y軸方向の移動位置 33 var shiftX5=300; //x軸方向の位置（yasai） 34 var shiftY5=600; //y軸方向の位置（yasai） 35 var dx5=5.0; //x軸方向の移動位置 36 var dy5=6.0; //y軸方向の移動位置 37 var shiftX6=400; //x軸方向の位置（kare） 38 var shiftY6=100; //y軸方向の位置（kare） 39 var dx6=9.0; //x軸方向の移動位置 40 var dy6=7.0; //y軸方向の移動位置 41 var timer_id; //タイマーID 42 var timer_id2; //タイマーID 43 var timer_id3; //タイマーID 44 45 46 //webページが読み込まれたら呼び出す関数 47 function initial(){ 48 //描画コンテキストの取得 49 //canvas要素を取得 50 canvas=document.getElementById("canvas_sample"); 51 //グラフィックの2D描画用コンテキストを取得 52 context=canvas.getContext("2d"); 53 //画像ファイルを読み込んで利用する 54 //Imageオブジェクトを新規作成 55 backimg=new Image(); 56 //背景画像ファイルを読み込んでオブジェクトに代入 57 backimg.src="./課題2画像/haikei.png"; 58 //Imageオブジェクトを新規作成 59 hatoimg=new Image(); 60 //飛行機の画像ファイルを読み込んでオブジェクトに代入 61 hatoimg.src="./課題2画像/bird_densyobato.png"; 62 //Imageオブジェクトを新規作成 63 yasaiimg=new Image(); 64 //花の画像ファイルを読み込んでオブジェクトに代入 65 yasaiimg.src="./課題2画像/img_topical01.png"; 66 //Imageオブジェクトを新規作成 67 kareimg=new Image(); 68 //蝶々の画像ファイルを読み込んでオブジェクトに代入 69 kareimg.src="./課題2画像/food_curryruce.png"; 70 //画像ファイル読み込みを非同期で処理 71 //onloadイベントを使って、画像の読み込みが完了してから 72 //背景画像処理を描画する 73 hatoimg.onload=function(){ 74 context.drawImage(backimg,0,0); //背景画像 75 } 76 } 77 78 79 //背景画像の描画 80 function draw_backimg(){ 81 if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、 82 window.clearInterval(timer_id); //タイマーを停止する 83 timer_id=undefined; //タイマーIDをundefinedにする 84 window.clearInterval(timer_id2); //タイマーを停止する 85 timer_id2=undefined; //タイマーIDをundefinedにする 86 window.clearInterval(timer_id3); //タイマーを停止する 87 timer_id3=undefined; //タイマーIDをundefinedにする 88 } 89 90 context.drawImage(backimg,0,0); 91 92 }//背景画像 93 94 95 96 //hatoを横方向に動かしながら描く 97 function draw1(){ 98 if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、 99 window.clearInterval(timer_id); //タイマーを停止する 100 timer_id=undefined; //タイマーIDをundefinedにする 101 window.clearInterval(timer_id2); //タイマーを停止する 102 timer_id2=undefined; //タイマーIDをundefinedにする 103 window.clearInterval(timer_id3); //タイマーを停止する 104 timer_id3=undefined; //タイマーIDをundefinedにする 105 106 } 107 //タイマー処理で定期的に実行 108 timer_id = window.setInterval("draw_hato1()",50); 109 } 110 //描画メイン処理：hatoを横方向に動かしながら描く 111 function draw_hato1(){ 112 //hatoの描画前にキャンバスを初期状態にすると軌跡が見えない 113 context.drawImage(backimg,0,0); //背景画像描画 114 context.drawImage(hatoimg,shiftX1,shiftY1,200,200);//ookisa 115 //位置を更新 116 shiftX1-=dx; 117 //動く範囲を決め、範囲外の場合は向きを変える 118 if(shiftX1<30){ 119 dx*=-1; 120 } 121 if(shiftX1>100){ 122 dx*=-1; 123 } 124 } 125 126// 127 128 //hatoとyasaiを縦方向に動かしながら描く 129 function draw2(){ 130 131 if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、 132 window.clearInterval(timer_id); //タイマーを停止する 133 timer_id=undefined; //タイマーIDをundefinedにする 134 window.clearInterval(timer_id2); //タイマーを停止する 135 timer_id2=undefined; //タイマーIDをundefinedにする 136 window.clearInterval(timer_id3); //タイマーを停止する 137 timer_id3=undefined; //タイマーIDをundefinedにする 138 139 } 140 //タイマー処理で定期的に実行 141 timer_id = window.setInterval("draw_hato2()",35); 142 timer_id2 = window.setInterval("draw_yasai()",20); 143 } 144 //描画メイン処理：hatoを下から上に縦方向に動かしながら描く 145 function draw_hato2(){ 146 //hatoとyasaiの描画前にキャンバスを初期状態にすると軌跡が見えない 147 context.drawImage(backimg,0,0); //背景画像描画 148 context.drawImage(hatoimg,shiftX2,shiftY2,150,150);//ookisa 149 150 shiftY2+=dy2; 151 152 if(shiftY2<30){ 153 dy2*=-1; 154 if(shiftY2>300){ 155 dy2*=-1; 156 } 157 158 } 159 } 160 //描画メイン処理：yasaiを上から下に縦方向に動かしながら描く 161 function draw_yasai(){ 162 //hatoとyasaiの描画前にキャンバスを初期状態にすると軌跡が見えない 163 context.drawImage(backimg,0,0); //背景画像描画 164 context.drawImage(yasaiimg,shiftX3,shiftY3,200,200); 165 166 //位置を更新 167 168 shiftY3-=dy3; 169 //動く範囲を決め、範囲外の場合は向きを変える 170 171 172 if(shiftY3<30){ 173 dy3*=-1; 174 } 175 if(shiftY3>300){ 176 dy3*=-1; 177 } 178 179 } 180 181 182 183 //kareを動かしながら描く 184 function draw3(){ 185 186 if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、 187 window.clearInterval(timer_id); //タイマーを停止する 188 timer_id=undefined; //タイマーIDをundefinedにする 189 window.clearInterval(timer_id2); //タイマーを停止する 190 timer_id2=undefined; //タイマーIDをundefinedにする 191 window.clearInterval(timer_id3); //タイマーを停止する 192 timer_id3=undefined; //タイマーIDをundefinedにする 193 194 } 195 196 //タイマー処理で定期的に実行 197 timer_id = window.setInterval("draw_hato3()",300); 198 timer_id2 = window.setInterval("draw_yasai2()",30); 199 timer_id3 = window.setInterval("draw_kare()",500); 200 } 201 202 203 204 205 206 //描画メイン処理：kareを動かしながら描く 207 function draw_hato3(){ 208 //hato描画前にキャンバスを初期状態にすると軌跡が見えない 209 context.drawImage(backimg,0,0); //背景を描くと軌跡が見えない 210 context.drawImage(hatoimg,shiftX4,shiftY4,120,120); 211 212 213 //kareの位置を更新 214 shiftX4+=dx4; 215 216 217 //kareの位置が指定範囲外の場合は、方向を変える 218 if(shiftX4<50){ 219 dx4*=-1; 220 } 221 if(shiftX4>400){ 222 dx4*=-1; 223 } 224 if(shiftY4<500){ 225 dy4*=-1; 226 } 227 if(shiftY4>50){ 228 dy4*=-1; 229 } 230 231 232 233 function draw_yasai2(){ 234 235 context.drawImage(backimg,0,0); 236 context.drawImage(yasaiimg,shiftX5,shiftY5,80,80); 237 shiftX5+=dx5; 238 239 if(shiftX5<50){ 240 dx5*=-1; 241 } 242 if(shiftX5>400){ 243 dx5*=-1; 244 } 245 if(shiftY5<500){ 246 dy5*=-1; 247 } 248 if(shiftY5>50){ 249 dy5*=-1; 250 } 251 } 252 253 function draw_kare(){ 254 context.drawImage(backimg,0,0); 255 context.drawImage(kareimg,shiftX6,shiftY6,100,100); 256 shiftY6+=dy6; 257 258 if(shiftX6<50){ 259 dx6*=-1; 260 } 261 if(shiftX6>400){ 262 dx6*=-1; 263 } 264 if(shiftY6<500){ 265 dy6*=-1; 266 } 267 if(shiftY6>50){ 268 dy6*=-1; 269 } 270 } 271 272 } 273 274 //タイマー停止 275 function timer_stop(){ 276 if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、 277 window.clearInterval(timer_id); //タイマーを停止する 278 timer_id=undefined; //タイマーIDをundefinedにする 279 window.clearInterval(timer_id2); //タイマーを停止する 280 timer_id2=undefined; //タイマーIDをundefinedにする 281 window.clearInterval(timer_id3); //タイマーを停止する 282 timer_id3=undefined; //タイマーIDをundefinedにする 283 284 }else{ 285 window.alert("タイマーは稼働していません。"); 286 } 287 } 288 289 </script> 290</head> 291<body onload = "initial();"> 292<h1> 293プログラミング演習2</h1> 294<canvas id="canvas_sample"width="1220"height="620"> 295図形を表示するには、canvasタグをサポートしたブラウザが必要です。 296</canvas> 297<!--フォーム--> 298<form name="fn_a1" id="fi_a1"> 299<p> 300<label><input type="button" name="bn_a1" id="bi_a1" value="1つの物体が左右に往復する" onClick="draw1();"></label> 301<label><input type="button" name="bn_a2" id="bi_a2" value="2つの物体が上下に往復する" onClick="draw2();"></label> 302<label><input type="button" name="bn_a3" id="bi_a3" value="3つの物体があらゆる方向に移動する" onClick="draw3();"></label> 303<label><input type="button" name="bn_a4" id="bi_a4" value="初期状態に戻す" onClick="draw_backimg();"></label> 304<label><input type="button" name="bn_ts" id="bi_ts" value="タイマーストップ" onClick="timer_stop();"></label> 305</p> 306</body></html>
###試したこと 大きさや秒数を変更すると、片方だけ動いたり全く動かなくなったりする。 yasai2が何度も何度もunknownになったあと1回kareがunknownになりまたyasai2が何度も繰り返しunknownになるようです。forなど使っていません。
回答1件
0
大学の課題のようですので、助言だけします。
まずインデントがおかしいため、関数宣言の中で関数宣言している箇所があり、それのエラーが出ています。インデントは整形ツールなどである程度マシにできるので、使ってみてください。
【Online JavaScript beautifier】
http://jsbeautifier.org/
setInterval/setTimeoutについては関数自体を渡すほうが良いです。
JavaScript
1// timer_id = window.setInterval("draw_hato1()",50); 2// ↓ 3 timer_id = window.setInterval( draw_hato1, 50 ); 4```もしくは無名関数。 5```JavaScript 6// timer_id = window.setInterval("draw_hato1()",50); 7// ↓ 8 timer_id = window.setInterval( function() { draw_hato1(); }, 50 );
onload などは addEventListener で書き直すほうが良いと思いますが、イベント処理はまだ履修していないのでしょうか。
【EventTarget.addEventListener - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
【JavaScriptでwindow.onloadの色々な書き方！！｜By U Zensen.】
https://byuzensen.com/javascript-window-onload
投稿2017/08/09 16:53
総合スコア69400
あなたの回答
tips
プレビュー
