teratail
回答率
85.47%
質問するログイン新規登録
トップifに関する質問mouseClicked関数でマウス制御

編集履歴

回答編集履歴

4

不要なコメントの削除

2018/03/25 11:07

投稿

退会済みユーザー
test CHANGED
@@ -144,16 +144,6 @@
144
144
 
145
145
 
146
146
 
147
- //1.ベースになるプログラムを作成せよ
148
-
149
- //上に示したのビデオの映像と同じ動きをするプログラムを作成せよ(映像は、周りに黒い枠がでるかもしれないがそれは無視してよい)。なお、映像中の四角形を以下で書かれるとする。 描画速度は、frameRate(10);　とする。
150
-
151
-
152
-
153
- //2.(1)のプログラムをマウスで制御できるようにせよ
154
-
155
- //マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き出すようにせよ。mouseClicked関数を用いること。35~40行程度でできる。
156
-
157
147
 
158
148
 
159
149
  </script>

3

文法の修正

2018/03/25 11:07

投稿

退会済みユーザー
test CHANGED
@@ -1,14 +1,14 @@
1
1
  先ほど間違えた内容をこちらに書いてしまったため、
2
2
 
3
- 修正した結果を回答します。
3
+ 修正して分かった結果を回答します。
4
+
5
+
4
6
 
5
7
  ```
6
8
 
7
9
  <script>
8
10
 
9
- var x, y, stage, photo;
11
+ var x, y, stage, photo, ugoki;
10
-
11
- //グローバル関数にしておく
12
12
 
13
13
  x = 350;
14
14
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  photo = loadImage("siro.jpg"); //背景
28
28
 
29
- frameRate(100); //速さ10
29
+ frameRate(100); //速さ100
30
30
 
31
31
  ugoki = 1;
32
32
 
@@ -58,13 +58,13 @@
58
58
 
59
59
 
60
60
 
61
- switch (ugoki) { //▲
61
+ switch (ugoki) { // ugoki=1 //▲
62
62
 
63
63
  case 1:
64
64
 
65
65
  if (y >= 100) {
66
66
 
67
- if (clicked) { // if (clicked==true)と同じ②
67
+ if (clicked) { // if (clicked==true)と同じ。②
68
68
 
69
69
  y--;
70
70
 
@@ -74,7 +74,7 @@
74
74
 
75
75
  //ここを通らない
76
76
 
77
- ugoki++; //1→2
77
+ ugoki++; //ugoki=2
78
78
 
79
79
  }
80
80
 
@@ -84,17 +84,17 @@
84
84
 
85
85
  if (x >= 250) {
86
86
 
87
-
87
+ // if (clicked) {
88
88
 
89
- x--;
89
+ x--;
90
90
 
91
-
91
+ // }
92
92
 
93
93
  break;
94
94
 
95
95
  }
96
96
 
97
- ugoki++; //2→3
97
+ ugoki++; //ugoki=3
98
98
 
99
99
  case 3:
100
100
 
@@ -104,19 +104,19 @@
104
104
 
105
105
  if (x >= 50 && y <= 250) {
106
106
 
107
-
107
+ // if (clicked) {
108
108
 
109
- x = x - 1.3;
109
+ x = x - 1.3;
110
110
 
111
- y++;
111
+ y++;
112
112
 
113
-
113
+ // }
114
114
 
115
115
  break;
116
116
 
117
117
  }
118
118
 
119
- ugoki++; //3→4(上のifで3までの条件のため動かない)
119
+ ugoki++; //ugoki=4(上のifで3までの条件のため動かない)
120
120
 
121
121
  } //▲
122
122
 
@@ -142,6 +142,20 @@
142
142
 
143
143
  }
144
144
 
145
+
146
+
147
+ //1.ベースになるプログラムを作成せよ
148
+
149
+ //上に示したのビデオの映像と同じ動きをするプログラムを作成せよ(映像は、周りに黒い枠がでるかもしれないがそれは無視してよい)。なお、映像中の四角形を以下で書かれるとする。 描画速度は、frameRate(10);　とする。
150
+
151
+
152
+
153
+ //2.(1)のプログラムをマウスで制御できるようにせよ
154
+
155
+ //マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き出すようにせよ。mouseClicked関数を用いること。35~40行程度でできる。
156
+
157
+
158
+
145
- </script>
159
+ </script>
146
160
 
147
161
  ```

2

誤字の修正

2018/03/25 11:03

投稿

退会済みユーザー
test CHANGED
@@ -1,10 +1,10 @@
1
1
  先ほど間違えた内容をこちらに書いてしまったため、
2
2
 
3
- 修正して分かった結果を回答します。
3
+ 修正した結果を回答します。
4
4
 
5
+ ```
5
6
 
6
-
7
- ```<script>
7
+ <script>
8
8
 
9
9
  var x, y, stage, photo;
10
10
 
@@ -116,7 +116,7 @@
116
116
 
117
117
  }
118
118
 
119
- ugoki++; //3→4(上のifで3までの条件指定のため動かない)
119
+ ugoki++; //3→4(上のifで3までの条件のため動かない)
120
120
 
121
121
  } //▲
122
122
 
@@ -142,4 +142,6 @@
142
142
 
143
143
  }
144
144
 
145
- </script>```
145
+ </script>
146
+
147
+ ```

1

回答ではないことを書いてしまったので修正

2018/03/25 10:56

投稿

退会済みユーザー
test CHANGED
@@ -1,56 +1,10 @@
1
- ありがとうございます！
1
+ 先ほど間違えた内容をこちらに書いてしまったため、
2
2
 
3
- mouseClicked関数はどのように組み込めば機能するのかは理解できました。
3
+ 修正して分かった結果を回答します。
4
4
 
5
5
 
6
6
 
7
- 以下のようにやってみましたが、
8
-
9
- マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き
10
-
11
- 出したい時、
12
-
13
- 「case 1: //1回目の動き」のみをまず機能するかやってみたところ
14
-
15
- ここまでの何が違うのかが分かりません( ;;)
16
-
17
-
18
-
19
- ★の部分mouseClicked関数を制御している箇所だと私は思っています。
20
-
21
- エラーは出ないです。
22
-
23
-
24
-
25
- ```
26
-
27
- <!DOCTYPE html>
28
-
29
- <html lang="en">
30
-
31
-
32
-
33
- <head>
34
-
35
- <meta charset="UTF-8">
36
-
37
- <title></title>
38
-
39
- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js">
40
-
41
-
42
-
43
- /*p5.js使用*/
44
-
45
- </script>
46
-
47
- </head>
48
-
49
-
50
-
51
- <body>
52
-
53
- <script>
7
+ ```<script>
54
8
 
55
9
  var x, y, stage, photo;
56
10
 
@@ -60,11 +14,13 @@
60
14
 
61
15
  y = 250;
62
16
 
63
- clicked = true; //はじめは動きがある★
17
+ clicked = true; //はじめに指定②
64
18
 
65
19
 
66
20
 
67
21
  function setup() { //はじめの1回だけ実行
22
+
23
+
68
24
 
69
25
  createCanvas(640, 480);
70
26
 
@@ -74,6 +30,8 @@
74
30
 
75
31
  ugoki = 1;
76
32
 
33
+
34
+
77
35
  }
78
36
 
79
37
 
@@ -82,11 +40,7 @@
82
40
 
83
41
 
84
42
 
85
-
86
-
87
-
88
-
89
- if (ugoki <= 3) { //動き(ugoki)が3になるまで
43
+ if (ugoki <= 3) { //動き(ugoki)が3になるまで　//〇
90
44
 
91
45
  image(photo, 0, 0, width, height); //背景
92
46
 
@@ -104,13 +58,13 @@
104
58
 
105
59
 
106
60
 
107
- switch (ugoki) {
61
+ switch (ugoki) { //▲
108
62
 
109
- case 1: //1回目の動き
63
+ case 1:
110
64
 
111
65
  if (y >= 100) {
112
66
 
113
- if (clicked) { // if (flag==true)と同じ★
67
+ if (clicked) { // if (clicked==true)と同じ②
114
68
 
115
69
  y--;
116
70
 
@@ -118,19 +72,23 @@
118
72
 
119
73
  break;
120
74
 
75
+ //ここを通らない
76
+
121
77
  ugoki++; //1→2
122
78
 
123
79
  }
124
80
 
81
+ case 2:
125
82
 
126
-
127
- case 2: //2回目の動き
83
+ //ugoki == 1 でもy > 100 だとここを通る
128
84
 
129
85
  if (x >= 250) {
130
86
 
131
- x--;
87
+
132
88
 
89
+ x--;
133
90
 
91
+
134
92
 
135
93
  break;
136
94
 
@@ -138,58 +96,50 @@
138
96
 
139
97
  ugoki++; //2→3
140
98
 
99
+ case 3:
100
+
101
+ //ugoki == 1 でも、y > 100かつx<250 だとここを通る
102
+
141
- case 3: //3回目の動き
103
+ //ugoki == 2 でも、x<250 だとここを通る
142
104
 
143
105
  if (x >= 50 && y <= 250) {
144
106
 
145
- x = x - 1.3;
107
+
146
108
 
147
- y++;
109
+ x = x - 1.3;
148
110
 
111
+ y++;
149
112
 
113
+
150
114
 
151
115
  break;
152
116
 
153
117
  }
154
118
 
155
- ugoki++; //3→4(上のifで3までの条件指定のため動か
119
+ ugoki++; //3→4(上のifで3までの条件指定のため動かない)
156
120
 
157
- ない)
121
+ } //▲
158
-
159
- }
160
122
 
161
123
 
162
124
 
163
- function mouseClicked() { //クリックで呼び出される★
125
+ } //〇
164
126
 
165
- if (clicked) {
166
-
167
- clicked = false;
168
-
169
- } else {
170
-
171
- clicked = true;
172
-
173
- }
127
+ }
174
-
175
- }
176
128
 
177
129
 
130
+
131
+ function mouseClicked() { //クリックで呼び出される②
132
+
133
+ if (clicked) {
134
+
135
+ clicked = false;
136
+
137
+ } else {
138
+
139
+ clicked = true;
178
140
 
179
141
  }
180
142
 
181
143
  }
182
144
 
183
-
184
-
185
- </script>
145
+ </script>```
186
-
187
-
188
-
189
- </body>
190
-
191
-
192
-
193
- </html>
194
-
195
- ```