【Three.js】シューティングゲームで弾クラスの配列化と描画が上手くいかない

Question

###何に取り組んでいるか
Three.jsというjavaScriptのフレームワークでシューティングゲームを作っています。(Three.jsの文法自体はほとんどjavaScriptみたいなものだと思います)

###実装したい仕様
実装したい仕様としては、画面の左端に自機を配置しており、上下のみ動くことができます。また、弾は画面のスペースキーを押したら自機から右端方向へと発射されるという仕組みです。

###コード（抜粋）

※関係のない宣言、コードは一部端折って質問させていただきます。

function init(){
　　　　const sprites = []; //弾(sprite)を格納するための配列
  tick(); //毎秒描画される関数

   window.addEventListener("keydown", handleKeydown);
   function handleKeydown(event){
   　　　　var keyCode = event.keyCode;
   　　　　//スペースキーを押したら弾(sprite)を作成
       　　　　if (keyCode == 32) {
         　　　　makeSprite();
       　　　　　}
   }

        function makeSprite(){
            const sprite = new bullets();
	　　　　　　　　//box~は自機の座標
            sprite.position.set(box.position.x, box.position.y);
            sprites.push(sprite);
            sprites.forEach(function(s) {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//画面に弾を追加(sceneはシーンのこと)
                scene.add(s);
            });           
        }

        //毎フレーム時に実行されるループイベントです
        function tick() {
            sprite.update();
            renderer.render(scene, camera); 
            requestAnimationFrame(tick);
        }
    }
}

    class bullets extends THREE.Mesh{
        //constructor()は省略
        update(){
	　　　　　　　　//弾のx座標が画面幅を超えたら（spriteのdisposeの方法が不明）
            if(this.sprite.position.x > 900){　//900は画面の右端と仮定(width)

            }else{
                this.sprite.position.x += 10; 
            }
        }
}

現在困っていること

現在困っているのは、弾を打つ関数makeSprite()内にある、

const sprite = new bullets();

という関数の扱いです。

現在のmakeSprite()内にspriteを宣言すると、弾はスペースキーを押した回数分だけscene上の自機の座標の上に生成されますが、tick()内にあるsprite.update()が機能しないため、弾は進みません。（spriteがスコープ外なので当然）

一方で、初期化関数init内で宣言すると、今度は最初の一発だけ想定通りに画面の端まで動いてくれます。しかし、スペースキーを押した際に複数発発射されることはなく、キーを押すたびに(x,y)=(900,現在のbox(自機)のy座標)に弾の位置が更新されます。

function init(){
//キャンバスサイズを指定
//レンダラー、カメラ、平行光源、シーン等を作成
  //★【ここに宣言】
	const sprite = new bullets();
  //弾(sprite)を格納するための配列
	const sprites = [];
  //毎秒描画される関数
  tick();

試してみたこと

spriteにidを設定したり、spriteを格納したsprites配列をforeachで回してみるなど、色々と試しているのですが、自分の持っている知識と経験では限界で、想定通り動かすことはできていません。

bulletのクラス化につきましては以下の記事を参考にさせていただきました。

シューティングゲームで弾を連射したい
https://teratail.com/questions/85720

###やりたいこと
やりたいこととしては、とりあえず「スペースキーを押されたら自機からspriteを発射し、毎フレームx座標に+10しながら画面の右端に到達して止まる（スペースキーを何度も押されたら押された分だけ弾を生成し、同様に動く）」ということをやりたいです。
（弾が消える処理は自分で考えようと思っています）

どうかご教示の程をよろしくお願いいたします。

###補足
Processingだとdraw()関数のなかにぶっ込んでforループで入れ子構造にして回してあげると動いてくれますが、それをthree.jsで試した結果、キーを押した瞬間にいきなり右端に表示されました（あと処理が重たくなるような気がします）

Answer 1

２か所ほど修正してみました。罫線で強調表示している箇所になります。
＜対応概要＞
・makeSprite() の中で弾丸を生成するよう変更
・tick() の中で弾丸毎に update() を呼び出すよう変更

  const sprites = [];
  //=====================================================
  //const sprite = new bullets(); … makeSprite() に移動
  //=====================================================
  tick();
 
  //飛行機の処理
  window.addEventListener("keydown", handleKeydown);
  function handleKeydown(event){
    // キーコード
    var keyCode = event.keyCode;
    
      if (keyCode == 38) {
        // 上
        box.position.y += 50;
      }
      if (keyCode == 40) {
          // 下
        box.position.y -= 50;
      }
      if (keyCode == 32) {
        makeSprite();
      }
  }  
    //弾を打つ処理
    function makeSprite(){
        //=====================================================
        const sprite = new bullets();
        //=====================================================
        sprite.position.set(box.position.x, box.position.y);
        sprites.push(sprite);
        sprites.forEach(function(s) {
            scene.add(s);
        });           
    }

    // 毎フレーム時に実行されるループイベン
    function tick() {
        // sprites の各要素毎に update() の呼び出しを実施
        //=====================================================
        for (let i = 0; i < sprites.length; i++) {
            sprites[i].update();
        }
        //=====================================================
        renderer.render(scene, camera); // レンダリング
        requestAnimationFrame(tick);
    }

■ 実行イメージ

Comments

[ASOBU_dev]

ご回答ありがとうございました！動きました^^

javaScriptではfor文の時にletで宣言するのですね。
自分が試した時にうまくいかなかった原因の一つにiをletではなくvarで宣言していたというものもありました。
https://teratail.com/questions/62502

いい勉強になりました。ご回答いただき、ありがとうございました。

[cx20]

> javaScriptではfor文の時にletで宣言するのですね。
回答の例であれば var でも動作するかと思いますが、モダンなブラウザであれば let を使った方が良いかと思います。

あと、質問自体とは少し話がそれますが、クラス名と変数名が少し気になりました。
クラス名としては複数形ではなく単数形にした方が分かりやすいかと思います。

変更前）
　const sprites = [];
　const sprite = new bullets();
　sprites.push(sprite);

変更後）
　const bullets = [];
　const bullet = new Bullet();
　bullets.push(bullet);

[ASOBU_dev]

コードレビュー、ご指摘ありがとうございます...!
命名規則、きちんと書けるように努力します。