回答編集履歴

6

2023/12/03 10:41

投稿

退会済みユーザー
test CHANGED
@@ -5,6 +5,7 @@
5
5
  流れ星のアニメーションが表示されている状態でもう一度キーを押すと、表示中の各流れ星が全部プログラム上画面外に消えた時点でそれ以上流れなくなります。
6
6
  流れ星が1つも流れていない状態でキーを押すと、アニメーションが再開します。(画面上部から流れ星が表示されます)
7
7
  アニメーション中に連続してキーを押しても、そのキーに応じてアニメーションの表示・停止が切り替わり、表示される流れ星の最大個数は変わらず、動作が重くなることもありません。
8
+ なお、星のまたたきは、流れ星と関係なくアニメーションするものとしています。
8
9
 
9
10
  もし動作がイメージと異なる場合は、上記にように分かりやすく具体的に要件を説明してください。
10
11
 

5

2023/12/03 10:40

投稿

退会済みユーザー
test CHANGED
@@ -1,11 +1,12 @@
1
1
  いまいち要件がはっきりしませんが、アニメーション中かどうかを保存する変数を作っておけばよいのではないでしょうか。
2
2
 
3
- 下記は、ページ読込後は流れ星のアニメーションは始まっていません
3
+ 下記は、ページ読込後は流れ星のアニメーションは始まっていません
4
4
  キーを押すと、(指定した個数以下の)流れ星のアニメーションが開始します。
5
- 流れ星のアニメーションが表示されている状態でキーを押すと、表示中の各流れ星が全部プログラム上画面外に消えた時点でそれ以上流れなくなります。
5
+ 流れ星のアニメーションが表示されている状態でもう一度キーを押すと、表示中の各流れ星が全部プログラム上画面外に消えた時点でそれ以上流れなくなります。
6
- 流れ星が1つも流れていない状態でキーを押すと、アニメーションが再開します。(画面上部から流れ星が表示され
6
+ 流れ星が1つも流れていない状態でキーを押すと、アニメーションが再開します。(画面上部から流れ星が表示されます
7
7
  アニメーション中に連続してキーを押しても、そのキーに応じてアニメーションの表示・停止が切り替わり、表示される流れ星の最大個数は変わらず、動作が重くなることもありません。
8
8
 
9
+ もし動作がイメージと異なる場合は、上記にように分かりやすく具体的に要件を説明してください。
9
10
 
10
11
  注)元のコードからの変更が最小限になるようにしています。グローバル変数が多用されていたりするのはそのためです。
11
12
 

4

2023/12/03 10:38

投稿

退会済みユーザー
test CHANGED
@@ -1,7 +1,11 @@
1
1
  いまいち要件がはっきりしませんが、アニメーション中かどうかを保存する変数を作っておけばよいのではないでしょうか。
2
2
 
3
+ 下記は、ページ読込後は流れ星のアニメーションは始まっていません。
4
+ キーを押すと、(指定した個数以下の)流れ星のアニメーションが開始します。
3
- 下記はキーを押すと、(指定した個数以下の)流れ星のアニメーションが開始し、アニメーションがされている状態でキーを押すと、各流れ星がプログラム上消えた」と判断された時点でそれ以上流れなくなります。
5
+ 流れ星のアニメーションが表示されている状態でキーを押すと、表示中の各流れ星が全部プログラム上画面外に消えた時点でそれ以上流れなくなります。
4
- 流れ星が流れていない状態でキーを押すと、アニメーションが再開します。
6
+ 流れ星が1つも流れていない状態でキーを押すと、アニメーションが再開します。(画面上部から流れ星が表示される)
7
+ アニメーション中に連続してキーを押しても、そのキーに応じてアニメーションの表示・停止が切り替わり、表示される流れ星の最大個数は変わらず、動作が重くなることもありません。
8
+
5
9
 
6
10
  注)元のコードからの変更が最小限になるようにしています。グローバル変数が多用されていたりするのはそのためです。
7
11
 

3

修正

2023/12/03 10:34

投稿

退会済みユーザー
test CHANGED
@@ -129,12 +129,11 @@
129
129
  ctx.restore();
130
130
  }
131
131
  update() {
132
+ if (this.y < h + 100) {
132
- this.x -= this.speed;
133
+ this.x -= this.speed;
133
- this.y += this.speed;
134
+ this.y += this.speed;
134
- if (this.y >= h + 100) {
135
- if (isMeteorAnimationEnabled){
135
+ } else if (isMeteorAnimationEnabled) {
136
- this.reset();
136
+ this.reset();
137
- }
138
137
  }
139
138
  }
140
139
  }

2

2023/12/03 10:14

投稿

退会済みユーザー
test CHANGED
@@ -1,4 +1,4 @@
1
- いまいち要件がはっきりしませんが、が押されたかどうかを保存する変数を作っておけばよいのではないでしょうか。
1
+ いまいち要件がはっきりしませんが、アニメション中かどうかを保存する変数を作っておけばよいのではないでしょうか。
2
2
 
3
3
  下記はキーを押すと、(指定した個数以下の)流れ星のアニメーションが開始し、アニメーションがされている状態でキーを押すと、各流れ星がプログラム上「消えた」と判断された時点でそれ以上流れなくなります。
4
4
  流れ星が流れていない状態でキーを押すと、アニメーションが再開します。

1

2023/12/03 10:14

投稿

退会済みユーザー
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  下記はキーを押すと、(指定した個数以下の)流れ星のアニメーションが開始し、アニメーションがされている状態でキーを押すと、各流れ星がプログラム上「消えた」と判断された時点でそれ以上流れなくなります。
4
4
  流れ星が流れていない状態でキーを押すと、アニメーションが再開します。
5
+
6
+ 注)元のコードからの変更が最小限になるようにしています。グローバル変数が多用されていたりするのはそのためです。
5
7
 
6
8
  ```js
7
9
  let canvas, ctx, w, h, moon, stars = [], meteors = [];