Javascript 2つの同一色のブロックを消した際、その上に乗っていたブロックを落下

Question

前提・実現したいこと

CANVAS APIにてJavascriptの学習を行っております。
上の記述で消した２つの四角の上にも、まだブロックがある場合
（空中に浮いている状態になっているもの）をy += gravity して下のブロックがある箇所or地面まで持っていきたいと思っているのですが、思い詰まっています。

前回に引き続きですが、考え方・記述等ご助力頂ければ幸いです。

該当のソースコード(必要そうな個所を記載)

      let canvas = $("maingame");
      let ctx = canvas.get(0).getContext("2d"); //決まり文句

      let canvasWidth = canvas.width();
      let canvasHeight = canvas.height();

      let playGame;

      let playAnimation = false;

      let score = 0;
      let koWidth = 80;
      let koHeight = 100;

      let colors = ["rgb(240,255,240)", "rgb(81, 102, 107)", "rgb(92, 66, 123)", "rgb(39, 125, 160)"];


      let title = $("#title");
      let startButton = $("#startAnimation");
      let gameover = $("#gameover");
      let restart = $("#restart");
      let titleback = $("#titleback");

      //抽象化
      function Shape(x, y, width, height, gravity, boxColor) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.gravity = gravity;
        this.boxColor = boxColor;

        this.fixed = false; //静止の有無
      };

      Shape.prototype.update = function (others) {
        //地面の設定
        let ground = {
          x: 100,
          y: canvasHeight - 50,
          width: canvasWidth - 200,
          height: 0
        }
        //地面に触れるor触れないの処理
        if (!this.fixed && this.collision(ground)) {
          this.y = canvasHeight - this.height - 50;

          if ((this.y > koHeight && this.x > koWidth && this.x + this.height <
              canvasWidth -
              koWidth)) {//エリア内に全て入っていればOK
            score++;
            return this.fixed = true;
          } else {//エリア外に触れてるのでgameover演出
            gameover.show();
            restart.show();
            playAnimation = false; 

            restart.click(function (e) {
              location.reload();
            });
          }
        }

        if (this.fixed) return;

        others.some(other => {
          //他のShapeとの衝突確認
          if (other.fixed && other.collision(this)) {
            this.y = other.y - this.height;

	 if(this.boxColor === other.boxColor ){ 
              //同色が積まれたときに消す記述
              this.number = 0;
              this.x = baseX + 1;
              this.y = baseY + 1;
              this.width = 0;
              this.height = 0;
              
              other.x = baseX + 2;
              other.y = baseY + 2;
              other.width = 0;
              other.height = 0;
              score++
              
             /*if {
               ここら辺で追記…？
              
            }*/
            
            }

            if (this.y > koHeight && this.x > koWidth && this.x + this.height <
              canvasWidth -
              koWidth) {
              score++;
              return this.fixed = true;

            } else {
              gameover.show();
              restart.show();
              playAnimation = false; //gameover演出

              restart.click(function (e) {
                location.reload();
              });
            }
          }
        });

        if (!this.fixed) {
          this.y += this.gravity;
          //1コマごとの変化の記述はここで
        }
      }

      Shape.prototype.render = function (ctx) {
        ctx.beginPath();
        ctx.fillStyle = this.boxColor; //物体の色、場所
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.fill();

        ctx.strokeStyle = "rgba(5, 5, 5, 0.9)";
        ctx.lineWidth = 1;
        ctx.stroke();
      }

      Shape.prototype.collision = function (shape) {
        let rect1 = this,
          rect2 = shape;
        return rect1.x < rect2.x + rect2.width &&
          rect1.x + rect1.width > rect2.x &&
          rect1.y < rect2.y + rect2.height &&
          rect1.height + rect1.y > rect2.y; //衝突判定
      }
      /*ここから初期位置配置*/
      let shapes = new Array();

      function onClick() { //出現させるブロックの位置、大きさ、落ちる速度
        let width = height = Math.floor(Math.random() * 80 + 30);
        let x = event.clientX - blockP.offsetLeft - width / 2;
        let y = 10;
        let gravity = 5;
        let boxColor = colors[Math.floor(Math.random() * colors.length)];

        shapes.push(new Shape(x, y, width, height, gravity, boxColor));
      }

      shapes.addEventListener('click', onClick, false);
      /*ここまで*/

      function animate() {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.drawImage(img, 100, 648, 400, 60); //土台

        for (let shape of shapes) {
          shape.update(shapes);
          shape.render(ctx);
        }

        if (playAnimation === true) {
          setTimeout(animate, 33);
        };
      };

      animate();

試したこと

ここらへんで記載するのかなとは思ってます。(コメントアウトしてる部分)
othersがfixedになっていて、かつcollisionがふれていない対象を取れれば実装できるかと考えているのですが、
コメントアウトの部分だとothers.collisionがfunctionになっていない為エラーが発生してしまいました。

Answer 1

64行目 if (this.fixed) return;を消して、
66行目 others.some(other => {を
this.fixed=others.some(other => {とし、{}内で停止するときだけtrueを返すようにすれば、fixedの更新と停止判定が同時にできるようになります。

質問と関係ないけど92行目

if (this.y > koHeight && this.x > koWidth && this.x + this.height < 
    canvasWidth - koWidth) {

x + heightをwidthと比較してるけど、あってるのかな？

Comments

[OG.]

回答ありがとうございます。

すみません。64行目を消し、６6行目のものに変更をかけたのですが最初のブロックが地面に接した時点でブロックが消失するようになってしまいました…
これは更に別途some内に記述が必要なのでしょうか？

[Kaleidoscope]

//地面に触れるor触れないの処理
の部分をothers.some()のブロックの下に持っていったほうが良いかもです。
地面に衝突したあと、下にブロックが無いのでそのまま落下してるかもしれません。

もう一つはshapesの自分自身との衝突判定を除外しないと、落下が止まった瞬間自分自身と衝突して消えてしまってるかもしれません。
`this===other`で除外できればいいですが、うまく動かないのであれば、x,yが同じ値のshapesはないと仮定して`this.x==other.x && this.y==other.y`で判定するくらいですかね。

単純にsomeの中に追加してしまうとshapes数×shapes数 回、地面との判定をすることになるのでちょっと無駄が多いです。（shapes数 回あれば十分）
ground自体を特別なshapesとして追加してしまうのは一つの手です。`isErasable`等の属性を追加して、消滅判定はスキップしたり。

[OG.]

評価が遅くなり大変申し訳ございません。
カレイドスコープさんのコメントを参考に色々模索してみたのですが、今度は地面上でビタビタと振動を続けたり逆方向に飛んで行くようになってしまい…

恐らく大きく修正が必要だと判断したため、Javascriptのロジックの勉強がもう少しじっくりと時間をかけて行って実装しようと思います。
ご丁寧にご説明頂きありがとうございます！

Answer 2

this.fixed を変更する条件を考えてみましょう。

現状は、他のShapeと接触したら、update() しても値が変わらないようにするためのフラグになっているはずです。

Comments

[OG.]

回答ありがとうございます。
原因としては　some()での衝突有無の検出でtrue or false仕分け→衝突した時点でreturn文でthis.fixed = trueにしてしまっているのでそれ以降はtrueのままになってしまっている。
なので下のものが消えてしまってもtrue状態を抜けずに物体が浮いてしまっている。
って感じでしょうか？

つまりreturn文を改修する必要があるってことですかね…（場所的にはコメントアウトした上のreturn付近…？）