同色消除高清重制

games/game-flood-fill/game.js

@@ -12,12 +12,11 @@ function launch({ containerId, onLose, onWon }) {
     height,
     parent: containerId,
     backgroundColor: 0xbbada0,
-    pixelArt: true,
     physics: {
       default: "arcade",
       arcade: {
         //gravity: { y: 300 },
-        debug: true,
+        debug: false,
       },
     },
     scene: PlayScene,

games/game-flood-fill/scenes/PlayScene.js

@@ -113,7 +113,19 @@ class PlayScene extends Phaser.Scene {
       .setAlpha(0);
     this.text3 = this.add.text(180, 200, "", 48).setAlpha(0);
 
-    this.instructions = this.add.image(500, 600, "instruction").setAlpha(0);
+    this.instructionWrapper = this.add.rectangle(
+      this.game.config.width / 2,
+      this.game.config.height / 2,
+      this.game.config.width,
+      this.game.config.height,
+      0x000000,
+      0.6
+    );
+    this.instructions = this.add.image(
+      this.game.config.width / 2,
+      this.game.config.height / 2,
+      "instruction"
+    );
     //初始化位置
     this.revealGrid();
   }
@@ -198,12 +210,12 @@ class PlayScene extends Phaser.Scene {
 
     i += 500;
 
-    // this.tweens.add({
-    //   targets: [this.instructions],
-    //   alpha: 1,
-    //   ease: "Power3",
-    //   delay: i,
-    // });
+    this.tweens.add({
+      targets: [this.instructions, this.instructionWrapper],
+      alpha: 1,
+      ease: "Power3",
+      delay: i,
+    });
 
     this.time.delayedCall(i, this.startInputEvents, [], this);
   }
@@ -257,6 +269,7 @@ class PlayScene extends Phaser.Scene {
 
       this.matched = [];
 
+      this.instructionWrapper.setVisible(false);
       this.instructions.setVisible(false);
 
       this.moves--;