game2048 half-styled

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;

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,
   });

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
     );