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

編集履歴

回答編集履歴

4

不要なコメントの削除

2018/03/25 11:07

投稿

退会済みユーザー
answer CHANGED
@@ -71,11 +71,6 @@
71
71
  }
72
72
  }
73
73
 
74
- //1.ベースになるプログラムを作成せよ
75
- //上に示したのビデオの映像と同じ動きをするプログラムを作成せよ(映像は、周りに黒い枠がでるかもしれないがそれは無視してよい)。なお、映像中の四角形を以下で書かれるとする。 描画速度は、frameRate(10);　とする。
76
74
 
77
- //2.(1)のプログラムをマウスで制御できるようにせよ
78
- //マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き出すようにせよ。mouseClicked関数を用いること。35~40行程度でできる。
79
-
80
75
  </script>
81
76
  ```

3

文法の修正

2018/03/25 11:07

投稿

退会済みユーザー
answer CHANGED
@@ -1,9 +1,9 @@
1
1
  先ほど間違えた内容をこちらに書いてしまったため、
2
- 修正した結果を回答します。
2
+ 修正して分かった結果を回答します。
3
+
3
4
  ```
4
5
  <script>
5
- var x, y, stage, photo;
6
+ var x, y, stage, photo, ugoki;
6
- //グローバル関数にしておく
7
7
  x = 350;
8
8
  y = 250;
9
9
  clicked = true; //はじめに指定②
@@ -12,7 +12,7 @@
12
12
 
13
13
  createCanvas(640, 480);
14
14
  photo = loadImage("siro.jpg"); //背景
15
- frameRate(100); //速さ10
15
+ frameRate(100); //速さ100
16
16
  ugoki = 1;
17
17
 
18
18
  }
@@ -28,36 +28,36 @@
28
28
  fill(100); //三角形の背景(灰色)
29
29
  triangle(50, 250, 350, 250, x, y); //三角形
30
30
 
31
- switch (ugoki) { //▲
31
+ switch (ugoki) { // ugoki=1 //▲
32
32
  case 1:
33
33
  if (y >= 100) {
34
- if (clicked) { // if (clicked==true)と同じ②
34
+ if (clicked) { // if (clicked==true)と同じ。②
35
35
  y--;
36
36
  }
37
37
  break;
38
38
  //ここを通らない
39
- ugoki++; //1→2
39
+ ugoki++; //ugoki=2
40
40
  }
41
41
  case 2:
42
42
  //ugoki == 1 でもy > 100 だとここを通る
43
43
  if (x >= 250) {
44
-
44
+ // if (clicked) {
45
- x--;
45
+ x--;
46
-
46
+ // }
47
47
  break;
48
48
  }
49
- ugoki++; //2→3
49
+ ugoki++; //ugoki=3
50
50
  case 3:
51
51
  //ugoki == 1 でも、y > 100かつx<250 だとここを通る
52
52
  //ugoki == 2 でも、x<250 だとここを通る
53
53
  if (x >= 50 && y <= 250) {
54
-
54
+ // if (clicked) {
55
- x = x - 1.3;
55
+ x = x - 1.3;
56
- y++;
56
+ y++;
57
-
57
+ // }
58
58
  break;
59
59
  }
60
- ugoki++; //3→4(上のifで3までの条件のため動かない)
60
+ ugoki++; //ugoki=4(上のifで3までの条件のため動かない)
61
61
  } //▲
62
62
 
63
63
  } //〇
@@ -70,5 +70,12 @@
70
70
  clicked = true;
71
71
  }
72
72
  }
73
+
74
+ //1.ベースになるプログラムを作成せよ
75
+ //上に示したのビデオの映像と同じ動きをするプログラムを作成せよ(映像は、周りに黒い枠がでるかもしれないがそれは無視してよい)。なお、映像中の四角形を以下で書かれるとする。 描画速度は、frameRate(10);　とする。
76
+
77
+ //2.(1)のプログラムをマウスで制御できるようにせよ
78
+ //マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き出すようにせよ。mouseClicked関数を用いること。35~40行程度でできる。
79
+
73
- </script>
80
+ </script>
74
81
  ```

2

誤字の修正

2018/03/25 11:03

投稿

退会済みユーザー
answer CHANGED
@@ -1,7 +1,7 @@
1
1
  先ほど間違えた内容をこちらに書いてしまったため、
2
- 修正して分かった結果を回答します。
2
+ 修正した結果を回答します。
3
-
3
+ ```
4
- ```<script>
4
+ <script>
5
5
  var x, y, stage, photo;
6
6
  //グローバル関数にしておく
7
7
  x = 350;
@@ -57,7 +57,7 @@
57
57
 
58
58
  break;
59
59
  }
60
- ugoki++; //3→4(上のifで3までの条件指定のため動かない)
60
+ ugoki++; //3→4(上のifで3までの条件のため動かない)
61
61
  } //▲
62
62
 
63
63
  } //〇
@@ -70,4 +70,5 @@
70
70
  clicked = true;
71
71
  }
72
72
  }
73
- </script>```
73
+ </script>
74
+ ```

1

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

2018/03/25 10:56

投稿

退会済みユーザー
answer CHANGED
@@ -1,48 +1,25 @@
1
+ 先ほど間違えた内容をこちらに書いてしまったため、
1
- ありがとうございます！
2
+ 修正して分かった結果を回答します。
2
- mouseClicked関数はどのように組み込めば機能するのかは理解できました。
3
3
 
4
- 以下のようにやってみましたが、
5
- マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き
6
- 出したい時、
7
- 「case 1: //1回目の動き」のみをまず機能するかやってみたところ
8
- ここまでの何が違うのかが分かりません( ;;)
9
-
10
- ★の部分mouseClicked関数を制御している箇所だと私は思っています。
11
- エラーは出ないです。
12
-
13
- ```
14
- <!DOCTYPE html>
15
- <html lang="en">
16
-
17
- <head>
18
- <meta charset="UTF-8">
19
- <title></title>
20
- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js">
21
-
22
- /*p5.js使用*/
23
- </script>
24
- </head>
25
-
26
- <body>
27
- <script>
4
+ ```<script>
28
5
  var x, y, stage, photo;
29
6
  //グローバル関数にしておく
30
7
  x = 350;
31
8
  y = 250;
32
- clicked = true; //はじめは動きがある★
9
+ clicked = true; //はじめに指定②
33
10
 
34
11
  function setup() { //はじめの1回だけ実行
12
+
35
13
  createCanvas(640, 480);
36
14
  photo = loadImage("siro.jpg"); //背景
37
15
  frameRate(100); //速さ10
38
16
  ugoki = 1;
17
+
39
18
  }
40
19
 
41
20
  function draw() {
42
21
 
43
-
44
-
45
- if (ugoki <= 3) { //動き(ugoki)が3になるまで
22
+ if (ugoki <= 3) { //動き(ugoki)が3になるまで　//〇
46
23
  image(photo, 0, 0, width, height); //背景
47
24
  line(50, 250, 350, 250);
48
25
  line(350, 250, 350, 100);
@@ -51,48 +28,46 @@
51
28
  fill(100); //三角形の背景(灰色)
52
29
  triangle(50, 250, 350, 250, x, y); //三角形
53
30
 
54
- switch (ugoki) {
31
+ switch (ugoki) { //▲
55
- case 1: //1回目の動き
32
+ case 1:
56
33
  if (y >= 100) {
57
- if (clicked) { // if (flag==true)と同じ★
34
+ if (clicked) { // if (clicked==true)と同じ②
58
35
  y--;
59
36
  }
60
37
  break;
38
+ //ここを通らない
61
39
  ugoki++; //1→2
62
40
  }
63
-
41
+ case 2:
64
- case 2: //2回目の動き
42
+ //ugoki == 1 でもy > 100 だとここを通る
65
43
  if (x >= 250) {
44
+
66
- x--;
45
+ x--;
67
-
46
+
68
47
  break;
69
48
  }
70
49
  ugoki++; //2→3
50
+ case 3:
51
+ //ugoki == 1 でも、y > 100かつx<250 だとここを通る
71
- case 3: //3回目の動き
52
+ //ugoki == 2 でも、x<250 だとここを通る
72
53
  if (x >= 50 && y <= 250) {
54
+
73
- x = x - 1.3;
55
+ x = x - 1.3;
74
- y++;
56
+ y++;
75
-
57
+
76
58
  break;
77
59
  }
78
- ugoki++; //3→4(上のifで3までの条件指定のため動か
60
+ ugoki++; //3→4(上のifで3までの条件指定のため動かない)
79
- ない)
61
+ } //▲
80
- }
81
62
 
82
- function mouseClicked() { //クリックで呼び出される★
83
- if (clicked) {
84
- clicked = false;
85
- } else {
86
- clicked = true;
63
+ } //〇
87
- }
64
+ }
88
- }
89
65
 
66
+ function mouseClicked() { //クリックで呼び出される②
67
+ if (clicked) {
68
+ clicked = false;
69
+ } else {
70
+ clicked = true;
90
71
  }
91
72
  }
92
-
93
- </script>
73
+ </script>```
94
-
95
- </body>
96
-
97
- </html>
98
- ```