diff --git a/games/game2048/assets/sprites/bg.jpg b/games/game2048/assets/sprites/bg.jpg new file mode 100644 index 0000000..dcf37a9 Binary files /dev/null and b/games/game2048/assets/sprites/bg.jpg differ diff --git a/games/game2048/constant/index.js b/games/game2048/constant/index.js index 1c01e7e..0ecd677 100644 --- a/games/game2048/constant/index.js +++ b/games/game2048/constant/index.js @@ -1,5 +1,7 @@ export const ROW = 1; //0 -export const COL = 1; -export const TILE_SIZE = 125; //80 +export const COL = 2; +const gameArea = 740; export const TILE_SPACING = 10; //8 +export const TILE_SIZE = (gameArea - TILE_SPACING * 3) / 4; //80 + export const TWEEN_DURATION = 100; diff --git a/games/game2048/game.js b/games/game2048/game.js index 1511229..98dd3b5 100644 --- a/games/game2048/game.js +++ b/games/game2048/game.js @@ -23,8 +23,8 @@ function launch({ containerId, onLose }) { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, parent: containerId, - width: 600, - height: 600, + width: 1080, + height: 1080, }, scene: PlayScene, }); diff --git a/games/game2048/scenes/PlayScene.js b/games/game2048/scenes/PlayScene.js index 1367c13..6efe8b2 100644 --- a/games/game2048/scenes/PlayScene.js +++ b/games/game2048/scenes/PlayScene.js @@ -1,10 +1,8 @@ import Phaser from "phaser"; import tile_default from "../assets/sprites/tile_default.png"; -import restart from "../assets/sprites/restart.png"; -import score_img from "../assets/sprites/score.png"; -import score_best from "../assets/sprites/score_best.png"; -import tiles from "../assets/sprites/tiles125.png"; +import tiles from "../assets/sprites/tiles2x.png"; +import bg from "../assets/sprites/bg.jpg"; import move_mp3 from "../assets/sounds/move.mp3"; import move_ogg from "../assets/sounds/move.ogg"; @@ -26,13 +24,10 @@ class PlayScene extends Phaser.Scene { preload() { this.load.image("tile_default", tile_default); - this.load.image("restart", restart); - this.load.image("score", score_img); - this.load.image("score_best", score_best); - + this.load.image("bg", bg); this.load.spritesheet("tiles", tiles, { - frameWidth: TILE_SIZE, - frameHeight: TILE_SIZE, + frameWidth: 160, + frameHeight: 160, }); this.load.audio("move", [move_mp3, move_ogg]); @@ -40,6 +35,7 @@ class PlayScene extends Phaser.Scene { } create() { + this.score = 0; this.layout(); // 随机生成 2 个数字方块 @@ -377,6 +373,13 @@ class PlayScene extends Phaser.Scene { // 布局 layout() { + this.bg = this.add.image( + this.game.config.width / 2, + this.game.config.height / 2, + "bg" + ); + this.bg.displayWidth = this.game.config.width; + this.bg.displayHeight = this.game.config.height; // 头部 this.layout_header(); @@ -397,19 +400,21 @@ class PlayScene extends Phaser.Scene { for (let i = 0; i < 4; i++) { this.tileArray[i] = []; for (let j = 0; j < 4; j++) { - this.add - .sprite( - this.setPosition(j, COL), - this.setPosition(i, ROW), - "tile_default" - ) - .setScale(1.5625); + const defaultTile = this.add.sprite( + this.setPosition(j, COL), + this.setPosition(i, ROW), + "tile_default" + ); + defaultTile.displayWidth = TILE_SIZE; + defaultTile.displayHeight = TILE_SIZE; let tile = this.add.sprite( this.setPosition(j, COL), this.setPosition(i, ROW), "tiles" ); + tile.displayWidth = TILE_SIZE; + tile.displayHeight = TILE_SIZE; tile.alpha = 0; tile.visible = false; @@ -426,7 +431,7 @@ class PlayScene extends Phaser.Scene { } setPosition(pos, direction) { - let top = direction === ROW ? 100 : 0; + let top = direction === ROW ? 270 : 160; return ( pos * (TILE_SIZE + TILE_SPACING) + TILE_SIZE * 0.5 + TILE_SPACING + top );