【JavaScript】ボタンで画像の動作を切り替えたい

前提・実現したいこと

画像の動きをボタンで上下、左右、斜めに切り替えられるようにしたいです。

発生している問題・エラーメッセージ

現在のソースコードではボタンの文字が文字化けしてしまい、更に画像の動きを切り替える（それぞれボタンを押すと左右往復の動きから上下往復、斜め往復に切り替わる）ことがうまく出来ない状況です。

エラーメッセージ

該当のソースコード

JavaScript
1```<!DOCTYPE html>
2<html>
3<head>
4<script type="text/javascript">
5
6    var x=40,dx=10,y=40,dy=10;
7
8    function move()
9    {
10        var obj=document.getElementById("ball");
11        x+=dx;
12
13        obj.style.left=x+"px";
14
15        if (x<=0 || x+85>=document.body.clientWidth)
16            dx=-dx;
17    }  
18
19    function move2()
20    {
21        var obj=document.getElementById("ball");
22        y+=dy;
23
24        obj.style.top=y+"px";
25        if( y<=0 || y+85>=document.body.clientHeight)
26            dy=-dy;
27    }
28
29</script>
30</head>
31<body style="position:absolute;width:100%;height:100%" onLoad="setInterval(move,100)">
32
33<input type="button" value="左右" onclick="move()" />
34<input type="button" value="上下" onclick="move2()" />
35<img id="ball" src="soccerball.png" style="position:absolute;left:40px;top:40px" />
36</body>
37</html>
38
39
40### 試したこと
41当方大学の講義でテキストに沿って学んでおり、初心者です。知識、経験共に浅く、少しかじった程度といっても過言ではありません。お手柔らかにお教えいただけると幸いです。
42### 補足情報（FW/ツールのバージョンなど）
43<!DOCTYPE html>
44<html lang="ja">
45<head>
46<meta charset="UTF-8">
47<script type="text/javascript">
48
49    var x=40,dx=10,y=40,dy=10,TimeID;
50
51
52    function stop()
53         {
54         clearTimeout(TimeID);
55          }
56
57
58    function move()
59    {
60        var obj=document.getElementById("ball");
61        x+=dx;
62
63        obj.style.left=x+"px";
64
65        if (x<=0 || x+85>=document.body.clientWidth)
66            dx=-dx;
67
68    }  
69
70    function move2()
71    {
72        var obj=document.getElementById("ball");
73        y+=dy;
74
75        obj.style.top=y+"px";
76        if( y<=0 || y+85>=document.body.clientHeight)
77            dy=-dy;
78    }
79
80    function move3()
81    {
82        var obj=document.getElementById("ball");
83        x+=dx;
84        y+=dy;
85        obj.style.top=y+"px";
86        obj.style.left=x+"px";
87        if (x<=0 || x+85>=document.body.clientWidth)
88            dx=-dx;
89        if( y<=0 || y+85>=document.body.clientHeight)
90            dy=-dy;
91    }
92
93
94
95
96
97</script>
98</head>
99<input type="button" value="左右" onclick="TimeID=setInterval(move,100)" />
100<input type="button" value="上下" onclick="TimeID=setInterval(move2,100)" />
101<input type="button" value="斜め" onclick="TimeID=setInterval(move3,100)" />
102
103<input type="button" value="停止" onclick="stop()" />
104<img id="ball" src="soccerball.png" style="position:absolute;left:40px;top:40px" />
105</body>
106</html>
107
10812/27 追記　上下・左右・斜め・停止ボタン設定、関数接続までできたのですが斜め、上下の動きがカクカクしていておかしいです。なぜこのようになってしまうのか上記のプログラムよりご指摘いただけると幸いです。宜しくお願い致します。
109
110ここにより詳細な情報を記載してください。

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

回答1件

bodyのonLoadでsetInterval(move,100)していて、これにより0.1秒ごとにmoveが呼ばれて実行されていますが、それは把握していますか？

これをやめると、ボタンクリックで動かすことは出来ているようです。

文字化けに関しては

HTML
1<html lang="ja">
2<head>
3<meta charset="UTF-8">

のような記述を加えれば解決しそうな気がします。

投稿2021/12/26 03:44

itagagaki

総合スコア8402

luv_jade.com

2021/12/26 03:49

ご回答いただきありがとうございます！　はい、把握しています。というのも、onLoadで自動的に左右(or上下or斜め)往復の動きをする状態から、例えば上下のボタンを押したら今度は上下に自動で往復に動くというようなプログラムが作成したいのです。言葉足らずですみません…???? 文字化けに関して、今からその記述を加えて試してみます！

itagagaki

2021/12/26 04:14

提示されているコードをそのままコピペしてテストしてみると、画像が左から右へ動き続け、上下ボタンをクリックするたびに少しずつ下に下がります。moveとmove2の動作、ボタンクリックによるそれらの呼び出しはできているのではないでしょうか。もし上下ボタンをクリックしたら右に勝手に動くのをやめて下に勝手に動くように動きを変更したいということならば、まずclearInteralで動きを停止し、あらためてsetIntervalでmoveまたはmove2がタイマーで呼ばれるようにセットする必要があるでしょう。

luv_jade.com

2021/12/26 07:05

ご返信ありがとうございます。文字化けに関してはコードをUTF-8に設定し忘れていたので無事解決いたしました！ clearIntervalについて調べて色々実行していたのですが、なかなか上手くいきませんでした…。仰る通りに変更したいのですが、どのようにコードを記述するか具体的に教えて頂けますでしょうか…？

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