質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

2つ、3つの画像表示しそれぞれ異なる方向に移動させたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,028

rainy

score 6

前提・実現したいこと

画像を3つ表示、ボタンを5つ表示して、
1つ目のボタン→1つの画像を左右に跳ね返り移動
2→2つの画像をそれぞれ上下に跳ね返り移動、 3→3つの画像をそれぞれ好きな向きに跳ね返り移動
4→リセット
5→タイマーストップ
をしたいです。

1,4,5のボタンはできましたが、そのほかの
2,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
・
・
・

該当のソースコード

```<!doctype html>  
<html><head>  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width,initial=scale=1">  
<title>プログラミング演習2</title>  
<script>   
//グローバル変数  
var canvas=null; //canvas要素  
var context=null; //グラフィックの2D描画用コンテキスト  
var backimg=null; //背景画像  
var hatoimg=null; //hatoの画像  
var yasaiimg=null; //yasaiの画像  
var kareimg=null; //kareの画像  
var rectX=450; //x軸方向の位置  
var rectY=150; //y軸方向の位置  
var shiftX1=100; //x軸方向の位置(hato)  
var shiftY1=80; //y軸方向の位置(hato)  
var dx=7.0; //x軸方向の移動位置  
var dy=5.0; //y軸方向の移動位置  
var shiftX2=100; //x軸方向の位置(hato)  
var shiftY2=250;  //y軸方向の位置(hato)  
var dx2=6.0; //x軸方向の移動位置  
var dy2=4.0; //y軸方向の移動位置  
var shiftX3=800; //x軸方向の位置(yasai)  
var shiftY3=30;  //y軸方向の位置(yasai)  
var dx3=8.0; //x軸方向の移動位置  
var dy3=6.0; //y軸方向の移動位置  
var shiftX4=800; //x軸方向の位置(hato)  
var shiftY4=300;  //y軸方向の位置(hato)  
var dx4=10.0; //x軸方向の移動位置  
var dy4=8.0; //y軸方向の移動位置  
var shiftX5=300; //x軸方向の位置(yasai)  
var shiftY5=600;  //y軸方向の位置(yasai)  
var dx5=5.0; //x軸方向の移動位置  
var dy5=6.0; //y軸方向の移動位置  
var shiftX6=400; //x軸方向の位置(kare)  
var shiftY6=100;  //y軸方向の位置(kare)  
var dx6=9.0; //x軸方向の移動位置  
var dy6=7.0; //y軸方向の移動位置  
var timer_id; //タイマーID  
var timer_id2; //タイマーID  
var timer_id3; //タイマーID  


//webページが読み込まれたら呼び出す関数  
function initial(){  
//描画コンテキストの取得  
//canvas要素を取得  
canvas=document.getElementById("canvas_sample");  
//グラフィックの2D描画用コンテキストを取得  
context=canvas.getContext("2d");  
//画像ファイルを読み込んで利用する  
//Imageオブジェクトを新規作成  
backimg=new Image();  
//背景画像ファイルを読み込んでオブジェクトに代入  
backimg.src="./課題2画像/haikei.png";  
//Imageオブジェクトを新規作成  
hatoimg=new Image();  
//飛行機の画像ファイルを読み込んでオブジェクトに代入  
hatoimg.src="./課題2画像/bird_densyobato.png";  
//Imageオブジェクトを新規作成  
yasaiimg=new Image();  
//花の画像ファイルを読み込んでオブジェクトに代入  
yasaiimg.src="./課題2画像/img_topical01.png";  
//Imageオブジェクトを新規作成  
kareimg=new Image();  
//蝶々の画像ファイルを読み込んでオブジェクトに代入  
kareimg.src="./課題2画像/food_curryruce.png";  
//画像ファイル読み込みを非同期で処理  
//onloadイベントを使って、画像の読み込みが完了してから  
//背景画像処理を描画する  
hatoimg.onload=function(){  
context.drawImage(backimg,0,0);  //背景画像  
}  
}  


//背景画像の描画  
function draw_backimg(){  
if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、  
window.clearInterval(timer_id); //タイマーを停止する  
timer_id=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id2); //タイマーを停止する  
timer_id2=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id3); //タイマーを停止する  
timer_id3=undefined; //タイマーIDをundefinedにする  
}  

context.drawImage(backimg,0,0);   

}//背景画像  



//hatoを横方向に動かしながら描く  
function draw1(){  
if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、  
window.clearInterval(timer_id); //タイマーを停止する  
timer_id=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id2); //タイマーを停止する  
timer_id2=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id3); //タイマーを停止する  
timer_id3=undefined; //タイマーIDをundefinedにする  

}  
//タイマー処理で定期的に実行  
timer_id = window.setInterval("draw_hato1()",50);  
}  
//描画メイン処理:hatoを横方向に動かしながら描く  
function draw_hato1(){  
//hatoの描画前にキャンバスを初期状態にすると軌跡が見えない  
context.drawImage(backimg,0,0); //背景画像描画  
context.drawImage(hatoimg,shiftX1,shiftY1,200,200);//ookisa  
//位置を更新  
shiftX1-=dx;  
//動く範囲を決め、範囲外の場合は向きを変える  
if(shiftX1<30){  
dx*=-1;  
}  
if(shiftX1>100){  
dx*=-1;  
}  
}  

//      

//hatoとyasaiを縦方向に動かしながら描く  
function draw2(){   

if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、  
window.clearInterval(timer_id); //タイマーを停止する  
timer_id=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id2); //タイマーを停止する  
timer_id2=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id3); //タイマーを停止する  
timer_id3=undefined; //タイマーIDをundefinedにする  

}  
//タイマー処理で定期的に実行  
timer_id = window.setInterval("draw_hato2()",35);  
timer_id2 = window.setInterval("draw_yasai()",20);  
}  
//描画メイン処理:hatoを下から上に縦方向に動かしながら描く  
function draw_hato2(){  
//hatoとyasaiの描画前にキャンバスを初期状態にすると軌跡が見えない  
context.drawImage(backimg,0,0); //背景画像描画  
context.drawImage(hatoimg,shiftX2,shiftY2,150,150);//ookisa  

shiftY2+=dy2;  

if(shiftY2<30){  
dy2*=-1;  
if(shiftY2>300){  
dy2*=-1;  
}  

}  
}  
//描画メイン処理:yasaiを上から下に縦方向に動かしながら描く  
function draw_yasai(){  
//hatoとyasaiの描画前にキャンバスを初期状態にすると軌跡が見えない  
context.drawImage(backimg,0,0); //背景画像描画  
context.drawImage(yasaiimg,shiftX3,shiftY3,200,200);  

//位置を更新  

shiftY3-=dy3;  
//動く範囲を決め、範囲外の場合は向きを変える  


if(shiftY3<30){  
dy3*=-1;  
}  
if(shiftY3>300){  
dy3*=-1;  
}   

}  



//kareを動かしながら描く  
function draw3(){  

if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、  
window.clearInterval(timer_id); //タイマーを停止する  
timer_id=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id2); //タイマーを停止する  
timer_id2=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id3); //タイマーを停止する  
timer_id3=undefined; //タイマーIDをundefinedにする  

}  

//タイマー処理で定期的に実行  
timer_id = window.setInterval("draw_hato3()",300);  
timer_id2 = window.setInterval("draw_yasai2()",30);  
timer_id3 = window.setInterval("draw_kare()",500);  
}  





//描画メイン処理:kareを動かしながら描く  
function draw_hato3(){  
//hato描画前にキャンバスを初期状態にすると軌跡が見えない  
context.drawImage(backimg,0,0); //背景を描くと軌跡が見えない  
context.drawImage(hatoimg,shiftX4,shiftY4,120,120);  


//kareの位置を更新  
shiftX4+=dx4;  


//kareの位置が指定範囲外の場合は、方向を変える  
if(shiftX4<50){  
dx4*=-1;  
}   
if(shiftX4>400){  
dx4*=-1;  
}  
if(shiftY4<500){  
dy4*=-1;  
}  
if(shiftY4>50){  
dy4*=-1;  
}  



function draw_yasai2(){  

context.drawImage(backimg,0,0);  
context.drawImage(yasaiimg,shiftX5,shiftY5,80,80);  
shiftX5+=dx5;  

if(shiftX5<50){  
dx5*=-1;  
}   
if(shiftX5>400){  
dx5*=-1;  
}  
if(shiftY5<500){  
dy5*=-1;  
}  
if(shiftY5>50){  
dy5*=-1;  
}  
}  

function draw_kare(){  
context.drawImage(backimg,0,0);  
context.drawImage(kareimg,shiftX6,shiftY6,100,100);  
shiftY6+=dy6;  

if(shiftX6<50){  
dx6*=-1;  
}   
if(shiftX6>400){  
dx6*=-1;  
}  
if(shiftY6<500){  
dy6*=-1;  
}  
if(shiftY6>50){  
dy6*=-1;  
}  
}  

}  

//タイマー停止  
function timer_stop(){  
if(timer_id3||timer_id2||timer_id){ //タイマーIDが存在していれば、  
window.clearInterval(timer_id); //タイマーを停止する  
timer_id=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id2); //タイマーを停止する  
timer_id2=undefined; //タイマーIDをundefinedにする  
window.clearInterval(timer_id3); //タイマーを停止する  
timer_id3=undefined; //タイマーIDをundefinedにする  

}else{  
window.alert("タイマーは稼働していません。");  
}  
}  

</script>  
</head>  
<body onload = "initial();">  
<h1>  
プログラミング演習2</h1>  
<canvas id="canvas_sample"width="1220"height="620">  
図形を表示するには、canvasタグをサポートしたブラウザが必要です。  
</canvas>  
<!--フォーム-->  
<form name="fn_a1" id="fi_a1">  
<p>  
<label><input type="button" name="bn_a1" id="bi_a1" value="1つの物体が左右に往復する" onClick="draw1();"></label>  
<label><input type="button" name="bn_a2" id="bi_a2" value="2つの物体が上下に往復する" onClick="draw2();"></label>  
<label><input type="button" name="bn_a3" id="bi_a3" value="3つの物体があらゆる方向に移動する" onClick="draw3();"></label>  
<label><input type="button" name="bn_a4" id="bi_a4" value="初期状態に戻す" onClick="draw_backimg();"></label>  
<label><input type="button" name="bn_ts" id="bi_ts" value="タイマーストップ" onClick="timer_stop();"></label>  
</p>  
</body></html>  

```

試したこと

大きさや秒数を変更すると、片方だけ動いたり全く動かなくなったりする。
yasai2が何度も何度もunknownになったあと1回kareがunknownになりまたyasai2が何度も繰り返しunknownになるようです。forなど使っていません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/08/09 20:44

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • kei344

    2017/08/09 22:07

    エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    キャンセル

回答 1

0

大学の課題のようですので、助言だけします。


まずインデントがおかしいため、関数宣言の中で関数宣言している箇所があり、それのエラーが出ています。インデントは整形ツールなどである程度マシにできるので、使ってみてください。

【Online JavaScript beautifier】
http://jsbeautifier.org/


setInterval/setTimeoutについては関数自体を渡すほうが良いです。

// timer_id = window.setInterval("draw_hato1()",50);
// ↓
   timer_id = window.setInterval( draw_hato1, 50 );

もしくは無名関数。

// timer_id = window.setInterval("draw_hato1()",50);
// ↓
   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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る