ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Your Name
2026-06-05 15:51:48 +08:00
parent f37310ec50
commit b9d36d8d04
3 changed files with 465 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TUICallKit-Vue3/tongji/pages/game.vue
+193 -72
View File
@@ -125,30 +125,28 @@
</view>
<!-- Header HUD -->
<view class="gg-header gg-glass" :style="headerStyle">
<view class="gg-header" :style="headerStyle">
<!-- 顶部导航与全局状态 -->
<view class="gg-hud-nav" :style="navStyle">
<!-- 左侧控制组 -->
<!-- 左：返回 -->
<view class="gg-hud-btn" hover-class="gg-hud-btn--pressed" @tap="goBack">
<TongjiIcon name="chevron-left" size="md" color="#006c4b" />
</view>
<!-- 绝对居中的关卡 -->
<view class="gg-hud-level-center">
<text class="gg-hud-level-text">第 {{ levelConfig.id }} 关</text>
</view>
<!-- 右：声音 -->
<view class="gg-hud-control-group">
<view class="gg-hud-btn" hover-class="gg-hud-btn--pressed" @tap="goBack">
<TongjiIcon name="chevron-left" size="md" color="#006c49" />
</view>
<view
class="gg-hud-btn"
:class="{ 'is-muted': !sfxEnabled }"
hover-class="gg-hud-btn--pressed"
@tap="onSoundToggle"
>
<TongjiIcon name="volume" size="md" :color="sfxEnabled ? '#006c49' : '#94a3b8'" />
</view>
</view>
<!-- 绝对居中的关卡与得分 -->
<view class="gg-hud-level-center">
<text class="gg-hud-level-text">第 {{ levelConfig.id }} 组</text>
<view class="gg-hud-score" :class="{ 'is-pop': scoreAnimating }">
<text class="gg-hud-score-val">{{ scoreText }}</text>
<text class="gg-hud-score-unit">分</text>
<TongjiIcon name="volume" size="md" :color="sfxEnabled ? '#006c4b' : '#94a3b8'" />
</view>
</view>
</view>
@@ -156,49 +154,40 @@
<!-- 主区：棋盘为主，辅助信息弱化 -->
<view class="gg-main" :style="mainStyle">
<!-- 次：仅展示上次消除的食物与含糖量 -->
<view v-if="gamePhase === 'playing'" class="gg-hud-last-food">
<view class="gg-hud-last-food-head">
<text class="gg-hud-last-food-kicker">上次消除</text>
<view
v-if="lastClearedFood"
class="gg-hud-last-food-chip"
:class="'is-' + lastClearedFood.gi"
>
<text class="gg-hud-last-food-chip-dot"></text>
<text class="gg-hud-last-food-chip-text">{{ lastClearedFood.giShort }}</text>
</view>
</view>
<view
v-if="lastClearedFood"
class="gg-hud-last-food-card"
:class="'is-' + lastClearedFood.gi"
>
<view class="gg-hud-last-food-icon" :class="'is-' + lastClearedFood.gi">
<!-- 信息横幅：默认为玩法提示；消除后展示该食物的含糖与建议 -->
<view
v-if="gamePhase === 'playing'"
class="gg-info-banner"
:class="lastClearedFood ? 'is-food is-' + lastClearedFood.gi : ''"
>
<!-- 已消除：食物含糖 + 建议 -->
<template v-if="lastClearedFood">
<view class="gg-info-banner-icon is-food" :class="'is-' + lastClearedFood.gi">
<FoodTileIcon :food="lastClearedFood.food" size="goal" />
</view>
<view class="gg-hud-last-food-body">
<text class="gg-hud-last-food-name">{{ lastClearedFood.name }}</text>
<view class="gg-hud-last-food-sugar-row">
<view class="gg-hud-last-food-gi" :class="'is-' + lastClearedFood.gi">
<text class="gg-hud-last-food-gi-text">含糖 {{ lastClearedFood.giShort }}</text>
<view class="gg-info-banner-body">
<view class="gg-info-food-head">
<text class="gg-info-food-name">{{ lastClearedFood.name }}</text>
<view class="gg-info-food-gi" :class="'is-' + lastClearedFood.gi">
<text class="gg-info-food-gi-text">含糖{{ lastClearedFood.giShort }}</text>
</view>
<text class="gg-hud-last-food-sugar-hint">{{ lastClearedFood.eatHint }}</text>
</view>
<text class="gg-info-food-tip" :class="'is-' + lastClearedFood.gi">{{ lastClearedFood.tip }}</text>
</view>
</view>
<view v-else class="gg-hud-last-food-placeholder">
<view class="gg-hud-last-food-placeholder-dot" aria-hidden="true"></view>
<text>三连消除后，这里显示食物名称与含糖量</text>
</view>
</template>
<!-- 默认：玩法提示 -->
<template v-else>
<view class="gg-info-banner-icon">
<TongjiIcon name="info" size="md" color="#ffffff" />
</view>
<view class="gg-info-banner-body">
<text class="gg-info-banner-text"><text class="gg-info-banner-kw">认糖：</text>点击食物看含糖量 · 消除红色「高」即过关</text>
</view>
</template>
</view>
<!-- 主：棋盘 -->
<view class="gg-board-hero">
<view v-if="gamePhase === 'playing'" class="gg-board-hint-inline">
<text class="gg-hint-tag">认糖</text>
<text class="gg-board-hint-text">点食物看含糖 · 消掉红色「高」即过关</text>
</view>
<view class="gg-board-stack" :style="boardStackStyle">
<view class="gg-board-zone">
<view v-if="hintTipVisible" class="gg-no-move-tip">
@@ -265,8 +254,8 @@
</view>
</view>
<!-- 辅：道具栏（弱化） -->
<view class="gg-footer gg-glass gg-footer--sub" :style="footerStyle">
<!-- 辅：底部道具栏 -->
<view class="gg-footer" :style="footerStyle">
<view class="gg-boosters">
<view
v-for="booster in boosters"
@@ -276,9 +265,11 @@
:class="{ 'is-disabled': booster.count <= 0 }"
@tap="onBooster(booster)"
>
<view class="gg-booster-count" :class="booster.countClass">{{ booster.count }}</view>
<view class="gg-booster-icon">
<TongjiIcon :name="booster.icon" size="xl" :color="booster.color" />
<view class="gg-booster-tile">
<view class="gg-booster-icon">
<TongjiIcon :name="booster.icon" size="xl" :color="booster.color" />
</view>
<view class="gg-booster-count" :class="booster.countClass">{{ booster.count }}</view>
</view>
<text class="gg-booster-label">{{ booster.label }}</text>
</view>
@@ -336,8 +327,8 @@ const COL_AXES = Array.from({ length: COLS }, (_, i) => i)
const BOARD_INSET_RPX = 4
/** 棋盘与底部道具栏之间的安全间隙，避免最后一行被遮挡 */
const BOARD_FOOTER_GAP_RPX = 28
const GRID_PAD_RPX = 8
const GRID_GAP_RPX = 8
const GRID_PAD_RPX = 18
const GRID_GAP_RPX = 14
const SWAP_MS = 280
const MATCH_MS = 400
const GRAVITY_MS = 300
@@ -360,6 +351,21 @@ const activeFoods = ref([])
const sessionHighFood = ref(null)
const goalDefs = ref([])
/** 解锁高糖三连所需的有效操作次数（约 8 步内才有机会消除红色） */
const HIGH_UNLOCK_MOVES = 7
/** 解锁前棋盘固定保留的高糖数量（<3 无法三连，故无法消除） */
const HIGH_COUNT_LOCKED = 2
/** 解锁后棋盘至少保留的高糖数量（够凑三连） */
const HIGH_COUNT_UNLOCKED = 3
/** 解锁后高糖数量上限，避免刷屏 */
const HIGH_COUNT_MAX = 6
/** 解锁后每次补格生成高糖的概率 */
const HIGH_SPAWN_P = 0.16
/** 非高糖棋子的最小种类数，保证棋盘有足够变化 */
const MIN_NON_HIGH_TYPES = 4
/** 本局玩家有效操作次数（成功消除的交换计为一次） */
const playerMoves = ref(0)
function pickRandom(pool, n) {
const arr = [...pool]
for (let i = arr.length - 1; i > 0; i--) {
@@ -379,13 +385,26 @@ function selectSessionFoods() {
if (Array.isArray(fixedKeys) && fixedKeys.length) {
const fixed = fixedKeys.map((k) => getFoodByKey(k)).filter(Boolean)
const fixedHighs = fixed.filter((f) => f.gi === 'high')
const fixedNonHighs = fixed.filter((f) => f.gi !== 'high')
// 每关只允许一种高糖：从固定高糖里随机取 1 种
const fixedHighPick = pickRandom(fixedHighs, 1)
sessionHighFood.value = fixedHighPick[0] ? cloneFoodType(fixedHighPick[0]) : null
activeFoods.value = fixed
warmUpFoodImgs(fixed)
// 非高糖种类不足时，用随机低糖补足，保证棋盘有变化
const nonHigh = [...fixedNonHighs]
if (nonHigh.length < MIN_NON_HIGH_TYPES) {
const used = new Set([...nonHigh, ...fixedHighPick].map((f) => f.key))
const extraLows = FOOD_LIBRARY.filter((f) => f.gi === 'low' && !used.has(f.key))
nonHigh.push(...pickRandom(extraLows, MIN_NON_HIGH_TYPES - nonHigh.length))
}
const goalFoods = pickRandom(fixed, 2)
const active = [...nonHigh, ...fixedHighPick]
activeFoods.value = active
warmUpFoodImgs(active)
// 收集目标从非高糖里挑（高糖以“消除即过关”驱动）
const goalPool = nonHigh.length ? nonHigh : active
const goalFoods = pickRandom(goalPool, Math.min(2, goalPool.length))
const fixedTargets = levelConfig.value.goalTargets || [10, 12]
goalDefs.value = goalFoods.map((f, i) => ({ key: f.key, food: cloneFoodType(f), target: fixedTargets[i] ?? 10 }))
@@ -659,10 +678,6 @@ const goalList = computed(() =>
})
)
const allGoalsDone = computed(() =>
goalList.value.length > 0 && goalList.value.every((g) => g.done)
)
const glucoseStatusText = computed(() => {
if (glucoseLevel.value < 30) return '血糖偏低'
if (glucoseLevel.value > 70) return '血糖过高'
@@ -744,7 +759,15 @@ function updateGridMetrics() {
function randomFood() {
const pool = activeFoods.value.length ? activeFoods.value : FOOD_LIBRARY
const pick = pool[Math.floor(Math.random() * pool.length)]
const highFood = sessionHighFood.value
// 解锁后高糖才会随补格生成；解锁前一律生成非高糖，由 ensureHighPresence 控制高糖数量
const afterUnlock = highFood && playerMoves.value >= HIGH_UNLOCK_MOVES
if (afterUnlock && Math.random() < HIGH_SPAWN_P) {
return cloneFoodType(highFood)
}
const nonHigh = pool.filter((f) => f.gi !== 'high')
const src = nonHigh.length ? nonHigh : pool
const pick = src[Math.floor(Math.random() * src.length)]
return cloneFoodType(pick)
}
@@ -759,6 +782,91 @@ function boardHasHighGiFood() {
return false
}
/** 该位置若变为高糖，是否会与现有高糖形成三连（注入时尽量避免，让玩家自己凑） */
function wouldFormHighRun(r, c) {
const isHigh = (rr, cc) => {
const t = board.value[rr]?.[cc]
return t && !t.isRemoved && t.type.gi === 'high'
}
let h = 1
for (let cc = c - 1; cc >= 0 && isHigh(r, cc); cc--) h++
for (let cc = c + 1; cc < COLS && isHigh(r, cc); cc++) h++
if (h >= 3) return true
let v = 1
for (let rr = r - 1; rr >= 0 && isHigh(rr, c); rr--) v++
for (let rr = r + 1; rr < ROWS && isHigh(rr, c); rr++) v++
return v >= 3
}
function shuffleInPlace(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]]
}
return arr
}
/**
* 维持棋盘上高糖（红色）食物的数量，是“约 8 步才能消除红色”的核心：
* - 解锁前（playerMoves < HIGH_UNLOCK_MOVES）固定保留 2 个，永远无法三连 → 无法消除；
* - 解锁后至少保留 3 个（散开、避免直接成行），玩家凑三连即可消除过关；上限 HIGH_COUNT_MAX。
* 高糖只在此注入/回收，randomFood 解锁前不生成高糖。
*/
function ensureHighPresence() {
const highFood = sessionHighFood.value
if (!highFood) return
const before = playerMoves.value < HIGH_UNLOCK_MOVES
const minTarget = before ? HIGH_COUNT_LOCKED : HIGH_COUNT_UNLOCKED
const maxCap = before ? HIGH_COUNT_LOCKED : HIGH_COUNT_MAX
const highTiles = []
const nonHighTiles = []
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const t = board.value[r]?.[c]
if (!t || t.isRemoved) continue
if (t.type.gi === 'high') highTiles.push(t)
else nonHighTiles.push(t)
}
}
if (highTiles.length < minTarget) {
let need = minTarget - highTiles.length
const candidates = shuffleInPlace([...nonHighTiles])
// 优先选不会立即成三连的位置
for (const t of candidates) {
if (need <= 0) break
if (t.type.gi === 'high') continue
if (wouldFormHighRun(t.r, t.c)) continue
t.type = cloneFoodType(highFood)
need--
}
// 仍不够再放宽限制
for (const t of candidates) {
if (need <= 0) break
if (t.type.gi === 'high') continue
t.type = cloneFoodType(highFood)
need--
}
bumpLayout()
} else if (highTiles.length > maxCap) {
const lowMidPool = activeFoods.value.filter((f) => f.gi !== 'high')
let remove = highTiles.length - maxCap
const shuffled = shuffleInPlace([...highTiles])
for (const t of shuffled) {
if (remove <= 0) break
const repl = lowMidPool.length
? lowMidPool[Math.floor(Math.random() * lowMidPool.length)]
: null
if (repl) {
t.type = cloneFoodType(repl)
remove--
}
}
bumpLayout()
}
}
function wouldCreateInitialMatch(r, c, type, currentBoard, currentRow) {
const key = type.key
if (r >= 2 && currentBoard[r - 1][c]?.type.key === key && currentBoard[r - 2][c]?.type.key === key) {
@@ -813,6 +921,8 @@ function initBoard() {
}
ensureBoardFull(next)
commitBoard(next)
// 注入本关唯一高糖（解锁前固定 2 个，无法三连）
ensureHighPresence()
startHintTimer()
}
@@ -874,6 +984,7 @@ function setupLevel(levelId) {
highClearAlertVisible.value = false
clearedHighFoodName.value = ''
lastClearedFood.value = null
playerMoves.value = 0
tileTouchStart = null
clearDragPreview()
selectSessionFoods()
@@ -1467,6 +1578,7 @@ function recordLastClearedFood(groups) {
gi,
giShort: GI_SHORT[gi] || '低糖',
eatHint: formatEatLabel(t),
tip: getFoodTip(t),
color: GI_COLOR[gi] || '#64748b',
food: cloneFoodType(t)
}
@@ -1513,11 +1625,7 @@ function showLearnFx(groups) {
function checkGameEnd() {
if (gamePhase.value !== 'playing') return
// 无失败惩罚：认全目标或已消除场上全部高糖食物即通关
if (allGoalsDone.value) {
endGame('won', { reason: 'goals' })
return
}
// 唯一通关条件：消除本关唯一的高糖（红色）食物
if (sessionHighFood.value && !boardHasHighGiFood()) {
endGame('won', {
reason: 'high_cleared',
@@ -1640,11 +1748,14 @@ async function processSwap(t1, t2, opts = {}) {
const matches = findMatches()
if (matches.length > 0) {
movesLeft.value = Math.max(0, movesLeft.value - 1)
playerMoves.value += 1
const endedByHigh = await clearAndRefill()
if (endedByHigh) {
isProcessing.value = false
return
}
// 按解锁进度维持高糖数量（到第 7 步起补到可消除的 3 个）
ensureHighPresence()
// 所有连消结束后，检查棋盘是否死锁并自动重排
await reshuffleIfStuck()
} else {
@@ -1887,6 +1998,8 @@ async function onBooster(booster) {
return
}
}
// 恢复本关高糖数量，避免纤维清空高糖直接跳过“8 步”门槛
ensureHighPresence()
// fiber 改变了棋盘，保险检查是否死锁
await reshuffleIfStuck()
@@ -2003,6 +2116,8 @@ async function onBooster(booster) {
await delay(GRAVITY_MS)
clearDropFlags()
// 维持本关高糖数量
ensureHighPresence()
// meal 自带洗牌已保证有解，但再做一次轻量检查保险
await reshuffleIfStuck()
@@ -2051,7 +2166,7 @@ function initLayout() {
paddingTop: `${paddingTop}px`,
paddingLeft: '32rpx',
paddingRight: '32rpx',
paddingBottom: '10rpx'
paddingBottom: '18rpx'
}
navStyle.value = {
paddingRight: `${Math.max(0, headerPaddingRight - uni.upx2px(32))}px`
@@ -2071,19 +2186,25 @@ function recalcBoardSize() {
const query = uni.createSelectorQuery().in(instance?.proxy)
query.select('.gg-header').boundingClientRect()
query.select('.gg-footer').boundingClientRect()
query.select('.gg-board-hero').boundingClientRect()
query.exec((res) => {
try {
const sys = uni.getSystemInfoSync()
const header = res?.[0]
const footer = res?.[1]
const hero = res?.[2]
const headerBottom = Math.ceil(header?.bottom ?? header?.height ?? uni.upx2px(360))
// 棋盘真正可用区从进度条/信息横幅之下（board-hero 顶部）算起
const boardAreaTop = Math.ceil(hero?.top ?? headerBottom)
// 底部道具栏较高，测量失败时用更保守的兜底高度，避免最后一行被遮挡
const footerTop = Math.floor(footer?.top ?? (sys.windowHeight - uni.upx2px(300)))
const inset = uni.upx2px(BOARD_INSET_RPX)
const footerGap = uni.upx2px(BOARD_FOOTER_GAP_RPX)
const zoneW = sys.windowWidth
// gg-main 左右内边距各 20rpx，棋盘可用宽度需相应收窄
const sidePad = uni.upx2px(20)
const zoneW = sys.windowWidth - sidePad * 2
// 预留底部安全间隙，棋盘不贴到道具栏
const zoneH = Math.max(0, footerTop - headerBottom - footerGap)
const zoneH = Math.max(0, footerTop - boardAreaTop - footerGap)
// 5 行 × 4 列：宽高分别约束，取较小单格像素
cellSizePx.value = calcMaxCellSize(zoneW - inset * 2, zoneH - inset * 2)