方块简化

games/game-rect/scenes/Rect.js

@@ -98,7 +98,7 @@ export default class Rect extends Phaser.Scene {
           "tiles",
           values[j]
         );
-        // tile.setMask(mask);
+        tile.setMask(mask);
         // call adjustTile method to adjust tile origin and display size
         this.adjustTile(tile);
       }
@@ -118,7 +118,7 @@ export default class Rect extends Phaser.Scene {
       "tiles",
       Phaser.Utils.Array.GetRandom(values)
     );
-    // this.player.setMask(mask);
+    this.player.setMask(mask);
     // adjust player origin and display size
     this.adjustTile(this.player);
 
@@ -126,16 +126,10 @@ export default class Rect extends Phaser.Scene {
     this.score = 0;
 
     // add score text
-    this.scoreText = this.add.text(0, 0, "0", {
-      fontFamily: "Arial Black",
-      fontSize: tileSize / 2,
-      color: "#ffffff",
+    this.scoreText = this.add.text(20, 20, "", {
+      fontSize: 20,
     });
-
-    // this.scoreText.setMask(mask);
-
-    // method to adjust score position
-    this.adjustScorePosition();
+    this.scoreText.text = "Game Score: " + this.score;
 
     // move entire tile group up by this.gameOptions.tileSpeed pixels / second
     this.tileGroup.setVelocityY(-this.gameOptions.tileSpeed);
@@ -165,9 +159,6 @@ export default class Rect extends Phaser.Scene {
         },
         this
       );
-    } else {
-      // we need to adjust score position at each frame
-      this.adjustScorePosition();
     }
   }
   // method to set tile origin and display size
@@ -180,15 +171,6 @@ export default class Rect extends Phaser.Scene {
     sprite.displayHeight = tileSize;
   }
 
-  // method to adjust score position
-  adjustScorePosition() {
-    // adjust score position according to its bounding box and player position
-    this.scoreText.x =
-      this.player.x + (tileSize - this.scoreText.getBounds().width) / 2;
-    this.scoreText.y =
-      this.player.y + (tileSize - this.scoreText.getBounds().height) / 2;
-  }
-
   // method to move player tile
   moveTile(pointer) {
     // if we can move...
@@ -207,18 +189,19 @@ export default class Rect extends Phaser.Scene {
       if (distance > 0) {
         // we can't move anymore
         this.canMove = false;
-
+        this.player.x = offsetLeft + column * (tileSize + tileSpace);
+        this.checkMatch();
         // tween the player to destination tile
-        this.tweens.add({
-          targets: [this.player],
-          x: offsetLeft + column * (tileSize + tileSpace),
-          duration: distance * 30,
-          callbackScope: this,
-          onComplete: function () {
-            // at the end of the tween, check for tile match
-            this.checkMatch();
-          },
-        });
+        // this.tweens.add({
+        //   targets: [this.player],
+        //   x: offsetLeft + column * (tileSize + tileSpace),
+        //   duration: distance * 30,
+        //   callbackScope: this,
+        //   onComplete: function () {
+        //     // at the end of the tween, check for tile match
+        //     this.checkMatch();
+        //   },
+        // });
       }
     }
   }
@@ -250,7 +233,7 @@ export default class Rect extends Phaser.Scene {
       this.tweens.add({
         targets: [this.player],
         y: tileBelow[0].gameObject.y,
-        duration: 100,
+        duration: 50,
         callbackScope: this,
         onUpdate: function (tween, target) {
           // at each update, we have to adjust player position because tiles continue moving up
@@ -263,7 +246,7 @@ export default class Rect extends Phaser.Scene {
           this.score++;
 
           // update score text
-          this.scoreText.setText(this.score);
+          this.scoreText.setText("Game Score: " + this.score);
 
           // the good old array with all integers from zero to this.gameOptions.columns - 1
           let values = getValues();