画像を→↓←↑の順で動かしたい

やりたいこと実現したいことは、車の画像が最初Xが０、Yが１５０の位置にいて、
スタートボタンを押すと右に移動、Xが５００、Yが１５０に行ったら下に移動。
Xが５００、Yが４００になったら左に移動。Xが０、Yが４００になったら上に移動してスタート位置へ...という動きにしたいです。
曲がると画像も変わるようにしたいです。
あとストップを押すとその場にとまるようにしたいです。

今の状態は右を向いた車の画像とスタートボタンはあるのですが、
スタートボタンを押すとずっと右に進んでエラーがものすごい速度で増えていきます...。
わからない点はどうすればスタートボタンを押したら希望通りに動くか、とストップボタンの作り方です。
あと５０分ほどでわからなかったら質問を終了したいと思います。
よろしくお願いいたします。

エラー
SCRIPT5009: 'y' is not defined

① 車が移動するx座標は0～500，y座標は150～400 
② xが0～500 かつyが0～400だったら右に移動（移動範囲内） 
③ ②以外の場合で，xが500より大きくなったら下に移動（右端に到達）
④ xが0より小さくなったら上に移動（左端に到達）
⑤ yが400より大きくなったら左に移動（下端に到達） 
⑥ yが150より小さくになったら，xとyを初期値に戻す（上端に到達）

車の画像
[0]が右を向いています。
[1]が下を向いています。
[2]が左を向いています。
[3]が上を向いています。

今回質問したプログラム
<!DOCTYPE html> 
<html lang = "ja"> 
<head> 
    <meta charset="UTF-8"> 
    <title>DOMを使用したアニメーション</title> 
    <style type="text/css"> 
        #car { 
            position:absolute; 
            top:150px;
            left:0px;
            height:70px; 
            width:150px; 
        } 
        </style> 
        <script> 
		var imgFile= [];//画像ファイル 配列
			imgFile[0]="images/car.jpg";
			imgFile[1]="images/car2.jpg";
			imgFile[2]="images/car3.jpg";
			imgFile[3]="images/car4.jpg";


		var INTERVAL = 10;
var x = 0;
var y = 0;

var animating = false;
var timer;

function move() {
    var aCar = document.getElementById("car");
    x += 5;
    aCar.style.left = x + "px";
    aCar.style.top = y + "px";
	
    if ((x >= 0 && x <= 500) && (y >= 150 && y <= 400)) {} else {
        if (x > 500) {
            x = 0;
            y = 150;
            x += 5;
            aCar.style.left = x + "px";
            var img = imgFile[0];
            console.log(img);

        }
        if (y > 400) {
		//x=500;
		//y=150;
            y += 5;
            var img = imgFile[1];
            console.log(img);
        }

        if (x < 0) {
		//x=500;
		//y=400;
            x -= 5;
            var img = imgFile[2];
            console.log(img);
        }
        if (y < 150) {
		//x=0;
		//y=400;
            y -= 5;
            var img = imgFile[3];
            console.log(img);

        }
    }
}/* ← 不足 */

function startStop() {
    if (animating) {
        clearInterval(timer);
        document.getElementById("btn").innerHTML = "スタート";
    } else {
        timer = setInterval("move()", INTERVAL);
        document.getElementById("btn").innerHTML = "ストップ";
    }
    aimating = !animating;
}
window.onload = function() {
    document.getElementById("btn").onclick = startStop;
}
</script> 
</head>
 <body>
 <h1>DOMによるアニメーション</h1> 
    <img src="images/car.jpg" id="car"> 
    <button id="btn">スタート</button> 
 </body> 
 </html>

Lhankor_Mhy

2019/07/27 06:58

ページを表示したらまっすぐ動く、ということはできますか？もし、それができないようでしたら、まず、それに取り組まれた方がいいかと思います。

nubba

2019/07/27 07:16

表示されているだけで動かないです... わかりました。もう一度調べてみます...

Lhankor_Mhy

2019/07/27 08:31

質問編集拝読。カッコの対応が合っていないと思います。ブラウザの開発者ツールは使っていますか？

nubba

2019/07/27 14:11

F12ですよね？たまに押してエラーは見るように心がけています... エラーなど出ていなかったのでカッコミスわからなかったです...

nubba

2019/07/28 05:28

すいません... カッコってどこを間違えていますか?

mepon

2019/07/28 15:06 編集

他の回答者様のコメントに書き続けるのもいけないのでこちらに。 >var y=0;をつけるとエラーは出ていないんですけど画像が右に行って左にワープしてきて右に行っての繰り返しになってしまいます。コンソールに出る文字はimages/car4.jpg(66,13) images/car.jpg(43,13) と出ています。 images/car4.jpg(66,13)の左の数が１００になったらimages/car.jpg(43,13)が出てきてこっちは１０００を超えてもずっと数が増えていってます。 if ((x >= 0 && x <= 500) && (y >= 150 && y <= 400)) この式が最初に評価される時の値は　x = 5 y = 0です。つまりelseになりますね else内のif分で該当するのが　if (y < 150)　これです。このifを通過するたびにyは-5ずつ増えていきます。同じくremove()が繰り返される時に、x += 5;これでxも5ずつ増えていきます。 100回回ったとこでif (x > 500) このif分がtrueになるため画像はvar img = imgFile[0];　こっちになります。 >images/car4.jpg(66,13)の左の数が１００になったらimages/car.jpg(43,13)が出てきてこっちは１０００を超えてもずっと数が増えていってます。 xは5ずつ増えるので、 if (x > 500) このif文がずっとtrueになるのでそうなります。車を進めているif文もちょっとおかしいですねスタートした時は、車は右を向いていてimgFile[0]が表示されるのが正しいと思うのですがスタート位置はx = 0, y = 150なので if (x > 500) この式って必ずfalseになりますよね

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

回答1件

ベストアンサー

内容は特に見ていませんが、インデントがおかしいとミスに気が付きにくくなるので、フォーマット機能のあるエディタでも探したほうがよいです。

js
1var INTERVAL = 10;
2var x = 0;
3var animating = false;
4var timer;
5
6function move() {
7	var aCar = document.getElementById("car");
8	x += 5;
9	aCar.style.left = x + "px";
10	aCar.style.top = y + "px";
11	if ((x >= 0 && x <= 500) && (y >= 150 && y <= 400)) {} else {
12		if (x > 500) {
13			x = 0;
14			y = 150;
15			x += 5;
16			aCar.style.left = x + "px";
17			var img = imgFile[0];
18			console.log(img);
19
20		}
21		if (y > 400) {
22			y += 5;
23			var img = imgFile[1];
24			console.log(img);
25		}
26
27		if (x < 0) {
28			x -= 5;
29			var img = imgFile[2];
30			console.log(img);
31		}
32		if (y < 150) {
33			y -= 5;
34			var img = imgFile[3];
35			console.log(img);
36
37		}
38	}
39}/* ← 不足 */
40
41function startStop() {
42	if (animating) {
43		clearInterval(timer);
44		document.getElementById("btn").innerHTML = "スタート";
45	} else {
46		timer = setInterval("move()", INTERVAL);
47		document.getElementById("btn").innerHTML = "ストップ";
48	}
49	aimating = !animating;
50}
51window.onload = function() {
52	document.getElementById("btn").onclick = startStop;
53}

【Online JavaScript beautifier】
https://beautifier.io/

投稿2019/07/28 13:15

kei344

総合スコア69407

nubba

2019/07/28 13:33

ご指摘いただいた内容に変更すると動いたのですがエラーでSCRIPT5009: 'y' is not definedと出てしまいます... なぜでしょうか?

kei344

2019/07/28 13:40

提示のコードのどこにも変数「y」が定義されていないからでしょう。

mepon

2019/07/28 13:49

yが定義されていないからです。 aCar.style.top = y + "px"; この部分でエラー吐いてると思いますが、それより以前でy定義してませんよね xはvar x = 0;で定義してますけど

nubba

2019/07/28 13:57

var y=0;をつけるとエラーは出ていないんですけど画像が右に行って左にワープしてきて右に行っての繰り返しになってしまいます。コンソールに出る文字はimages/car4.jpg(66,13) images/car.jpg(43,13) と出ています。 images/car4.jpg(66,13)の左の数が１００になったらimages/car.jpg(43,13)が出てきてこっちは１０００を超えてもずっと数が増えていってます。

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