diff --git a/Game.vue b/Game.vue index 5aa9a36..85dcb95 100644 --- a/Game.vue +++ b/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(); }, }; diff --git a/games/game-ballmove/assets/ballmove/bg.png b/games/game-ballmove/assets/ballmove/bg.png index bd50e27..3bbddf9 100644 Binary files a/games/game-ballmove/assets/ballmove/bg.png and b/games/game-ballmove/assets/ballmove/bg.png differ diff --git a/games/game-ballmove/assets/ballmove/bu.png b/games/game-ballmove/assets/ballmove/bu.png index faccb89..9b66f2b 100644 Binary files a/games/game-ballmove/assets/ballmove/bu.png and b/games/game-ballmove/assets/ballmove/bu.png differ diff --git a/games/game-ballmove/assets/ballmove/fr.png b/games/game-ballmove/assets/ballmove/fr.png new file mode 100644 index 0000000..13431fa Binary files /dev/null and b/games/game-ballmove/assets/ballmove/fr.png differ diff --git a/games/game-ballmove/assets/ballmove/gr.png b/games/game-ballmove/assets/ballmove/gr.png index 9f56789..de813f6 100644 Binary files a/games/game-ballmove/assets/ballmove/gr.png and b/games/game-ballmove/assets/ballmove/gr.png differ diff --git a/games/game-ballmove/assets/ballmove/ice.png b/games/game-ballmove/assets/ballmove/ice.png new file mode 100644 index 0000000..b2d305a Binary files /dev/null and b/games/game-ballmove/assets/ballmove/ice.png differ diff --git a/games/game-ballmove/assets/ballmove/og.png b/games/game-ballmove/assets/ballmove/og.png index 2067405..730b275 100644 Binary files a/games/game-ballmove/assets/ballmove/og.png and b/games/game-ballmove/assets/ballmove/og.png differ diff --git a/games/game-ballmove/assets/ballmove/pu.png b/games/game-ballmove/assets/ballmove/pu.png index 6258d47..2396d24 100644 Binary files a/games/game-ballmove/assets/ballmove/pu.png and b/games/game-ballmove/assets/ballmove/pu.png differ diff --git a/games/game-ballmove/assets/ballmove/red.png b/games/game-ballmove/assets/ballmove/red.png index 9054ca0..9a17eb2 100644 Binary files a/games/game-ballmove/assets/ballmove/red.png and b/games/game-ballmove/assets/ballmove/red.png differ diff --git a/games/game-ballmove/assets/ballmove/ye.png b/games/game-ballmove/assets/ballmove/ye.png index 0d7d6ce..21c90f8 100644 Binary files a/games/game-ballmove/assets/ballmove/ye.png and b/games/game-ballmove/assets/ballmove/ye.png differ diff --git a/games/game-ballmove/scenes/PlayScene.js b/games/game-ballmove/scenes/PlayScene.js index 6dbe1b9..4e2fc6c 100644 --- a/games/game-ballmove/scenes/PlayScene.js +++ b/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() { diff --git a/games/game2048/constant/index.js b/games/game2048/constant/index.js index 8e3881f..1c01e7e 100644 --- a/games/game2048/constant/index.js +++ b/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"; diff --git a/games/game2048/game.js b/games/game2048/game.js index 440c057..1511229 100644 --- a/games/game2048/game.js +++ b/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, { diff --git a/games/game2048/scenes/PlayScene.js b/games/game2048/scenes/PlayScene.js index d70cc92..1367c13 100644 --- a/games/game2048/scenes/PlayScene.js +++ b/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() {