diff --git a/h5/water/game.js b/h5/water/game.js
index df76d05..6095784 100644
--- a/h5/water/game.js
+++ b/h5/water/game.js
@@ -1,4 +1,5 @@
 import Waterful from "./waterful";
+import tip from "./tip.png";
 import "../../font.css";
 import "./water.css";
 export default class Game {
@@ -15,6 +16,21 @@ export default class Game {
       bg.appendChild(button);
     });
     container.appendChild(bg);
+    const tipDom = document.createElement("div");
+    tipDom.className = "tip-wrapper";
+    tipDom.addEventListener("click", (e) => {
+      e.stopPropagation();
+      Object.assign(tipDom.style, {
+        display: "none",
+      });
+    });
+    const tipImg = document.createElement("img");
+    tipImg.className = "tip";
+    tipImg.src = tip;
+    tipDom.append(tipImg);
+    bg.append(tipDom);
+    this.tipDom = tipDom;
+
     const meta = document.createElement("div");
     meta.className = "meta";
     bg.appendChild(meta);
@@ -44,9 +60,16 @@ export default class Game {
       waterful.init(this.options);
     });
     this.waterful = waterful;
+    this.bg = bg;
+  }
+  showTip() {
+    Object.assign(this.tipDom.style, {
+      display: "block",
+    });
   }
   dispose() {}
   restart() {
+    this.showTip();
     this.loaded && this.waterful.restart(this.options);
   }
   pause() {
diff --git a/h5/water/tip.png b/h5/water/tip.png
new file mode 100644
index 0000000..7671436
Binary files /dev/null and b/h5/water/tip.png differ
diff --git a/h5/water/water.css b/h5/water/water.css
index c551c25..ca64b0c 100644
--- a/h5/water/water.css
+++ b/h5/water/water.css
@@ -38,3 +38,20 @@
   color: #fff;
   font-family: "game";
 }
+.tip-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0rem;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.6);
+}
+.tip-wrapper .tip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
diff --git a/phaser/match3/scene.js b/phaser/match3/scene.js
index cf3c769..96ab5a1 100644
--- a/phaser/match3/scene.js
+++ b/phaser/match3/scene.js
@@ -1,6 +1,7 @@
 import gems from "./gems.png";
 import Match3 from "./match3";
 import bg from "./bg.jpg";
+import tip from "./tip.png";
 import "../../font.css";
 const gameOptions = {
   gemSize: 260,
@@ -18,6 +19,7 @@ export default class playGame extends Phaser.Scene {
     super("scene");
   }
   preload() {
+    this.load.image("tip", tip);
     this.load.image("bg", bg);
     this.load.spritesheet("gems", gems, {
       frameWidth: gameOptions.frameSize,
@@ -58,6 +60,19 @@ export default class playGame extends Phaser.Scene {
     this.dragging = false;
     this.drawField();
     this.input.on("pointerdown", this.gemSelect, this);
+    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,
+      "tip"
+    );
   }
   drawField() {
     this.poolArray = [];
@@ -82,6 +97,11 @@ export default class playGame extends Phaser.Scene {
     }
   }
   gemSelect(pointer) {
+    if (this.instructionWrapper.active) {
+      this.instructionWrapper.destroy();
+      this.instructions.destroy();
+      return;
+    }
     if (this.canPick) {
       this.dragging = true;
       let row = Math.floor(
diff --git a/phaser/match3/tip.png b/phaser/match3/tip.png
new file mode 100644
index 0000000..186b2e4
Binary files /dev/null and b/phaser/match3/tip.png differ