質問編集履歴
2
コードの改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -26,186 +26,152 @@
|
|
|
26
26
|
|
|
27
27
|
function init(){
|
|
28
28
|
|
|
29
|
+
const sprites = []; //弾(sprite)を格納するための配列
|
|
30
|
+
|
|
31
|
+
tick(); //毎秒描画される関数
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
window.addEventListener("keydown", handleKeydown);
|
|
36
|
+
|
|
37
|
+
function handleKeydown(event){
|
|
38
|
+
|
|
39
|
+
var keyCode = event.keyCode;
|
|
40
|
+
|
|
41
|
+
//スペースキーを押したら弾(sprite)を作成
|
|
42
|
+
|
|
43
|
+
if (keyCode == 32) {
|
|
44
|
+
|
|
45
|
+
makeSprite();
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
function makeSprite(){
|
|
54
|
+
|
|
55
|
+
const sprite = new bullets();
|
|
56
|
+
|
|
57
|
+
//box~は自機の座標
|
|
58
|
+
|
|
59
|
+
sprite.position.set(box.position.x, box.position.y);
|
|
60
|
+
|
|
61
|
+
sprites.push(sprite);
|
|
62
|
+
|
|
63
|
+
sprites.forEach(function(s) {
|
|
64
|
+
|
|
65
|
+
//画面に弾を追加(sceneはシーンのこと)
|
|
66
|
+
|
|
67
|
+
scene.add(s);
|
|
68
|
+
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
//毎フレーム時に実行されるループイベントです
|
|
76
|
+
|
|
77
|
+
function tick() {
|
|
78
|
+
|
|
79
|
+
sprite.update();
|
|
80
|
+
|
|
81
|
+
renderer.render(scene, camera);
|
|
82
|
+
|
|
83
|
+
requestAnimationFrame(tick);
|
|
84
|
+
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
class bullets extends THREE.Mesh{
|
|
94
|
+
|
|
95
|
+
//constructor()は省略
|
|
96
|
+
|
|
97
|
+
update(){
|
|
98
|
+
|
|
99
|
+
//弾のx座標が画面幅を超えたら（spriteのdisposeの方法が不明）
|
|
100
|
+
|
|
101
|
+
if(this.sprite.position.x > 900){ //900は画面の右端と仮定(width)
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
}else{
|
|
106
|
+
|
|
107
|
+
this.sprite.position.x += 10;
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
### 現在困っていること
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
現在困っているのは、弾を打つ関数makeSprite()内にある、
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
```jsx
|
|
128
|
+
|
|
129
|
+
const sprite = new bullets();
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
という関数の扱いです。
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
現在のmakeSprite()内にspriteを宣言すると、弾はスペースキーを押した回数分だけscene上の自機の座標の上に生成されますが、tick()内にあるsprite.update()が機能しないため、弾は進みません。（spriteがスコープ外なので当然）
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
一方で、初期化関数init内で宣言すると、今度は最初の一発だけ想定通りに画面の端まで動いてくれます。しかし、スペースキーを押した際に複数発発射されることはなく、キーを押すたびに(x,y)=(900,現在のbox(自機)のy座標)に弾の位置が更新されます。
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
```jsx
|
|
152
|
+
|
|
153
|
+
function init(){
|
|
154
|
+
|
|
29
|
-
//キャンバスサイズを指定
|
|
155
|
+
//キャンバスサイズを指定
|
|
30
|
-
|
|
156
|
+
|
|
31
|
-
//レンダラー、カメラ、平行光源、シーン等を作成
|
|
157
|
+
//レンダラー、カメラ、平行光源、シーン等を作成
|
|
158
|
+
|
|
32
|
-
|
|
159
|
+
//★【ここに宣言】
|
|
160
|
+
|
|
33
|
-
|
|
161
|
+
const sprite = new bullets();
|
|
34
162
|
|
|
35
163
|
//弾(sprite)を格納するための配列
|
|
36
164
|
|
|
37
|
-
|
|
165
|
+
const sprites = [];
|
|
38
166
|
|
|
39
167
|
//毎秒描画される関数
|
|
40
168
|
|
|
41
169
|
tick();
|
|
42
170
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
//自機の処理（抜粋）
|
|
46
|
-
|
|
47
|
-
window.addEventListener("keydown", handleKeydown);
|
|
48
|
-
|
|
49
|
-
function handleKeydown(event){
|
|
50
|
-
|
|
51
|
-
var keyCode = event.keyCode;
|
|
52
|
-
|
|
53
|
-
//上と下に動ける（省略）
|
|
54
|
-
|
|
55
|
-
//スペースキーを押したら弾(sprite)を作成
|
|
56
|
-
|
|
57
|
-
if (keyCode == 32) {
|
|
58
|
-
|
|
59
|
-
makeSprite();
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
//弾を打つ処理(spriteの扱い方で困っています)
|
|
68
|
-
|
|
69
|
-
function makeSprite(){
|
|
70
|
-
|
|
71
|
-
const sprite = new bullets();
|
|
72
|
-
|
|
73
|
-
//box~は自機の座標
|
|
74
|
-
|
|
75
|
-
sprite.position.set(box.position.x, box.position.y);
|
|
76
|
-
|
|
77
|
-
sprites.push(sprite);
|
|
78
|
-
|
|
79
|
-
sprites.forEach(function(s) {
|
|
80
|
-
|
|
81
|
-
//画面に弾を追加(sceneはシーンのこと)
|
|
82
|
-
|
|
83
|
-
scene.add(s);
|
|
84
|
-
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
//毎フレーム時に実行されるループイベントです
|
|
92
|
-
|
|
93
|
-
function tick() {
|
|
94
|
-
|
|
95
|
-
sprite.update();
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
renderer.render(scene, camera); // レンダリング
|
|
100
|
-
|
|
101
|
-
requestAnimationFrame(tick);
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
//bullets（弾）クラス
|
|
112
|
-
|
|
113
|
-
class bullets extends THREE.Mesh{
|
|
114
|
-
|
|
115
|
-
constructor(){
|
|
116
|
-
|
|
117
|
-
super();
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
//geometryとmaterialの宣言は割愛
|
|
122
|
-
|
|
123
|
-
this.sprite = new THREE.Mesh(geometry, material));
|
|
124
|
-
|
|
125
|
-
this.add(this.sprite);
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
update(){
|
|
130
|
-
|
|
131
|
-
//弾のx座標が画面幅を超えたら（spriteのdisposeの方法が不明）
|
|
132
|
-
|
|
133
|
-
if(this.sprite.position.x > 900){ //900は画面の右端と仮定(width)
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}else{
|
|
138
|
-
|
|
139
|
-
this.sprite.position.x += 10;
|
|
140
|
-
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
149
171
|
```
|
|
150
172
|
|
|
151
173
|
|
|
152
174
|
|
|
153
|
-
### 現在困っていること
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
現在困っているのは、弾を打つ関数makeSprite()内にある、
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
```jsx
|
|
162
|
-
|
|
163
|
-
const sprite = new bullets();
|
|
164
|
-
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
という関数の扱いです。
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
現在のmakeSprite()内にspriteを宣言すると、弾はスペースキーを押した回数分だけscene上の自機の座標の上に生成されますが、tick()内にあるsprite.update()が機能しないため、弾は進みません。（spriteがスコープ外なので当然）
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
一方で、初期化関数init内で宣言すると、今度は最初の一発だけ想定通りに画面の端まで動いてくれます。しかし、スペースキーを押した際に複数発発射されることはなく、キーを押すたびに(x,y)=(900,現在のbox(自機)のy座標)に弾の位置が更新されます。
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
```jsx
|
|
186
|
-
|
|
187
|
-
function init(){
|
|
188
|
-
|
|
189
|
-
//キャンバスサイズを指定
|
|
190
|
-
|
|
191
|
-
//レンダラー、カメラ、平行光源、シーン等を作成
|
|
192
|
-
|
|
193
|
-
//★【ここに宣言】
|
|
194
|
-
|
|
195
|
-
const sprite = new bullets();
|
|
196
|
-
|
|
197
|
-
//弾(sprite)を格納するための配列
|
|
198
|
-
|
|
199
|
-
const sprites = [];
|
|
200
|
-
|
|
201
|
-
//毎秒描画される関数
|
|
202
|
-
|
|
203
|
-
tick();
|
|
204
|
-
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
175
|
|
|
210
176
|
|
|
211
177
|
|
1
本文の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,12 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
(参考)コード全文はこちら▼
|
|
24
|
-
|
|
25
|
-
[https://eastern-princess-492.notion.site/STG-teratail-169c48689d664cf187d39a171c971ba0](https://www.notion.so/STG-teratail-169c48689d664cf187d39a171c971ba0)
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
23
|
|
|
30
24
|
|
|
31
25
|
```javaScript
|