更新素材

Game.vue

@@ -19,6 +19,14 @@ export default {
       containerId: "gameContainer",
     };
   },
+  watch: {
+    name(val, oldVal) {
+      if (oldVal) {
+        this.dispose();
+        this.reload(val);
+      }
+    },
+  },
   methods: {
     pause() {
       this.gameInstance.scene.scenes.forEach((scene) => {
@@ -40,25 +48,35 @@ export default {
       this.gameInstance.restart();
       this.state = STATE_RUNNING;
     },
+    dispose() {
+      for (const key in this.gameInstance.scene.keys) {
+        if (this.gameInstance.scene.keys.hasOwnProperty(key)) {
+          this.gameInstance.scene.stop(key); //停止渲染
+          this.gameInstance.scene.keys[key] = undefined;
+        }
+      }
+      this.gameInstance.destroy(false);
+      document
+        .getElementById("gameContainer")
+        .removeChild(this.gameInstance.canvas);
+    },
+    reload(name) {
+      this.gameInstance = games[name]({
+        containerId: this.containerId,
+        onLose: () => {
+          if (this.state !== STATE_LOSE) this.$emit("lost");
+          this.state = STATE_LOSE;
+        },
+      });
+    },
   },
   async mounted() {
-    this.gameInstance = games[this.name]({
-      containerId: this.containerId,
-      onLose: () => {
-        if (this.state !== STATE_LOSE) this.$emit("lost");
-        this.state = STATE_LOSE;
-      },
-    });
+    console.log("a");
+    this.reload(this.name);
   },
 
   destroyed() {
-    for (const key in this.gameInstance.scene.keys) {
-      if (this.gameInstance.scene.keys.hasOwnProperty(key)) {
-        this.gameInstance.scene.stop(key); //停止渲染
-        this.gameInstance.scene.keys[key] = undefined;
-      }
-    }
-    this.gameInstance.destroy(false);
+    this.dispose();
   },
 };
 </script>

games/game-ballmove/scenes/PlayScene.js

@@ -11,9 +11,9 @@ function importAll(r) {
 const images = importAll(
   require.context("../assets/ballmove", false, /\.(png|jpe?g|svg)$/)
 );
-const blockNames = ["bu", "gr", "og", "pu", "red", "ye"];
+const blockNames = ["bu", "gr", "og", "pu", "red", "ye", "fr", "ice"];
 const blockWidth = (2 / 3) * 100;
-const blockHeight = (blockWidth / 116) * 133;
+const blockHeight = blockWidth * 2;
 class PlayScene extends Phaser.Scene {
   constructor() {
     super({
@@ -130,7 +130,7 @@ class PlayScene extends Phaser.Scene {
   }
 
   movePlatforms() {
-    this.bgGroup.setVelocityX(-gameOptions.platformSpeed * 0.5);
+    // this.bgGroup.setVelocityX(-gameOptions.platformSpeed * 0.5);
     this.platformGroup.setVelocityX(-gameOptions.platformSpeed);
   }
   stopPlatforms() {

games/game2048/constant/index.js

@@ -3,4 +3,3 @@ export const COL = 1;
 export const TILE_SIZE = 125; //80
 export const TILE_SPACING = 10; //8
 export const TWEEN_DURATION = 100;
-export const LOCAL_STORAGE_NAME = "L2048";

games/game2048/game.js

@@ -19,6 +19,13 @@ function launch({ containerId, onLose }) {
         debug: true,
       },
     },
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_BOTH,
+      parent: containerId,
+      width: 600,
+      height: 600,
+    },
     scene: PlayScene,
   });
   Object.assign(game, {

games/game2048/scenes/PlayScene.js

@@ -11,14 +11,7 @@ import move_ogg from "../assets/sounds/move.ogg";
 import grow_mp3 from "../assets/sounds/grow.mp3";
 import grow_ogg from "../assets/sounds/grow.ogg";
 
-import {
-  COL,
-  ROW,
-  TILE_SIZE,
-  TILE_SPACING,
-  TWEEN_DURATION,
-  LOCAL_STORAGE_NAME,
-} from "../constant";
+import { COL, ROW, TILE_SIZE, TILE_SPACING, TWEEN_DURATION } from "../constant";
 
 class PlayScene extends Phaser.Scene {
   tileArray = [];
@@ -104,7 +97,6 @@ class PlayScene extends Phaser.Scene {
             // 设置层级，越左侧层级越高
             children[i].depth = this.game.config.width - children[i].x;
           }
-          console.log("向右");
           this.move(0, 1);
         }
 
@@ -113,7 +105,6 @@ class PlayScene extends Phaser.Scene {
             // 越向右层级越高
             children[i].depth = children[i].x;
           }
-          console.log("向左");
           this.move(0, -1);
         }
 
@@ -122,7 +113,6 @@ class PlayScene extends Phaser.Scene {
             // 越上面层级越高
             children[i].depth = this.game.config.height - children[i].y;
           }
-          console.log("向下");
           this.move(1, 0);
         }
 
@@ -131,7 +121,6 @@ class PlayScene extends Phaser.Scene {
             // 越下面层级越高
             children[i].depth = children[i].y;
           }
-          console.log("向上");
           this.move(-1, 0);
         }
       }
@@ -148,7 +137,6 @@ class PlayScene extends Phaser.Scene {
             // 越向右层级越高
             children[i].depth = children[i].x;
           }
-          console.log("向左");
 
           // 行为 0，不变化，列为 -1，向左
           this.move(0, -1);
@@ -159,7 +147,6 @@ class PlayScene extends Phaser.Scene {
             // 设置层级，越左侧层级越高
             children[i].depth = this.game.config.width - children[i].x;
           }
-          console.log("向右");
 
           // 行为 0，不变化，列为 1，向右
           this.move(0, 1);
@@ -170,8 +157,6 @@ class PlayScene extends Phaser.Scene {
             // 越下面层级越高
             children[i].depth = children[i].y;
           }
-          console.log("向上");
-
           // 列为 0，不变化，行为 -1，向上
           this.move(-1, 0);
           break;
@@ -181,7 +166,6 @@ class PlayScene extends Phaser.Scene {
             // 越上面层级越高
             children[i].depth = this.game.config.height - children[i].y;
           }
-          console.log("向下");
 
           // 列为 0，不变化，行为 1，向下
           this.move(1, 0);
@@ -338,7 +322,7 @@ class PlayScene extends Phaser.Scene {
           this.transformTile(tile, row, col);
         }
         if (this.movingTiles === 0) {
-          this.scoreText.setText(this.score);
+          this.scoreText.text = "Game Score: " + this.score;
           this.resetTiles();
           this.addTile();
         }
@@ -360,7 +344,7 @@ class PlayScene extends Phaser.Scene {
       onComplete: () => {
         this.movingTiles--;
         if (this.movingTiles === 0) {
-          this.scoreText.setText(this.score);
+          this.scoreText.text = "Game Score: " + this.score;
           this.resetTiles();
           this.addTile();
         }
@@ -401,44 +385,10 @@ class PlayScene extends Phaser.Scene {
   }
   //设置头部
   layout_header() {
-    // 添加分数背景
-    this.add.sprite(
-      this.setPosition(0, COL) + 30,
-      this.setPosition(0, ROW) - 115,
-      "score"
-    );
-
-    // 添加最高分数背景
-    this.add.sprite(
-      this.setPosition(1, COL) + 40,
-      this.setPosition(0, ROW) - 115,
-      "score_best"
-    );
-
-    // 重新开始游戏
-    let restartButton = this.add.sprite(
-      this.setPosition(3, COL) - 10,
-      this.setPosition(0, ROW) - 110,
-      "restart"
-    );
-    restartButton.setInteractive();
-    restartButton.on("pointerdown", () => {
-      this.scene.start("PlayScene");
+    this.scoreText = this.add.text(20, 20, "", {
+      fontSize: 20,
     });
-
-    // 分数
-    this.scoreText = this.add
-      .text(
-        this.setPosition(0, COL) + 30,
-        this.setPosition(0, ROW) - 105,
-        "0",
-        {
-          fontFamily: "Arial",
-          fontSize: 22,
-          fill: "#ffffff",
-        }
-      )
-      .setOrigin(0.5);
+    this.scoreText.text = "Game Score: " + this.score;
   }
   //设置底部布局
   layout_body() {