teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問画像を→↓←↑の順で動かしたい

編集履歴

質問編集履歴

8

文章の訂正

2019/07/28 13:59

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,8 @@
18
18
 
19
19
  わからない点はどうすればスタートボタンを押したら希望通りに動くか、とストップボタンの作り方です。
20
20
 
21
+ あと５０分ほどでわからなかったら質問を終了したいと思います。
22
+
21
23
  よろしくお願いいたします。
22
24
 
23
25
  ```ここに言語を入力

7

文章の訂正

2019/07/28 13:59

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -96,10 +96,28 @@
96
96
 
97
97
  <script>
98
98
 
99
+ var imgFile= [];//画像ファイル 配列
100
+
101
+ imgFile[0]="images/car.jpg";
102
+
103
+ imgFile[1]="images/car2.jpg";
104
+
105
+ imgFile[2]="images/car3.jpg";
106
+
107
+ imgFile[3]="images/car4.jpg";
108
+
109
+
110
+
111
+
112
+
99
113
  var INTERVAL = 10;
100
114
 
101
115
  var x = 0;
102
116
 
117
+ var y = 0;
118
+
119
+
120
+
103
121
  var animating = false;
104
122
 
105
123
  var timer;
@@ -116,6 +134,8 @@
116
134
 
117
135
  aCar.style.top = y + "px";
118
136
 
137
+
138
+
119
139
  if ((x >= 0 && x <= 500) && (y >= 150 && y <= 400)) {} else {
120
140
 
121
141
  if (x > 500) {
@@ -138,6 +158,10 @@
138
158
 
139
159
  if (y > 400) {
140
160
 
161
+ //x=500;
162
+
163
+ //y=150;
164
+
141
165
  y += 5;
142
166
 
143
167
  var img = imgFile[1];
@@ -150,6 +174,10 @@
150
174
 
151
175
  if (x < 0) {
152
176
 
177
+ //x=500;
178
+
179
+ //y=400;
180
+
153
181
  x -= 5;
154
182
 
155
183
  var img = imgFile[2];
@@ -160,6 +188,10 @@
160
188
 
161
189
  if (y < 150) {
162
190
 
191
+ //x=0;
192
+
193
+ //y=400;
194
+
163
195
  y -= 5;
164
196
 
165
197
  var img = imgFile[3];
@@ -218,6 +250,4 @@
218
250
 
219
251
  </html>
220
252
 
221
-
222
-
223
- ```
253
+ ```

6

文章の訂正

2019/07/28 13:48

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,14 @@
20
20
 
21
21
  よろしくお願いいたします。
22
22
 
23
+ ```ここに言語を入力
24
+
25
+ エラー
26
+
27
+ SCRIPT5009: 'y' is not defined
28
+
29
+ ```
30
+
23
31
 
24
32
 
25
33
  ```

5

文章の訂正

2019/07/28 13:32

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -10,11 +10,11 @@
10
10
 
11
11
 
12
12
 
13
- 右に進むけど止まらないプログラムは出来たんですけどそのプログラムに希望通りの動きをさせようとコードを足すと動かなくなってしまいました...
13
+
14
14
 
15
15
  今の状態は右を向いた車の画像とスタートボタンはあるのですが、
16
16
 
17
- スタートボタンを押しても進まない状態です。
17
+ スタートボタンを押すとずっと右に進んでエラーがものすごい速度で増えていきます...。
18
18
 
19
19
  わからない点はどうすればスタートボタンを押したら希望通りに動くか、とストップボタンの作り方です。
20
20
 
@@ -52,260 +52,164 @@
52
52
 
53
53
  ```
54
54
 
55
+
56
+
55
57
  ```ここに言語を入力
56
58
 
57
- 右に進むけど止まらないプログラム
59
+ 今回質問したプログラム
58
60
 
59
61
  <!DOCTYPE html>
60
62
 
61
63
  <html lang = "ja">
62
64
 
63
- <head>
64
-
65
- <meta charset="UTF-8">
66
-
67
- <title>DOMを使用したアニメーション</title>
68
-
69
- <style type="text/css">
70
-
71
- #car {
72
-
73
- position:absolute;
74
-
75
- top:150px;
76
-
77
- left:0px;
78
-
79
- height:70px;
80
-
81
- width:150px;
82
-
83
- }
84
-
85
- </style>
86
-
87
- <script>
88
-
89
- var INTERVAL = 10;
90
-
91
- var x =0;
92
-
93
- var animating = false;
94
-
95
- var timer;
96
-
97
- function move(){
98
-
99
- var aCar = document.getElementById("car");
100
-
101
- x += 5;
102
-
103
- aCar.style.left = x + "px";
104
-
105
- if (x > 500) {
106
-
107
- x = 0;
108
-
109
- }
65
+ <head>
66
+
67
+ <meta charset="UTF-8">
68
+
69
+ <title>DOMを使用したアニメーション</title>
70
+
71
+ <style type="text/css">
72
+
73
+ #car {
74
+
75
+ position:absolute;
76
+
77
+ top:150px;
78
+
79
+ left:0px;
80
+
81
+ height:70px;
82
+
83
+ width:150px;
84
+
85
+ }
86
+
87
+ </style>
88
+
89
+ <script>
90
+
91
+ var INTERVAL = 10;
92
+
93
+ var x = 0;
94
+
95
+ var animating = false;
96
+
97
+ var timer;
98
+
99
+
100
+
101
+ function move() {
102
+
103
+ var aCar = document.getElementById("car");
104
+
105
+ x += 5;
106
+
107
+ aCar.style.left = x + "px";
108
+
109
+ aCar.style.top = y + "px";
110
+
111
+ if ((x >= 0 && x <= 500) && (y >= 150 && y <= 400)) {} else {
112
+
113
+ if (x > 500) {
114
+
115
+ x = 0;
116
+
117
+ y = 150;
118
+
119
+ x += 5;
120
+
121
+ aCar.style.left = x + "px";
122
+
123
+ var img = imgFile[0];
124
+
125
+ console.log(img);
126
+
127
+
128
+
129
+ }
130
+
131
+ if (y > 400) {
132
+
133
+ y += 5;
134
+
135
+ var img = imgFile[1];
136
+
137
+ console.log(img);
138
+
139
+ }
140
+
141
+
142
+
143
+ if (x < 0) {
144
+
145
+ x -= 5;
146
+
147
+ var img = imgFile[2];
148
+
149
+ console.log(img);
150
+
151
+ }
152
+
153
+ if (y < 150) {
154
+
155
+ y -= 5;
156
+
157
+ var img = imgFile[3];
158
+
159
+ console.log(img);
160
+
161
+
162
+
163
+ }
164
+
165
+ }
166
+
167
+ }/* ← 不足 */
168
+
169
+
170
+
171
+ function startStop() {
172
+
173
+ if (animating) {
174
+
175
+ clearInterval(timer);
176
+
177
+ document.getElementById("btn").innerHTML = "スタート";
178
+
179
+ } else {
180
+
181
+ timer = setInterval("move()", INTERVAL);
182
+
183
+ document.getElementById("btn").innerHTML = "ストップ";
184
+
185
+ }
186
+
187
+ aimating = !animating;
110
188
 
111
189
  }
112
190
 
113
- function startStop(){
191
+ window.onload = function() {
114
-
115
- if (animating) {
192
+
116
-
117
- clearInterval(timer);
118
-
119
- document.getElementById("btn").innerHTML = "スタート";
193
+ document.getElementById("btn").onclick = startStop;
120
-
121
- } else {
122
-
123
- timer = setInterval("move()", INTERVAL); document.getElementById("btn").innerHTML = "ストップ";
124
-
125
- }
126
-
127
- animating = !animating;
128
194
 
129
195
  }
130
196
 
131
- window.onload = function(){
132
-
133
- document.getElementById("btn").onclick = startStop;
134
-
135
- }
136
-
137
197
  </script>
138
198
 
139
- </head>
199
+ </head>
140
-
200
+
141
- <body>
201
+ <body>
142
-
202
+
143
- <h1>DOMによるアニメーション</h1>
203
+ <h1>DOMによるアニメーション</h1>
144
-
204
+
145
- <img src="images/car.jpg" id="car">
205
+ <img src="images/car.jpg" id="car">
146
-
206
+
147
- <button id="btn">スタート</button>
207
+ <button id="btn">スタート</button>
148
-
208
+
149
- </body>
209
+ </body>
150
210
 
151
211
  </html>
152
212
 
213
+
214
+
153
215
  ```
154
-
155
-
156
-
157
-
158
-
159
- ```ここに言語を入力
160
-
161
- こっちが今回質問したプログラム
162
-
163
- <!DOCTYPE html>
164
-
165
- <html lang = "ja">
166
-
167
- <head>
168
-
169
- <meta charset="UTF-8">
170
-
171
- <title>DOMを使用したアニメーション</title>
172
-
173
- <style type="text/css">
174
-
175
- #car {
176
-
177
- position:absolute;
178
-
179
- top:150px;
180
-
181
- left:0px;
182
-
183
- height:70px;
184
-
185
- width:150px;
186
-
187
- }
188
-
189
- </style>
190
-
191
- <script>
192
-
193
- var INTERVAL = 10;
194
-
195
- var x =0;
196
-
197
- var animating = false;
198
-
199
- var timer;
200
-
201
- function move(){
202
-
203
- var aCar = document.getElementById("car");
204
-
205
- x += 5;
206
-
207
- aCar.style.left = x + "px";
208
-
209
- aCar.style.top = y+ "px";
210
-
211
- if((x>=0&&x<=500)&&(y>=150&&y<=400)){
212
-
213
- }else{
214
-
215
- if(x>500){
216
-
217
- x=0;
218
-
219
- y=150;
220
-
221
- x+=5;
222
-
223
- aCar.style.left=x+"px";
224
-
225
- var img=imgFile[0];
226
-
227
- console.log(img);
228
-
229
-
230
-
231
- }
232
-
233
- if(y>400){
234
-
235
- y+=5;
236
-
237
- var img=imgFile[1];
238
-
239
- console.log(img);
240
-
241
- }
242
-
243
-
244
-
245
- if(x<0){
246
-
247
- x-=5;
248
-
249
- var img=imgFile[2];
250
-
251
- console.log(img);
252
-
253
- }
254
-
255
- if(y<150){
256
-
257
- y-=5;
258
-
259
- var img=imgFile[3];
260
-
261
- console.log(img);
262
-
263
-
264
-
265
- }
266
-
267
- }
268
-
269
- function startStop(){
270
-
271
- if (animating) {
272
-
273
- clearInterval(timer);
274
-
275
- document.getElementById("btn").innerHTML = "スタート";
276
-
277
- } else {
278
-
279
- timer = setInterval("move()", INTERVAL);
280
-
281
- document.getElementById("btn").innerHTML = "ストップ";
282
-
283
- }
284
-
285
- aimating = !animating;
286
-
287
- }
288
-
289
- window.onload = function(){
290
-
291
- document.getElementById("btn").onclick = startStop;
292
-
293
- }
294
-
295
- </script>
296
-
297
- </head>
298
-
299
- <body>
300
-
301
- <h1>DOMによるアニメーション</h1>
302
-
303
- <img src="images/car.jpg" id="car">
304
-
305
- <button id="btn">スタート</button>
306
-
307
- </body>
308
-
309
- </html>
310
-
311
- ```

4

文章の訂正

2019/07/28 13:31

投稿

nubba
nubba

スコア16

test CHANGED
@@ -1 +1 @@
1
- 車を→↓←↑の順でストップを押すまで動かしたい
1
+ 画像を→↓←↑の順で動かしたい
test CHANGED
File without changes

3

文章の訂正

2019/07/28 13:12

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,8 @@
10
10
 
11
11
 
12
12
 
13
+ 右に進むけど止まらないプログラムは出来たんですけどそのプログラムに希望通りの動きをさせようとコードを足すと動かなくなってしまいました...
14
+
13
15
  今の状態は右を向いた車の画像とスタートボタンはあるのですが、
14
16
 
15
17
  スタートボタンを押しても進まない状態です。

2

文章の訂正

2019/07/27 07:55

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -50,165 +50,257 @@
50
50
 
51
51
  ```
52
52
 
53
-
54
-
55
-
56
-
57
-
58
-
59
53
  ```ここに言語を入力
60
54
 
55
+ 右に進むけど止まらないプログラム
56
+
61
57
  <!DOCTYPE html>
62
58
 
63
59
  <html lang = "ja">
64
60
 
65
61
  <head>
66
62
 
67
- <meta charset="UTF-8">
63
+ <meta charset="UTF-8">
68
64
 
69
65
  <title>DOMを使用したアニメーション</title>
70
66
 
71
- <style type="text/css">
72
-
73
- #car{
74
-
75
- position:absolute;
76
-
77
- top:150px;
78
-
79
- left:0px;
80
-
81
- height:70px;
82
-
83
- width:150px;
67
+ <style type="text/css">
68
+
69
+ #car {
70
+
71
+ position:absolute;
72
+
73
+ top:150px;
74
+
75
+ left:0px;
76
+
77
+ height:70px;
78
+
79
+ width:150px;
80
+
81
+ }
82
+
83
+ </style>
84
+
85
+ <script>
86
+
87
+ var INTERVAL = 10;
88
+
89
+ var x =0;
90
+
91
+ var animating = false;
92
+
93
+ var timer;
94
+
95
+ function move(){
96
+
97
+ var aCar = document.getElementById("car");
98
+
99
+ x += 5;
100
+
101
+ aCar.style.left = x + "px";
102
+
103
+ if (x > 500) {
104
+
105
+ x = 0;
106
+
107
+ }
108
+
109
+ }
110
+
111
+ function startStop(){
112
+
113
+ if (animating) {
114
+
115
+ clearInterval(timer);
116
+
117
+ document.getElementById("btn").innerHTML = "スタート";
118
+
119
+ } else {
120
+
121
+ timer = setInterval("move()", INTERVAL); document.getElementById("btn").innerHTML = "ストップ";
122
+
123
+ }
124
+
125
+ animating = !animating;
126
+
127
+ }
128
+
129
+ window.onload = function(){
130
+
131
+ document.getElementById("btn").onclick = startStop;
132
+
133
+ }
134
+
135
+ </script>
136
+
137
+ </head>
138
+
139
+ <body>
140
+
141
+ <h1>DOMによるアニメーション</h1>
142
+
143
+ <img src="images/car.jpg" id="car">
144
+
145
+ <button id="btn">スタート</button>
146
+
147
+ </body>
148
+
149
+ </html>
150
+
151
+ ```
152
+
153
+
154
+
155
+
156
+
157
+ ```ここに言語を入力
158
+
159
+ こっちが今回質問したプログラム
160
+
161
+ <!DOCTYPE html>
162
+
163
+ <html lang = "ja">
164
+
165
+ <head>
166
+
167
+ <meta charset="UTF-8">
168
+
169
+ <title>DOMを使用したアニメーション</title>
170
+
171
+ <style type="text/css">
172
+
173
+ #car {
174
+
175
+ position:absolute;
176
+
177
+ top:150px;
178
+
179
+ left:0px;
180
+
181
+ height:70px;
182
+
183
+ width:150px;
184
+
185
+ }
186
+
187
+ </style>
188
+
189
+ <script>
190
+
191
+ var INTERVAL = 10;
192
+
193
+ var x =0;
194
+
195
+ var animating = false;
196
+
197
+ var timer;
198
+
199
+ function move(){
200
+
201
+ var aCar = document.getElementById("car");
202
+
203
+ x += 5;
204
+
205
+ aCar.style.left = x + "px";
206
+
207
+ aCar.style.top = y+ "px";
208
+
209
+ if((x>=0&&x<=500)&&(y>=150&&y<=400)){
210
+
211
+ }else{
212
+
213
+ if(x>500){
214
+
215
+ x=0;
216
+
217
+ y=150;
218
+
219
+ x+=5;
220
+
221
+ aCar.style.left=x+"px";
222
+
223
+ var img=imgFile[0];
224
+
225
+ console.log(img);
226
+
227
+
228
+
229
+ }
230
+
231
+ if(y>400){
232
+
233
+ y+=5;
234
+
235
+ var img=imgFile[1];
236
+
237
+ console.log(img);
238
+
239
+ }
240
+
241
+
242
+
243
+ if(x<0){
244
+
245
+ x-=5;
246
+
247
+ var img=imgFile[2];
248
+
249
+ console.log(img);
250
+
251
+ }
252
+
253
+ if(y<150){
254
+
255
+ y-=5;
256
+
257
+ var img=imgFile[3];
258
+
259
+ console.log(img);
260
+
261
+
262
+
263
+ }
84
264
 
85
265
  }
86
266
 
87
- </style>
88
-
89
- <script>
90
-
91
- var imgFile= [];//画像ファイル 配列
92
-
93
- imgFile[0]="images/car.jpg";
94
-
95
- imgFile[1]="images/car2.jpg";
96
-
97
- imgFile[2]="images/car3.jpg";
98
-
99
- imgFile[3]="images/car4.jpg";
100
-
101
- var INTERVAL = 10; //アニメーションの間隔（10ミリ秒）
102
-
103
- var timer; //タイマーID
104
-
105
- var animating = false; //アニメーションを実行中か
106
-
107
- function move(){
108
-
109
- var aCar=document.getElementByld("car");
110
-
111
- x+=5;
112
-
113
- aCar.style.left=x+"px";
114
-
115
- if((x>=0&&x<=500)&&(y>=150&&y<=400)){
116
-
117
-
118
-
119
- }else{
120
-
121
- if(x>500){
122
-
123
- x=0;
124
-
125
- y=150;
126
-
127
- x+=5;
128
-
129
- var img=imgFile[0];
130
-
131
- console.log(img);
132
-
133
- }
134
-
135
- if(y>400){
136
-
137
- y+=5;
138
-
139
- var img=imgFile[1];
140
-
141
- console.log(img);
142
-
143
- }
144
-
145
-
146
-
147
- if(x<0){
148
-
149
- x-=5;
150
-
151
- var img=imgFile[2];
152
-
153
- console.log(img);
154
-
155
- }
156
-
157
- if(y<150){
158
-
159
- y-=5;
160
-
161
- var img=imgFile[3];
162
-
163
- console.log(img);
164
-
165
-
166
-
167
- }
168
-
169
-
170
-
171
- function startStop(){
267
+ function startStop(){
172
268
 
173
269
  if (animating) {
174
270
 
175
- clearInterval(timer);
271
+ clearInterval(timer);
176
-
272
+
177
- document.getElementById("btn").innerHTML = "スタート";
273
+ document.getElementById("btn").innerHTML = "スタート";
178
274
 
179
275
  } else {
180
276
 
181
- timer = setInterval("move()", INTERVAL);
277
+ timer = setInterval("move()", INTERVAL);
182
-
278
+
183
- document.getElementById("btn").innerHTML = "ストップ";
279
+ document.getElementById("btn").innerHTML = "ストップ";
184
280
 
185
281
  }
186
282
 
187
- animating = !animating;
283
+ aimating = !animating;
188
-
284
+
189
- }
285
+ }
190
-
286
+
191
- window.onload = function(){
287
+ window.onload = function(){
192
288
 
193
289
  document.getElementById("btn").onclick = startStop;
194
290
 
195
- }
291
+ }
196
-
197
- }
292
+
198
-
199
- }
200
-
201
- </script>
293
+ </script>
202
-
294
+
203
- </head>
295
+ </head>
204
-
296
+
205
- <body>
297
+ <body>
206
298
 
207
299
  <h1>DOMによるアニメーション</h1>
208
300
 
209
- <img src="images/car.jpg" id="car">
301
+ <img src="images/car.jpg" id="car">
210
-
302
+
211
- <button id="btn">スタート</button>
303
+ <button id="btn">スタート</button>
212
304
 
213
305
  </body>
214
306
 

1

文章の訂正

2019/07/27 07:53

投稿

nubba
nubba

スコア16

test CHANGED
File without changes
test CHANGED
@@ -10,9 +10,9 @@
10
10
 
11
11
 
12
12
 
13
- 今の状態は右を向いた車の画像とスタートボタンとストップボタンはあるのですが、
13
+ 今の状態は右を向いた車の画像とスタートボタンはあるのですが、
14
-
14
+
15
- スタートボタンを押しても反応しない状態です。
15
+ スタートボタンを押しても進まない状態です。
16
16
 
17
17
  わからない点はどうすればスタートボタンを押したら希望通りに動くか、とストップボタンの作り方です。
18
18
 
@@ -90,15 +90,21 @@
90
90
 
91
91
  var imgFile= [];//画像ファイル 配列
92
92
 
93
- imgFile[0]="images/car.jpg";
93
+ imgFile[0]="images/car.jpg";
94
-
94
+
95
- imgFile[1]="images/car2.jpg";
95
+ imgFile[1]="images/car2.jpg";
96
-
96
+
97
- imgFile[2]="images/car3.jpg";
97
+ imgFile[2]="images/car3.jpg";
98
-
98
+
99
- imgFile[3]="images/car4.jpg";
99
+ imgFile[3]="images/car4.jpg";
100
+
100
-
101
+ var INTERVAL = 10; //アニメーションの間隔（10ミリ秒）
102
+
103
+ var timer; //タイマーID
104
+
105
+ var animating = false; //アニメーションを実行中か
106
+
101
- function startButton(){
107
+ function move(){
102
108
 
103
109
  var aCar=document.getElementByld("car");
104
110
 
@@ -160,25 +166,49 @@
160
166
 
161
167
  }
162
168
 
169
+
170
+
171
+ function startStop(){
172
+
173
+ if (animating) {
174
+
175
+ clearInterval(timer);
176
+
177
+ document.getElementById("btn").innerHTML = "スタート";
178
+
179
+ } else {
180
+
181
+ timer = setInterval("move()", INTERVAL);
182
+
183
+ document.getElementById("btn").innerHTML = "ストップ";
184
+
185
+ }
186
+
187
+ animating = !animating;
188
+
189
+ }
190
+
191
+ window.onload = function(){
192
+
193
+ document.getElementById("btn").onclick = startStop;
194
+
163
195
  }
164
196
 
165
197
  }
166
198
 
199
+ }
200
+
167
201
  </script>
168
202
 
169
- </head>
203
+ </head>
170
204
 
171
205
  <body>
172
206
 
173
207
  <h1>DOMによるアニメーション</h1>
174
208
 
175
- <img src="images/car.jpg" id="car">
209
+ <img src="images/car.jpg" id="car">
176
-
177
- <input type="button" value="START" id="startButton">
210
+
178
-
179
- <input type="button" value="STOP" id="stopButton">
211
+ <button id="btn">スタート</button>
180
-
181
-
182
212
 
183
213
  </body>
184
214