保存背景图版本

big-screen/index.html

@@ -10,7 +10,9 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
-        background: #1a0a2e;
+        background:
+          linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
+          url('http://link-promotion-dev.oss-cn-shanghai.aliyuncs.com/big_screen_back.png') center center / cover no-repeat;
       }
       #game-container {
         position: relative;

big-screen/src/main.js

@@ -18,6 +18,9 @@ const canvas    = document.getElementById('game-canvas')
 const ctx       = canvas.getContext('2d')
 
 const SCREEN_NAME = import.meta.env.VITE_SCREEN_NAME || 'big-screen-1'
+const GAME_BG_URL = 'http://link-promotion-dev.oss-cn-shanghai.aliyuncs.com/back.png'
+const gameBgImg = new Image()
+gameBgImg.src = GAME_BG_URL
 
 /** 每个玩家独立的碎裂效果列表：Map<playerId, BubbleBurst[]> */
 const playerBursts = new Map()
@@ -37,6 +40,16 @@ function applyScaler(playerCount = 1) {
   })
 }
 
+function drawPlayerGameBackground() {
+  if (gameBgImg.complete && gameBgImg.naturalWidth > 0) {
+    ctx.drawImage(gameBgImg, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)
+    return
+  }
+
+  ctx.fillStyle = '#1a0a2e'
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)
+}
+
 // ─── 单个玩家画面渲染 ──────────────────────────────────────────────────────────
 
 function renderPlayer(state, offsetX, roomId) {
@@ -55,6 +68,8 @@ function renderPlayer(state, offsetX, roomId) {
   ctx.save()
   ctx.translate(offsetX, 0)
 
+  drawPlayerGameBackground()
+
   // 泡泡网格
   if (state.grid && state.grid.length) {
     drawBubbleGrid(ctx, state.grid, state.pushAnimOffsetY ?? 0)

big-screen/src/renderer/bubble.js

@@ -32,13 +32,22 @@ export function getGridOffsetX() { return GRID_OFFSET_X }
 
 /**
  * 9 种泡泡颜色（颜色索引 1-9），用于爆炸粒子效果取色。
- * 排序与小程序端一致：按与鸡爪对比度从高到低排列。
+ * 当前统一顺序：
+ *   1 蓝
+ *   2 绿
+ *   3 奶白
+ *   4 紫
+ *   5 黄绿
+ *   6 黄
+ *   7 粉
+ *   8 橙
+ *   9 红
  */
 export const BUBBLE_COLORS = [
   '',
-  '#D8D0B0',    // 1 奶白
-  '#2BC8E8',    // 2 蓝
-  '#1DB85A',    // 3 绿
+  '#2BC8E8',    // 1 蓝
+  '#1DB85A',    // 2 绿
+  '#D8D0B0',    // 3 奶白
   '#8B35E0',    // 4 紫
   '#80C020',    // 5 黄绿
   '#E8C000',    // 6 黄
@@ -49,13 +58,13 @@ export const BUBBLE_COLORS = [
 
 /**
  * 精灵图 bubble.png（1400×1400）中每个球的裁剪区域
- * 索引对应 colorIdx，映射到精灵图中正确的球（与小程序端一致）
+ * 索引对应 colorIdx，映射到精灵图中正确的球
  */
 const SPRITE_REGIONS = [
   null,
-  [1004, 965, 297, 297],   // 1 奶白   ← 精灵图位置9(右下)
-  [1004, 562, 297, 296],   // 2 蓝     ← 精灵图位置6(右中)
-  [581,  562, 297, 296],   // 3 绿     ← 精灵图位置5(中中)
+  [1004, 562, 297, 296],   // 1 蓝     ← 精灵图位置6(右中)
+  [581,  562, 297, 296],   // 2 绿     ← 精灵图位置5(中中)
+  [1004, 965, 297, 297],   // 3 奶白   ← 精灵图位置9(右下)
   [159,  965, 296, 297],   // 4 紫     ← 精灵图位置7(左下)
   [159,  562, 296, 296],   // 5 黄绿   ← 精灵图位置4(左中)
   [1004, 158, 297, 297],   // 6 黄     ← 精灵图位置3(右上)