初始化
需要注意的是饥荒不够完善：动作、手持工具、细节交互、系统逻辑
This commit is contained in:
李琦
6
.gitignore
vendored
6
.gitignore
vendored
@@ -12,6 +12,12 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Electron 打包产物与冒烟/后台/关卡验证截图
|
||||
release
|
||||
electron-smoke-*.png
|
||||
admin-ui-*.png
|
||||
level-ui-*.png
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
|
||||
BIN
build/icon.png
Normal file
BIN
build/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
e2e-out/starve-1-autumn-day.png
Normal file
BIN
e2e-out/starve-1-autumn-day.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
e2e-out/starve-10-mod-map-nofog.png
Normal file
BIN
e2e-out/starve-10-mod-map-nofog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
e2e-out/starve-2-craft.png
Normal file
BIN
e2e-out/starve-2-craft.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
e2e-out/starve-3-night.png
Normal file
BIN
e2e-out/starve-3-night.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
BIN
e2e-out/starve-4-winter.png
Normal file
BIN
e2e-out/starve-4-winter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
e2e-out/starve-5-deerclops.png
Normal file
BIN
e2e-out/starve-5-deerclops.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
BIN
e2e-out/starve-6-minimap.png
Normal file
BIN
e2e-out/starve-6-minimap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
e2e-out/starve-7-mod-pick.png
Normal file
BIN
e2e-out/starve-7-mod-pick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
e2e-out/starve-8-mod-farm.png
Normal file
BIN
e2e-out/starve-8-mod-farm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
e2e-out/starve-9-mod-chester.png
Normal file
BIN
e2e-out/starve-9-mod-chester.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
383
electron/e2e-starve.cjs
Normal file
383
electron/e2e-starve.cjs
Normal file
@@ -0,0 +1,383 @@
|
||||
// 饥荒专项端到端自检（开发用）：登录 → 进入饥荒 → 单人开局 →
|
||||
// 通过 window.__starve 后门验证：世界生成/三围/合成科技/查理/季节体温/巨鹿/小地图/存档
|
||||
// 追加：宽屏布局无滚动条断言 + Mod 体系全链路（8 个内置 mod 勾选开局逐一验证）
|
||||
// 运行：npm run electron:dist; npx electron electron/e2e-starve.cjs
|
||||
const { app, BrowserWindow, ipcMain } = require('electron')
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
|
||||
const SERVER = process.env.NLG_SERVER || 'http://127.0.0.1:8080'
|
||||
const OUT_DIR = process.env.NLG_E2E_OUT || path.join(process.cwd(), 'e2e-out')
|
||||
const pageErrors = []
|
||||
|
||||
ipcMain.on('nlg:get-server-base', (e) => { e.returnValue = SERVER })
|
||||
ipcMain.handle('nlg:set-server-base', () => ({ ok: true }))
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
|
||||
let failures = 0
|
||||
const check = (cond, msg) => {
|
||||
if (cond) console.log(' PASS', msg)
|
||||
else { failures++; console.error(' FAIL', msg) }
|
||||
}
|
||||
|
||||
async function main() {
|
||||
fs.mkdirSync(OUT_DIR, { recursive: true })
|
||||
const win = new BrowserWindow({
|
||||
width: 1360,
|
||||
height: 860,
|
||||
show: true,
|
||||
backgroundColor: '#0f1220',
|
||||
webPreferences: { preload: path.join(__dirname, 'preload.cjs') },
|
||||
})
|
||||
win.webContents.on('console-message', (e) => {
|
||||
if (e?.level === 'error' && e?.message) pageErrors.push(e.message)
|
||||
})
|
||||
const js = (code) => win.webContents.executeJavaScript(code, true)
|
||||
const shot = async (name) => {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
try {
|
||||
const img = await win.webContents.capturePage()
|
||||
fs.writeFileSync(path.join(OUT_DIR, `${name}.png`), img.toPNG())
|
||||
console.log('[e2e] screenshot:', name)
|
||||
return
|
||||
} catch { await sleep(600) }
|
||||
}
|
||||
}
|
||||
const waitFor = async (cond, timeoutMs, desc) => {
|
||||
const t0 = Date.now()
|
||||
while (Date.now() - t0 < timeoutMs) {
|
||||
try { if (await js(cond)) return true } catch {}
|
||||
await sleep(250)
|
||||
}
|
||||
throw new Error(`等待超时：${desc}`)
|
||||
}
|
||||
const st = () => js('window.__starve ? JSON.stringify(window.__starve.state()) : "null"').then((s) => JSON.parse(s))
|
||||
|
||||
const distIndex = path.join(__dirname, '../dist/index.html')
|
||||
if (!fs.existsSync(distIndex)) throw new Error('缺少 dist，请先 npm run electron:dist')
|
||||
await win.loadFile(distIndex)
|
||||
|
||||
// 登录
|
||||
await js('localStorage.clear(); true')
|
||||
await win.webContents.reload()
|
||||
await waitFor(`!!document.querySelector('input[placeholder^="用户名"]')`, 10000, '登录页')
|
||||
await js(`(() => {
|
||||
const u = document.querySelector('input[placeholder^="用户名"]')
|
||||
u.value = 'xiaoming'; u.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
const p = document.querySelector('input[type="password"]')
|
||||
p.value = '123456'; p.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
document.querySelector('button.submit').click()
|
||||
return true
|
||||
})()`)
|
||||
await waitFor(`!!localStorage.getItem('token') && location.hash === '#/'`, 10000, '登录成功')
|
||||
console.log('[e2e] 登录成功')
|
||||
|
||||
// 确保饥荒可玩（必要时购买）
|
||||
const gameName = await js(`
|
||||
fetch(window.desktop.serverBase + '/api/games', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
|
||||
.then((r) => r.json()).then((j) => ((j.data || []).find((g) => g.code === 'starve') || {}).name || '')
|
||||
`)
|
||||
if (!gameName) throw new Error('饥荒游戏不存在')
|
||||
await sleep(1200)
|
||||
const cardBtn = `(() => {
|
||||
const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
|
||||
const btn = card && card.querySelector('.actions button:last-child')
|
||||
return btn ? btn.textContent.trim() : ''
|
||||
})()`
|
||||
if ((await js(cardBtn)) === '去购买') {
|
||||
await js(`(() => {
|
||||
const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
|
||||
card.querySelector('.actions button:last-child').click(); return true
|
||||
})()`)
|
||||
await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '购买弹窗')
|
||||
await js(`document.querySelector('.buy-modal .bm-actions .btn:last-child').click(); true`)
|
||||
await waitFor(`${cardBtn} === '开始游戏'`, 8000, '购买完成')
|
||||
console.log('[e2e] 已购买饥荒')
|
||||
}
|
||||
|
||||
// 进入饥荒 → 单人冒险
|
||||
await js(`location.hash = '#/play/starve'; true`)
|
||||
await waitFor(`!!document.querySelector('.overlay .mode-card')`, 10000, '模式选择面板')
|
||||
await js(`document.querySelector('.overlay .mode-card').click(); true`) // 单人冒险
|
||||
await sleep(400)
|
||||
// 有旧档则弃档重开，保证确定性
|
||||
await waitFor(`!![...document.querySelectorAll('.overlay button')].find((b) => b.textContent.includes('新的冒险') || b.textContent.includes('放弃存档重新开始'))`, 6000, '单人面板')
|
||||
await js(`(() => {
|
||||
const btns = [...document.querySelectorAll('.overlay button')]
|
||||
const btn = btns.find((b) => b.textContent.includes('放弃存档重新开始')) || btns.find((b) => b.textContent.includes('新的冒险'))
|
||||
btn.click()
|
||||
return true
|
||||
})()`)
|
||||
await waitFor(`!!window.__starve && window.__starve.state().ents > 50`, 10000, '游戏开局 + 世界生成')
|
||||
console.log('[e2e] 饥荒已开局')
|
||||
await sleep(2500)
|
||||
|
||||
// 1) 开局状态
|
||||
let s = await st()
|
||||
console.log('[e2e] 开局状态:', JSON.stringify(s))
|
||||
check(s.hp === 150 && s.hunger <= 150 && s.san <= 200, `三围官方值 (${s.hp}/${Math.round(s.hunger)}/${Math.round(s.san)})`)
|
||||
check(s.season === 'autumn' && s.day === 1, `秋季第 1 天开局`)
|
||||
check(!!s.biome, `出生在群系 ${s.biome}`)
|
||||
check(s.fps > 25, `帧率正常 (${s.fps})`)
|
||||
check(s.monKinds.includes('beefalo') && s.monKinds.includes('pig') && s.monKinds.includes('frog') && s.monKinds.includes('spider'), `生物齐备 (${[...new Set(s.monKinds)].join(',')})`)
|
||||
// 宽屏布局：整页贴合视口不出滚动条，画布铺满容器
|
||||
const layout = await js(`(() => {
|
||||
const root = document.scrollingElement || document.documentElement
|
||||
const cv = document.querySelector('canvas.starve-canvas')
|
||||
const wrap = cv && cv.parentElement
|
||||
const r1 = cv && cv.getBoundingClientRect()
|
||||
const r2 = wrap && wrap.getBoundingClientRect()
|
||||
return JSON.stringify({
|
||||
wide: document.body.classList.contains('wide-page'),
|
||||
noScroll: root.scrollHeight <= window.innerHeight + 1 && root.scrollWidth <= window.innerWidth + 1,
|
||||
sh: root.scrollHeight, ih: window.innerHeight,
|
||||
fill: !!(r1 && r2 && Math.abs(r1.height - r2.height) < 3 && Math.abs(r1.width - r2.width) < 3),
|
||||
ch: r1 ? Math.round(r1.height) : 0, wh: r2 ? Math.round(r2.height) : 0,
|
||||
})
|
||||
})()`).then(JSON.parse)
|
||||
check(layout.wide, 'wide-page 布局生效')
|
||||
check(layout.noScroll, `无滚动条（页高 ${layout.sh} <= 视口 ${layout.ih}）`)
|
||||
check(layout.fill, `画布铺满游戏区 (画布高 ${layout.ch} / 容器高 ${layout.wh})`)
|
||||
await shot('starve-1-autumn-day')
|
||||
|
||||
// 2) 合成与科技
|
||||
await js(`(() => { const g = window.__starve; g.give('twig',8); g.give('flint',6); g.give('grass',12); g.give('log',24); g.give('rock',24); g.give('gold',8); return true })()`)
|
||||
await js(`window.__starve.craft('axe'); true`)
|
||||
await sleep(300)
|
||||
s = await st()
|
||||
check(s.equip.hand === 'axe', `打造斧头并自动装备 (${s.equip.hand})`)
|
||||
const spearBefore = await js(`(() => { window.__starve.craft('spear'); return window.__starve.state().slots.join(',') })()`)
|
||||
check(!spearBefore.includes('spear'), '无科学机器时长矛不可合成（科技封锁）')
|
||||
await js(`window.__starve.craft('sciencemachine'); window.__starve.give('rope',2); true`)
|
||||
await sleep(300)
|
||||
await js(`window.__starve.craft('spear'); true`)
|
||||
await sleep(300)
|
||||
s = await st()
|
||||
check(s.slots.join(',').includes('spear'), `科学机器旁解锁长矛原型 (${s.slots.join(',')})`)
|
||||
await js(`window.__starve.craft('campfire'); true`)
|
||||
await sleep(300)
|
||||
s = await st()
|
||||
check(s.fires >= 1, '篝火点燃')
|
||||
await shot('starve-2-craft')
|
||||
|
||||
// 3) 夜晚 + 查理
|
||||
await js(`window.__starve.time(150); true`)
|
||||
await sleep(800)
|
||||
await shot('starve-3-night')
|
||||
// 走离篝火再测查理（先记录当前 hp）
|
||||
const hpBefore = (await st()).hp
|
||||
await js(`(() => {
|
||||
const g = window.__starve
|
||||
// 传送到远处黑暗地带（直接改不了坐标，用给火把再收走的方式不行——改用等待查理打到）
|
||||
return true
|
||||
})()`)
|
||||
// 玩家出生点附近有篝火，把时间拨到夜晚但玩家未必在火圈外——直接验证黑暗提示逻辑成本高，
|
||||
// 改为验证「夜晚黑暗掉血」：等 8 秒看是否遭袭（若在光圈内则跳过该断言）
|
||||
await sleep(8000)
|
||||
s = await st()
|
||||
const struck = s.hp < hpBefore - 50
|
||||
console.log(`[e2e] 查理测试：hp ${hpBefore} -> ${s.hp}${struck ? '（遭袭）' : '（在光圈内，跳过）'}`)
|
||||
await js(`window.__starve.time(20); true`) // 拨回白天防连击致死
|
||||
|
||||
// 4) 冬季 + 体温 + 巨鹿（先传送远离篝火，避免火焰取暖干扰）
|
||||
await js(`(() => { const p = window.__starve.state().pos; window.__starve.pos(p[0] + 400, p[1]); window.__starve.season('winter'); return true })()`)
|
||||
await sleep(400)
|
||||
s = await st()
|
||||
check(s.season === 'winter', '跳转冬季')
|
||||
const tempBefore = s.temp
|
||||
await sleep(4000)
|
||||
s = await st()
|
||||
check(s.temp < tempBefore, `冬季体温下降 (${tempBefore}° -> ${s.temp}°)`)
|
||||
await shot('starve-4-winter')
|
||||
await js(`window.__starve.deerclops(); true`)
|
||||
await sleep(2500)
|
||||
s = await st()
|
||||
check(s.monKinds.includes('deerclops'), `独眼巨鹿降临 (${[...new Set(s.monKinds)].join(',')})`)
|
||||
await sleep(1500)
|
||||
await shot('starve-5-deerclops')
|
||||
|
||||
// 5) 小地图
|
||||
await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); true`)
|
||||
await sleep(800)
|
||||
const mapVisible = await js(`(() => { const el = document.querySelector('.ds-map'); return el && el.style.display !== 'none' })()`)
|
||||
check(mapVisible, '小地图 M 键开启')
|
||||
await shot('starve-6-minimap')
|
||||
await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); window.dispatchEvent(new KeyboardEvent('keyup', { key: 'm' })); true`)
|
||||
|
||||
// 6) 存档往返
|
||||
await js(`[...document.querySelectorAll('.hud-left .ds-btn')].find((b) => b.textContent.includes('保存'))?.click(); true`)
|
||||
await sleep(1200)
|
||||
const saved = await js(`
|
||||
fetch(window.desktop.serverBase + '/api/games/starve/save', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
|
||||
.then((r) => r.json()).then((j) => j.data || j).then((d) => !!(d && d.exists !== false && d.data)).catch(() => false)
|
||||
`)
|
||||
check(saved, '云存档已写入（v4）')
|
||||
|
||||
// ===== 7) Mod 体系全链路 =====
|
||||
console.log('[e2e] === Mod 体系 ===')
|
||||
// 重新进入游玩页：单人面板勾选全部 mod 后弃档重开
|
||||
await js(`location.hash = '#/'; true`)
|
||||
await sleep(700)
|
||||
await js(`location.hash = '#/play/starve'; true`)
|
||||
await waitFor(`!!document.querySelector('.overlay .mode-card')`, 10000, '模式选择面板(二次)')
|
||||
await js(`document.querySelector('.overlay .mode-card').click(); true`)
|
||||
await waitFor(`document.querySelectorAll('.mod-pick input').length >= 8`, 6000, 'Mod 勾选列表')
|
||||
const modCount = await js(`(() => {
|
||||
const boxes = [...document.querySelectorAll('.mod-pick input')]
|
||||
boxes.forEach((cb) => { if (!cb.checked) cb.click() })
|
||||
return boxes.filter((cb) => cb.checked).length
|
||||
})()`)
|
||||
check(modCount === 8, `勾选全部 8 个 mod (${modCount})`)
|
||||
const factorTxt = await js(`(document.querySelector('.mod-pick .mp-total') || {}).textContent || ''`)
|
||||
check(factorTxt.includes('0.64'), `面板显示难度系数 (${factorTxt.trim()})`)
|
||||
await shot('starve-7-mod-pick')
|
||||
await js(`(() => {
|
||||
const btns = [...document.querySelectorAll('.overlay button')]
|
||||
const btn = btns.find((b) => b.textContent.includes('放弃存档重新开始')) || btns.find((b) => b.textContent.includes('新的冒险'))
|
||||
btn.click()
|
||||
return true
|
||||
})()`)
|
||||
await waitFor(`!!window.__starve && window.__starve.mods().length === 8 && window.__starve.state().ents > 50`, 12000, 'Mod 局开局')
|
||||
s = await st()
|
||||
check(s.mods.length === 8, `本局激活 mod：${s.mods.join(',')}`)
|
||||
check(s.scoreFactor === 0.64, `得分系数 0.64 (${s.scoreFactor})`)
|
||||
|
||||
// 和平模式：现在就排猎犬波，结尾处验证一直没有狗（无 mod 时 6 秒后必出）
|
||||
await js(`window.__starve.hound(); true`)
|
||||
|
||||
// 宝藏：世界生成撒了箱子；传送过去开箱得战利品
|
||||
const chestN = await js(`window.__starve.entCount('chest')`)
|
||||
check(chestN >= 6 && chestN <= 10, `宝箱撒点 6~10 个 (${chestN})`)
|
||||
const chestPos = await js(`JSON.stringify(window.__starve.find('chest'))`).then(JSON.parse)
|
||||
await js(`window.__starve.pos(${chestPos[0]}, ${chestPos[1] + 36}); true`)
|
||||
const slotsBeforeChest = (await st()).slots.join(',')
|
||||
await js(`window.__starve.poke('chest'); true`)
|
||||
await sleep(300)
|
||||
s = await st()
|
||||
check(s.slots.join(',') !== slotsBeforeChest, `开箱获得战利品 (${s.slots.join(',')})`)
|
||||
|
||||
// 便利包：堆叠上限 99（原版 40）
|
||||
await js(`window.__starve.give('grass', 90); true`)
|
||||
await sleep(200)
|
||||
s = await st()
|
||||
check(s.slots.some((x) => x === 'grassx90'), `草堆叠 90/99 一格 (${s.slots.find((x) => x.startsWith('grass'))})`)
|
||||
|
||||
// 农场：锄头开垦 → 播种 → 拨快生长 → 收获（撒点太密会提示"太挤"，挪几步重试）
|
||||
await js(`window.__starve.give('hoe', 1); true`)
|
||||
await sleep(200)
|
||||
for (let k = 0; k < 8; k++) {
|
||||
await js(`window.__starve.useCode('hoe'); true`)
|
||||
await sleep(150)
|
||||
if (await js(`window.__starve.entCount('farmplot')`)) break
|
||||
await js(`(() => { const g = window.__starve; const p = g.state().pos; g.pos(p[0] + 56, p[1] + (${k} % 2 ? 64 : -64)); return true })()`)
|
||||
}
|
||||
check((await js(`window.__starve.entCount('farmplot')`)) >= 1, '锄头开垦出农田')
|
||||
await js(`window.__starve.give('carrotseeds', 2); window.__starve.poke('farmplot'); true`)
|
||||
await sleep(200)
|
||||
await js(`window.__starve.tickEnts(400); true`) // 拨快 400 秒 → 成熟
|
||||
await sleep(200)
|
||||
await js(`window.__starve.poke('farmplot'); true`)
|
||||
await sleep(200)
|
||||
s = await st()
|
||||
check(s.slots.some((x) => x.startsWith('carrotx')), `农田收获胡萝卜 (${s.slots.find((x) => x.startsWith('carrotx'))})`)
|
||||
await shot('starve-8-mod-farm')
|
||||
|
||||
// 噩梦模式：蜘蛛血量 100 → 150（就近读我们刚召的那只，别误读远处巢里的）
|
||||
await js(`window.__starve.spider(); true`)
|
||||
await sleep(300)
|
||||
const spiderHp = await js(`window.__starve.nearMobHp('spider')`)
|
||||
check(spiderHp === 150, `噩梦蜘蛛血量 150 (${spiderHp})`)
|
||||
|
||||
// 魔法：火魔杖 AoE 灼烧（35 伤害）→ 回旋镖补刀（20 伤害）
|
||||
await js(`window.__starve.give('firestaff', 1); true`)
|
||||
await sleep(200)
|
||||
await js(`window.__starve.useCode('firestaff'); true`)
|
||||
await sleep(300)
|
||||
const afterStaff = await js(`window.__starve.nearMobHp('spider')`)
|
||||
check(afterStaff === 115, `火魔杖灼烧 150→115 (${afterStaff})`)
|
||||
await js(`window.__starve.give('boomerang', 1); true`)
|
||||
await sleep(200)
|
||||
await js(`window.__starve.useCode('boomerang'); true`)
|
||||
await sleep(1600)
|
||||
const afterBoom = await js(`window.__starve.nearMobHp('spider')`)
|
||||
check(afterBoom < afterStaff, `回旋镖命中 (${afterStaff}→${afterBoom})`)
|
||||
|
||||
// 清场：清掉敌对生物（那只 95 血的噩梦蜘蛛会一路追杀）+ 回满三围，保证后续断言确定性
|
||||
await js(`window.__starve.wipeHostiles(); window.__starve.heal(); true`)
|
||||
await js(`(() => { const t = window.__starve.find('tree'); if (t) window.__starve.pos(t[0] + 40, t[1] + 40); return true })()`)
|
||||
await sleep(300)
|
||||
|
||||
// 切斯特：拿到眼骨后现身跟随；丢地上的东西会被它吞掉，点它吐出
|
||||
await js(`window.__starve.give('eyebone', 1); true`)
|
||||
await waitFor(`window.__starve.state().monKinds.includes('chester')`, 6000, '切斯特现身')
|
||||
check(true, '眼骨召来切斯特')
|
||||
const store0 = await js(`JSON.stringify(window.__starve.mobStore('chester') || [])`).then(JSON.parse)
|
||||
check(store0.length === 0, '切斯特初始空仓')
|
||||
await js(`window.__starve.drop('log', 5); window.__starve.drop('flint', 3); true`)
|
||||
await sleep(3000)
|
||||
const store1 = await js(`JSON.stringify(window.__starve.mobStore('chester') || [])`).then(JSON.parse)
|
||||
check(store1.length >= 1, `切斯特吞了掉落物 (${store1.join(',') || '空'})`)
|
||||
await js(`window.__starve.pokeMob('chester'); true`)
|
||||
await sleep(300)
|
||||
const store2 = await js(`JSON.stringify(window.__starve.mobStore('chester') || [])`).then(JSON.parse)
|
||||
check(store2.length === 0, '点击切斯特吐出全部物品')
|
||||
await shot('starve-9-mod-chester')
|
||||
|
||||
// 复活雕像：二级科技建造 → 致死伤害被拦截原地复活（先清背包防溢出落地）
|
||||
await js(`(() => { const g = window.__starve; g.clearInv(); g.give('rock', 40); g.give('gold', 14); g.give('log', 12); return true })()`)
|
||||
await js(`window.__starve.craft('sciencemachine'); true`)
|
||||
await sleep(200)
|
||||
await js(`window.__starve.craft('alchemyengine'); true`)
|
||||
await sleep(200)
|
||||
await js(`window.__starve.craft('revivestatue'); true`)
|
||||
await sleep(200)
|
||||
check((await js(`window.__starve.entCount('revivestatue')`)) === 1, '建成复活雕像')
|
||||
await js(`window.__starve.hurt(999); true`)
|
||||
await sleep(400)
|
||||
s = await st()
|
||||
check(s.hp === 75, `致死伤害被雕像拦截，半血复活 (hp=${s.hp})`)
|
||||
check((await js(`window.__starve.entCount('revivestatue')`)) === 0, '雕像已消耗')
|
||||
const overlayDead = await js(`!!document.querySelector('.death-overlay')`)
|
||||
check(!overlayDead, '未进入死亡结算')
|
||||
|
||||
// 和平模式收尾断言：排波已过去 10 秒+，仍然无猎犬
|
||||
s = await st()
|
||||
check(!s.monKinds.includes('hound') && !s.monKinds.includes('icehound'), `和平模式全程无猎犬 (${[...new Set(s.monKinds)].join(',')})`)
|
||||
|
||||
// 便利包无迷雾：直接开地图截图（全图可见）
|
||||
await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); true`)
|
||||
await sleep(700)
|
||||
await shot('starve-10-mod-map-nofog')
|
||||
await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); window.dispatchEvent(new KeyboardEvent('keyup', { key: 'm' })); true`)
|
||||
|
||||
// Mod 存档往返：保存 → 云端应带 mods 字段
|
||||
await js(`[...document.querySelectorAll('.hud-left .ds-btn')].find((b) => b.textContent.includes('保存'))?.click(); true`)
|
||||
await sleep(1200)
|
||||
const savedMods = await js(`
|
||||
fetch(window.desktop.serverBase + '/api/games/starve/save', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
|
||||
.then((r) => r.json()).then((j) => j.data || j)
|
||||
.then((d) => { try { return JSON.parse(d.data).mods || [] } catch { return [] } })
|
||||
.catch(() => [])
|
||||
`)
|
||||
check(Array.isArray(savedMods) && savedMods.length === 8, `存档记录 mod 集合 (${savedMods.length} 个)`)
|
||||
|
||||
// 汇总
|
||||
const errs = pageErrors.filter((m) => !m.includes('favicon') && !m.includes('DevTools'))
|
||||
if (errs.length) {
|
||||
console.error(`[e2e] 页面报错 ${errs.length} 条：`)
|
||||
errs.slice(0, 10).forEach((m) => console.error(' -', m))
|
||||
failures += errs.length
|
||||
}
|
||||
console.log(failures ? `[e2e] ${failures} 项失败` : '[e2e] 饥荒专项自检全部通过')
|
||||
app.exit(failures ? 1 : 0)
|
||||
}
|
||||
|
||||
app.whenReady().then(() =>
|
||||
main().catch((err) => {
|
||||
console.error('[e2e] 失败：', err.message)
|
||||
app.exit(1)
|
||||
})
|
||||
)
|
||||
setTimeout(() => {
|
||||
console.error('[e2e] 总超时')
|
||||
app.exit(1)
|
||||
}, 220000)
|
||||
233
electron/e2e.cjs
Normal file
233
electron/e2e.cjs
Normal file
@@ -0,0 +1,233 @@
|
||||
// 端到端自检（开发用，不随应用打包），支持两种模式：
|
||||
// desktop（默认）：以 file:// 加载 dist 构建产物 + preload 注入，验证桌面端（hash 路由 + 配置服务器地址）
|
||||
// web：不带 preload 加载 Vite 开发服务器，等价纯浏览器环境，验证网页版（history 路由 + 同源代理）
|
||||
// 流程：清空登录态 → 演示账号真实登录 → 大厅（含购买弹窗）→ 对战大厅 → WS 建房/退房 → 单机开一局 → 汇总页面报错
|
||||
// 运行：npm run electron:e2e（桌面模式）；$env:NLG_E2E_MODE='web'; npx electron electron/e2e.cjs（网页模式，需 5173 开发服务器）
|
||||
// NLG_E2E_GAME 可指定单机步骤玩哪款游戏（默认 snake，如 mario / linkgame）
|
||||
const { app, BrowserWindow, ipcMain } = require('electron')
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
|
||||
const MODE = process.env.NLG_E2E_MODE === 'web' ? 'web' : 'desktop'
|
||||
const SERVER = process.env.NLG_SERVER || 'http://127.0.0.1:8080'
|
||||
const WEB_URL = process.env.NLG_E2E_URL || 'http://localhost:5173'
|
||||
const OUT_DIR = process.env.NLG_E2E_OUT || process.cwd()
|
||||
const GAME = process.env.NLG_E2E_GAME || 'snake'
|
||||
const SUFFIX = MODE === 'web' ? '-web' : ''
|
||||
const pageErrors = []
|
||||
|
||||
// preload 依赖该同步 IPC 提供服务器地址（仅桌面模式挂 preload）
|
||||
ipcMain.on('nlg:get-server-base', (e) => { e.returnValue = SERVER })
|
||||
ipcMain.handle('nlg:set-server-base', () => ({ ok: true }))
|
||||
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
|
||||
|
||||
async function main() {
|
||||
const win = new BrowserWindow({
|
||||
width: 1280,
|
||||
height: 820,
|
||||
show: true,
|
||||
backgroundColor: '#0f1220',
|
||||
webPreferences: MODE === 'desktop' ? { preload: path.join(__dirname, 'preload.cjs') } : {},
|
||||
})
|
||||
// 收集页面报错（Electron 新版事件对象：event.level 为 'error' 等字符串）
|
||||
win.webContents.on('console-message', (e) => {
|
||||
if (e?.level === 'error' && e?.message) pageErrors.push(e.message)
|
||||
})
|
||||
const js = (code) => win.webContents.executeJavaScript(code, true)
|
||||
// 截图：capturePage 在 Windows 上偶发 UnknownVizError（GPU 合成器抖动），重试且失败不阻断流程
|
||||
const shot = async (name) => {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
try {
|
||||
const img = await win.webContents.capturePage()
|
||||
const file = path.join(OUT_DIR, `${name}${SUFFIX}.png`)
|
||||
fs.writeFileSync(file, img.toPNG())
|
||||
console.log('[e2e] screenshot:', file)
|
||||
return
|
||||
} catch (err) {
|
||||
if (i === 2) console.warn(`[e2e] 截图 ${name} 失败（不影响流程）：${err.message}`)
|
||||
else await sleep(600)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 轮询等待页面条件成立
|
||||
const waitFor = async (cond, timeoutMs, desc) => {
|
||||
const t0 = Date.now()
|
||||
while (Date.now() - t0 < timeoutMs) {
|
||||
try {
|
||||
if (await js(cond)) return true
|
||||
} catch {}
|
||||
await sleep(300)
|
||||
}
|
||||
throw new Error(`等待超时：${desc}`)
|
||||
}
|
||||
// 路由条件与跳转：桌面端 hash 模式，网页版 history 模式
|
||||
const atRoute = (p) => (MODE === 'desktop' ? `location.hash === '#${p}'` : `location.pathname === '${p}'`)
|
||||
const goto = async (p) => {
|
||||
if (MODE === 'desktop') {
|
||||
await js(`location.hash = '#${p}'; true`)
|
||||
} else {
|
||||
// history 模式下直接整页跳转（等价用户输入地址），开发服务器有 SPA 回退
|
||||
await win.loadURL(`${WEB_URL}${p}`)
|
||||
}
|
||||
await waitFor(atRoute(p), 5000, `路由到 ${p}`)
|
||||
}
|
||||
|
||||
if (MODE === 'desktop') {
|
||||
const distIndex = path.join(__dirname, '../dist/index.html')
|
||||
if (!fs.existsSync(distIndex)) throw new Error('缺少 dist/index.html，请先 npm run electron:dist')
|
||||
await win.loadFile(distIndex)
|
||||
} else {
|
||||
await win.loadURL(WEB_URL).catch(() => {
|
||||
throw new Error(`无法访问 ${WEB_URL}，请先 npm run dev 启动开发服务器`)
|
||||
})
|
||||
}
|
||||
|
||||
// 第 0 步：清空历史登录态，确保从登录页开始
|
||||
await js('localStorage.clear(); true')
|
||||
await win.webContents.reload()
|
||||
await waitFor(`!!document.querySelector('input[placeholder^="用户名"]')`, 10000, '登录页渲染')
|
||||
console.log(`[e2e] 登录页已渲染（${MODE === 'desktop' ? 'file:// + hash 路由' : 'http + history 路由'}）`)
|
||||
|
||||
// 第 1 步：填写演示账号并提交（触发 input 事件以驱动 v-model）
|
||||
await js(`
|
||||
(() => {
|
||||
const u = document.querySelector('input[placeholder^="用户名"]')
|
||||
u.value = 'xiaoming'; u.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
const p = document.querySelector('input[type="password"]')
|
||||
p.value = '123456'; p.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
document.querySelector('button.submit').click()
|
||||
return true
|
||||
})()
|
||||
`)
|
||||
// 第 2 步：等待登录成功（Token 落库 + 路由跳到大厅）
|
||||
await waitFor(`!!localStorage.getItem('token') && ${atRoute('/')}`, 10000, '登录成功并跳转大厅')
|
||||
console.log('[e2e] 登录成功，Token 已写入，已跳转大厅')
|
||||
await sleep(1800) // 等游戏列表与字体渲染
|
||||
await shot('electron-smoke-lobby')
|
||||
|
||||
// 第 2.5 步：大厅购买弹窗（若存在待解锁游戏则点开验证展示与关闭）
|
||||
const hasBuyBtn = await js(
|
||||
`!![...document.querySelectorAll('.game-card button')].find((b) => b.textContent.includes('去购买'))`
|
||||
)
|
||||
if (hasBuyBtn) {
|
||||
await js(`
|
||||
[...document.querySelectorAll('.game-card button')].find((b) => b.textContent.includes('去购买')).click(); true
|
||||
`)
|
||||
await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '购买弹窗打开')
|
||||
await sleep(400)
|
||||
await shot('electron-smoke-buymodal')
|
||||
await js(`document.querySelector('.buy-modal .bm-close').click(); true`)
|
||||
await waitFor(`!document.querySelector('.buy-modal')`, 3000, '购买弹窗关闭')
|
||||
console.log('[e2e] 大厅购买弹窗：打开展示详情 / 关闭均正常')
|
||||
} else {
|
||||
console.log('[e2e] 大厅无待解锁游戏，跳过购买弹窗检查')
|
||||
}
|
||||
|
||||
// 第 2.6 步：确保目标游戏可玩——未拥有则通过弹窗「立即购买」走一遍真实购买闭环
|
||||
const gameName = await js(`
|
||||
fetch((window.desktop && window.desktop.serverBase ? window.desktop.serverBase : '') + '/api/games', {
|
||||
headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
|
||||
}).then((r) => r.json()).then((j) => ((j.data || []).find((g) => g.code === '${GAME}') || {}).name || '')
|
||||
`)
|
||||
if (!gameName) throw new Error(`游戏 ${GAME} 不存在或列表接口异常`)
|
||||
const cardBtnLabel = `(() => {
|
||||
const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
|
||||
const btn = card && card.querySelector('.actions button:last-child')
|
||||
return btn ? btn.textContent.trim() : ''
|
||||
})()`
|
||||
if ((await js(cardBtnLabel)) === '去购买') {
|
||||
await js(`(() => {
|
||||
const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
|
||||
card.querySelector('.actions button:last-child').click()
|
||||
return true
|
||||
})()`)
|
||||
await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '目标游戏购买弹窗打开')
|
||||
const canBuy = await js(`!document.querySelector('.buy-modal .bm-actions .btn:last-child').disabled`)
|
||||
if (!canBuy) throw new Error(`积分不足，无法购买 ${gameName}，无法继续单机游戏步骤`)
|
||||
await js(`document.querySelector('.buy-modal .bm-actions .btn:last-child').click(); true`)
|
||||
await waitFor(`!document.querySelector('.buy-modal')`, 6000, '购买完成弹窗自动关闭')
|
||||
await waitFor(`${cardBtnLabel} === '开始游戏'`, 6000, '购买后卡片刷新为可玩')
|
||||
console.log(`[e2e] 已通过大厅弹窗直接购买「${gameName}」，卡片已解锁`)
|
||||
} else {
|
||||
console.log(`[e2e] 「${gameName}」已可玩，无需购买`)
|
||||
}
|
||||
|
||||
// 第 3 步：进入对战大厅
|
||||
await goto('/battle')
|
||||
await sleep(1500)
|
||||
await shot('electron-smoke-battle')
|
||||
|
||||
// 第 4 步：WebSocket 建房（联机核心链路）——创建斗地主 AI 房间并拿到邀请码
|
||||
await js(`
|
||||
(() => {
|
||||
const btn = [...document.querySelectorAll('button')].find((b) => b.textContent.includes('创建房间'))
|
||||
btn.click()
|
||||
return true
|
||||
})()
|
||||
`)
|
||||
await waitFor(
|
||||
`${atRoute('/battle/room')} && /^[A-Z0-9]{6}$/.test(document.querySelector('.code-box b')?.textContent?.trim() || '')`,
|
||||
10000,
|
||||
'WS 建房成功并显示 6 位邀请码'
|
||||
)
|
||||
const roomCode = await js(`document.querySelector('.code-box b').textContent.trim()`)
|
||||
console.log('[e2e] WebSocket 建房成功，邀请码：' + roomCode)
|
||||
await sleep(900)
|
||||
await shot('electron-smoke-room')
|
||||
// 退出房间，回到对战大厅
|
||||
await js(`
|
||||
(() => {
|
||||
const btn = [...document.querySelectorAll('button')].find((b) => b.textContent.includes('退出房间'))
|
||||
btn.click()
|
||||
return true
|
||||
})()
|
||||
`)
|
||||
await waitFor(atRoute('/battle'), 5000, '退房返回对战大厅')
|
||||
console.log('[e2e] 已退出房间')
|
||||
|
||||
// 第 5 步：单机游戏运行（渲染与游戏循环）——默认贪吃蛇，可用 NLG_E2E_GAME 换游戏
|
||||
// 普通游戏是「开始游戏」按钮；带关卡的游戏（连连看/消消乐/马里奥）是关卡选择面板的继续按钮
|
||||
await goto(`/play/${GAME}`)
|
||||
const startBtnExpr = `(() => {
|
||||
return document.querySelector('.overlay .ls-continue') ||
|
||||
[...document.querySelectorAll('.overlay button')].find((b) => b.textContent.includes('开始游戏')) || null
|
||||
})()`
|
||||
await waitFor(`!!${startBtnExpr}`, 10000, `${GAME} 游玩页就绪`)
|
||||
const isLevelGame = await js(`!!document.querySelector('.overlay .level-select')`)
|
||||
if (isLevelGame) {
|
||||
console.log(`[e2e] ${GAME} 为关卡制游戏，关卡选择面板已展示`)
|
||||
}
|
||||
await js(`(${startBtnExpr}).click(); true`)
|
||||
await sleep(2200) // 让游戏跑几帧
|
||||
// Canvas 游戏看画布，DOM 游戏（连连看/消消乐）看棋盘容器
|
||||
await waitFor(
|
||||
`!!document.querySelector('.stage canvas') || !!document.querySelector('.stage .link-board') || !!document.querySelector('.stage .m3-board .board')`,
|
||||
5000,
|
||||
'游戏画面渲染'
|
||||
)
|
||||
console.log(`[e2e] ${GAME} 已开局，画面渲染正常`)
|
||||
await shot('electron-smoke-game')
|
||||
|
||||
// 汇总
|
||||
if (pageErrors.length) {
|
||||
console.error(`[e2e] 页面报错 ${pageErrors.length} 条：`)
|
||||
for (const m of pageErrors.slice(0, 10)) console.error(' -', m)
|
||||
app.exit(1)
|
||||
return
|
||||
}
|
||||
console.log(`[e2e] 全部通过（${MODE} 模式）：登录 / 路由 / 大厅 / WS 建房退房 / 单机游戏均正常，无页面报错`)
|
||||
app.exit(0)
|
||||
}
|
||||
|
||||
app.whenReady().then(() =>
|
||||
main().catch((err) => {
|
||||
console.error('[e2e] 失败：', err.message)
|
||||
app.exit(1)
|
||||
})
|
||||
)
|
||||
// 兜底超时
|
||||
setTimeout(() => {
|
||||
console.error('[e2e] 总超时')
|
||||
app.exit(1)
|
||||
}, 90000)
|
||||
461
electron/main.cjs
Normal file
461
electron/main.cjs
Normal file
@@ -0,0 +1,461 @@
|
||||
// Electron 主进程：窗口生命周期、应用菜单、后端服务器地址配置、外链拦截
|
||||
// 加载策略：开发模式（未打包）优先连 Vite 开发服务器（5173），连不上回退到本地 dist 构建产物；
|
||||
// 打包后固定加载 asar 内的 dist。渲染进程通过 preload 注入的 window.desktop 获取服务器地址
|
||||
const { app, BrowserWindow, Menu, Tray, nativeImage, ipcMain, shell, dialog, net } = require('electron')
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
|
||||
// 后端服务器默认地址（可在「菜单 → 服务器设置」中修改，保存在用户数据目录）
|
||||
// 生产桌面端默认连线上；本机调试可在菜单里改回 http://127.0.0.1:8080
|
||||
const DEFAULT_SERVER = 'https://game.nailaoyun.cn'
|
||||
const DEV_URL = process.env.VITE_DEV_SERVER_URL || 'http://localhost:5173'
|
||||
// NLG_LOAD=dist 可在开发模式下强制加载 dist（用于模拟打包后的运行环境）
|
||||
const FORCE_DIST = process.env.NLG_LOAD === 'dist'
|
||||
// 冒烟自检模式：页面加载完成后截图保存并退出（用于自动化验证桌面端能正常启动）
|
||||
const SMOKE = process.argv.includes('--smoke') || process.env.NLG_SMOKE === '1'
|
||||
|
||||
let mainWin = null
|
||||
let settingsWin = null
|
||||
let tray = null
|
||||
// 真正退出时置 true（托盘「退出」/ app.quit）；否则点关闭按钮只隐藏到托盘
|
||||
let isQuitting = false
|
||||
|
||||
function appIconPath() {
|
||||
return path.join(__dirname, '../build/icon.png')
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 配置读写：%APPDATA%/<app>/config.json
|
||||
// ---------------------------------------------------------------------
|
||||
function cfgFile() {
|
||||
return path.join(app.getPath('userData'), 'config.json')
|
||||
}
|
||||
function readCfg() {
|
||||
try {
|
||||
return { serverBase: DEFAULT_SERVER, ...JSON.parse(fs.readFileSync(cfgFile(), 'utf8')) }
|
||||
} catch {
|
||||
return { serverBase: DEFAULT_SERVER }
|
||||
}
|
||||
}
|
||||
function writeCfg(patch) {
|
||||
const next = { ...readCfg(), ...patch }
|
||||
fs.mkdirSync(path.dirname(cfgFile()), { recursive: true })
|
||||
fs.writeFileSync(cfgFile(), JSON.stringify(next, null, 2))
|
||||
return next
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// IPC：preload 同步取服务器地址；设置窗口保存新地址后重载主窗口
|
||||
// ---------------------------------------------------------------------
|
||||
ipcMain.on('nlg:get-server-base', (e) => {
|
||||
e.returnValue = readCfg().serverBase
|
||||
})
|
||||
ipcMain.handle('nlg:set-server-base', (_e, url) => {
|
||||
const clean = String(url || '').trim().replace(/\/+$/, '')
|
||||
if (!/^https?:\/\/.+/i.test(clean)) {
|
||||
return { ok: false, msg: '地址需以 http:// 或 https:// 开头' }
|
||||
}
|
||||
writeCfg({ serverBase: clean })
|
||||
if (settingsWin && !settingsWin.isDestroyed()) settingsWin.close()
|
||||
// 重载后 preload 会重新读取配置，前端以新地址发起请求
|
||||
if (mainWin && !mainWin.isDestroyed()) mainWin.reload()
|
||||
return { ok: true }
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 版本检查：拉取后端 /api/version/latest 与本地 app.getVersion() 比较
|
||||
// 后端返回 { version, download_url, release_notes, force }
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
// 语义化版本比较：返回 -1/0/1（a<b / a==b / a>b），非法版本视为 0.0.0
|
||||
function compareVer(a, b) {
|
||||
const pa = String(a || '0').split('.').map((n) => parseInt(n, 10) || 0)
|
||||
const pb = String(b || '0').split('.').map((n) => parseInt(n, 10) || 0)
|
||||
const len = Math.max(pa.length, pb.length)
|
||||
for (let i = 0; i < len; i++) {
|
||||
const va = pa[i] || 0
|
||||
const vb = pb[i] || 0
|
||||
if (va > vb) return 1
|
||||
if (va < vb) return -1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
// 拉取一次最新版本信息（用 Electron 内置 net，自动走系统代理）
|
||||
function fetchLatestVersion() {
|
||||
return new Promise((resolve) => {
|
||||
const base = readCfg().serverBase.replace(/\/+$/, '')
|
||||
if (!base) return resolve({ ok: false, msg: '未配置服务器地址' })
|
||||
const req = net.request({
|
||||
method: 'GET',
|
||||
url: base + '/api/version/latest',
|
||||
redirect: 'follow',
|
||||
})
|
||||
let body = ''
|
||||
req.on('response', (resp) => {
|
||||
// 3xx 已由 redirect:'follow' 处理；这里只关心 2xx 最终响应
|
||||
resp.on('data', (chunk) => (body += chunk.toString('utf8')))
|
||||
resp.on('end', () => {
|
||||
try {
|
||||
const parsed = JSON.parse(body)
|
||||
// 后端统一返回 { code, msg, data }，code=0 表示成功
|
||||
const data = parsed && parsed.data ? parsed.data : parsed
|
||||
resolve({ ok: true, data })
|
||||
} catch {
|
||||
resolve({ ok: false, msg: '解析版本信息失败' })
|
||||
}
|
||||
})
|
||||
})
|
||||
req.on('error', (err) => resolve({ ok: false, msg: '网络错误：' + err.message }))
|
||||
// 超时兜底（10s）
|
||||
setTimeout(() => {
|
||||
try { req.abort() } catch {}
|
||||
resolve({ ok: false, msg: '请求超时' })
|
||||
}, 10000)
|
||||
req.end()
|
||||
})
|
||||
}
|
||||
|
||||
// 弹出更新对话框（silent=true 表示自动检查，已是最新版不弹窗）
|
||||
async function checkUpdate(silent = false) {
|
||||
const local = app.getVersion()
|
||||
const r = await fetchLatestVersion()
|
||||
if (!r.ok) {
|
||||
if (!silent) dialog.showErrorBox('检查更新失败', r.msg || '无法连接服务器')
|
||||
return
|
||||
}
|
||||
const { version, download_url: url, release_notes: notes, force } = r.data || {}
|
||||
if (compareVer(version, local) <= 0) {
|
||||
if (!silent) {
|
||||
dialog.showMessageBox(mainWin, {
|
||||
type: 'info',
|
||||
title: '已是最新版本',
|
||||
message: '当前已是最新版本',
|
||||
detail: `版本 ${local}`,
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
const buttons = url ? ['立即下载', force ? '确定' : '稍后提醒'] : [force ? '确定' : '稍后提醒']
|
||||
const { response } = await dialog.showMessageBox(mainWin, {
|
||||
type: force ? 'warning' : 'info',
|
||||
title: '发现新版本',
|
||||
message: `发现新版本 ${version}`,
|
||||
detail: notes || '请下载最新版本安装包覆盖安装。',
|
||||
buttons,
|
||||
defaultId: 0,
|
||||
cancelId: buttons.length - 1,
|
||||
noLink: true,
|
||||
})
|
||||
// 点了「立即下载」（按钮 0 且存在下载链接）；相对路径拼服务器基址
|
||||
if (response === 0 && url) {
|
||||
const abs = /^https?:\/\//i.test(url)
|
||||
? url
|
||||
: readCfg().serverBase.replace(/\/+$/, '') + (url.startsWith('/') ? url : '/' + url)
|
||||
shell.openExternal(abs)
|
||||
}
|
||||
}
|
||||
|
||||
// IPC：渲染进程可触发检查更新（预留菜单按钮 / 页面入口）
|
||||
ipcMain.handle('nlg:check-update', (_e, silent) => checkUpdate(silent))
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 服务器设置窗口（极简内嵌页面，深色风格与主站一致）
|
||||
// ---------------------------------------------------------------------
|
||||
function openSettings() {
|
||||
if (settingsWin && !settingsWin.isDestroyed()) {
|
||||
settingsWin.focus()
|
||||
return
|
||||
}
|
||||
settingsWin = new BrowserWindow({
|
||||
width: 460,
|
||||
height: 240,
|
||||
parent: mainWin || undefined,
|
||||
modal: !!mainWin,
|
||||
resizable: false,
|
||||
minimizable: false,
|
||||
maximizable: false,
|
||||
autoHideMenuBar: true,
|
||||
backgroundColor: '#12142a',
|
||||
title: '服务器设置',
|
||||
webPreferences: { preload: path.join(__dirname, 'preload.cjs') },
|
||||
})
|
||||
const cur = readCfg().serverBase
|
||||
const html = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>服务器设置</title>
|
||||
<style>
|
||||
body{margin:0;background:#12142a;color:#e8e9f5;font:14px/1.6 "Microsoft YaHei",sans-serif;padding:22px 26px}
|
||||
h3{margin:0 0 4px;font-size:15px}
|
||||
p{margin:0 0 12px;font-size:12px;color:#8d90b3}
|
||||
input{width:100%;box-sizing:border-box;background:#1c1f3d;border:1px solid #34386b;color:#e8e9f5;
|
||||
border-radius:8px;padding:9px 12px;font-size:13px;outline:none}
|
||||
input:focus{border-color:#6d6ff0}
|
||||
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
|
||||
button{border:0;border-radius:8px;padding:8px 22px;font-size:13px;cursor:pointer}
|
||||
.ok{background:linear-gradient(135deg,#6d6ff0,#9b6df0);color:#fff}
|
||||
.cancel{background:#262a52;color:#c6c8e8}
|
||||
.err{color:#ff7b8a;font-size:12px;margin-top:8px;min-height:16px}
|
||||
</style></head><body>
|
||||
<h3>后端服务器地址</h3>
|
||||
<p>桌面端连接的游戏服务器（修改后自动重新加载）</p>
|
||||
<input id="url" value="${cur.replace(/"/g, '"')}" placeholder="https://game.nailaoyun.cn" />
|
||||
<div class="err" id="err"></div>
|
||||
<div class="row">
|
||||
<button class="cancel" onclick="window.close()">取消</button>
|
||||
<button class="ok" id="save">保存</button>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('save').onclick = async () => {
|
||||
const r = await window.desktop.setServerBase(document.getElementById('url').value)
|
||||
if (!r.ok) document.getElementById('err').textContent = r.msg
|
||||
}
|
||||
document.getElementById('url').addEventListener('keyup', (e) => {
|
||||
if (e.key === 'Enter') document.getElementById('save').click()
|
||||
})
|
||||
</script>
|
||||
</body></html>`
|
||||
settingsWin.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(html))
|
||||
settingsWin.on('closed', () => { settingsWin = null })
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 系统托盘：关闭窗口隐藏到托盘，右键可显示/检查更新/退出
|
||||
// ---------------------------------------------------------------------
|
||||
function showMainWindow() {
|
||||
if (!mainWin || mainWin.isDestroyed()) {
|
||||
createWindow()
|
||||
return
|
||||
}
|
||||
if (mainWin.isMinimized()) mainWin.restore()
|
||||
mainWin.show()
|
||||
mainWin.focus()
|
||||
}
|
||||
|
||||
function createTray() {
|
||||
if (tray) return
|
||||
const iconFile = appIconPath()
|
||||
let img = fs.existsSync(iconFile)
|
||||
? nativeImage.createFromPath(iconFile)
|
||||
: nativeImage.createEmpty()
|
||||
// Windows 托盘建议 16×16；过大图标会被系统缩放发糊，主动缩一下
|
||||
if (!img.isEmpty() && (img.getSize().width > 32 || img.getSize().height > 32)) {
|
||||
img = img.resize({ width: 16, height: 16 })
|
||||
}
|
||||
tray = new Tray(img)
|
||||
tray.setToolTip('像素游戏厅')
|
||||
tray.setContextMenu(Menu.buildFromTemplate([
|
||||
{ label: '显示主窗口', click: () => showMainWindow() },
|
||||
{ label: '检查更新…', click: () => checkUpdate(false) },
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: '退出',
|
||||
click: () => {
|
||||
isQuitting = true
|
||||
app.quit()
|
||||
},
|
||||
},
|
||||
]))
|
||||
// 单击 / 双击托盘图标都拉起主窗口（Windows 习惯）
|
||||
tray.on('click', () => showMainWindow())
|
||||
tray.on('double-click', () => showMainWindow())
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 应用菜单
|
||||
// ---------------------------------------------------------------------
|
||||
function buildMenu() {
|
||||
const template = [
|
||||
{
|
||||
label: '应用',
|
||||
submenu: [
|
||||
{ label: '服务器设置…', accelerator: 'CmdOrCtrl+,', click: openSettings },
|
||||
{ label: '检查更新…', click: () => checkUpdate(false) },
|
||||
{ type: 'separator' },
|
||||
{ label: '刷新', role: 'reload' },
|
||||
{ label: '强制刷新（忽略缓存）', role: 'forceReload' },
|
||||
{ label: '开发者工具', role: 'toggleDevTools' },
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: '退出',
|
||||
accelerator: 'CmdOrCtrl+Q',
|
||||
click: () => {
|
||||
isQuitting = true
|
||||
app.quit()
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
submenu: [
|
||||
{ label: '撤销', role: 'undo' },
|
||||
{ label: '重做', role: 'redo' },
|
||||
{ type: 'separator' },
|
||||
{ label: '剪切', role: 'cut' },
|
||||
{ label: '复制', role: 'copy' },
|
||||
{ label: '粘贴', role: 'paste' },
|
||||
{ label: '全选', role: 'selectAll' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '视图',
|
||||
submenu: [
|
||||
{ label: '放大', role: 'zoomIn' },
|
||||
{ label: '缩小', role: 'zoomOut' },
|
||||
{ label: '实际大小', role: 'resetZoom' },
|
||||
{ type: 'separator' },
|
||||
{ label: '全屏', role: 'togglefullscreen' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '帮助',
|
||||
submenu: [
|
||||
{
|
||||
label: '关于',
|
||||
click: () => {
|
||||
dialog.showMessageBox(mainWin, {
|
||||
type: 'info',
|
||||
title: '关于',
|
||||
message: '像素游戏厅 桌面版',
|
||||
detail: `版本 ${app.getVersion()}\nElectron ${process.versions.electron} / Chromium ${process.versions.chrome}\n服务器：${readCfg().serverBase}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
Menu.setApplicationMenu(Menu.buildFromTemplate(template))
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 主窗口
|
||||
// ---------------------------------------------------------------------
|
||||
function createWindow() {
|
||||
// 窗口图标：打包后 exe 自带图标，这里主要供开发模式（electron .）使用
|
||||
const iconPath = appIconPath()
|
||||
// 恢复上次的窗口大小与位置（若显示器变化导致越界，Electron 会自动拉回可见区域）
|
||||
const cfg = readCfg()
|
||||
const saved = cfg.winBounds || {}
|
||||
mainWin = new BrowserWindow({
|
||||
width: saved.width || 1280,
|
||||
height: saved.height || 820,
|
||||
...(Number.isFinite(saved.x) && Number.isFinite(saved.y) ? { x: saved.x, y: saved.y } : {}),
|
||||
minWidth: 960,
|
||||
minHeight: 640,
|
||||
show: false,
|
||||
backgroundColor: '#0f1220',
|
||||
title: '像素游戏厅',
|
||||
...(fs.existsSync(iconPath) ? { icon: iconPath } : {}),
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.cjs'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
spellcheck: false,
|
||||
},
|
||||
})
|
||||
mainWin.once('ready-to-show', () => {
|
||||
if (cfg.winMax) mainWin.maximize()
|
||||
mainWin.show()
|
||||
// 启动后 3 秒静默检查一次更新（已是最新版不弹窗，发现新版本才提示）
|
||||
setTimeout(() => { checkUpdate(true).catch(() => {}) }, 3000)
|
||||
})
|
||||
// 点关闭：记住窗口状态并隐藏到托盘（冒烟模式 / 真正退出时直接关）
|
||||
mainWin.on('close', (e) => {
|
||||
try {
|
||||
writeCfg({ winBounds: mainWin.getNormalBounds(), winMax: mainWin.isMaximized() })
|
||||
} catch {}
|
||||
if (!isQuitting && !SMOKE && tray) {
|
||||
e.preventDefault()
|
||||
mainWin.hide()
|
||||
}
|
||||
})
|
||||
// 页面内打开新窗口（target=_blank 等）→ 交给系统浏览器
|
||||
mainWin.webContents.setWindowOpenHandler(({ url }) => {
|
||||
if (/^https?:\/\//i.test(url)) shell.openExternal(url)
|
||||
return { action: 'deny' }
|
||||
})
|
||||
// 阻止主窗口导航离开应用（外部 http 链接转系统浏览器）
|
||||
mainWin.webContents.on('will-navigate', (e, url) => {
|
||||
const inApp = url.startsWith(DEV_URL) || url.startsWith('file://')
|
||||
if (!inApp) {
|
||||
e.preventDefault()
|
||||
if (/^https?:\/\//i.test(url)) shell.openExternal(url)
|
||||
}
|
||||
})
|
||||
|
||||
const distIndex = path.join(__dirname, '../dist/index.html')
|
||||
const loadDist = () => {
|
||||
if (!fs.existsSync(distIndex)) {
|
||||
dialog.showErrorBox('缺少构建产物', '未找到 dist/index.html，请先执行 npm run electron:dist')
|
||||
app.quit()
|
||||
return
|
||||
}
|
||||
mainWin.loadFile(distIndex)
|
||||
}
|
||||
if (!app.isPackaged && !FORCE_DIST) {
|
||||
// 开发模式：优先 Vite 开发服务器，连不上回退 dist
|
||||
mainWin.loadURL(DEV_URL)
|
||||
mainWin.webContents.once('did-fail-load', (_e, _code, _desc, _url, isMainFrame) => {
|
||||
if (isMainFrame) loadDist()
|
||||
})
|
||||
} else {
|
||||
loadDist()
|
||||
}
|
||||
|
||||
// 冒烟自检：渲染完成后截图退出，供自动化验证
|
||||
if (SMOKE) {
|
||||
let done = false
|
||||
mainWin.webContents.on('did-finish-load', () => {
|
||||
setTimeout(async () => {
|
||||
if (done) return
|
||||
done = true
|
||||
try {
|
||||
const img = await mainWin.webContents.capturePage()
|
||||
const out = process.env.NLG_SHOT_PATH || path.join(process.cwd(), 'electron-smoke.png')
|
||||
fs.writeFileSync(out, img.toPNG())
|
||||
console.log('[smoke] screenshot saved:', out)
|
||||
app.exit(0)
|
||||
} catch (err) {
|
||||
console.error('[smoke] capture failed:', err)
|
||||
app.exit(1)
|
||||
}
|
||||
}, 2200)
|
||||
})
|
||||
// 兜底：25 秒仍未完成视为失败
|
||||
setTimeout(() => {
|
||||
if (!done) {
|
||||
console.error('[smoke] timeout')
|
||||
app.exit(1)
|
||||
}
|
||||
}, 25000)
|
||||
}
|
||||
|
||||
mainWin.on('closed', () => { mainWin = null })
|
||||
}
|
||||
|
||||
// 单实例锁：二次启动聚焦已有窗口
|
||||
const gotLock = app.requestSingleInstanceLock()
|
||||
if (!gotLock) {
|
||||
app.quit()
|
||||
} else {
|
||||
app.on('second-instance', () => {
|
||||
showMainWindow()
|
||||
})
|
||||
app.whenReady().then(() => {
|
||||
// Windows 任务栏/托盘分组 ID，避免与其他 Electron 应用挤在一起
|
||||
if (process.platform === 'win32') {
|
||||
app.setAppUserModelId('cn.nailaoyun.pixelarcade')
|
||||
}
|
||||
buildMenu()
|
||||
createTray()
|
||||
createWindow()
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
else showMainWindow()
|
||||
})
|
||||
})
|
||||
// 有托盘时关窗不等于退出，不要在 window-all-closed 里 quit
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin' && !tray) app.quit()
|
||||
})
|
||||
app.on('before-quit', () => { isQuitting = true })
|
||||
}
|
||||
20
electron/preload.cjs
Normal file
20
electron/preload.cjs
Normal file
@@ -0,0 +1,20 @@
|
||||
// Electron 预加载脚本：以 contextBridge 向渲染进程暴露最小桌面端 API
|
||||
// 前端凭 window.desktop 是否存在来区分「桌面端 / 浏览器」两种运行环境
|
||||
const { contextBridge, ipcRenderer } = require('electron')
|
||||
|
||||
// 同步读取后端服务器地址：必须在页面脚本执行前就绪（axios/WS 初始化要用）
|
||||
const serverBase = ipcRenderer.sendSync('nlg:get-server-base')
|
||||
|
||||
contextBridge.exposeInMainWorld('desktop', {
|
||||
// 后端服务器地址（形如 http://127.0.0.1:8080，结尾不带斜杠）
|
||||
serverBase,
|
||||
// 修改服务器地址（校验通过后主进程会自动重载页面）
|
||||
setServerBase: (url) => ipcRenderer.invoke('nlg:set-server-base', url),
|
||||
// 检查桌面端新版本（silent=true 时已是最新版不弹窗，用于启动自动检查）
|
||||
checkUpdate: (silent = false) => ipcRenderer.invoke('nlg:check-update', silent),
|
||||
// 运行环境版本信息
|
||||
versions: {
|
||||
electron: process.versions.electron,
|
||||
chrome: process.versions.chrome,
|
||||
},
|
||||
})
|
||||
@@ -1,10 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<!-- 站点图标：像素摇杆（与桌面端应用图标同源，Vite 构建时按 base 自动改写路径） -->
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<title>像素游戏厅</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
5170
package-lock.json
generated
Normal file
5170
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
73
package.json
73
package.json
@@ -1,31 +1,66 @@
|
||||
{
|
||||
"name": "spa-view",
|
||||
"name": "nl-game",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"version": "1.0.0",
|
||||
"description": "像素游戏厅：43 款小游戏平台（单机 + 联机对战 + AI 陪玩）",
|
||||
"author": "nl-game",
|
||||
"type": "module",
|
||||
"main": "electron/main.cjs",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"electron": "electron .",
|
||||
"electron:e2e": "vite build --base=./ && electron electron/e2e.cjs",
|
||||
"electron:dist": "vite build --base=./",
|
||||
"electron:pack": "vite build --base=./ && electron-builder --win --dir",
|
||||
"electron:build": "vite build --base=./ && electron-builder --win nsis"
|
||||
},
|
||||
"dependencies": {
|
||||
"tailwindcss": "^4.1.4",
|
||||
"vue": "^3.5.13",
|
||||
"@ant-design-vue/pro-layout": "^3.2.5",
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"@vueuse/head": "^2.0.0",
|
||||
"ant-design-vue": "^4.1.1",
|
||||
"axios": "^1.6.2",
|
||||
"lucide-vue-next": "^0.507.0",
|
||||
"pinia": "^2.1.7",
|
||||
"swiper": "^11.0.5",
|
||||
"vue-router": "^4.2.5"
|
||||
"@fontsource/press-start-2p": "^5.3.0",
|
||||
"@fontsource/vt323": "^5.3.0",
|
||||
"axios": "^1.19.0",
|
||||
"pinia": "^4.0.2",
|
||||
"three": "^0.185.1",
|
||||
"vue": "^3.5.41",
|
||||
"vue-router": "^5.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.2",
|
||||
"sass": "^1.71.0",
|
||||
"vite": "^6.3.1"
|
||||
"@vitejs/plugin-vue": "^6.0.8",
|
||||
"electron": "^43.4.0",
|
||||
"electron-builder": "^26.15.3",
|
||||
"vite": "^8.2.1"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.nlgame.desktop",
|
||||
"productName": "像素游戏厅",
|
||||
"electronDist": "node_modules/electron/dist",
|
||||
"directories": {
|
||||
"output": "release"
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"electron/**/*",
|
||||
"!electron/e2e.cjs",
|
||||
"package.json"
|
||||
],
|
||||
"asar": true,
|
||||
"win": {
|
||||
"executableName": "PixelArcade",
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"x64"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"shortcutName": "像素游戏厅",
|
||||
"artifactName": "PixelArcade-Setup-${version}.${ext}"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
73
src/App.vue
73
src/App.vue
@@ -1,10 +1,77 @@
|
||||
<script setup>
|
||||
// 应用外壳：登录页(bare)不显示导航栏，其余页面统一带 NavBar
|
||||
// 登录后挂载全局聊天悬浮小窗（大厅/游戏中随时私聊），并初始化实时消息通道
|
||||
import { computed, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import NavBar from './components/NavBar.vue'
|
||||
import ChatWidget from './components/ChatWidget.vue'
|
||||
import RoomInviteModal from './components/RoomInviteModal.vue'
|
||||
import { useUserStore } from './stores/user'
|
||||
import { useChatStore } from './stores/chat'
|
||||
import { useBattleStore } from './stores/battle'
|
||||
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
const chatStore = useChatStore()
|
||||
const battleStore = useBattleStore()
|
||||
|
||||
// 悬浮小窗显示条件：已登录、非登录页、非后台、非完整聊天室页（聊天室本身就是大窗）
|
||||
const showWidget = computed(
|
||||
() => userStore.loggedIn && !route.meta.bare && !route.path.startsWith('/admin') && route.path !== '/chat'
|
||||
)
|
||||
|
||||
// 登录后初始化聊天（WS 连接 + 未读数）；退出后断开连接并重置
|
||||
watch(
|
||||
() => userStore.loggedIn,
|
||||
(v) => {
|
||||
if (v) {
|
||||
chatStore.init()
|
||||
} else {
|
||||
battleStore.disconnect()
|
||||
chatStore.reset()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
<div class="app-shell">
|
||||
<NavBar v-if="!route.meta.bare" />
|
||||
<main class="app-main">
|
||||
<router-view />
|
||||
</main>
|
||||
<ChatWidget v-if="showWidget" />
|
||||
<RoomInviteModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
<style scoped>
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.app-main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 宽屏游戏页（如饥荒）：解除 1200px 限宽，整页锁定为视口高度（导航 + 内容 = 100dvh），不出滚动条 */
|
||||
body.wide-page {
|
||||
overflow: hidden;
|
||||
}
|
||||
body.wide-page .app-shell {
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
body.wide-page .app-main {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
padding: 10px 12px 12px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
57
src/api/http.js
Normal file
57
src/api/http.js
Normal file
@@ -0,0 +1,57 @@
|
||||
// axios 请求封装：自动携带 Token、统一错误提示、401 跳登录
|
||||
import axios from 'axios'
|
||||
import router from '../router'
|
||||
|
||||
// 后端服务器基址：Electron 桌面端由 preload 注入（file:// 下相对路径不可用），
|
||||
// 浏览器环境返回空串走同源相对路径（开发时由 Vite 代理转发）
|
||||
export function serverBase() {
|
||||
return (window.desktop?.serverBase || '').replace(/\/+$/, '')
|
||||
}
|
||||
|
||||
// 全局轻量提示（右上角浮动消息，避免引入 UI 库）
|
||||
export function toast(msg, type = 'error') {
|
||||
const el = document.createElement('div')
|
||||
el.className = `toast toast-${type}`
|
||||
el.textContent = msg
|
||||
document.body.appendChild(el)
|
||||
// 入场动画
|
||||
requestAnimationFrame(() => el.classList.add('show'))
|
||||
setTimeout(() => {
|
||||
el.classList.remove('show')
|
||||
setTimeout(() => el.remove(), 300)
|
||||
}, 2200)
|
||||
}
|
||||
|
||||
const http = axios.create({ baseURL: serverBase() + '/api', timeout: 15000 })
|
||||
|
||||
// 请求拦截：附加 JWT
|
||||
http.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) config.headers.Authorization = `Bearer ${token}`
|
||||
return config
|
||||
})
|
||||
|
||||
// 响应拦截：code!=0 视为业务失败并弹提示；401 清凭证回登录页
|
||||
http.interceptors.response.use(
|
||||
(res) => {
|
||||
const body = res.data
|
||||
if (body.code !== 0) {
|
||||
toast(body.msg || '操作失败')
|
||||
return Promise.reject(new Error(body.msg))
|
||||
}
|
||||
return body.data
|
||||
},
|
||||
(err) => {
|
||||
if (err.response?.status === 401) {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
toast('登录已失效，请重新登录')
|
||||
router.push('/login')
|
||||
} else if (err.code !== 'ERR_CANCELED') {
|
||||
toast(err.response?.data?.msg || '网络异常，请稍后再试')
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
export default http
|
||||
@@ -1,75 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import {message as msg} from "ant-design-vue";
|
||||
|
||||
// 创建 Axios 实例
|
||||
const service = axios.create({
|
||||
baseURL: '/api/', // 这里可以设置你的 API 基础地址
|
||||
timeout: 5000 // 请求超时时间
|
||||
});
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 从本地存储中获取 token
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
// 设置请求头中的 Authorization
|
||||
config.headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
error => {
|
||||
console.log(error); // 打印错误信息
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
const {code, result, message} = response.data;
|
||||
if (code === 0) {
|
||||
return result;
|
||||
} else {
|
||||
if (code === 401) {
|
||||
msg.error(message).then(r => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
window.location.href = '/'
|
||||
msg.destroy()
|
||||
})
|
||||
return;
|
||||
}
|
||||
msg.error(message).then(r => {
|
||||
msg.destroy()
|
||||
})
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error); // 打印错误信息
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 封装 get 请求
|
||||
const get = (url, params = {}) => {
|
||||
return service.get(url, { params });
|
||||
};
|
||||
|
||||
// 封装 post 请求
|
||||
const post = (url, data = {}) => {
|
||||
return service.post(url, data);
|
||||
};
|
||||
|
||||
// 封装上传文件请求
|
||||
const upload = (url, file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
return service.post(url, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export { get, post, upload };
|
||||
448
src/components/ChatWidget.vue
Normal file
448
src/components/ChatWidget.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<script setup>
|
||||
// 全局聊天悬浮小窗：大厅/游戏中随时收发私聊，不打断当前页面
|
||||
// 右下角悬浮按钮（带未读角标）→ 小窗（会话列表/好友列表/聊天），可一键跳转完整聊天室
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useChatStore } from '../stores/chat'
|
||||
import PixelAvatar from './PixelAvatar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const chat = useChatStore()
|
||||
const tab = ref('conv') // conv=会话 friend=好友
|
||||
const draft = ref('')
|
||||
const msgBox = ref(null)
|
||||
|
||||
const badge = computed(() => (chat.unread > 99 ? '99+' : chat.unread))
|
||||
|
||||
// 展开小窗
|
||||
function open() {
|
||||
chat.openWidget()
|
||||
}
|
||||
function close() {
|
||||
chat.widgetOpen = false
|
||||
}
|
||||
// 跳转完整聊天室（保留当前会话）
|
||||
function goFull() {
|
||||
chat.widgetOpen = false
|
||||
router.push('/chat')
|
||||
}
|
||||
function backToList() {
|
||||
chat.widgetView = 'list'
|
||||
}
|
||||
async function pick(peer) {
|
||||
await chat.widgetChat(peer)
|
||||
}
|
||||
async function send() {
|
||||
const text = draft.value.trim()
|
||||
if (!text) return
|
||||
draft.value = ''
|
||||
await chat.sendMsg(text)
|
||||
}
|
||||
// 新消息自动滚到底部
|
||||
watch(
|
||||
() => chat.messages.length,
|
||||
async () => {
|
||||
await nextTick()
|
||||
if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => chat.widgetView,
|
||||
async (v) => {
|
||||
if (v === 'chat') {
|
||||
await nextTick()
|
||||
if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 时间显示：今天只显示时分，更早带日期
|
||||
function fmtTime(ts) {
|
||||
if (!ts) return ''
|
||||
const d = new Date(ts * 1000)
|
||||
const now = new Date()
|
||||
const hm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
if (d.toDateString() === now.toDateString()) return hm
|
||||
return `${d.getMonth() + 1}/${d.getDate()} ${hm}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-widget">
|
||||
<!-- 悬浮按钮 -->
|
||||
<button v-if="!chat.widgetOpen" class="fab" title="消息" @click="open">
|
||||
💬
|
||||
<span v-if="chat.unread" class="fab-badge">{{ badge }}</span>
|
||||
</button>
|
||||
<!-- 小窗 -->
|
||||
<div v-else class="panel-box">
|
||||
<div class="head">
|
||||
<template v-if="chat.widgetView === 'chat'">
|
||||
<button class="icon-btn" title="返回列表" @click="backToList">←</button>
|
||||
<span class="head-title">
|
||||
<PixelAvatar :code="chat.activePeer?.avatar || 'px:01'" :size="20" /> {{ chat.activePeer?.nickname }}
|
||||
<i v-if="chat.activePeer?.online" class="dot on" title="在线"></i>
|
||||
<i v-else class="dot" title="离线"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="head-title">💬 消息</span>
|
||||
</template>
|
||||
<span class="head-actions">
|
||||
<button class="icon-btn" title="前往聊天室" @click="goFull">⛶</button>
|
||||
<button class="icon-btn" title="收起" @click="close">✕</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 列表视图 -->
|
||||
<template v-if="chat.widgetView === 'list'">
|
||||
<div class="tabs">
|
||||
<button class="tab" :class="{ on: tab === 'conv' }" @click="tab = 'conv'">会话</button>
|
||||
<button class="tab" :class="{ on: tab === 'friend' }" @click="tab = 'friend'">
|
||||
好友<span v-if="chat.reqBadge" class="mini-badge">{{ chat.reqBadge }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="tab === 'conv'" class="list">
|
||||
<div v-if="!chat.conversations.length" class="empty text-dim">
|
||||
还没有会话<br />去好友列表找人聊聊吧
|
||||
</div>
|
||||
<div v-for="cv in chat.conversations" :key="cv.peer.user_id" class="item" @click="pick(cv.peer)">
|
||||
<span class="avatar"><PixelAvatar :code="cv.peer.avatar || 'px:01'" :size="28" /><i v-if="cv.peer.online" class="dot on abs"></i></span>
|
||||
<span class="mid">
|
||||
<b>{{ cv.peer.nickname }}</b>
|
||||
<small class="text-dim">{{ cv.from_me ? '我：' : '' }}{{ cv.last_msg }}</small>
|
||||
</span>
|
||||
<span class="side">
|
||||
<small class="text-dim">{{ fmtTime(cv.last_at) }}</small>
|
||||
<em v-if="cv.unread" class="unread">{{ cv.unread > 99 ? '99+' : cv.unread }}</em>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="list">
|
||||
<div v-if="chat.reqBadge" class="req-tip" @click="goFull">
|
||||
🔔 有 {{ chat.reqBadge }} 条好友申请待处理，点击前往聊天室查看
|
||||
</div>
|
||||
<div v-if="!chat.friends.length" class="empty text-dim">
|
||||
还没有好友<br />到聊天室搜索用户名添加好友
|
||||
</div>
|
||||
<div v-for="f in chat.friends" :key="f.user_id" class="item" @click="pick(f)">
|
||||
<span class="avatar"><PixelAvatar :code="f.avatar || 'px:01'" :size="28" /><i v-if="f.online" class="dot on abs"></i></span>
|
||||
<span class="mid">
|
||||
<b>{{ f.nickname }}</b>
|
||||
<small class="text-dim">{{ f.online ? '在线' : '离线' }} · @{{ f.username }}</small>
|
||||
</span>
|
||||
<span class="side"><small class="chat-go">发消息</small></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 聊天视图 -->
|
||||
<template v-else>
|
||||
<div ref="msgBox" class="msgs">
|
||||
<button v-if="chat.hasMore" class="earlier" @click="chat.loadEarlier()">加载更早的消息</button>
|
||||
<div
|
||||
v-for="m in chat.messages"
|
||||
:key="m.id"
|
||||
class="bubble-row"
|
||||
:class="{ mine: m.from_id !== chat.activePeer?.user_id }"
|
||||
>
|
||||
<div class="bubble">
|
||||
{{ m.content }}
|
||||
<small class="stamp">{{ fmtTime(m.created_at) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<input
|
||||
v-model="draft"
|
||||
class="input"
|
||||
maxlength="500"
|
||||
placeholder="输入消息，回车发送"
|
||||
@keyup.enter="send"
|
||||
/>
|
||||
<button class="btn btn-sm" @click="send">发送</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chat-widget {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.fab {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), var(--glow);
|
||||
position: relative;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.fab:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
.fab-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: #e5484d;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.panel-box {
|
||||
width: 340px;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
|
||||
overflow: hidden;
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.head-title {
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.head-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.icon-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
}
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #666;
|
||||
display: inline-block;
|
||||
}
|
||||
.dot.on {
|
||||
background: #4ade80;
|
||||
box-shadow: 0 0 6px #4ade80;
|
||||
}
|
||||
.dot.abs {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border: 2px solid var(--bg-panel);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.tab.on {
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
box-shadow: inset 0 -2px 0 var(--primary);
|
||||
}
|
||||
.mini-badge {
|
||||
margin-left: 4px;
|
||||
background: #e5484d;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
border-radius: 999px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
}
|
||||
.req-tip {
|
||||
margin: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(229, 72, 77, 0.12);
|
||||
color: #ff8a8e;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:hover {
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 19px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mid {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.mid b {
|
||||
font-size: 13px;
|
||||
}
|
||||
.mid small {
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.side small {
|
||||
font-size: 11px;
|
||||
}
|
||||
.unread {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: #e5484d;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.chat-go {
|
||||
color: var(--primary-2);
|
||||
font-size: 12px;
|
||||
}
|
||||
.msgs {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.earlier {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--primary-2);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.bubble-row {
|
||||
display: flex;
|
||||
}
|
||||
.bubble-row.mine {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.bubble {
|
||||
max-width: 78%;
|
||||
padding: 8px 11px;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.bubble-row.mine .bubble {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.stamp {
|
||||
font-size: 10px;
|
||||
opacity: 0.65;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.input-row .input {
|
||||
flex: 1;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.panel-box {
|
||||
width: calc(100vw - 40px);
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/components/GameCard.vue
Normal file
142
src/components/GameCard.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
// 游戏卡片：大厅与商城通用（图标、名称、分类、价格/拥有标识、热度）
|
||||
import GameIcon from './GameIcon.vue'
|
||||
|
||||
defineProps({
|
||||
game: { type: Object, required: true }, // 游戏对象（含 owned 字段）
|
||||
showBuy: { type: Boolean, default: false }, // 商城模式显示购买按钮
|
||||
})
|
||||
defineEmits(['play', 'buy', 'addCart'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="game-card card">
|
||||
<div class="icon-area">
|
||||
<GameIcon class="game-icon" :code="game.code" :icon="game.icon" :size="48" />
|
||||
<span v-if="game.price > 0 && !game.owned && game.weekly_free" class="weekly-tag">⚡ 本周周免</span>
|
||||
<span v-else-if="game.price > 0 && !game.owned" class="price-tag">💰{{ game.price }}</span>
|
||||
<span v-else-if="game.price > 0 && game.owned" class="owned-tag">已拥有</span>
|
||||
<span v-else class="free-tag">免费</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name-row">
|
||||
<span class="name">{{ game.name }}</span>
|
||||
<span class="tag">{{ game.category }}</span>
|
||||
</div>
|
||||
<p class="desc text-dim">{{ game.description }}</p>
|
||||
<!-- 商城模式：无论购买还是开始游戏，按钮都独占一行，避免与热度挤在一起换行错乱 -->
|
||||
<div class="foot" :class="{ stacked: showBuy }">
|
||||
<span class="plays text-dim">🔥 {{ game.play_count }} 次游玩</span>
|
||||
<div class="actions">
|
||||
<template v-if="showBuy && game.price > 0 && !game.owned">
|
||||
<button class="btn btn-ghost btn-sm" @click.stop="$emit('addCart', game)">加购物车</button>
|
||||
<button class="btn btn-sm" @click.stop="$emit('buy', game)">立即购买</button>
|
||||
</template>
|
||||
<button v-else class="btn btn-sm" :class="{ 'btn-accent': game.engine === 'online' && game.playable }" @click.stop="$emit('play', game)">
|
||||
{{ !game.playable && game.price > 0 ? '去购买' : game.engine === 'online' ? '去对战' : '开始游戏' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.game-card {
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
.icon-area {
|
||||
position: relative;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.game-icon {
|
||||
font-size: 48px;
|
||||
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
.price-tag,
|
||||
.owned-tag,
|
||||
.free-tag,
|
||||
.weekly-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price-tag {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
||||
color: #fff;
|
||||
}
|
||||
.weekly-tag {
|
||||
background: linear-gradient(135deg, #f7b733, #fc4a1a);
|
||||
color: #fff;
|
||||
}
|
||||
.owned-tag {
|
||||
background: color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
.free-tag {
|
||||
background: color-mix(in srgb, #2f9e6e 25%, transparent);
|
||||
color: #5fd6a2;
|
||||
border: 1px solid #2f9e6e;
|
||||
}
|
||||
.info {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.name {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
margin: 6px 0 10px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 17px;
|
||||
}
|
||||
.foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
/* 购买模式：热度一行、两个按钮另起一行平分宽度 */
|
||||
.foot.stacked {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.foot.stacked .actions {
|
||||
width: 100%;
|
||||
}
|
||||
.foot.stacked .actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
.plays {
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.actions .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
290
src/components/GameCarousel.vue
Normal file
290
src/components/GameCarousel.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<script setup>
|
||||
// 大厅游戏轮播：后台在游戏管理里勾选参与轮播的游戏，并可切换 4 种轮播效果
|
||||
// slide 横向滑动（经典 banner）
|
||||
// fade 淡入淡出（原地渐变）
|
||||
// coverflow 封面流（中间大、两侧 3D 倾斜，点击侧卡切换）
|
||||
// cards 卡片堆叠（当前在顶，切换时向左飞出）
|
||||
// 统一实现：所有卡片绝对定位，按「与当前索引的有符号环距」计算变换，CSS 过渡产生动画
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
import GameIcon from './GameIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
games: { type: Array, required: true }, // 参与轮播的游戏（已按 carousel 排序）
|
||||
styleType: { type: String, default: 'slide' }, // 轮播效果
|
||||
interval: { type: Number, default: 5 }, // 自动播放间隔（秒）
|
||||
})
|
||||
const emit = defineEmits(['play'])
|
||||
|
||||
const idx = ref(0)
|
||||
const n = computed(() => props.games.length)
|
||||
let timer = 0
|
||||
|
||||
// 有符号环距：0=当前，1=下一张，-1=上一张（把环上距离折到 [-n/2, n/2)）
|
||||
function signedDist(i) {
|
||||
let d = (i - idx.value + n.value) % n.value
|
||||
if (d > n.value / 2) d -= n.value
|
||||
return d
|
||||
}
|
||||
|
||||
function go(i) {
|
||||
idx.value = ((i % n.value) + n.value) % n.value
|
||||
restart()
|
||||
}
|
||||
const next = () => go(idx.value + 1)
|
||||
const prev = () => go(idx.value - 1)
|
||||
|
||||
// 自动播放：hover 暂停，交互后重新计时
|
||||
function restart() {
|
||||
clearInterval(timer)
|
||||
if (n.value > 1) timer = setInterval(next, Math.max(2, props.interval) * 1000)
|
||||
}
|
||||
const pause = () => clearInterval(timer)
|
||||
|
||||
// 点击卡片：当前卡进入游戏，其余卡先切过去
|
||||
function onClick(g, i) {
|
||||
if (signedDist(i) === 0) emit('play', g)
|
||||
else go(i)
|
||||
}
|
||||
|
||||
// 每张卡的变换样式（按效果 + 环距计算）
|
||||
function slideStyle(i) {
|
||||
const d = signedDist(i)
|
||||
const abs = Math.abs(d)
|
||||
const s = props.styleType
|
||||
if (s === 'fade') {
|
||||
return { transform: 'none', opacity: d === 0 ? 1 : 0, zIndex: d === 0 ? 2 : 1, pointerEvents: d === 0 ? 'auto' : 'none' }
|
||||
}
|
||||
if (s === 'coverflow') {
|
||||
if (abs > 2) return { transform: `translateX(${d > 0 ? 120 : -120}%) scale(0.5)`, opacity: 0, zIndex: 0, pointerEvents: 'none' }
|
||||
return {
|
||||
// 位移量按卡片宽度（70%容器）折算，保证侧卡贴容器边缘而不外溢遮挡旁边内容
|
||||
transform: `translateX(${d * 33}%) scale(${d === 0 ? 1 : 0.74}) perspective(900px) rotateY(${d * -30}deg)`,
|
||||
opacity: abs === 2 ? 0 : d === 0 ? 1 : 0.55,
|
||||
zIndex: 3 - abs,
|
||||
pointerEvents: abs === 2 ? 'none' : 'auto',
|
||||
}
|
||||
}
|
||||
if (s === 'cards') {
|
||||
// 刚翻过去的那张（环距最负侧等价 n-1）向左飞出，其余按层级堆在后面
|
||||
const back = (i - idx.value + n.value) % n.value // 0=当前 1=下一张 …
|
||||
if (back === 0) return { transform: 'none', opacity: 1, zIndex: 5, pointerEvents: 'auto' }
|
||||
if (back === n.value - 1 && n.value > 2)
|
||||
return { transform: 'translateX(-115%) rotate(-10deg)', opacity: 0, zIndex: 6, pointerEvents: 'none' }
|
||||
if (back <= 2)
|
||||
return { transform: `translateY(${back * 14}px) scale(${1 - back * 0.05})`, opacity: 1 - back * 0.28, zIndex: 5 - back, pointerEvents: 'none' }
|
||||
return { transform: `translateY(28px) scale(0.9)`, opacity: 0, zIndex: 0, pointerEvents: 'none' }
|
||||
}
|
||||
// slide 默认：横向排开
|
||||
return {
|
||||
transform: `translateX(${d * 103}%)`,
|
||||
opacity: abs <= 1 ? 1 : 0,
|
||||
zIndex: d === 0 ? 2 : 1,
|
||||
pointerEvents: d === 0 ? 'auto' : 'none',
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮文案：可玩进游戏 / 联机去对战 / 未拥有去购买
|
||||
function actionText(g) {
|
||||
if (!g.playable && g.price > 0) return `💰 ${g.price} 积分解锁`
|
||||
return g.engine === 'online' ? '⚔️ 去对战' : '▶ 开始游戏'
|
||||
}
|
||||
|
||||
watch(() => props.interval, restart)
|
||||
onMounted(restart)
|
||||
onBeforeUnmount(pause)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="carousel" :class="`fx-${styleType}`" @mouseenter="pause" @mouseleave="restart">
|
||||
<div class="stage">
|
||||
<div
|
||||
v-for="(g, i) in games"
|
||||
:key="g.id"
|
||||
class="slide card"
|
||||
:style="slideStyle(i)"
|
||||
@click="onClick(g, i)"
|
||||
>
|
||||
<!-- 大图标装饰层 -->
|
||||
<GameIcon class="bg-icon" :code="g.code" :icon="g.icon" :size="190" />
|
||||
<div class="slide-body">
|
||||
<div class="s-tags">
|
||||
<span class="tag tag-primary">{{ g.category }}</span>
|
||||
<span class="tag">{{ g.engine === 'online' ? '⚔️ 联机对战' : '🕹️ 单机' }}</span>
|
||||
<span v-if="g.weekly_free" class="tag tag-accent">⚡ 本周周免</span>
|
||||
</div>
|
||||
<h3 class="s-name">{{ g.name }}</h3>
|
||||
<p class="s-desc text-dim">{{ g.description }}</p>
|
||||
<div class="s-foot">
|
||||
<button class="btn" @click.stop="emit('play', g)">{{ actionText(g) }}</button>
|
||||
<span class="s-plays text-dim">🔥 {{ g.play_count }} 次游玩</span>
|
||||
</div>
|
||||
</div>
|
||||
<GameIcon class="fg-icon" :code="g.code" :icon="g.icon" :size="96" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 箭头与指示点 -->
|
||||
<template v-if="n > 1">
|
||||
<button class="arrow left" aria-label="上一个" @click.stop="prev">‹</button>
|
||||
<button class="arrow right" aria-label="下一个" @click.stop="next">›</button>
|
||||
<div class="dots">
|
||||
<span v-for="(g, i) in games" :key="g.id" class="dot" :class="{ on: signedDist(i) === 0 }" @click="go(i)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.carousel {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
height: 210px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
/* 封面流/堆叠：卡片变换都留在舞台内（overflow hidden 统一裁剪，避免盖住旁边内容） */
|
||||
.slide {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
color-mix(in srgb, var(--primary) 24%, var(--bg-card)),
|
||||
color-mix(in srgb, var(--accent) 14%, var(--bg-card)) 70%
|
||||
);
|
||||
transition: transform 0.55s cubic-bezier(0.35, 0.9, 0.3, 1), opacity 0.5s ease;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
/* 背景大图标：右侧淡淡一枚超大 emoji 装饰 */
|
||||
.bg-icon {
|
||||
position: absolute;
|
||||
right: -26px;
|
||||
bottom: -38px;
|
||||
font-size: 190px;
|
||||
opacity: 0.14;
|
||||
transform: rotate(-12deg);
|
||||
pointer-events: none;
|
||||
filter: blur(1px);
|
||||
}
|
||||
.fg-icon {
|
||||
font-size: 96px;
|
||||
margin-right: 56px;
|
||||
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
|
||||
flex: none;
|
||||
animation: car-float 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes car-float {
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
.slide-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 22px 26px;
|
||||
}
|
||||
.s-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.s-name {
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
margin: 10px 0 8px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.s-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
max-width: 520px;
|
||||
margin-bottom: 14px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.s-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.s-plays {
|
||||
font-size: 12px;
|
||||
}
|
||||
/* 箭头 */
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.arrow:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.arrow.left {
|
||||
left: 10px;
|
||||
}
|
||||
.arrow.right {
|
||||
right: 10px;
|
||||
}
|
||||
/* 指示点 */
|
||||
.dots {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
z-index: 10;
|
||||
}
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--text) 30%, transparent);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.dot.on {
|
||||
width: 22px;
|
||||
background: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
/* 封面流/堆叠模式下卡片略窄，给两侧留出展示空间 */
|
||||
.fx-coverflow .slide {
|
||||
inset: 0 15%;
|
||||
}
|
||||
.fx-cards .slide {
|
||||
inset: 4px 3% 24px;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.fg-icon {
|
||||
display: none;
|
||||
}
|
||||
.s-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
117
src/components/GameIcon.vue
Normal file
117
src/components/GameIcon.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script setup>
|
||||
// 游戏图标组件：内置精致 SVG 徽章的游戏用 SVG 渲染（当前：饥荒 starve），
|
||||
// 其余游戏回退为 emoji 文本。size 控制整体边长（px）。
|
||||
defineProps({
|
||||
code: { type: String, default: '' },
|
||||
icon: { type: String, default: '🎮' },
|
||||
size: { type: Number, default: 48 },
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 饥荒：圆形徽章场景图——深蓝夜空 + 弯月星辰 + 尖刺松树剪影 + 中央篝火发光（哥特手绘感） -->
|
||||
<svg
|
||||
v-if="code === 'starve'"
|
||||
:width="size"
|
||||
:height="size"
|
||||
viewBox="0 0 96 96"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
class="gi-svg"
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id="gi-sky" cx="50%" cy="30%" r="80%">
|
||||
<stop offset="0%" stop-color="#2c3a68" />
|
||||
<stop offset="55%" stop-color="#161d3a" />
|
||||
<stop offset="100%" stop-color="#0a0d1e" />
|
||||
</radialGradient>
|
||||
<radialGradient id="gi-glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="rgba(255,176,64,0.65)" />
|
||||
<stop offset="55%" stop-color="rgba(255,140,40,0.22)" />
|
||||
<stop offset="100%" stop-color="rgba(255,120,20,0)" />
|
||||
</radialGradient>
|
||||
<linearGradient id="gi-flame" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#e04b00" />
|
||||
<stop offset="60%" stop-color="#ff8c1a" />
|
||||
<stop offset="100%" stop-color="#ffc93d" />
|
||||
</linearGradient>
|
||||
<linearGradient id="gi-flame2" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#ff9d1a" />
|
||||
<stop offset="100%" stop-color="#ffe27a" />
|
||||
</linearGradient>
|
||||
<clipPath id="gi-clip"><circle cx="48" cy="48" r="43" /></clipPath>
|
||||
</defs>
|
||||
<!-- 徽章底与哥特深色描边 -->
|
||||
<circle cx="48" cy="48" r="45.5" fill="#0c0912" />
|
||||
<g clip-path="url(#gi-clip)">
|
||||
<!-- 夜空 -->
|
||||
<rect x="0" y="0" width="96" height="96" fill="url(#gi-sky)" />
|
||||
<!-- 星星 -->
|
||||
<circle cx="26" cy="20" r="1.1" fill="#dfe6ff" opacity="0.9" />
|
||||
<circle cx="40" cy="13" r="0.8" fill="#c9d4ff" opacity="0.7" />
|
||||
<circle cx="58" cy="17" r="0.7" fill="#dfe6ff" opacity="0.6" />
|
||||
<circle cx="18" cy="34" r="0.8" fill="#c9d4ff" opacity="0.55" />
|
||||
<circle cx="80" cy="38" r="0.9" fill="#dfe6ff" opacity="0.65" />
|
||||
<!-- 弯月（主圆 + 夜空色遮圆） -->
|
||||
<circle cx="68" cy="23" r="8.5" fill="#f2e9c8" />
|
||||
<circle cx="64.6" cy="20.4" r="7.4" fill="#182040" />
|
||||
<!-- 地面（前后两层弧） -->
|
||||
<path d="M-4 78 Q28 66 52 74 Q76 80 100 72 L100 100 L-4 100 Z" fill="#131c12" />
|
||||
<path d="M-4 86 Q30 78 60 84 Q84 88 100 82 L100 100 L-4 100 Z" fill="#0c130c" />
|
||||
<!-- 左侧尖刺松树剪影（饥荒风：细干 + 三层错落枝杈，略歪斜） -->
|
||||
<g fill="#080d0a">
|
||||
<path d="M22 76 L23.5 52 L21 52 Z" />
|
||||
<path d="M22.5 40 L13 58 L31 57 Z" />
|
||||
<path d="M22.8 32 L15 47 L30 46.4 Z" />
|
||||
<path d="M23 25 L17 37 L29 36.4 Z" />
|
||||
<path d="M23.2 20 L19 29 L27.6 28.6 Z" />
|
||||
</g>
|
||||
<!-- 右侧松树（稍矮，反向歪斜） -->
|
||||
<g fill="#0a0f0b">
|
||||
<path d="M76 78 L74.6 58 L77.4 58 Z" />
|
||||
<path d="M75.8 47 L67.5 62 L84 61.4 Z" />
|
||||
<path d="M75.6 41 L69 53 L82 52.4 Z" />
|
||||
<path d="M75.4 35.5 L71 44.5 L79.8 44 Z" />
|
||||
</g>
|
||||
<!-- 篝火光晕 -->
|
||||
<ellipse cx="48" cy="66" rx="24" ry="19" fill="url(#gi-glow)" />
|
||||
<!-- 交叉木柴 -->
|
||||
<rect x="36.5" y="72.5" width="23" height="4.6" rx="2.3" fill="#5a3b20" transform="rotate(14 48 74.8)" />
|
||||
<rect x="36.5" y="72.5" width="23" height="4.6" rx="2.3" fill="#6b4826" transform="rotate(-16 48 74.8)" />
|
||||
<!-- 外焰（不对称水滴，手绘感） -->
|
||||
<path
|
||||
d="M48 46 C50.5 52 55.5 55.5 55.8 61.5 C56.1 67.5 52.6 72.5 48.2 72.8 C43.4 73.1 39.8 68.5 40.2 62.4 C40.5 57.6 44 54.5 45.2 50.6 C45.9 48.6 46.8 47.2 48 46 Z"
|
||||
fill="url(#gi-flame)"
|
||||
/>
|
||||
<!-- 内焰 -->
|
||||
<path
|
||||
d="M48.1 55 C49.6 58 52 60.2 52.1 63.6 C52.2 67.2 50.2 69.9 48.1 70 C45.7 70.2 43.9 67.4 44.1 63.9 C44.3 60.6 46.6 58.2 48.1 55 Z"
|
||||
fill="url(#gi-flame2)"
|
||||
/>
|
||||
<!-- 火心 -->
|
||||
<path d="M48.1 61.5 C49 63 50 64.2 50 66 C50 67.8 49.1 68.9 48.1 69 C46.9 69 46 67.8 46.1 66 C46.2 64.3 47.3 63.1 48.1 61.5 Z" fill="#fff3c4" />
|
||||
<!-- 火花 -->
|
||||
<circle cx="55.5" cy="49.5" r="1" fill="#ffb84d" opacity="0.9" />
|
||||
<circle cx="42.5" cy="46.5" r="0.8" fill="#ff9d3d" opacity="0.75" />
|
||||
<circle cx="52" cy="42.5" r="0.6" fill="#ffd27a" opacity="0.6" />
|
||||
</g>
|
||||
<!-- 外圈描边（双环，哥特徽章感） -->
|
||||
<circle cx="48" cy="48" r="43" stroke="#2a2138" stroke-width="2" />
|
||||
<circle cx="48" cy="48" r="45.4" stroke="#0c0912" stroke-width="2.6" />
|
||||
</svg>
|
||||
<!-- 其余游戏：emoji 回退 -->
|
||||
<span v-else class="gi-emoji" :style="{ fontSize: size + 'px' }">{{ icon }}</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gi-svg {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gi-emoji {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
170
src/components/LevelSelect.vue
Normal file
170
src/components/LevelSelect.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
// 关卡选择：带关卡游戏的开局面板（连连看/消消乐/马里奥通用）
|
||||
// 展示：关卡宫格（已过⭐/当前📍/未解锁🔒）、每关正在挑战的好友头像、好友进度名单、继续按钮
|
||||
import { computed } from 'vue'
|
||||
import PixelAvatar from './PixelAvatar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
total: { type: Number, required: true }, // 总关卡数
|
||||
names: { type: Array, default: null }, // 每关小字标签（可选，如模式名/世界号）
|
||||
myLevel: { type: Number, default: 1 }, // 我解锁到的关卡（通关全部后为 total+1）
|
||||
friends: { type: Array, default: () => [] }, // 好友进度 [{user_id,nickname,avatar,level}]
|
||||
})
|
||||
const emit = defineEmits(['pick'])
|
||||
|
||||
const allCleared = computed(() => props.myLevel > props.total) // 是否已全通关
|
||||
const continueLevel = computed(() => Math.min(props.myLevel, props.total)) // 继续按钮对应的关
|
||||
|
||||
// 好友挂在哪一格显示（超过总关数的通关好友挂在最后一格）
|
||||
function friendsAt(lv) {
|
||||
return props.friends.filter((f) => Math.min(f.level, props.total) === lv)
|
||||
}
|
||||
// 好友进度文案
|
||||
function friendText(f) {
|
||||
return f.level > props.total ? '已通关' : `第 ${f.level} 关`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="level-select">
|
||||
<p v-if="allCleared" class="ls-sub">🏆 已全部通关！可以重温任意关卡</p>
|
||||
<p v-else-if="myLevel > 1" class="ls-sub">上次闯到<b class="text-primary">第 {{ myLevel }} 关</b>，从这里继续吧</p>
|
||||
<p v-else class="ls-sub text-dim">从第 1 关开始你的闯关之旅</p>
|
||||
<button class="btn btn-lg ls-continue" @click="emit('pick', continueLevel)">
|
||||
{{ allCleared ? `🔄 重玩第 ${total} 关` : myLevel > 1 ? `▶ 继续第 ${myLevel} 关` : '▶ 开始闯关' }}
|
||||
</button>
|
||||
<!-- 关卡宫格 -->
|
||||
<div class="ls-grid">
|
||||
<button
|
||||
v-for="i in total"
|
||||
:key="i"
|
||||
class="ls-cell"
|
||||
:class="{ cleared: i < myLevel, current: i === myLevel && !allCleared, locked: i > myLevel }"
|
||||
:disabled="i > myLevel"
|
||||
:title="i > myLevel ? '通关前面的关卡后解锁' : `进入第 ${i} 关`"
|
||||
@click="emit('pick', i)"
|
||||
>
|
||||
<span class="ls-state">{{ i < myLevel ? '⭐' : i === myLevel && !allCleared ? '📍' : i > myLevel ? '🔒' : '⭐' }}</span>
|
||||
<span class="ls-num">{{ i }}</span>
|
||||
<span v-if="names && names[i - 1]" class="ls-name">{{ names[i - 1] }}</span>
|
||||
<!-- 该关的好友头像（最多 3 个 + 溢出数） -->
|
||||
<span v-if="friendsAt(i).length" class="ls-favatars" :title="friendsAt(i).map((f) => f.nickname).join('、')">
|
||||
<span v-for="f in friendsAt(i).slice(0, 3)" :key="f.user_id" class="ls-fa"><PixelAvatar :code="f.avatar" :size="14" /></span>
|
||||
<span v-if="friendsAt(i).length > 3" class="ls-fmore">+{{ friendsAt(i).length - 3 }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 好友进度名单 -->
|
||||
<div v-if="friends.length" class="ls-friends">
|
||||
<span class="text-dim">好友进度：</span>
|
||||
<span v-for="f in friends" :key="f.user_id" class="ls-fitem">
|
||||
<PixelAvatar :code="f.avatar" :size="16" /> {{ f.nickname }} <b>{{ friendText(f) }}</b>
|
||||
</span>
|
||||
</div>
|
||||
<p v-else class="ls-friends text-dim" style="font-size: 12px">还没有好友玩过这个游戏，喊朋友一起来闯关吧～</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.level-select {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: min(560px, 100%);
|
||||
}
|
||||
.ls-sub {
|
||||
font-size: 14px;
|
||||
}
|
||||
.ls-continue {
|
||||
min-width: 220px;
|
||||
}
|
||||
.ls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.ls-cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: calc(var(--radius) / 1.4);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
padding: 4px;
|
||||
}
|
||||
.ls-cell:not(.locked):hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.ls-cell.cleared {
|
||||
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
|
||||
}
|
||||
.ls-cell.current {
|
||||
border-color: var(--primary);
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--bg-card)), var(--bg-card));
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.ls-cell.locked {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ls-state {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.ls-num {
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
}
|
||||
.ls-name {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ls-favatars {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: color-mix(in srgb, var(--bg) 70%, transparent);
|
||||
border-radius: 999px;
|
||||
padding: 1px 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.ls-fa {
|
||||
margin-left: -2px;
|
||||
}
|
||||
.ls-fmore {
|
||||
font-size: 9px;
|
||||
color: var(--text-dim);
|
||||
margin-left: 1px;
|
||||
}
|
||||
.ls-friends {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 14px;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
}
|
||||
.ls-fitem b {
|
||||
color: var(--primary-2);
|
||||
}
|
||||
</style>
|
||||
290
src/components/NavBar.vue
Normal file
290
src/components/NavBar.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<script setup>
|
||||
// 顶部导航栏：站点名、主导航（SVG 图标在上 + 文字在下的竖排布局）、消息入口（带未读角标）、积分、用户菜单
|
||||
// 小屏（≤900px）不再收进汉堡抽屉，而是隐藏文字仅留图标（title 悬浮提示文字）
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useUserStore } from '../stores/user'
|
||||
import { useThemeStore } from '../stores/theme'
|
||||
import { useChatStore } from '../stores/chat'
|
||||
import NavIcon from './NavIcon.vue'
|
||||
import PixelAvatar from './PixelAvatar.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const themeStore = useThemeStore()
|
||||
const chatStore = useChatStore()
|
||||
|
||||
// 主导航配置（icon 为 NavIcon 组件里的 SVG 名称）
|
||||
const navs = [
|
||||
{ name: 'lobby', path: '/', label: '大厅', icon: 'lobby' },
|
||||
{ name: 'center', path: '/center', label: '游戏中心', icon: 'center' },
|
||||
{ name: 'battle', path: '/battle', label: '联机对战', icon: 'battle' },
|
||||
{ name: 'signin', path: '/signin', label: '签到中心', icon: 'signin' },
|
||||
{ name: 'vip', path: '/vip', label: 'VIP', icon: 'vip' },
|
||||
{ name: 'rank', path: '/rank', label: '排行榜', icon: 'rank' },
|
||||
]
|
||||
|
||||
const points = computed(() => userStore.user?.points ?? 0)
|
||||
|
||||
// 未读私聊 + 待处理好友申请合计（角标）
|
||||
const msgBadge = computed(() => {
|
||||
const n = chatStore.unread + chatStore.reqBadge
|
||||
return n > 99 ? '99+' : n
|
||||
})
|
||||
|
||||
// 当前路由是否命中某导航
|
||||
function isActive(path) {
|
||||
return route.path === path || (path !== '/' && route.path.startsWith(path))
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
function logout() {
|
||||
userStore.logout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="nav">
|
||||
<div class="nav-inner">
|
||||
<router-link to="/" class="brand">
|
||||
<span class="brand-icon"><NavIcon name="lobby" :size="26" /></span>
|
||||
<span class="brand-name">{{ themeStore.siteName }}</span>
|
||||
</router-link>
|
||||
<!-- 主导航：图标在上、文字在下；小屏自动隐藏文字 -->
|
||||
<nav class="links">
|
||||
<router-link
|
||||
v-for="n in navs"
|
||||
:key="n.name"
|
||||
:to="n.path"
|
||||
class="link"
|
||||
:class="{ active: isActive(n.path) }"
|
||||
:title="n.label"
|
||||
>
|
||||
<NavIcon :name="n.icon" :size="22" class="link-icon" />
|
||||
<span class="link-text">{{ n.label }}</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/chat"
|
||||
class="link msg-link"
|
||||
:class="{ active: route.path.startsWith('/chat') }"
|
||||
title="消息"
|
||||
>
|
||||
<NavIcon name="chat" :size="22" class="link-icon" />
|
||||
<span class="link-text">消息</span>
|
||||
<em v-if="chatStore.unread + chatStore.reqBadge > 0" class="msg-badge">{{ msgBadge }}</em>
|
||||
</router-link>
|
||||
</nav>
|
||||
<div class="right">
|
||||
<span class="points" title="当前积分"><NavIcon name="coin" :size="17" class="coin-icon" /> {{ points }}</span>
|
||||
<router-link v-if="userStore.isAdmin" to="/admin" class="link tool-link" :class="{ active: route.path.startsWith('/admin') }" title="后台管理">
|
||||
<NavIcon name="admin" :size="22" class="link-icon" />
|
||||
<span class="link-text">后台</span>
|
||||
</router-link>
|
||||
<router-link to="/profile" class="user" title="个人中心">
|
||||
<span class="avatar"><PixelAvatar :code="userStore.user?.avatar || 'px:01'" :size="30" /></span>
|
||||
<span class="nickname">{{ userStore.user?.nickname }}</span>
|
||||
</router-link>
|
||||
<button class="link tool-link logout-link" title="退出登录" @click="logout">
|
||||
<NavIcon name="logout" :size="22" class="link-icon" />
|
||||
<span class="link-text">退出</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.brand-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--primary);
|
||||
filter: drop-shadow(var(--glow));
|
||||
}
|
||||
.brand-name {
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
/* 竖排导航项：SVG 图标在上、11px 文字在下 */
|
||||
.link {
|
||||
padding: 6px 12px 5px;
|
||||
border-radius: calc(var(--radius) / 1.6);
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.link-icon {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.link-text {
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
.link:hover {
|
||||
color: var(--text);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.link.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.msg-link {
|
||||
position: relative;
|
||||
}
|
||||
.msg-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
background: #e5484d;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.points {
|
||||
font-weight: 700;
|
||||
color: var(--primary-2);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.coin-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tool-link {
|
||||
padding: 5px 9px 4px;
|
||||
}
|
||||
.tool-link.active {
|
||||
color: #fff;
|
||||
}
|
||||
.logout-link:hover {
|
||||
color: #ff8a8e;
|
||||
}
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 13px;
|
||||
max-width: 90px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 小屏：隐藏文字仅留图标（title 悬浮提示），不再使用汉堡抽屉 */
|
||||
@media (max-width: 900px) {
|
||||
.nav-inner {
|
||||
gap: 8px;
|
||||
height: 56px;
|
||||
}
|
||||
.links {
|
||||
gap: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.links::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.link {
|
||||
padding: 8px 9px;
|
||||
}
|
||||
.link-text {
|
||||
display: none;
|
||||
}
|
||||
.msg-badge {
|
||||
top: 1px;
|
||||
right: 0;
|
||||
}
|
||||
.nickname {
|
||||
display: none;
|
||||
}
|
||||
.right {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.brand-name {
|
||||
display: none;
|
||||
}
|
||||
.points {
|
||||
font-size: 13px;
|
||||
}
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
src/components/NavIcon.vue
Normal file
204
src/components/NavIcon.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup>
|
||||
// 导航 SVG 图标集：线条描边风格，currentColor 随主题着色（替代 emoji）
|
||||
// 用法：<NavIcon name="lobby" :size="22" />
|
||||
defineProps({
|
||||
name: { type: String, required: true },
|
||||
size: { type: Number, default: 22 },
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="size"
|
||||
:height="size"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<!-- 大厅：游戏手柄 -->
|
||||
<template v-if="name === 'lobby'">
|
||||
<path d="M6.5 7.5h11c2.6 0 4.5 2.1 4.5 4.7 0 2.4-1.4 4.9-3.2 4.9-1.1 0-1.9-.8-2.6-1.7-.6-.8-1.1-1.2-2-1.2h-4.4c-.9 0-1.4.4-2 1.2-.7.9-1.5 1.7-2.6 1.7C3.4 17.1 2 14.6 2 12.2c0-2.6 1.9-4.7 4.5-4.7Z" />
|
||||
<path d="M7.6 10.2v3.4M5.9 11.9h3.4" />
|
||||
<circle cx="15.6" cy="10.9" r="0.6" fill="currentColor" />
|
||||
<circle cx="18.2" cy="12.9" r="0.6" fill="currentColor" />
|
||||
</template>
|
||||
<!-- 游戏中心：商店袋 -->
|
||||
<template v-else-if="name === 'center'">
|
||||
<path d="M5.5 8.5h13l-1 11.5a1.6 1.6 0 0 1-1.6 1.5H8.1a1.6 1.6 0 0 1-1.6-1.5l-1-11.5Z" />
|
||||
<path d="M8.6 11V6.8a3.4 3.4 0 0 1 6.8 0V11" />
|
||||
</template>
|
||||
<!-- 联机对战：交叉双剑 -->
|
||||
<template v-else-if="name === 'battle'">
|
||||
<path d="M4 4l9.5 9.5M4 4v3.2M4 4h3.2" />
|
||||
<path d="M20 4l-9.5 9.5M20 4v3.2M20 4h-3.2" />
|
||||
<path d="M7.2 14.4l2.4 2.4M16.8 14.4l-2.4 2.4" />
|
||||
<path d="M6 18.2l-1.6 1.6M18 18.2l1.6 1.6M5.2 16.4l2.4 2.4M18.8 16.4l-2.4 2.4" />
|
||||
</template>
|
||||
<!-- 签到中心：日历打勾 -->
|
||||
<template v-else-if="name === 'signin'">
|
||||
<rect x="3.5" y="5" width="17" height="15.5" rx="2.2" />
|
||||
<path d="M3.5 9.6h17M8 2.8v4M16 2.8v4" />
|
||||
<path d="M8.6 14.6l2.4 2.4 4.4-4.6" />
|
||||
</template>
|
||||
<!-- VIP：钻石 -->
|
||||
<template v-else-if="name === 'vip'">
|
||||
<path d="M7 4.5h10l4 5.5-9 9.8L3 10l4-5.5Z" />
|
||||
<path d="M3 10h18M9.5 10L12 19.4 14.5 10M7 4.5l2.5 5.5L12 4.7l2.5 5.3 2.5-5.5" />
|
||||
</template>
|
||||
<!-- 排行榜：奖杯 -->
|
||||
<template v-else-if="name === 'rank'">
|
||||
<path d="M8 4h8v6a4 4 0 0 1-8 0V4Z" />
|
||||
<path d="M8 5.4H5a0 0 0 0 0 0 0c0 2.8 1.2 4.6 3 5M16 5.4h3c0 2.8-1.2 4.6-3 5" />
|
||||
<path d="M12 14v3M9 20.5h6M10 17.5h4l.6 3h-5.2l.6-3Z" />
|
||||
</template>
|
||||
<!-- 消息：对话气泡 -->
|
||||
<template v-else-if="name === 'chat'">
|
||||
<path d="M12 4c5 0 9 3.2 9 7.2s-4 7.2-9 7.2c-.9 0-1.8-.1-2.6-.3L5 20l1-3.4c-1.9-1.3-3-3.2-3-5.4C3 7.2 7 4 12 4Z" />
|
||||
<circle cx="8.6" cy="11.2" r="0.7" fill="currentColor" />
|
||||
<circle cx="12" cy="11.2" r="0.7" fill="currentColor" />
|
||||
<circle cx="15.4" cy="11.2" r="0.7" fill="currentColor" />
|
||||
</template>
|
||||
<!-- 积分：金币 -->
|
||||
<template v-else-if="name === 'coin'">
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<circle cx="12" cy="12" r="5.2" />
|
||||
<path d="M12 9.4v5.2M10 10.6l4 2.8M14 10.6l-4 2.8" stroke-width="1.3" />
|
||||
</template>
|
||||
<!-- 后台：齿轮 -->
|
||||
<template v-else-if="name === 'admin'">
|
||||
<circle cx="12" cy="12" r="3.2" />
|
||||
<path d="M12 2.8l1 2.6a7 7 0 0 1 2.3 1l2.7-.9 1.5 2.6-1.8 2.1a7 7 0 0 1 0 2.6l1.8 2.1-1.5 2.6-2.7-.9a7 7 0 0 1-2.3 1l-1 2.6-3-.001-1-2.6a7 7 0 0 1-2.3-1l-2.7.9-1.5-2.6 1.8-2.1a7 7 0 0 1 0-2.6L2.5 8.1 4 5.5l2.7.9a7 7 0 0 1 2.3-1l1-2.6h2Z" />
|
||||
</template>
|
||||
<!-- 个人中心：人像 -->
|
||||
<template v-else-if="name === 'user'">
|
||||
<circle cx="12" cy="8.2" r="4" />
|
||||
<path d="M4.5 20.5c.8-4 3.9-6 7.5-6s6.7 2 7.5 6" />
|
||||
</template>
|
||||
<!-- 退出：门 + 箭头 -->
|
||||
<template v-else-if="name === 'logout'">
|
||||
<path d="M13.5 3.5H6.8A1.8 1.8 0 0 0 5 5.3v13.4a1.8 1.8 0 0 0 1.8 1.8h6.7" />
|
||||
<path d="M10.5 12h9.5M17 8.5l3.5 3.5L17 15.5" />
|
||||
</template>
|
||||
<!-- ==== 以下为后台管理图标 ==== -->
|
||||
<!-- 数据概览：柱状图 -->
|
||||
<template v-else-if="name === 'stats'">
|
||||
<path d="M3.5 20.5h17" />
|
||||
<rect x="5.5" y="12" width="3.6" height="8.5" rx="1" />
|
||||
<rect x="10.6" y="7" width="3.6" height="13.5" rx="1" />
|
||||
<rect x="15.7" y="10" width="3.6" height="10.5" rx="1" />
|
||||
<path d="M5 6.5l4-2.6 3.6 2 5-3.4" />
|
||||
</template>
|
||||
<!-- 主题设置：调色板 -->
|
||||
<template v-else-if="name === 'palette'">
|
||||
<path d="M12 3c5 0 9 3.6 9 8 0 2.8-2 4-4 4h-2.2c-1.2 0-1.9 1-1.4 2 .5 1 .1 2.6-1.4 2.9-.3.05-.7.1-1 .1-5 0-9-3.8-9-8.5S7 3 12 3Z" />
|
||||
<circle cx="7.8" cy="10" r="1.1" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="7.6" r="1.1" fill="currentColor" stroke="none" />
|
||||
<circle cx="16.2" cy="10" r="1.1" fill="currentColor" stroke="none" />
|
||||
<circle cx="8.6" cy="14.6" r="1.1" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<!-- 用户管理：双人像 -->
|
||||
<template v-else-if="name === 'users'">
|
||||
<circle cx="9" cy="8.6" r="3.4" />
|
||||
<path d="M3 20c.7-3.6 3.1-5.4 6-5.4s5.3 1.8 6 5.4" />
|
||||
<path d="M15.4 5.8a3.4 3.4 0 0 1 0 5.7" />
|
||||
<path d="M17.5 14.9c1.8.7 3 2.3 3.5 4.6" />
|
||||
</template>
|
||||
<!-- 订单管理：单据 -->
|
||||
<template v-else-if="name === 'orders'">
|
||||
<path d="M6 3.5h12v16.2l-2.4-1.5-2.4 1.5-1.2-.8-1.2.8-2.4-1.5L6 19.7V3.5Z" />
|
||||
<path d="M9 8h6M9 11.4h6M9 14.8h3.6" />
|
||||
</template>
|
||||
<!-- AI 设置：机器人 -->
|
||||
<template v-else-if="name === 'robot'">
|
||||
<rect x="5" y="8" width="14" height="10.5" rx="2.6" />
|
||||
<path d="M12 8V4.8M12 4.8a1.3 1.3 0 1 0-.01 0Z" />
|
||||
<circle cx="9.2" cy="12.6" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="14.8" cy="12.6" r="1" fill="currentColor" stroke="none" />
|
||||
<path d="M9.4 15.8h5.2M2.8 11.5v3.4M21.2 11.5v3.4" />
|
||||
</template>
|
||||
<!-- 局数：摇杆 -->
|
||||
<template v-else-if="name === 'play'">
|
||||
<circle cx="12" cy="7" r="3" />
|
||||
<path d="M12 10v6M8 21h8M12 16c-2.6 0-4 1-4 5h8c0-4-1.4-5-4-5Z" />
|
||||
</template>
|
||||
<!-- 趋势：上升折线 -->
|
||||
<template v-else-if="name === 'trend'">
|
||||
<path d="M3.5 19.5h17" />
|
||||
<path d="M4.5 15.5l4.6-4.8 3.4 3 6.4-7" />
|
||||
<path d="M15.4 6.7h3.5v3.5" />
|
||||
</template>
|
||||
<!-- 在线：信号波 -->
|
||||
<template v-else-if="name === 'pulse'">
|
||||
<circle cx="12" cy="18" r="1.6" fill="currentColor" stroke="none" />
|
||||
<path d="M8.5 14.6a5 5 0 0 1 7 0M5.8 11.6a9 9 0 0 1 12.4 0M3.2 8.6a13 13 0 0 1 17.6 0" />
|
||||
</template>
|
||||
<!-- 时长：时钟 -->
|
||||
<template v-else-if="name === 'clock'">
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<path d="M12 6.8V12l3.6 2.4" />
|
||||
</template>
|
||||
<!-- 平均时长：沙漏 -->
|
||||
<template v-else-if="name === 'hourglass'">
|
||||
<path d="M6.5 3.5h11M6.5 20.5h11" />
|
||||
<path d="M7.5 3.5v3.2c0 2.6 2 3.8 4.5 5.3 2.5-1.5 4.5-2.7 4.5-5.3V3.5M7.5 20.5v-3.2c0-2.6 2-3.8 4.5-5.3 2.5 1.5 4.5 2.7 4.5 5.3v3.2" />
|
||||
</template>
|
||||
<!-- 热门：火焰 -->
|
||||
<template v-else-if="name === 'flame'">
|
||||
<path d="M12 21c-3.8 0-6.5-2.4-6.5-6 0-2.5 1.4-4.4 2.8-6 .5-.6 1.5-.3 1.6.5.1.7.3 1.4.8 1.9.2-2.6 1.3-5.6 3.5-7.4.6-.5 1.5 0 1.4.7-.1 1.6.3 3 1.6 4.6 1.2 1.5 2.3 3.3 2.3 5.7 0 3.6-2.7 6-6.5 6Z" />
|
||||
<path d="M12 21c-1.7 0-3-1.2-3-3 0-1.4 1-2.4 2-3.5.5-.5 1.5-.5 2 0 1 1.1 2 2.1 2 3.5 0 1.8-1.3 3-3 3Z" />
|
||||
</template>
|
||||
<!-- 站点信息：标签牌 -->
|
||||
<template v-else-if="name === 'tag'">
|
||||
<path d="M11.6 3.5H5a1.5 1.5 0 0 0-1.5 1.5v6.6c0 .4.16.8.44 1.06l8.4 8.4a1.5 1.5 0 0 0 2.12 0l6.6-6.6a1.5 1.5 0 0 0 0-2.12l-8.4-8.4a1.5 1.5 0 0 0-1.06-.44Z" />
|
||||
<circle cx="8" cy="8" r="1.4" />
|
||||
</template>
|
||||
<!-- 规则 AI：大脑 -->
|
||||
<template v-else-if="name === 'brain'">
|
||||
<path d="M11.5 4a3 3 0 0 0-3 3c-2 .2-3.5 1.7-3.5 3.7 0 1.1.4 2 1.1 2.7-.4.6-.6 1.3-.6 2.1 0 2.2 1.8 3.9 4 3.9.7 0 1.4-.2 2-.5V4Z" />
|
||||
<path d="M12.5 4a3 3 0 0 1 3 3c2 .2 3.5 1.7 3.5 3.7 0 1.1-.4 2-1.1 2.7.4.6.6 1.3.6 2.1 0 2.2-1.8 3.9-4 3.9-.7 0-1.4-.2-2-.5V4Z" />
|
||||
<path d="M9 9.5c.8.4 1.6.5 2.5.4M15 12.5c-.8-.4-1.6-.5-2.5-.4" stroke-width="1.2" />
|
||||
</template>
|
||||
<!-- DeepSeek：鲸鱼 -->
|
||||
<template v-else-if="name === 'whale'">
|
||||
<path d="M3 13.5c2.2 0 3.2-2 3.2-3.8 0-.8 1-1.1 1.5-.5.6.8 1 1.8 1 3 3-.3 7.3-.2 9.8 1.4 1.6 1 2.5 2.4 2.5 3.9-2.8 0-4.4 2-9.5 2-5.4 0-8.5-2.8-8.5-6Z" />
|
||||
<path d="M16.5 12.2c.6-1.6 2-2.7 3.8-2.9M18 17.2c1-.7 1.7-1 3-1" stroke-width="1.4" />
|
||||
<circle cx="7.6" cy="14.6" r="0.7" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<!-- 轮播：图片切换 -->
|
||||
<template v-else-if="name === 'carousel'">
|
||||
<rect x="6" y="5.5" width="12" height="11" rx="1.8" />
|
||||
<path d="M3 8v6M21 8v6" />
|
||||
<circle cx="9.5" cy="19.5" r="0.8" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="19.5" r="0.8" fill="currentColor" stroke="none" />
|
||||
<circle cx="14.5" cy="19.5" r="0.8" fill="currentColor" stroke="none" />
|
||||
<path d="M9.2 12.8l2-2.4 1.6 1.7 1.3-1.3 1.7 2H9.2Z" />
|
||||
</template>
|
||||
<!-- 保存：软盘 -->
|
||||
<template v-else-if="name === 'save'">
|
||||
<path d="M5.5 4.5h10.8l3.2 3.2v11.8a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1Z" />
|
||||
<path d="M8 4.5v4.6h7.2V4.5M8.4 20.5v-6h7.2v6" />
|
||||
</template>
|
||||
<!-- 测试连接：插头 -->
|
||||
<template v-else-if="name === 'plug'">
|
||||
<path d="M9 3.5v4M15 3.5v4" />
|
||||
<path d="M6.5 7.5h11v3.4a5.5 5.5 0 0 1-11 0V7.5Z" />
|
||||
<path d="M12 16.4v2.1a2.5 2.5 0 0 1-2.5 2.5H8" />
|
||||
</template>
|
||||
<!-- 下载 / 桌面版本 -->
|
||||
<template v-else-if="name === 'download'">
|
||||
<path d="M12 3.5v11" />
|
||||
<path d="M8 11l4 4 4-4" />
|
||||
<path d="M4.5 18.5h15" />
|
||||
</template>
|
||||
<!-- 上传 -->
|
||||
<template v-else-if="name === 'upload'">
|
||||
<path d="M12 15.5V4.5" />
|
||||
<path d="M8 8l4-4 4 4" />
|
||||
<path d="M4.5 18.5h15" />
|
||||
</template>
|
||||
</svg>
|
||||
</template>
|
||||
68
src/components/PixelAvatar.vue
Normal file
68
src/components/PixelAvatar.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
// 像素头像渲染组件：把 'px:NN' 编码画成像素图（8×8 网格放大，锐利无插值）
|
||||
// 兼容旧 emoji 数据：非像素编码时原样以文字显示，历史用户零迁移
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { AVATAR_SHAPES, AVATAR_PALETTES, decodePixelAvatar } from '../games/pixelAvatars'
|
||||
|
||||
const props = defineProps({
|
||||
// 头像值：'px:NN' 像素编码 或 旧 emoji 字符
|
||||
code: { type: String, default: '' },
|
||||
// 渲染尺寸（px）
|
||||
size: { type: Number, default: 32 },
|
||||
})
|
||||
|
||||
const px = computed(() => decodePixelAvatar(props.code))
|
||||
|
||||
// dataURL 缓存：同 code+size 只画一次（组件实例间不共享，同一实例多次渲染直接命中）
|
||||
const cache = new Map()
|
||||
function dataUrl(size) {
|
||||
const key = props.code + '@' + size
|
||||
if (cache.has(key)) return cache.get(key)
|
||||
const p = px.value
|
||||
if (!p) return ''
|
||||
const shape = AVATAR_SHAPES[p.shape]
|
||||
const pal = AVATAR_PALETTES[p.palette]
|
||||
const cell = Math.max(1, Math.round(size / 8))
|
||||
const real = cell * 8
|
||||
const cv = document.createElement('canvas')
|
||||
cv.width = real
|
||||
cv.height = real
|
||||
const ctx = cv.getContext('2d')
|
||||
const colors = { 1: pal.c1, 2: pal.c2, 3: pal.c3, 4: '#ffffff', 5: '#1a1a24' }
|
||||
shape.forEach((row, y) => {
|
||||
for (let x = 0; x < 8; x++) {
|
||||
const ch = row[x]
|
||||
if (ch === '.') continue
|
||||
ctx.fillStyle = colors[ch] || colors[1]
|
||||
ctx.fillRect(x * cell, y * cell, cell, cell)
|
||||
}
|
||||
})
|
||||
const url = cv.toDataURL()
|
||||
cache.set(key, url)
|
||||
return url
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="px-avatar" :style="{ width: size + 'px', height: size + 'px', fontSize: Math.round(size * 0.6) + 'px' }">
|
||||
<img v-if="px" :src="dataUrl(size)" :width="size" :height="size" alt="" class="px-img" />
|
||||
<template v-else>{{ code || '🎮' }}</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.px-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.px-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image-rendering: pixelated; /* 像素图放大不模糊 */
|
||||
}
|
||||
</style>
|
||||
168
src/components/RoomInviteModal.vue
Normal file
168
src/components/RoomInviteModal.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
// 全局房间邀请弹窗：好友房主邀请你时实时弹出（挂载在 App.vue，任何页面可见）
|
||||
// 接受 → 跳到对应房间页并自动入座；拒绝/超时 → 关闭
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useBattleStore } from '../stores/battle'
|
||||
import { toast } from '../api/http'
|
||||
import PixelAvatar from './PixelAvatar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const battleStore = useBattleStore()
|
||||
|
||||
// 弹窗是否可见（由 store 的 pendingInvite 驱动）
|
||||
const show = ref(false)
|
||||
// 倒计时秒数（60 秒后自动关闭）
|
||||
const countdown = ref(60)
|
||||
let timer = null
|
||||
|
||||
// 监听邀请：有新邀请就弹窗 + 启动 60s 倒计时
|
||||
watch(
|
||||
() => battleStore.pendingInvite,
|
||||
(inv) => {
|
||||
if (!inv) { show.value = false; return }
|
||||
show.value = true
|
||||
countdown.value = 60
|
||||
clearInterval(timer)
|
||||
timer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) dismiss()
|
||||
}, 1000)
|
||||
}
|
||||
)
|
||||
|
||||
function dismiss() {
|
||||
clearInterval(timer)
|
||||
show.value = false
|
||||
battleStore.pendingInvite = null
|
||||
}
|
||||
|
||||
async function accept() {
|
||||
const inv = battleStore.pendingInvite
|
||||
if (!inv) return
|
||||
// 必须先写入再跳转：目标页 onMounted 同步读取；若已在目标页则派发事件触发加入
|
||||
sessionStorage.setItem('pending_join_code', inv.code)
|
||||
if (inv.game && inv.game !== 'starve') {
|
||||
sessionStorage.setItem('pending_join_game', inv.game)
|
||||
} else {
|
||||
sessionStorage.removeItem('pending_join_game')
|
||||
}
|
||||
dismiss()
|
||||
try {
|
||||
if (inv.game === 'starve') {
|
||||
const already = router.currentRoute.value.path === '/play/starve'
|
||||
await router.push('/play/starve')
|
||||
toast(`正在加入 ${inv.host_name} 的房间…`, 'info')
|
||||
if (already) window.dispatchEvent(new CustomEvent('nlg:pending-join'))
|
||||
} else {
|
||||
const already = router.currentRoute.value.path === '/battle/room'
|
||||
await router.push('/battle/room')
|
||||
if (already) window.dispatchEvent(new CustomEvent('nlg:pending-join'))
|
||||
}
|
||||
} catch (e) {
|
||||
sessionStorage.removeItem('pending_join_code')
|
||||
sessionStorage.removeItem('pending_join_game')
|
||||
toast(e.message || '加入失败，请稍后再试')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="invite-fade">
|
||||
<div v-if="show && battleStore.pendingInvite" class="invite-mask">
|
||||
<div class="invite-modal" @click.stop>
|
||||
<div class="invite-icon"><PixelAvatar :code="battleStore.pendingInvite.host_avatar || 'px:01'" :size="48" /></div>
|
||||
<h3>房间邀请</h3>
|
||||
<p class="invite-line">
|
||||
<b class="host-name">{{ battleStore.pendingInvite.host_name }}</b>
|
||||
<span class="text-dim">邀请你加入</span>
|
||||
</p>
|
||||
<p class="invite-game">{{ battleStore.pendingInvite.game_name }}</p>
|
||||
<p class="invite-code text-dim">邀请码 <b>{{ battleStore.pendingInvite.code }}</b></p>
|
||||
<div class="invite-btns">
|
||||
<button class="btn" @click="dismiss">稍后（{{ countdown }}s）</button>
|
||||
<button class="btn btn-accent" @click="accept">接受邀请</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.invite-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(3px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.invite-modal {
|
||||
width: min(360px, calc(100vw - 48px));
|
||||
background: var(--bg-panel, #1a1d3a);
|
||||
border: 1px solid var(--border, #34386b);
|
||||
border-radius: 16px;
|
||||
padding: 26px 28px 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), var(--glow, 0 0 0 transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.invite-icon {
|
||||
font-size: 44px;
|
||||
filter: drop-shadow(var(--glow, 0 0 12px rgba(109, 111, 240, 0.4)));
|
||||
}
|
||||
.invite-line {
|
||||
font-size: 14px;
|
||||
}
|
||||
.host-name {
|
||||
color: var(--primary, #6d6ff0);
|
||||
}
|
||||
.invite-game {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.invite-code {
|
||||
font-size: 12px;
|
||||
}
|
||||
.invite-code b {
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
color: var(--text, #e8e9f5);
|
||||
}
|
||||
.invite-btns {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
.invite-btns .btn {
|
||||
flex: 1;
|
||||
}
|
||||
/* 出入场动画 */
|
||||
.invite-fade-enter-active,
|
||||
.invite-fade-leave-active {
|
||||
transition: opacity 0.22s ease;
|
||||
}
|
||||
.invite-fade-enter-active .invite-modal,
|
||||
.invite-fade-leave-active .invite-modal {
|
||||
transition: transform 0.22s ease;
|
||||
}
|
||||
.invite-fade-enter-from,
|
||||
.invite-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.invite-fade-enter-from .invite-modal {
|
||||
transform: scale(0.9) translateY(12px);
|
||||
}
|
||||
.invite-fade-leave-to .invite-modal {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
101
src/components/VirtualList.vue
Normal file
101
src/components/VirtualList.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
// 通用虚拟滚动列表：固定行高，只渲染可视区域 ± 缓冲行，支持超大数据量不卡顿
|
||||
// - maxHeight 限制容器最大高度，超出内部滚动
|
||||
// - 滚动接近底部时触发 reach-end（用于分批加载更多），items 变化后才允许再次触发
|
||||
// 用法：
|
||||
// <VirtualList :items="list" :item-height="44" :max-height="560" @reach-end="loadMore">
|
||||
// <template #default="{ item }">…一行的内容（高度须等于 item-height）…</template>
|
||||
// </VirtualList>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
itemHeight: { type: Number, required: true }, // 每行固定高度 px
|
||||
maxHeight: { type: Number, default: 520 }, // 容器最大高度 px
|
||||
buffer: { type: Number, default: 8 }, // 可视区外上下各多渲染几行
|
||||
keyField: { type: String, default: 'id' }, // 行 key 字段，空串则用索引
|
||||
})
|
||||
const emit = defineEmits(['reach-end'])
|
||||
|
||||
const box = ref(null)
|
||||
const scrollTop = ref(0)
|
||||
// 触底后先「上锁」，等 items 数量变化（加载完成）再允许下一次触发，避免重复请求
|
||||
let endLocked = false
|
||||
|
||||
watch(
|
||||
() => props.items.length,
|
||||
() => {
|
||||
endLocked = false
|
||||
}
|
||||
)
|
||||
|
||||
const startIndex = computed(() => {
|
||||
const i = Math.floor(scrollTop.value / props.itemHeight) - props.buffer
|
||||
return Math.max(0, i)
|
||||
})
|
||||
const visibleCount = computed(() => Math.ceil(props.maxHeight / props.itemHeight) + props.buffer * 2)
|
||||
const visible = computed(() => props.items.slice(startIndex.value, startIndex.value + visibleCount.value))
|
||||
const totalHeight = computed(() => props.items.length * props.itemHeight)
|
||||
|
||||
function rowKey(item, i) {
|
||||
return props.keyField && item && item[props.keyField] !== undefined ? item[props.keyField] : startIndex.value + i
|
||||
}
|
||||
|
||||
function onScroll(e) {
|
||||
scrollTop.value = e.target.scrollTop
|
||||
// 距底部不足 6 行时请求加载更多
|
||||
if (!endLocked && e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - props.itemHeight * 6) {
|
||||
endLocked = true
|
||||
emit('reach-end')
|
||||
}
|
||||
}
|
||||
|
||||
// 供外部在重新搜索/筛选后回到顶部
|
||||
function scrollToTop() {
|
||||
if (box.value) box.value.scrollTop = 0
|
||||
scrollTop.value = 0
|
||||
}
|
||||
defineExpose({ scrollToTop })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="box" class="vlist" :style="{ maxHeight: maxHeight + 'px' }" @scroll.passive="onScroll">
|
||||
<div v-if="!items.length" class="vlist-empty">
|
||||
<slot name="empty"><span class="text-dim">暂无数据</span></slot>
|
||||
</div>
|
||||
<div v-else class="vlist-phantom" :style="{ height: totalHeight + 'px' }">
|
||||
<div class="vlist-body" :style="{ transform: `translateY(${startIndex * itemHeight}px)` }">
|
||||
<div v-for="(item, i) in visible" :key="rowKey(item, i)" class="vlist-row" :style="{ height: itemHeight + 'px' }">
|
||||
<slot :item="item" :index="startIndex + i" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vlist {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
position: relative;
|
||||
}
|
||||
.vlist-phantom {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vlist-body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
}
|
||||
.vlist-row {
|
||||
overflow: hidden;
|
||||
}
|
||||
.vlist-empty {
|
||||
padding: 34px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
1365
src/components/battle/BilliardsTable.vue
Normal file
1365
src/components/battle/BilliardsTable.vue
Normal file
File diff suppressed because it is too large
Load Diff
487
src/components/battle/ChessBoard.vue
Normal file
487
src/components/battle/ChessBoard.vue
Normal file
@@ -0,0 +1,487 @@
|
||||
<script setup>
|
||||
// 中国象棋棋盘：SVG 绘制仿实木棋盘（楚河汉界断线、九宫斜线、炮兵位定位符、路数标注、木纹噪声），
|
||||
// 棋子为多层拟物木饼（年轮纹理 + 阴刻文字 + 刻线圆环）；黑方视角自动翻转
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useBattleStore } from '../../stores/battle'
|
||||
|
||||
const battle = useBattleStore()
|
||||
const selected = ref(null) // {r,c} 真实棋盘坐标
|
||||
const now = ref(Math.floor(Date.now() / 1000))
|
||||
let timer = 0
|
||||
|
||||
const st = computed(() => battle.roomState)
|
||||
const chess = computed(() => st.value?.chess || {})
|
||||
const board = computed(() => chess.value.board || [])
|
||||
const mySide = computed(() => chess.value.my_side || 1)
|
||||
const myTurn = computed(() => chess.value.turn_side === mySide.value && st.value?.status === 'playing')
|
||||
const countdown = computed(() => Math.max(0, (st.value?.deadline || 0) - now.value))
|
||||
// 棋子中文名：正=红 负=黑
|
||||
const NAMES = {
|
||||
1: '帅', 2: '仕', 3: '相', 4: '马', 5: '车', 6: '炮', 7: '兵',
|
||||
'-1': '将', '-2': '士', '-3': '象', '-4': '马', '-5': '车', '-6': '炮', '-7': '卒',
|
||||
}
|
||||
|
||||
// ---------- SVG 棋盘几何（单位坐标，随容器等比缩放） ----------
|
||||
const U = 100 // 一格边长
|
||||
const PAD = 106 // 棋盘边缘到第一条线的距离
|
||||
const VBW = PAD * 2 + 8 * U // viewBox 宽（9 条竖线 8 格）
|
||||
const VBH = PAD * 2 + 9 * U // viewBox 高（10 条横线 9 格）
|
||||
const X = (i) => PAD + i * U
|
||||
const Y = (j) => PAD + j * U
|
||||
// 网格线：横线 10 条全画；竖线两侧通到底，中间 7 条在楚河汉界处断开
|
||||
const gridPath = (() => {
|
||||
const p = []
|
||||
for (let j = 0; j < 10; j++) p.push(`M${X(0)} ${Y(j)}H${X(8)}`)
|
||||
p.push(`M${X(0)} ${Y(0)}V${Y(9)}`, `M${X(8)} ${Y(0)}V${Y(9)}`)
|
||||
for (let i = 1; i < 8; i++) p.push(`M${X(i)} ${Y(0)}V${Y(4)}`, `M${X(i)} ${Y(5)}V${Y(9)}`)
|
||||
return p.join('')
|
||||
})()
|
||||
// 九宫斜线（双方各一个米字宫）
|
||||
const palacePath =
|
||||
`M${X(3)} ${Y(0)}L${X(5)} ${Y(2)}M${X(5)} ${Y(0)}L${X(3)} ${Y(2)}` +
|
||||
`M${X(3)} ${Y(7)}L${X(5)} ${Y(9)}M${X(5)} ${Y(7)}L${X(3)} ${Y(9)}`
|
||||
// 炮位与兵/卒位的十字定位符（边线上的点只画朝内一半）
|
||||
const starPath = (() => {
|
||||
const pts = [
|
||||
[1, 2], [7, 2], [1, 7], [7, 7],
|
||||
[0, 3], [2, 3], [4, 3], [6, 3], [8, 3],
|
||||
[0, 6], [2, 6], [4, 6], [6, 6], [8, 6],
|
||||
]
|
||||
const g = 14, l = 30, segs = []
|
||||
for (const [i, j] of pts) {
|
||||
const x = X(i), y = Y(j)
|
||||
for (const [sx, sy] of [[-1, -1], [1, -1], [-1, 1], [1, 1]]) {
|
||||
if ((i === 0 && sx < 0) || (i === 8 && sx > 0)) continue
|
||||
segs.push(`M${x + sx * g} ${y + sy * (g + l)}V${y + sy * g}H${x + sx * (g + l)}`)
|
||||
}
|
||||
}
|
||||
return segs.join('')
|
||||
})()
|
||||
// 路数标注：下方是我方（红=汉字从右向左，黑=数字从右向左），上方是对方
|
||||
const CN_NUMS = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
|
||||
const AR_NUMS = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
|
||||
const topNums = computed(() => (mySide.value === 1 ? [...AR_NUMS] : [...CN_NUMS]))
|
||||
const botNums = computed(() => (mySide.value === 1 ? [...CN_NUMS].reverse() : [...AR_NUMS].reverse()))
|
||||
|
||||
// 展示行列序：红方正常（0 在上），黑方翻转让己方在下
|
||||
const dispRows = computed(() => {
|
||||
const rows = [...Array(10).keys()]
|
||||
return mySide.value === 1 ? rows : rows.reverse()
|
||||
})
|
||||
const dispCols = computed(() => {
|
||||
const cols = [...Array(9).keys()]
|
||||
return mySide.value === 1 ? cols : cols.reverse()
|
||||
})
|
||||
|
||||
function pieceAt(r, c) {
|
||||
return board.value?.[r]?.[c] || 0
|
||||
}
|
||||
function isMine(p) {
|
||||
return p !== 0 && Math.sign(p) === mySide.value
|
||||
}
|
||||
function isSelected(r, c) {
|
||||
return selected.value && selected.value.r === r && selected.value.c === c
|
||||
}
|
||||
function isLastMove(r, c) {
|
||||
const lm = chess.value.last_move
|
||||
if (!lm) return false
|
||||
return (lm.from_r === r && lm.from_c === c) || (lm.to_r === r && lm.to_c === c)
|
||||
}
|
||||
|
||||
// —— 走法提示（新手引导）：选中棋子后服务端返回全部合法落点 ——
|
||||
// 空位画圆点、敌子画吃子圈；数据与走子校验同源（含蹩马腿/塞象眼/送将过滤）
|
||||
const hintsLoaded = computed(() => {
|
||||
const h = battle.chessHints
|
||||
const sel = selected.value
|
||||
return !!(h && sel && h.from_r === sel.r && h.from_c === sel.c)
|
||||
})
|
||||
const hints = computed(() => {
|
||||
if (!hintsLoaded.value) return new Map()
|
||||
const map = new Map()
|
||||
for (const t of battle.chessHints.targets || []) map.set(`${t.r}-${t.c}`, t)
|
||||
return map
|
||||
})
|
||||
const hintAt = (r, c) => hints.value.get(`${r}-${c}`)
|
||||
|
||||
function select(r, c) {
|
||||
selected.value = { r, c }
|
||||
battle.chessHints = null // 清掉上一次的提示，避免旧落点闪现
|
||||
battle.chessHintsReq(r, c)
|
||||
}
|
||||
function deselect() {
|
||||
selected.value = null
|
||||
}
|
||||
|
||||
// 点击棋盘：选中己方棋子或走子（合法性由服务端校验）
|
||||
function tap(r, c) {
|
||||
if (!myTurn.value) return
|
||||
const p = pieceAt(r, c)
|
||||
if (selected.value) {
|
||||
// 点自己：再点同一枚取消选择，点其他己方棋子换选
|
||||
if (isMine(p)) {
|
||||
if (isSelected(r, c)) deselect()
|
||||
else select(r, c)
|
||||
return
|
||||
}
|
||||
// 提示已加载时，点了非法落点视为取消选择（不再发送注定被拒的走子）
|
||||
if (hintsLoaded.value && !hintAt(r, c)) {
|
||||
deselect()
|
||||
return
|
||||
}
|
||||
battle.chessMove({ from_r: selected.value.r, from_c: selected.value.c, to_r: r, to_c: c })
|
||||
deselect()
|
||||
return
|
||||
}
|
||||
if (isMine(p)) select(r, c)
|
||||
}
|
||||
|
||||
const sideName = (s) => (s === 1 ? '红方' : '黑方')
|
||||
|
||||
onMounted(() => {
|
||||
timer = setInterval(() => {
|
||||
now.value = Math.floor(Date.now() / 1000)
|
||||
}, 400)
|
||||
})
|
||||
onBeforeUnmount(() => clearInterval(timer))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chess-wrap">
|
||||
<!-- 状态条 -->
|
||||
<div class="status-bar">
|
||||
<span class="side-tag" :class="mySide === 1 ? 'red' : 'black'">我执{{ mySide === 1 ? '红' : '黑' }}</span>
|
||||
<span v-if="st.status === 'playing'">
|
||||
轮到 <b :style="{ color: chess.turn_side === 1 ? '#ff6b6b' : 'var(--text)' }">{{ sideName(chess.turn_side) }}</b>
|
||||
<span class="cd">{{ countdown }}s</span>
|
||||
</span>
|
||||
<span v-if="chess.in_check" class="check-tag">⚠️ 将军！</span>
|
||||
<span class="text-dim" style="margin-left: auto; font-size: 12px">第 {{ Math.floor((chess.move_count || 0) / 2) + 1 }} 回合</span>
|
||||
<button v-if="st.status === 'playing'" class="btn btn-danger btn-sm" @click="battle.resign()">认输</button>
|
||||
</div>
|
||||
<!-- 棋盘：外层实木边框 + 内层 SVG 盘面 -->
|
||||
<div class="board">
|
||||
<div class="board-inner">
|
||||
<svg class="board-svg" :viewBox="`0 0 ${VBW} ${VBH}`" aria-hidden="true">
|
||||
<defs>
|
||||
<!-- 盘面底色：上浅下深的原木渐变 -->
|
||||
<linearGradient id="xqBase" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#e7c38a" />
|
||||
<stop offset="0.5" stop-color="#dcb173" />
|
||||
<stop offset="1" stop-color="#d0a061" />
|
||||
</linearGradient>
|
||||
<!-- 程序化木纹：低频湍流噪声拉出顺纹条带 -->
|
||||
<filter id="xqGrain" x="0" y="0" width="100%" height="100%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.004 0.05" numOctaves="4" seed="11" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.40 0 0 0 0 0.25 0 0 0 0 0.09 0.75 0 0 0 -0.14"
|
||||
/>
|
||||
</filter>
|
||||
<!-- 暗角：让盘面中心更亮、边缘沉下去 -->
|
||||
<radialGradient id="xqVig" cx="50%" cy="44%" r="75%">
|
||||
<stop offset="0.55" stop-color="#4a2f0d" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="#4a2f0d" stop-opacity="0.3" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" :width="VBW" :height="VBH" fill="url(#xqBase)" />
|
||||
<rect x="0" y="0" :width="VBW" :height="VBH" filter="url(#xqGrain)" opacity="0.5" />
|
||||
<rect x="0" y="0" :width="VBW" :height="VBH" fill="url(#xqVig)" />
|
||||
<!-- 外粗内细双线边框 -->
|
||||
<rect
|
||||
:x="X(0) - 24" :y="Y(0) - 24" :width="8 * U + 48" :height="9 * U + 48"
|
||||
fill="none" stroke="#4d2f0c" stroke-width="7"
|
||||
/>
|
||||
<!-- 网格 / 九宫斜线 / 炮兵位定位符 -->
|
||||
<path :d="gridPath" stroke="#54350f" stroke-width="3" stroke-opacity="0.92" fill="none" />
|
||||
<path :d="palacePath" stroke="#54350f" stroke-width="2.6" stroke-opacity="0.85" fill="none" />
|
||||
<path :d="starPath" stroke="#54350f" stroke-width="4.5" stroke-opacity="0.8" fill="none" stroke-linecap="round" />
|
||||
<!-- 楚河汉界 -->
|
||||
<text class="river-text" :x="X(2) + 6" :y="Y(4) + U / 2" text-anchor="middle" dominant-baseline="central">楚 河</text>
|
||||
<text class="river-text" :x="X(6) - 6" :y="Y(4) + U / 2" text-anchor="middle" dominant-baseline="central">漢 界</text>
|
||||
<!-- 上下路数标注 -->
|
||||
<text
|
||||
v-for="(n, i) in topNums" :key="'t' + i"
|
||||
class="file-num" :x="X(i)" :y="PAD - 56" text-anchor="middle" dominant-baseline="central"
|
||||
>{{ n }}</text>
|
||||
<text
|
||||
v-for="(n, i) in botNums" :key="'b' + i"
|
||||
class="file-num" :x="X(i)" :y="Y(9) + 56" text-anchor="middle" dominant-baseline="central"
|
||||
>{{ n }}</text>
|
||||
</svg>
|
||||
<!-- 交互层：格子中心即线的交叉点 -->
|
||||
<div class="cells">
|
||||
<div v-for="r in dispRows" :key="'r' + r" class="row">
|
||||
<div
|
||||
v-for="c in dispCols"
|
||||
:key="r + '-' + c"
|
||||
class="cell"
|
||||
:class="{ last: isLastMove(r, c), capture: hintAt(r, c) && pieceAt(r, c) }"
|
||||
@click="tap(r, c)"
|
||||
>
|
||||
<div
|
||||
v-if="pieceAt(r, c)"
|
||||
class="piece"
|
||||
:class="[pieceAt(r, c) > 0 ? 'red' : 'black', { sel: isSelected(r, c), clickable: myTurn && isMine(pieceAt(r, c)) }]"
|
||||
>
|
||||
<span class="glyph">{{ NAMES[pieceAt(r, c)] }}</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<!-- 空位合法落点：呼吸圆点 -->
|
||||
<div v-if="hintAt(r, c)" class="hint-dot"></div>
|
||||
<div v-else-if="isLastMove(r, c)" class="last-dot"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chess-wrap {
|
||||
--cell: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.status-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.side-tag {
|
||||
font-weight: 800;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.side-tag.red {
|
||||
background: rgba(229, 72, 77, 0.18);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
.side-tag.black {
|
||||
background: rgba(120, 120, 140, 0.25);
|
||||
}
|
||||
.cd {
|
||||
margin-left: 8px;
|
||||
background: var(--accent);
|
||||
color: #101010;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.check-tag {
|
||||
color: #ff5d5d;
|
||||
font-weight: 800;
|
||||
animation: blink 0.8s infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
/* ---------- 实木外框 ---------- */
|
||||
.board {
|
||||
padding: 10px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(160deg, #7c5526 0%, #64411a 55%, #532f10 100%);
|
||||
border: 1px solid #3f2a0c;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 226, 170, 0.28),
|
||||
inset 0 -2px 6px rgba(0, 0, 0, 0.5),
|
||||
0 12px 28px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.board-inner {
|
||||
position: relative;
|
||||
padding: calc(var(--cell) * 0.56);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
/* 盘面凹入边框的内阴影 */
|
||||
box-shadow: inset 0 2px 10px rgba(40, 20, 0, 0.45), inset 0 0 2px rgba(40, 20, 0, 0.6);
|
||||
}
|
||||
.board-svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
.river-text {
|
||||
font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
|
||||
font-size: 58px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 26px;
|
||||
fill: rgba(78, 46, 12, 0.6);
|
||||
}
|
||||
.file-num {
|
||||
font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
fill: rgba(78, 46, 12, 0.78);
|
||||
}
|
||||
.cells {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
.cell {
|
||||
width: var(--cell);
|
||||
height: var(--cell);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
/* 上一步走子标记：交叉点上的暖色圆环 / 圆点 */
|
||||
.cell.last::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 15%;
|
||||
border: 2px solid rgba(171, 62, 22, 0.75);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px rgba(255, 236, 200, 0.35) inset;
|
||||
pointer-events: none;
|
||||
}
|
||||
.last-dot {
|
||||
width: 22%;
|
||||
height: 22%;
|
||||
border-radius: 50%;
|
||||
background: rgba(171, 62, 22, 0.65);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
/* 走法提示：空位落点为墨绿呼吸圆点 */
|
||||
.hint-dot {
|
||||
width: 26%;
|
||||
height: 26%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #6fbf73, #2e7d32);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(46, 125, 50, 0.25),
|
||||
0 1px 3px rgba(0, 0, 0, 0.35);
|
||||
animation: hint-breathe 1.1s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes hint-breathe {
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
box-shadow:
|
||||
0 0 0 5px rgba(46, 125, 50, 0.18),
|
||||
0 1px 3px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
/* 走法提示：可吃子目标外圈红色旋转虚线环 */
|
||||
.cell.capture::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2%;
|
||||
border: 3px dashed rgba(211, 47, 47, 0.9);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px rgba(211, 47, 47, 0.45);
|
||||
animation: capture-spin 6s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
@keyframes capture-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* ---------- 拟物棋子：木饼 + 年轮 + 刻线环 + 阴刻文字 ---------- */
|
||||
.piece {
|
||||
position: relative;
|
||||
width: calc(var(--cell) * 0.86);
|
||||
height: calc(var(--cell) * 0.86);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
transition: transform 0.12s, box-shadow 0.12s;
|
||||
/* 依次：圆柱侧边厚度、落地投影、顶面高光、底缘压暗 */
|
||||
box-shadow:
|
||||
0 calc(var(--cell) * 0.055) 0 #a37f42,
|
||||
0 calc(var(--cell) * 0.11) calc(var(--cell) * 0.14) rgba(0, 0, 0, 0.45),
|
||||
inset 0 2px 2px rgba(255, 248, 228, 0.7),
|
||||
inset 0 -3px 5px rgba(130, 86, 30, 0.55);
|
||||
z-index: 1;
|
||||
}
|
||||
/* 顶面：木色底 + 两组偏心年轮 + 球面高光 */
|
||||
.piece::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
|
||||
repeating-radial-gradient(circle at 64% 70%, rgba(146, 96, 38, 0.16) 0 1.5px, rgba(146, 96, 38, 0) 1.5px 6px),
|
||||
repeating-radial-gradient(circle at 26% 30%, rgba(120, 76, 26, 0.1) 0 2px, rgba(120, 76, 26, 0) 2px 8px),
|
||||
radial-gradient(circle at 42% 38%, #fbeecd 0%, #f0d7a5 48%, #e2bf81 78%, #d1a869 100%);
|
||||
}
|
||||
/* 外圈刻线环：微凹的车削凹槽 */
|
||||
.piece::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: calc(var(--cell) * 0.07);
|
||||
border-radius: 50%;
|
||||
border: calc(var(--cell) * 0.034) solid;
|
||||
box-shadow:
|
||||
inset 0 1px 1px rgba(110, 66, 18, 0.5),
|
||||
0 1px 0 rgba(255, 246, 224, 0.55);
|
||||
}
|
||||
.piece.red::after {
|
||||
border-color: rgba(176, 40, 28, 0.82);
|
||||
}
|
||||
.piece.black::after {
|
||||
border-color: rgba(43, 34, 26, 0.8);
|
||||
}
|
||||
/* 阴刻文字：上暗下亮模拟刻痕 */
|
||||
.glyph {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: calc(var(--cell) * 0.46);
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
|
||||
text-shadow:
|
||||
0 1px 0 rgba(255, 244, 214, 0.5),
|
||||
0 -1px 1px rgba(70, 30, 0, 0.45);
|
||||
}
|
||||
.piece.red .glyph {
|
||||
color: #b3241a;
|
||||
}
|
||||
.piece.black .glyph {
|
||||
color: #26201a;
|
||||
}
|
||||
.piece.sel {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(255, 196, 66, 0.95),
|
||||
0 calc(var(--cell) * 0.075) 0 #a37f42,
|
||||
0 calc(var(--cell) * 0.16) calc(var(--cell) * 0.2) rgba(0, 0, 0, 0.5),
|
||||
inset 0 2px 2px rgba(255, 248, 228, 0.7),
|
||||
inset 0 -3px 5px rgba(130, 86, 30, 0.55);
|
||||
z-index: 2;
|
||||
}
|
||||
.piece.clickable:hover {
|
||||
transform: translateY(-1px) scale(1.05);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.chess-wrap {
|
||||
--cell: 38px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
623
src/components/battle/DdzTable.vue
Normal file
623
src/components/battle/DdzTable.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<script setup>
|
||||
// 斗地主牌桌：三家布局（上家/下家/自己），叫分、出牌、过牌与倒计时
|
||||
// 交互向经典手游看齐：点选/滑动多选手牌、提示轮换候选、出牌动效（UI 为自绘风格）
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useBattleStore } from '../../stores/battle'
|
||||
import { toast } from '../../api/http'
|
||||
import PlayingCard from './PlayingCard.vue'
|
||||
import PixelAvatar from '../PixelAvatar.vue'
|
||||
|
||||
const battle = useBattleStore()
|
||||
const selected = ref(new Set())
|
||||
const now = ref(Math.floor(Date.now() / 1000))
|
||||
let timer = 0
|
||||
|
||||
const st = computed(() => battle.roomState)
|
||||
const ddz = computed(() => st.value?.ddz || {})
|
||||
const me = computed(() => st.value?.my_seat ?? 0)
|
||||
// 上家（左侧）与下家（右侧）
|
||||
const leftSeat = computed(() => (me.value + 2) % 3)
|
||||
const rightSeat = computed(() => (me.value + 1) % 3)
|
||||
const myTurn = computed(() => ddz.value.turn === me.value && st.value?.status === 'playing')
|
||||
const countdown = computed(() => Math.max(0, (st.value?.deadline || 0) - now.value))
|
||||
// 手牌按点数降序展示
|
||||
const myHand = computed(() => {
|
||||
const hand = [...(ddz.value.my_hand || [])]
|
||||
const rank = (c) => (c === 53 ? 17 : c === 52 ? 16 : Math.floor(c / 4) + 3)
|
||||
return hand.sort((a, b) => rank(b) - rank(a) || a - b)
|
||||
})
|
||||
|
||||
function seatInfo(idx) {
|
||||
return st.value?.seats?.[idx] || {}
|
||||
}
|
||||
// 该座位最近一手（从历史中取该座位最后动作，若被新一轮覆盖则不显示）
|
||||
const lastPlayMap = computed(() => {
|
||||
const map = {}
|
||||
const hist = ddz.value.history || []
|
||||
// 只回放最近一圈（最多 3 条）动作用于展示
|
||||
hist.slice(-3).forEach((h) => {
|
||||
map[h.seat] = h
|
||||
})
|
||||
return map
|
||||
})
|
||||
|
||||
// —— 手牌选择：点选切换 + 按住扫过滑动多选（起手牌决定是加选还是减选） ——
|
||||
// 任何时候都可以选牌摆牌（包括叫牌阶段和别人回合），只有出牌需要轮到自己
|
||||
let dragMode = null // 'add' | 'remove' | null
|
||||
function cardFromEvent(e) {
|
||||
const el = document.elementFromPoint(e.clientX, e.clientY)?.closest('[data-card]')
|
||||
if (!el) return null
|
||||
const v = Number(el.dataset.card)
|
||||
return Number.isNaN(v) ? null : v
|
||||
}
|
||||
function applyDrag(c) {
|
||||
const s = new Set(selected.value)
|
||||
if (dragMode === 'add') s.add(c)
|
||||
else s.delete(c)
|
||||
selected.value = s
|
||||
}
|
||||
function handDown(e) {
|
||||
if (!myHand.value.length) return
|
||||
const c = cardFromEvent(e)
|
||||
if (c === null) return
|
||||
e.currentTarget.setPointerCapture?.(e.pointerId)
|
||||
dragMode = selected.value.has(c) ? 'remove' : 'add'
|
||||
applyDrag(c)
|
||||
}
|
||||
function handMove(e) {
|
||||
if (dragMode === null) return
|
||||
const c = cardFromEvent(e)
|
||||
if (c !== null) applyDrag(c)
|
||||
}
|
||||
function handUp() {
|
||||
dragMode = null
|
||||
}
|
||||
|
||||
// —— 提示：首次返回配合策略推荐，连点按牌力从小到大轮换候选 ——
|
||||
const hintSeq = ref(0)
|
||||
function doHint() {
|
||||
battle.ddzHintReq(hintSeq.value)
|
||||
hintSeq.value++
|
||||
}
|
||||
watch(
|
||||
() => battle.ddzHint,
|
||||
(h) => {
|
||||
if (!h || !myTurn.value) return
|
||||
if (h.none) {
|
||||
toast('要不起，只能不出')
|
||||
selected.value = new Set()
|
||||
return
|
||||
}
|
||||
if (h.suggest_pass) {
|
||||
toast(seatInfo(me.value).is_landlord ? '提示：这手建议忍一忍' : '提示：建议不出，配合队友')
|
||||
selected.value = new Set()
|
||||
return
|
||||
}
|
||||
if (h.cards?.length) selected.value = new Set(h.cards)
|
||||
}
|
||||
)
|
||||
// 每次轮到自己重置提示轮换（选择保留：允许提前摆牌）
|
||||
watch(myTurn, (v) => {
|
||||
if (v) hintSeq.value = 0
|
||||
})
|
||||
// 手牌变化（打出/发牌）时清掉已不在手里的选择
|
||||
watch(
|
||||
() => (ddz.value.my_hand || []).length,
|
||||
() => {
|
||||
const hand = new Set(ddz.value.my_hand || [])
|
||||
const s = new Set([...selected.value].filter((c) => hand.has(c)))
|
||||
if (s.size !== selected.value.size) selected.value = s
|
||||
}
|
||||
)
|
||||
|
||||
// —— 发牌动画：叫牌阶段手牌内容变化（首发或重发）时逐张飞入 ——
|
||||
const dealing = ref(false)
|
||||
let dealTimer = 0
|
||||
watch(
|
||||
() =>
|
||||
ddz.value.phase === 'bidding'
|
||||
? (ddz.value.my_hand || []).slice().sort((a, b) => a - b).join(',')
|
||||
: '',
|
||||
(nv, ov) => {
|
||||
if (!nv || nv === ov) return
|
||||
dealing.value = true
|
||||
selected.value = new Set()
|
||||
clearTimeout(dealTimer)
|
||||
dealTimer = setTimeout(() => {
|
||||
dealing.value = false
|
||||
}, (ddz.value.my_hand?.length || 17) * 45 + 500)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// —— 托管：开启后每回合由系统代打 ——
|
||||
const myAuto = computed(() => !!seatInfo(me.value).auto)
|
||||
function toggleEscrow() {
|
||||
battle.setEscrow(!myAuto.value)
|
||||
}
|
||||
|
||||
// 叫/抢表态气泡：只在叫牌与抢地主阶段显示
|
||||
function bidMark(idx) {
|
||||
if (ddz.value.phase !== 'bidding' && ddz.value.phase !== 'robbing') return ''
|
||||
return ddz.value.marks?.[idx] || ''
|
||||
}
|
||||
|
||||
function doBid(call) {
|
||||
battle.ddzBid(call)
|
||||
}
|
||||
function doRob(rob) {
|
||||
battle.ddzRob(rob)
|
||||
}
|
||||
function doPlay() {
|
||||
if (!selected.value.size) {
|
||||
toast('请先选牌')
|
||||
return
|
||||
}
|
||||
battle.ddzPlay([...selected.value])
|
||||
selected.value = new Set()
|
||||
}
|
||||
function doPass() {
|
||||
battle.ddzPass()
|
||||
selected.value = new Set()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
timer = setInterval(() => {
|
||||
now.value = Math.floor(Date.now() / 1000)
|
||||
}, 400)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer)
|
||||
clearTimeout(dealTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ddz">
|
||||
<!-- 顶部信息：底牌与炸弹数 -->
|
||||
<div class="table-top">
|
||||
<div class="bottom-cards">
|
||||
<span class="text-dim" style="font-size: 12px">底牌</span>
|
||||
<template v-if="ddz.bottom?.length">
|
||||
<PlayingCard v-for="c in ddz.bottom" :key="'b' + c" :card="c" small />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="i in 3" :key="i" class="card-back small"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="bomb text-dim">💣 ×{{ ddz.bombs || 0 }}</div>
|
||||
<div class="mult" title="当前倍数 = 叫抢倍数 × 炸弹翻倍（春天在结算时另乘）">
|
||||
倍数 ×{{ ddz.multiplier || 1 }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对手区 -->
|
||||
<div class="opponents">
|
||||
<div
|
||||
v-for="(idx, pos) in [leftSeat, rightSeat]"
|
||||
:key="idx"
|
||||
class="opp"
|
||||
:class="{ active: ddz.turn === idx && st.status === 'playing' }"
|
||||
>
|
||||
<div class="opp-head">
|
||||
<span class="avatar"><PixelAvatar :code="seatInfo(idx).avatar || (seatInfo(idx).is_ai ? '🤖' : 'px:01')" :size="32" /></span>
|
||||
<div>
|
||||
<div class="opp-name">
|
||||
{{ seatInfo(idx).name || '空位' }}
|
||||
<span v-if="seatInfo(idx).is_landlord" class="badge-lord">地主</span>
|
||||
<span v-if="!seatInfo(idx).online && seatInfo(idx).occupied && !seatInfo(idx).is_ai" class="badge-off">离线</span>
|
||||
</div>
|
||||
<div class="opp-cards text-dim">🂠 剩 {{ seatInfo(idx).cards_count ?? '-' }} 张</div>
|
||||
</div>
|
||||
<span v-if="ddz.turn === idx && st.status === 'playing'" class="cd" :class="{ urgent: countdown <= 5 }">{{ countdown }}s</span>
|
||||
</div>
|
||||
<!-- 该家最近动作 -->
|
||||
<div class="opp-play">
|
||||
<!-- 叫/抢阶段：显示表态气泡 -->
|
||||
<span
|
||||
v-if="bidMark(idx)"
|
||||
class="bid-mark"
|
||||
:class="{ hot: bidMark(idx).includes('！') }"
|
||||
>{{ bidMark(idx) }}</span>
|
||||
<!-- 历史事件中 cards 为空即"过" -->
|
||||
<template v-if="lastPlayMap[idx]">
|
||||
<span v-if="!lastPlayMap[idx].cards?.length" class="pass-tag">不出</span>
|
||||
<div v-else class="mini-cards played">
|
||||
<PlayingCard v-for="c in lastPlayMap[idx].cards" :key="c" :card="c" small />
|
||||
</div>
|
||||
</template>
|
||||
<span :class="pos === 0 ? 'pos-tag-l' : 'pos-tag-r'" class="text-dim">{{ pos === 0 ? '上家' : '下家' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中央：最近一手牌 -->
|
||||
<div class="center-zone">
|
||||
<template v-if="ddz.last_seat >= 0 && ddz.last_cards?.length">
|
||||
<div class="last-label text-dim">
|
||||
{{ seatInfo(ddz.last_seat).name }}：{{ ddz.last_desc }}
|
||||
</div>
|
||||
<div class="mini-cards played">
|
||||
<PlayingCard v-for="c in ddz.last_cards" :key="'l' + c" :card="c" small />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="ddz.phase === 'bidding'" class="text-dim">等待叫地主…</div>
|
||||
<div v-else-if="ddz.phase === 'robbing'" class="text-dim">抢地主环节：每抢一次倍数×2</div>
|
||||
<div v-else class="text-dim">新一轮，任意出牌</div>
|
||||
</div>
|
||||
<!-- 我的区域 -->
|
||||
<div class="my-zone" :class="{ active: myTurn }">
|
||||
<div class="my-info">
|
||||
<span class="avatar"><PixelAvatar :code="seatInfo(me).avatar || 'px:01'" :size="32" /></span>
|
||||
<span>{{ seatInfo(me).name }}</span>
|
||||
<span v-if="seatInfo(me).is_landlord" class="badge-lord">地主</span>
|
||||
<span v-if="bidMark(me)" class="bid-mark" :class="{ hot: bidMark(me).includes('！') }">{{ bidMark(me) }}</span>
|
||||
<span v-if="myTurn" class="cd" :class="{ urgent: countdown <= 5 }">{{ countdown }}s</span>
|
||||
<button
|
||||
v-if="st.status === 'playing'"
|
||||
class="escrow-btn"
|
||||
:class="{ on: myAuto }"
|
||||
@click="toggleEscrow"
|
||||
>
|
||||
{{ myAuto ? '✋ 取消托管' : '🤖 托管' }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 操作按钮：置于手牌上方，模拟经典布局（不出 / 提示 / 出牌） -->
|
||||
<div class="actions">
|
||||
<span v-if="myAuto && st.status === 'playing'" class="auto-tag">托管中，系统自动代打…</span>
|
||||
<template v-else-if="myTurn && ddz.phase === 'bidding'">
|
||||
<button class="btn" @click="doBid(true)">叫地主</button>
|
||||
<button class="btn btn-ghost" @click="doBid(false)">不叫</button>
|
||||
</template>
|
||||
<template v-else-if="myTurn && ddz.phase === 'robbing'">
|
||||
<button class="btn" @click="doRob(true)">抢地主（×2）</button>
|
||||
<button class="btn btn-ghost" @click="doRob(false)">不抢</button>
|
||||
</template>
|
||||
<template v-else-if="myTurn && ddz.phase === 'playing'">
|
||||
<button v-if="ddz.can_pass" class="btn btn-ghost act-pass" @click="doPass">不出</button>
|
||||
<button class="btn btn-ghost act-hint" @click="doHint">💡 提示</button>
|
||||
<button class="btn act-play" :disabled="!selected.size" @click="doPlay">
|
||||
出牌{{ selected.size ? `（${selected.size}）` : '' }}
|
||||
</button>
|
||||
<button v-if="selected.size" class="clear-link" @click="selected = new Set()">清空</button>
|
||||
</template>
|
||||
<span v-else class="text-dim" style="font-size: 13px">
|
||||
{{ st.status === 'playing' ? `等待 ${seatInfo(ddz.turn).name || ''} 行动…` : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 手牌：点选切换，按住扫过可滑动多选；发牌时逐张飞入 -->
|
||||
<div
|
||||
class="hand"
|
||||
@pointerdown="handDown"
|
||||
@pointermove="handMove"
|
||||
@pointerup="handUp"
|
||||
@pointercancel="handUp"
|
||||
>
|
||||
<PlayingCard
|
||||
v-for="(c, i) in myHand"
|
||||
:key="c"
|
||||
:card="c"
|
||||
:data-card="c"
|
||||
:selected="selected.has(c)"
|
||||
:class="{ 'deal-in': dealing }"
|
||||
:style="dealing ? { animationDelay: i * 45 + 'ms' } : null"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="st.status === 'playing'" class="hand-tip text-dim">
|
||||
点击选牌 · 按住扫过可连选 · 轮到自己时点提示可连点换牌
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ddz {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 12%, var(--bg-panel)), var(--bg-panel));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
min-height: 560px;
|
||||
}
|
||||
.table-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
.bottom-cards {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
.card-back.small {
|
||||
width: 34px;
|
||||
height: 48px;
|
||||
border-radius: 6px;
|
||||
background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 4px, var(--primary-2) 4px, var(--primary-2) 8px);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.bomb {
|
||||
font-size: 13px;
|
||||
}
|
||||
/* 倍数徽标：金色渐变强调奖惩规模 */
|
||||
.mult {
|
||||
background: linear-gradient(135deg, #ffd76a, #ff9d2e);
|
||||
color: #4a2500;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 2px 8px rgba(255, 157, 46, 0.35);
|
||||
}
|
||||
/* 底牌翻开动效 */
|
||||
.bottom-cards :deep(.pcard) {
|
||||
animation: flip-in 0.35s ease-out both;
|
||||
}
|
||||
@keyframes flip-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotateY(90deg) scale(0.8);
|
||||
}
|
||||
}
|
||||
.opponents {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.opp {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.opp.active {
|
||||
box-shadow: 0 0 0 2px var(--accent), var(--glow);
|
||||
}
|
||||
.opp-head {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.avatar {
|
||||
font-size: 26px;
|
||||
}
|
||||
.opp-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.opp-cards {
|
||||
font-size: 12px;
|
||||
}
|
||||
.badge-lord {
|
||||
background: linear-gradient(135deg, #ffb800, #ff6a00);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.badge-off {
|
||||
background: var(--bg-panel);
|
||||
color: var(--text-dim);
|
||||
font-size: 10px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.cd {
|
||||
margin-left: auto;
|
||||
background: var(--accent);
|
||||
color: #101010;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
/* 倒计时最后几秒红色脉冲催促 */
|
||||
.cd.urgent {
|
||||
background: #ff5c5c;
|
||||
color: #fff;
|
||||
animation: cd-pulse 0.8s infinite;
|
||||
}
|
||||
@keyframes cd-pulse {
|
||||
50% {
|
||||
transform: scale(1.18);
|
||||
}
|
||||
}
|
||||
.opp-play {
|
||||
margin-top: 8px;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.pass-tag {
|
||||
background: var(--bg-panel);
|
||||
border: 1px dashed var(--border);
|
||||
color: var(--text-dim);
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pos-tag-l,
|
||||
.pos-tag-r {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
}
|
||||
.mini-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mini-cards > * {
|
||||
margin-right: -12px;
|
||||
}
|
||||
/* 出牌落桌动效：轻微上抛落下 */
|
||||
.mini-cards.played > * {
|
||||
animation: card-in 0.18s ease-out both;
|
||||
}
|
||||
@keyframes card-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.9);
|
||||
}
|
||||
}
|
||||
.center-zone {
|
||||
min-height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.last-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
.my-zone {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.my-zone.active {
|
||||
box-shadow: 0 -2px 0 var(--accent) inset;
|
||||
}
|
||||
.my-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* 手牌区：禁用触摸滚动手势，保证滑动选牌流畅 */
|
||||
.hand {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 16px;
|
||||
min-height: 80px;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
.hand > * {
|
||||
margin-right: -18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 悬停预抬起（仅鼠标设备），选中后完全抬起 */
|
||||
@media (hover: hover) {
|
||||
.hand :deep(.pcard:not(.selected):hover) {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
/* 发牌动画：逐张从右上飞入（配合 animation-delay 形成发牌节奏） */
|
||||
.hand :deep(.pcard.deal-in) {
|
||||
animation: deal-fly 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
|
||||
}
|
||||
@keyframes deal-fly {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(60px, -70px) rotate(10deg);
|
||||
}
|
||||
}
|
||||
.hand-tip {
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 4px;
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.act-play {
|
||||
min-width: 110px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.act-pass,
|
||||
.act-hint {
|
||||
min-width: 80px;
|
||||
}
|
||||
.clear-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
padding: 4px;
|
||||
}
|
||||
/* 托管开关：常驻在我的信息栏右侧 */
|
||||
.escrow-btn {
|
||||
margin-left: auto;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.escrow-btn:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.escrow-btn.on {
|
||||
background: var(--accent);
|
||||
color: #101010;
|
||||
font-weight: 700;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.auto-tag {
|
||||
font-size: 13px;
|
||||
color: var(--accent);
|
||||
animation: auto-blink 1.2s infinite;
|
||||
}
|
||||
@keyframes auto-blink {
|
||||
50% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
/* 叫/抢表态气泡：带小尾巴的对话泡，"叫地主！/抢地主！"用高亮色 */
|
||||
.bid-mark {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: #fffdf5;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
||||
animation: mark-pop 0.25s cubic-bezier(0.3, 1.4, 0.6, 1) both;
|
||||
}
|
||||
.bid-mark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
bottom: -5px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #fffdf5;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.bid-mark.hot {
|
||||
background: linear-gradient(135deg, #ffd76a, #ff9d2e);
|
||||
color: #4a2500;
|
||||
}
|
||||
.bid-mark.hot::after {
|
||||
border-top-color: #ffb84e;
|
||||
}
|
||||
@keyframes mark-pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
src/components/battle/Dice3D.vue
Normal file
121
src/components/battle/Dice3D.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup>
|
||||
// 三维骰子：CSS 3D 立方体，收到新的 tick 时翻滚多圈后停在指定点数
|
||||
// 用法：<Dice3D :value="点数" :tick="触发序号" :size="像素" />
|
||||
// tick 每变化一次就触发一轮翻滚动画（即使点数与上次相同也会重新翻滚）
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Number, default: 1 }, // 要停下的点数 1-6
|
||||
tick: { type: Number, default: 0 }, // 翻滚触发器（递增）
|
||||
size: { type: Number, default: 44 }, // 骰子边长（px）
|
||||
})
|
||||
|
||||
// 六个面的基准朝向：让指定点数转到正前方所需的 rotateX/rotateY
|
||||
// 面的摆放：1 前 / 6 后 / 2 右 / 5 左 / 3 上 / 4 下
|
||||
const FACE_ROT = {
|
||||
1: [0, 0],
|
||||
6: [0, 180],
|
||||
2: [0, -90],
|
||||
5: [0, 90],
|
||||
3: [-90, 0],
|
||||
4: [90, 0],
|
||||
}
|
||||
// 每个面的点阵（3×3 网格哪些格子有点）
|
||||
const PIPS = {
|
||||
1: [4],
|
||||
2: [0, 8],
|
||||
3: [0, 4, 8],
|
||||
4: [0, 2, 6, 8],
|
||||
5: [0, 2, 4, 6, 8],
|
||||
6: [0, 2, 3, 5, 6, 8],
|
||||
}
|
||||
const FACE_TRANSFORM = {
|
||||
1: 'rotateY(0deg)',
|
||||
6: 'rotateY(180deg)',
|
||||
2: 'rotateY(90deg)',
|
||||
5: 'rotateY(-90deg)',
|
||||
3: 'rotateX(90deg)',
|
||||
4: 'rotateX(-90deg)',
|
||||
}
|
||||
|
||||
// 累计旋转角：每次翻滚在基准朝向上叠加整圈，保证动画始终向前翻滚
|
||||
const rx = ref(FACE_ROT[props.value]?.[0] ?? 0)
|
||||
const ry = ref(FACE_ROT[props.value]?.[1] ?? 0)
|
||||
let turns = 0
|
||||
watch(
|
||||
() => props.tick,
|
||||
() => {
|
||||
const [bx, by] = FACE_ROT[props.value] || [0, 0]
|
||||
turns++
|
||||
// 两整圈 + 基准朝向；X/Y 圈数错开让翻滚轨迹更自然
|
||||
rx.value = bx + turns * 720
|
||||
ry.value = by + turns * 720 + 360
|
||||
}
|
||||
)
|
||||
// 外部直接改点数但没有触发翻滚时（如断线重连快照），立即静止对齐
|
||||
watch(
|
||||
() => props.value,
|
||||
(v) => {
|
||||
const [bx, by] = FACE_ROT[v] || [0, 0]
|
||||
rx.value = bx + turns * 720
|
||||
ry.value = by + turns * 720 + (turns ? 360 : 0)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dice3d" :style="{ '--s': size + 'px' }">
|
||||
<div class="cube" :style="{ transform: `rotateX(${rx}deg) rotateY(${ry}deg)` }">
|
||||
<div v-for="f in 6" :key="f" class="face" :style="{ transform: `${FACE_TRANSFORM[f]} translateZ(calc(var(--s) / 2))` }">
|
||||
<span v-for="cell in 9" :key="cell" class="pip" :class="{ on: PIPS[f].includes(cell - 1) }"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dice3d {
|
||||
width: var(--s);
|
||||
height: var(--s);
|
||||
perspective: calc(var(--s) * 5);
|
||||
display: inline-block;
|
||||
}
|
||||
.cube {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
/* 翻滚动画：先快后慢，模拟真实骰子落定 */
|
||||
transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
.face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(145deg, #fffdf5, #e8e4d8);
|
||||
border: 1px solid #c9c4b4;
|
||||
border-radius: 14%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
place-items: center;
|
||||
padding: 12%;
|
||||
box-sizing: border-box;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.pip {
|
||||
width: 62%;
|
||||
height: 62%;
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
.pip.on {
|
||||
visibility: visible;
|
||||
background: radial-gradient(circle at 35% 30%, #574f43, #17130c);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
/* 传统骰子：1 点与 4 点为红色 */
|
||||
.face:nth-child(1) .pip.on,
|
||||
.face:nth-child(4) .pip.on {
|
||||
background: radial-gradient(circle at 35% 30%, #ff7a6e, #b3160a);
|
||||
}
|
||||
</style>
|
||||
719
src/components/battle/LudoBoard.vue
Normal file
719
src/components/battle/LudoBoard.vue
Normal file
@@ -0,0 +1,719 @@
|
||||
<script setup>
|
||||
// 飞行棋棋盘：SVG 环形主航道（52 格）+ 四角机库 + 各家向心终点跑道
|
||||
// 表现层向成熟棋牌游戏看齐：服务端每次动作随状态下发动画事件（st.ludo.events + seq），
|
||||
// 本组件维护「显示状态 view」按事件顺序播放：3D 骰子翻滚 → 飞机逐格跳动（含终点反弹）→
|
||||
// 起飞/同色跳跃滑翔 → 击落爆炸并飞回机库 → 到达终点光环，播完再与服务端快照对齐
|
||||
// 棋子步数编码：-1 机库，0-49 主航道，50-55 终点跑道，56 到达
|
||||
import { computed, reactive, ref, watch, onUnmounted } from 'vue'
|
||||
import { useBattleStore } from '../../stores/battle'
|
||||
import Dice3D from './Dice3D.vue'
|
||||
|
||||
const battle = useBattleStore()
|
||||
const st = computed(() => battle.roomState)
|
||||
const ludo = computed(() => st.value?.ludo)
|
||||
const mySeat = computed(() => st.value?.my_seat ?? -1)
|
||||
const myTurn = computed(() => ludo.value?.turn === mySeat.value)
|
||||
|
||||
const SEAT_COLORS = ['#ff5d73', '#4da3ff', '#ffb300', '#4ade80']
|
||||
const SIZE = 560
|
||||
const C = SIZE / 2
|
||||
const R_TRACK = 225
|
||||
const DEG = 180 / Math.PI
|
||||
|
||||
// 主航道第 i 格的圆周坐标（0 号格在正上方，顺时针）
|
||||
function cellPoint(i) {
|
||||
const a = (i / 52) * Math.PI * 2 - Math.PI / 2
|
||||
return { x: C + R_TRACK * Math.cos(a), y: C + R_TRACK * Math.sin(a) }
|
||||
}
|
||||
// 座位 s 终点跑道第 k 格坐标：沿入口角度向圆心收缩
|
||||
function stretchPoint(s, k) {
|
||||
const entry = (s * 13 + 50) % 52
|
||||
const a = (entry / 52) * Math.PI * 2 - Math.PI / 2
|
||||
const r = 197 - k * 28
|
||||
return { x: C + r * Math.cos(a), y: C + r * Math.sin(a) }
|
||||
}
|
||||
// 座位 s 机库第 p 个停机位坐标（四角）
|
||||
const HANGAR_CENTERS = [
|
||||
{ x: 74, y: 74 },
|
||||
{ x: SIZE - 74, y: 74 },
|
||||
{ x: SIZE - 74, y: SIZE - 74 },
|
||||
{ x: 74, y: SIZE - 74 },
|
||||
]
|
||||
function hangarPoint(s, p) {
|
||||
const c = HANGAR_CENTERS[s]
|
||||
return { x: c.x + (p % 2 ? 17 : -17), y: c.y + (p > 1 ? 17 : -17) }
|
||||
}
|
||||
// 到达中心展示位：按座位方向偏移
|
||||
function donePoint(s, p) {
|
||||
const a = ((s * 13) / 52) * Math.PI * 2 - Math.PI / 2
|
||||
return { x: C + 26 * Math.cos(a) + (p - 1.5) * 10, y: C + 26 * Math.sin(a) }
|
||||
}
|
||||
// 任意步数 → 坐标与所在区域
|
||||
function pointOf(seat, steps, planeIdx) {
|
||||
if (steps === -1) return { ...hangarPoint(seat, planeIdx), kind: 'hangar' }
|
||||
if (steps >= 56) return { ...donePoint(seat, planeIdx), kind: 'done' }
|
||||
if (steps >= 50) return { ...stretchPoint(seat, steps - 50), kind: 'stretch', s: steps }
|
||||
const cell = (seat * 13 + steps) % 52
|
||||
return { ...cellPoint(cell), kind: 'track', cell }
|
||||
}
|
||||
// 飞机朝向（度）：主航道顺时针切线方向 / 终点跑道与机库朝向圆心
|
||||
function rotOf(seat, steps) {
|
||||
if (steps >= 0 && steps < 50) {
|
||||
const cell = (seat * 13 + steps) % 52
|
||||
const a = (cell / 52) * Math.PI * 2 - Math.PI / 2
|
||||
return a * DEG + 180
|
||||
}
|
||||
if (steps >= 50) {
|
||||
const entry = (seat * 13 + 50) % 52
|
||||
const a = (entry / 52) * Math.PI * 2 - Math.PI / 2
|
||||
return a * DEG + 270
|
||||
}
|
||||
const c = HANGAR_CENTERS[seat]
|
||||
return Math.atan2(C - c.y, C - c.x) * DEG + 90
|
||||
}
|
||||
// 掷出 die 后棋子的最终落点步数（与服务端规则一致：终点反弹 + 色格跳跃 + 飞行格飞跃连锁）
|
||||
function destOf(steps, die) {
|
||||
if (steps === -1) return 0
|
||||
let next = steps + die
|
||||
if (next > 56) next = 112 - next
|
||||
if (next < 50) {
|
||||
// 色格跳跃 +4（直接落在飞行格时交给飞跃处理）
|
||||
if (next !== 20 && next % 4 === 0 && next + 4 < 50) next += 4
|
||||
// 飞行格飞跃 +12，落点仍是色格则再跳 4
|
||||
if (next === 20) {
|
||||
next = 32
|
||||
if (next + 4 < 50) next += 4
|
||||
}
|
||||
}
|
||||
return next
|
||||
}
|
||||
|
||||
// 飞机造型路径（机头朝上、中心为原点）
|
||||
const PLANE_PATH =
|
||||
'M0,-13 C2,-10 2.6,-7 2.6,-4 L11,3 L11,6.2 L2.6,2.4 L2.6,7 L6,10.5 L6,12.6 L0,11 L-6,12.6 L-6,10.5 L-2.6,7 L-2.6,2.4 L-11,6.2 L-11,3 L-2.6,-4 C-2.6,-7 -2,-10 0,-13 Z'
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 显示状态：动画期间与服务端快照解耦
|
||||
// ---------------------------------------------------------------------
|
||||
const view = reactive({
|
||||
steps: [[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]],
|
||||
die: 1,
|
||||
dieTick: 0,
|
||||
turn: 0,
|
||||
animating: false,
|
||||
moving: null, // 正在逐格跳动的飞机 "seat-plane"
|
||||
flyKeys: {}, // 长距离滑翔中的飞机（起飞/跳跃/被击落返回）
|
||||
})
|
||||
const banner = ref(null) // 事件横幅 {id, text, cls}
|
||||
const crash = ref(null) // 击落爆炸 {id, x, y}
|
||||
const burst = ref(null) // 到达终点光环 {id}
|
||||
let fxId = 0
|
||||
let alive = true
|
||||
onUnmounted(() => { alive = false })
|
||||
|
||||
const delay = (ms) => new Promise((r) => setTimeout(r, ms))
|
||||
const seatName = (i) => st.value?.seats?.[i]?.name || `玩家${i + 1}`
|
||||
const doneCount = (s) => (ludo.value?.planes?.[s] || []).filter((v) => v >= 56).length
|
||||
|
||||
function snap(l) {
|
||||
view.steps = (l.planes || view.steps).map((row) => [...row])
|
||||
if (l.die > 0) view.die = l.die
|
||||
view.turn = l.turn
|
||||
view.moving = null
|
||||
view.flyKeys = {}
|
||||
}
|
||||
function setFly(seat, plane, on) {
|
||||
if (on) view.flyKeys[`${seat}-${plane}`] = true
|
||||
else delete view.flyKeys[`${seat}-${plane}`]
|
||||
}
|
||||
|
||||
let bannerId = 0
|
||||
let bannerTimer = null
|
||||
function showBanner(text, cls = 'info', ms = 1400) {
|
||||
banner.value = { id: ++bannerId, text, cls }
|
||||
clearTimeout(bannerTimer)
|
||||
bannerTimer = setTimeout(() => { banner.value = null }, ms)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 动画事件队列：凭连续 seq 判断播放动画，否则直接对齐
|
||||
// ---------------------------------------------------------------------
|
||||
let lastSeq = -1
|
||||
let lastTurnBannerSeq = -1
|
||||
const queue = []
|
||||
let pumping = false
|
||||
|
||||
watch(ludo, (l) => {
|
||||
if (!l) {
|
||||
lastSeq = -1
|
||||
queue.length = 0
|
||||
return
|
||||
}
|
||||
const seq = l.seq ?? 0
|
||||
if (lastSeq >= 0 && seq === lastSeq + 1) {
|
||||
lastSeq = seq
|
||||
queue.push({ events: l.events || [], final: l })
|
||||
pump()
|
||||
} else if (seq !== lastSeq) {
|
||||
lastSeq = seq
|
||||
queue.length = 0
|
||||
snap(l)
|
||||
} else if (!pumping) {
|
||||
snap(l)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
async function pump() {
|
||||
if (pumping) return
|
||||
pumping = true
|
||||
view.animating = true
|
||||
while (queue.length && alive) {
|
||||
const job = queue.shift()
|
||||
const fast = queue.length >= 2
|
||||
for (const e of job.events) {
|
||||
if (!alive) break
|
||||
await playEvent(e, fast)
|
||||
}
|
||||
snap(job.final)
|
||||
}
|
||||
view.animating = false
|
||||
pumping = false
|
||||
const l = ludo.value
|
||||
if (l && l.turn === mySeat.value && l.phase === 'roll' && lastTurnBannerSeq !== lastSeq) {
|
||||
lastTurnBannerSeq = lastSeq
|
||||
showBanner('🎲 轮到你掷骰了！', 'turn', 1300)
|
||||
}
|
||||
}
|
||||
|
||||
// 播放单条动画事件；fast 为快进模式
|
||||
async function playEvent(e, fast) {
|
||||
const f = (ms) => (fast ? Math.min(ms, 70) : ms)
|
||||
switch (e.kind) {
|
||||
case 'roll':
|
||||
view.die = e.die
|
||||
view.dieTick++
|
||||
await delay(f(950))
|
||||
break
|
||||
case 'nomove':
|
||||
showBanner(`${seatName(e.seat)} 无棋可动`, 'dim', 1000)
|
||||
await delay(f(550))
|
||||
break
|
||||
case 'takeoff':
|
||||
setFly(e.seat, e.plane, true)
|
||||
view.steps[e.seat][e.plane] = 0
|
||||
showBanner(`🛫 ${seatName(e.seat)} 的飞机起飞！`, 'info', 1100)
|
||||
await delay(f(620))
|
||||
setFly(e.seat, e.plane, false)
|
||||
break
|
||||
case 'move': {
|
||||
// 逐格跳动；冲过终点反弹：先走到 56 再折返
|
||||
const die = e.die || 0
|
||||
const path = []
|
||||
if (die > 0 && e.from + die > 56) {
|
||||
for (let s = e.from + 1; s <= 56; s++) path.push(s)
|
||||
for (let s = 55; s >= e.to; s--) path.push(s)
|
||||
} else {
|
||||
for (let s = e.from + 1; s <= e.to; s++) path.push(s)
|
||||
}
|
||||
view.moving = `${e.seat}-${e.plane}`
|
||||
for (const s of path) {
|
||||
view.steps[e.seat][e.plane] = s
|
||||
await delay(f(150))
|
||||
}
|
||||
view.steps[e.seat][e.plane] = e.to
|
||||
view.moving = null
|
||||
break
|
||||
}
|
||||
case 'jump':
|
||||
setFly(e.seat, e.plane, true)
|
||||
view.steps[e.seat][e.plane] = e.to
|
||||
showBanner(`✨ ${seatName(e.seat)} 踩中己方颜色格，跳跃 +4`, 'good', 1200)
|
||||
await delay(f(620))
|
||||
setFly(e.seat, e.plane, false)
|
||||
break
|
||||
case 'fly':
|
||||
// 沿虚线航道长距离滑翔
|
||||
setFly(e.seat, e.plane, true)
|
||||
view.steps[e.seat][e.plane] = e.to
|
||||
showBanner(`✈ ${seatName(e.seat)} 飞跃航线 +12！`, 'good', 1300)
|
||||
await delay(f(700))
|
||||
setFly(e.seat, e.plane, false)
|
||||
break
|
||||
case 'sixpenalty':
|
||||
showBanner(`⚠ ${seatName(e.seat)} 连掷三个 6，飞机被遣返！`, 'bad', 1700)
|
||||
if (e.plane >= 0) {
|
||||
await delay(f(380))
|
||||
setFly(e.seat, e.plane, true)
|
||||
view.steps[e.seat][e.plane] = -1
|
||||
await delay(f(550))
|
||||
setFly(e.seat, e.plane, false)
|
||||
} else {
|
||||
await delay(f(620))
|
||||
}
|
||||
break
|
||||
case 'capture': {
|
||||
// 爆炸特效后被击落飞机滑翔回机库
|
||||
const pt = pointOf(e.victim, e.vfrom, e.vplane)
|
||||
crash.value = { id: ++fxId, x: pt.x, y: pt.y }
|
||||
showBanner(`💥 ${seatName(e.seat)} 击落了 ${seatName(e.victim)} 的飞机！`, 'bad', 1700)
|
||||
await delay(f(430))
|
||||
setFly(e.victim, e.vplane, true)
|
||||
view.steps[e.victim][e.vplane] = -1
|
||||
await delay(f(540))
|
||||
setFly(e.victim, e.vplane, false)
|
||||
crash.value = null
|
||||
break
|
||||
}
|
||||
case 'arrive':
|
||||
burst.value = { id: ++fxId }
|
||||
showBanner(`🏆 ${seatName(e.seat)} 的飞机到达终点！`, 'good', 1400)
|
||||
await delay(f(680))
|
||||
burst.value = null
|
||||
break
|
||||
case 'bonus':
|
||||
showBanner(`🎲 ${seatName(e.seat)} 掷出 6 点，再掷一次`, 'turn', 1200)
|
||||
await delay(f(480))
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 渲染数据
|
||||
// ---------------------------------------------------------------------
|
||||
// 各座位飞行格的绝对格号（相对第 20 步，恰好都是自家颜色格）
|
||||
const FLY_CELLS = new Set([20, 33, 46, 7])
|
||||
// 主航道 52 格渲染数据（起点 ▶ 与飞行格 ✈ 加注）
|
||||
const trackCells = computed(() =>
|
||||
Array.from({ length: 52 }, (_, i) => ({
|
||||
i,
|
||||
...cellPoint(i),
|
||||
color: SEAT_COLORS[i % 4],
|
||||
isStart: i % 13 === 0,
|
||||
isFly: FLY_CELLS.has(i),
|
||||
}))
|
||||
)
|
||||
// 四条飞跃虚线航道：飞行格 → 对岸落点（相对 +12 格）
|
||||
const flyLines = computed(() =>
|
||||
Array.from({ length: 4 }, (_, s) => {
|
||||
const a = cellPoint((s * 13 + 20) % 52)
|
||||
const b = cellPoint((s * 13 + 32) % 52)
|
||||
return { s, x1: a.x, y1: a.y, x2: b.x, y2: b.y }
|
||||
})
|
||||
)
|
||||
// 全部 16 架飞机（显示位置由 view.steps 驱动，同格棋子横向错开）
|
||||
const planes = computed(() => {
|
||||
const g = ludo.value
|
||||
if (!g) return []
|
||||
const list = []
|
||||
for (let s = 0; s < 4; s++) {
|
||||
for (let p = 0; p < 4; p++) {
|
||||
const steps = view.steps[s]?.[p] ?? -1
|
||||
const pt = pointOf(s, steps, p)
|
||||
const key = pt.kind === 'track' ? `c${pt.cell}` : pt.kind === 'stretch' ? `s${s}-${steps}` : `${pt.kind}${s}-${p}`
|
||||
list.push({
|
||||
seat: s, plane: p, steps, key,
|
||||
x: pt.x, y: pt.y, rot: rotOf(s, steps),
|
||||
inactive: !g.active[s],
|
||||
moving: view.moving === `${s}-${p}`,
|
||||
flying: !!view.flyKeys[`${s}-${p}`],
|
||||
})
|
||||
}
|
||||
}
|
||||
const byKey = {}
|
||||
for (const pl of list) (byKey[pl.key] ||= []).push(pl)
|
||||
for (const group of Object.values(byKey)) {
|
||||
group.forEach((pl, idx) => {
|
||||
pl.x += (idx - (group.length - 1) / 2) * 9
|
||||
})
|
||||
}
|
||||
return list
|
||||
})
|
||||
// 我当前可动的棋子集合（动画播放中暂不可点，防止误操作）
|
||||
const movableSet = computed(() => {
|
||||
const g = ludo.value
|
||||
if (!g || !myTurn.value || g.phase !== 'move' || view.animating) return new Set()
|
||||
return new Set(g.movable || [])
|
||||
})
|
||||
// 可动棋子的落点预览（虚线圆环 + 编号，点击同样可走）
|
||||
const ghosts = computed(() => {
|
||||
const g = ludo.value
|
||||
if (!g || !myTurn.value || g.phase !== 'move' || view.animating) return []
|
||||
const seen = {}
|
||||
return (g.movable || []).map((p) => {
|
||||
const dest = destOf(g.planes[mySeat.value][p], g.die)
|
||||
const pt = pointOf(mySeat.value, dest, p)
|
||||
// 多架飞机落点相同（如掷 6 多架可起飞）：横向微错开避免完全重叠
|
||||
const n = (seen[dest] = (seen[dest] || 0) + 1)
|
||||
return { plane: p, x: pt.x + (n - 1) * 11, y: pt.y }
|
||||
})
|
||||
})
|
||||
function clickPlane(pl) {
|
||||
if (pl.seat === mySeat.value && movableSet.value.has(pl.plane)) {
|
||||
battle.ludoMove(pl.plane)
|
||||
}
|
||||
}
|
||||
function doRoll() {
|
||||
if (view.animating) return
|
||||
battle.ludoRoll()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="ludo" class="panel ludo-wrap">
|
||||
<!-- 顶部信息条 -->
|
||||
<div class="ludo-top">
|
||||
<span class="turn-tag" :style="{ color: SEAT_COLORS[view.turn] }">
|
||||
● 轮到 {{ seatName(view.turn) }}{{ view.turn === mySeat ? '（你）' : '' }}
|
||||
</span>
|
||||
<Dice3D :value="view.die" :tick="view.dieTick" :size="38" />
|
||||
<span class="rolls text-dim">第 {{ ludo.rolls }} 次掷骰</span>
|
||||
</div>
|
||||
<!-- 棋盘 -->
|
||||
<div class="board-box">
|
||||
<svg :viewBox="`0 0 ${SIZE} ${SIZE}`" class="ludo-svg">
|
||||
<!-- 底盘装饰：同心圆 -->
|
||||
<circle :cx="C" :cy="C" :r="R_TRACK + 22" fill="none" stroke="var(--border)" stroke-opacity="0.6" />
|
||||
<circle :cx="C" :cy="C" :r="R_TRACK - 22" fill="none" stroke="var(--border)" stroke-opacity="0.35" />
|
||||
<!-- 飞跃虚线航道（先画在航道下层） -->
|
||||
<line
|
||||
v-for="fl in flyLines"
|
||||
:key="`fl${fl.s}`"
|
||||
:x1="fl.x1"
|
||||
:y1="fl.y1"
|
||||
:x2="fl.x2"
|
||||
:y2="fl.y2"
|
||||
:stroke="SEAT_COLORS[fl.s]"
|
||||
stroke-width="2"
|
||||
stroke-dasharray="6 5"
|
||||
stroke-opacity="0.35"
|
||||
/>
|
||||
<!-- 主航道 -->
|
||||
<g v-for="c in trackCells" :key="c.i">
|
||||
<circle :cx="c.x" :cy="c.y" r="15" :fill="c.color" :fill-opacity="c.isStart || c.isFly ? 0.55 : 0.22" :stroke="c.color" stroke-opacity="0.6" />
|
||||
<text v-if="c.isStart" :x="c.x" :y="c.y + 4" text-anchor="middle" font-size="12" :fill="c.color">▶</text>
|
||||
<text v-else-if="c.isFly" :x="c.x" :y="c.y + 4" text-anchor="middle" font-size="11" :fill="c.color">✈</text>
|
||||
</g>
|
||||
<!-- 终点跑道（每家 6 格向心） -->
|
||||
<g v-for="s in 4" :key="`st${s}`">
|
||||
<circle
|
||||
v-for="k in 6"
|
||||
:key="k"
|
||||
:cx="stretchPoint(s - 1, k - 1).x"
|
||||
:cy="stretchPoint(s - 1, k - 1).y"
|
||||
r="10"
|
||||
:fill="SEAT_COLORS[s - 1]"
|
||||
:fill-opacity="0.28"
|
||||
:stroke="SEAT_COLORS[s - 1]"
|
||||
stroke-opacity="0.5"
|
||||
/>
|
||||
</g>
|
||||
<!-- 中心终点 -->
|
||||
<circle :cx="C" :cy="C" r="15" fill="var(--primary)" fill-opacity="0.35" stroke="var(--primary)" />
|
||||
<text :x="C" :y="C + 4" text-anchor="middle" font-size="11" fill="var(--text)">终</text>
|
||||
<!-- 到达终点的扩散光环 -->
|
||||
<circle v-if="burst" :key="burst.id" :cx="C" :cy="C" r="15" class="burst-ring" />
|
||||
<!-- 机库 -->
|
||||
<g v-for="s in 4" :key="`hg${s}`">
|
||||
<rect
|
||||
:x="HANGAR_CENTERS[s - 1].x - 36"
|
||||
:y="HANGAR_CENTERS[s - 1].y - 36"
|
||||
width="72"
|
||||
height="72"
|
||||
rx="12"
|
||||
:fill="SEAT_COLORS[s - 1]"
|
||||
fill-opacity="0.12"
|
||||
:stroke="SEAT_COLORS[s - 1]"
|
||||
stroke-opacity="0.45"
|
||||
/>
|
||||
</g>
|
||||
<!-- 落点预览（虚线圆环，点击可走） -->
|
||||
<g v-for="gh in ghosts" :key="`gh${gh.plane}`" class="ghost" @click="battle.ludoMove(gh.plane)">
|
||||
<circle :cx="gh.x" :cy="gh.y" r="14" fill="none" :stroke="SEAT_COLORS[mySeat]" stroke-width="2" stroke-dasharray="4 3" class="ghost-ring" />
|
||||
<text :x="gh.x" :y="gh.y + 3.5" text-anchor="middle" font-size="10" font-weight="700" :fill="SEAT_COLORS[mySeat]">{{ gh.plane + 1 }}</text>
|
||||
</g>
|
||||
<!-- 飞机棋子 -->
|
||||
<g
|
||||
v-for="pl in planes"
|
||||
:key="`${pl.seat}-${pl.plane}`"
|
||||
class="plane"
|
||||
:class="{
|
||||
clickable: pl.seat === mySeat && movableSet.has(pl.plane),
|
||||
flying: pl.flying,
|
||||
inactive: pl.inactive,
|
||||
}"
|
||||
:style="{ transform: `translate(${pl.x}px, ${pl.y}px)` }"
|
||||
@click="clickPlane(pl)"
|
||||
>
|
||||
<!-- 可动棋子的呼吸光圈 -->
|
||||
<circle v-if="pl.seat === mySeat && movableSet.has(pl.plane)" r="17" fill="none" stroke="#fff" stroke-width="2" class="pulse" />
|
||||
<g class="plane-inner" :class="{ hopping: pl.moving }" :style="{ transform: `rotate(${pl.rot}deg)` }">
|
||||
<path :d="PLANE_PATH" :fill="SEAT_COLORS[pl.seat]" stroke="#fff" stroke-width="1.6" stroke-linejoin="round" />
|
||||
<ellipse cx="0" cy="-5.5" rx="1.9" ry="2.8" fill="#fff" opacity="0.9" />
|
||||
<text y="9.5" text-anchor="middle" font-size="6.5" font-weight="700" fill="#fff">{{ pl.plane + 1 }}</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- 击落爆炸特效 -->
|
||||
<g v-if="crash" :key="crash.id" class="crash" :style="{ transform: `translate(${crash.x}px, ${crash.y}px)` }">
|
||||
<circle r="16" class="crash-ring" />
|
||||
<text y="7" text-anchor="middle" font-size="20" class="crash-boom">💥</text>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- 事件横幅 -->
|
||||
<transition name="lbanner">
|
||||
<div v-if="banner" :key="banner.id" class="banner" :class="banner.cls">{{ banner.text }}</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- 玩家图例与操作 -->
|
||||
<div class="ludo-bottom">
|
||||
<div class="legend">
|
||||
<span v-for="s in 4" :key="s" class="lg-item" :class="{ inactive: !ludo.active[s - 1], cur: view.turn === s - 1 }">
|
||||
<span class="lg-dot" :style="{ background: SEAT_COLORS[s - 1] }"></span>
|
||||
{{ seatName(s - 1) }} <b>{{ doneCount(s - 1) }}/4</b>
|
||||
</span>
|
||||
</div>
|
||||
<button v-if="myTurn && ludo.phase === 'roll'" class="btn btn-lg" :disabled="view.animating" @click="doRoll">
|
||||
🎲 掷骰子
|
||||
</button>
|
||||
<p v-else-if="myTurn && ludo.phase === 'move' && !view.animating" class="hint">
|
||||
掷出 {{ ludo.die }} 点，点击发光的飞机或虚线落点
|
||||
</p>
|
||||
<p v-else class="hint text-dim">等待 {{ seatName(view.turn) }} 行动…</p>
|
||||
</div>
|
||||
<p class="ludo-tips text-dim">
|
||||
掷 6 起飞并奖励再掷（连三个 6 遣返）· 踩中对手将其击落 · 落自家色格跳 4 格 · 踩中 ✈ 飞行格沿虚线飞跃 12 格 · 四机到达获胜
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ludo-wrap {
|
||||
padding: 14px;
|
||||
}
|
||||
.ludo-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.turn-tag {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
.rolls {
|
||||
font-size: 12px;
|
||||
}
|
||||
.board-box {
|
||||
position: relative;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ludo-svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
/* ---- 飞机 ---- */
|
||||
.plane {
|
||||
transition: transform 0.14s linear;
|
||||
transform-box: view-box;
|
||||
}
|
||||
.plane.flying {
|
||||
transition: transform 0.55s cubic-bezier(0.3, 0, 0.2, 1);
|
||||
}
|
||||
.plane.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.plane.inactive {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.plane-inner {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
transition: transform 0.2s linear;
|
||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
.plane-inner.hopping {
|
||||
animation: plane-hop 0.15s ease-in-out infinite;
|
||||
}
|
||||
@keyframes plane-hop {
|
||||
50% {
|
||||
filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.35));
|
||||
scale: 1.18;
|
||||
}
|
||||
}
|
||||
.pulse {
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
50% {
|
||||
stroke-opacity: 0.25;
|
||||
}
|
||||
}
|
||||
/* ---- 落点预览 ---- */
|
||||
.ghost {
|
||||
cursor: pointer;
|
||||
/* 虚线圆环 fill 为 none，默认只有描边可点击；改为整个圆面都可点 */
|
||||
pointer-events: all;
|
||||
}
|
||||
.ghost-ring {
|
||||
animation: ghost-spin 3s linear infinite;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
@keyframes ghost-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* ---- 击落爆炸 ---- */
|
||||
.crash {
|
||||
pointer-events: none;
|
||||
transform-box: view-box;
|
||||
}
|
||||
.crash-ring {
|
||||
fill: none;
|
||||
stroke: #ffb020;
|
||||
stroke-width: 3;
|
||||
animation: crash-ring 0.45s ease-out forwards;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
.crash-boom {
|
||||
animation: crash-boom 0.45s ease-out;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
@keyframes crash-ring {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.9);
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes crash-boom {
|
||||
0% {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.35);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* ---- 到达光环 ---- */
|
||||
.burst-ring {
|
||||
fill: none;
|
||||
stroke: var(--primary);
|
||||
stroke-width: 3;
|
||||
animation: burst 0.65s ease-out forwards;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
@keyframes burst {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(3.2);
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
}
|
||||
/* ---- 事件横幅 ---- */
|
||||
.banner {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
z-index: 5;
|
||||
background: rgba(10, 12, 24, 0.86);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.banner.good {
|
||||
color: #4ade80;
|
||||
border-color: #4ade8066;
|
||||
}
|
||||
.banner.bad {
|
||||
color: #ff6b6b;
|
||||
border-color: #ff6b6b66;
|
||||
}
|
||||
.banner.dim {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.banner.turn {
|
||||
color: var(--primary-2);
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.lbanner-enter-active,
|
||||
.lbanner-leave-active {
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
}
|
||||
.lbanner-enter-from,
|
||||
.lbanner-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-8px) scale(0.9);
|
||||
}
|
||||
/* ---- 底部 ---- */
|
||||
.ludo-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
.lg-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.lg-item.cur {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.lg-item.inactive {
|
||||
opacity: 0.4;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.lg-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hint {
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ludo-tips {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
884
src/components/battle/MonopolyBoard.vue
Normal file
884
src/components/battle/MonopolyBoard.vue
Normal file
@@ -0,0 +1,884 @@
|
||||
<script setup>
|
||||
// 大富翁棋盘：7×7 环形 24 格 + 中央信息区
|
||||
// 表现层向成熟棋牌游戏看齐：服务端每次动作随状态下发结构化动画事件（st.mono.events + seq），
|
||||
// 本组件维护一份「显示状态 view」按事件顺序播放动画（3D 骰子翻滚 → 棋子逐格跳动 → 金钱漂浮/
|
||||
// 机会卡翻牌/地契购买卡/破产横幅），全部播完后再与服务端快照对齐，保证不漂移
|
||||
import { computed, reactive, ref, watch, onUnmounted } from 'vue'
|
||||
import { useBattleStore } from '../../stores/battle'
|
||||
import Dice3D from './Dice3D.vue'
|
||||
|
||||
const battle = useBattleStore()
|
||||
const st = computed(() => battle.roomState)
|
||||
const mono = computed(() => st.value?.mono)
|
||||
const mySeat = computed(() => st.value?.my_seat ?? -1)
|
||||
const myTurn = computed(() => mono.value?.turn === mySeat.value)
|
||||
|
||||
// 四个座位的主题色（与飞行棋保持一致）与棋子造型
|
||||
const SEAT_COLORS = ['#ff5d73', '#4da3ff', '#ffb300', '#4ade80']
|
||||
const TOKEN_EMOJIS = ['🚗', '🛩️', '🚤', '🎩']
|
||||
// 七个地产颜色组（经典大富翁的分段色带）
|
||||
const GROUP_COLORS = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#1abc9c', '#3498db', '#9b59b6']
|
||||
const TYPE_ICONS = { go: '🏁', chance: '❓', tax: '💰', jail: '🚔', gotojail: '👮', park: '🅿️' }
|
||||
|
||||
// 24 格在 7×7 网格上的位置：0-6 左列自下而上，7-12 顶行向右，13-18 右列向下，19-23 底行向左
|
||||
function gridPos(idx) {
|
||||
if (idx <= 6) return { row: 7 - idx, col: 1 }
|
||||
if (idx <= 12) return { row: 1, col: idx - 5 }
|
||||
if (idx <= 18) return { row: idx - 11, col: 7 }
|
||||
return { row: 7, col: 25 - idx }
|
||||
}
|
||||
// 格子中心在棋盘内的百分比坐标（棋子定位用）
|
||||
function cellPercent(idx) {
|
||||
const { row, col } = gridPos(idx)
|
||||
return { x: ((col - 0.5) / 7) * 100, y: ((row - 0.5) / 7) * 100 }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 显示状态：动画期间与服务端快照解耦
|
||||
// ---------------------------------------------------------------------
|
||||
const view = reactive({
|
||||
pos: [], // 各座位棋子当前显示的格子
|
||||
money: [], // 各座位显示中的金钱（数字滚动）
|
||||
out: [], // 出局标记
|
||||
dice: [1, 1], // 骰子显示点数
|
||||
diceTick: 0, // 骰子翻滚触发器
|
||||
turn: 0, // 当前行动者（动画播完才切换）
|
||||
animating: false,
|
||||
movingSeat: -1, // 正在逐格移动的座位（棋子加跳跃动画）
|
||||
flying: -1, // 正在直达传送的座位（棋子加长距离飞行过渡）
|
||||
flashTile: -1, // 刚被买下的地块（高亮闪烁）
|
||||
})
|
||||
const banner = ref(null) // 事件横幅 {id, text, cls}
|
||||
const floats = ref([]) // 金钱漂浮 [{id, x, y, text, cls}]
|
||||
const chanceCard = ref(null) // 机会卡翻牌 {text}
|
||||
let alive = true
|
||||
onUnmounted(() => { alive = false })
|
||||
|
||||
const delay = (ms) => new Promise((r) => setTimeout(r, ms))
|
||||
const seatName = (i) => st.value?.seats?.[i]?.name || `玩家${i + 1}`
|
||||
const tileCount = computed(() => (mono.value?.tiles || []).length || 24)
|
||||
|
||||
// 与服务端快照直接对齐（首次进入 / 重连 / 每段动画播完）
|
||||
function snap(m) {
|
||||
const players = m.players || []
|
||||
view.pos = players.map((p) => p.pos)
|
||||
view.money = players.map((p) => p.money)
|
||||
view.out = players.map((p) => p.out)
|
||||
view.turn = m.turn
|
||||
if (m.dice?.[0]) view.dice = [...m.dice]
|
||||
view.movingSeat = -1
|
||||
view.flying = -1
|
||||
}
|
||||
|
||||
// 金钱数字滚动到目标值
|
||||
function tweenMoney(seat, to, ms = 450) {
|
||||
const from = view.money[seat] ?? to
|
||||
const t0 = performance.now()
|
||||
const step = (t) => {
|
||||
if (!alive) return
|
||||
const k = Math.min(1, (t - t0) / ms)
|
||||
view.money[seat] = Math.round(from + (to - from) * k)
|
||||
if (k < 1) requestAnimationFrame(step)
|
||||
}
|
||||
requestAnimationFrame(step)
|
||||
}
|
||||
|
||||
// 事件横幅（自动消失）
|
||||
let bannerId = 0
|
||||
let bannerTimer = null
|
||||
function showBanner(text, cls = 'info', ms = 1500) {
|
||||
banner.value = { id: ++bannerId, text, cls }
|
||||
clearTimeout(bannerTimer)
|
||||
bannerTimer = setTimeout(() => { banner.value = null }, ms)
|
||||
}
|
||||
|
||||
// 金钱漂浮字（出现在棋子所在格上方）
|
||||
let floatId = 0
|
||||
function spawnFloat(seat, amount) {
|
||||
const { x, y } = cellPercent(view.pos[seat] ?? 0)
|
||||
const id = ++floatId
|
||||
floats.value.push({ id, x, y, text: (amount > 0 ? '+' : '') + amount, cls: amount > 0 ? 'gain' : 'lose' })
|
||||
setTimeout(() => { floats.value = floats.value.filter((f) => f.id !== id) }, 1300)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 动画事件队列：凭连续 seq 判断播放动画，否则直接对齐
|
||||
// ---------------------------------------------------------------------
|
||||
let lastSeq = -1
|
||||
let lastTurnBannerSeq = -1
|
||||
const queue = []
|
||||
let pumping = false
|
||||
|
||||
watch(mono, (m) => {
|
||||
if (!m) {
|
||||
lastSeq = -1
|
||||
queue.length = 0
|
||||
return
|
||||
}
|
||||
const seq = m.seq ?? 0
|
||||
if (lastSeq >= 0 && seq === lastSeq + 1) {
|
||||
lastSeq = seq
|
||||
queue.push({ events: m.events || [], final: m })
|
||||
pump()
|
||||
} else if (seq !== lastSeq) {
|
||||
// 首次进入 / 断线重连 / 新开一局：直接对齐快照，不播动画
|
||||
lastSeq = seq
|
||||
queue.length = 0
|
||||
snap(m)
|
||||
} else if (!pumping) {
|
||||
// 序号未变的重复广播（座位变化等）：静默对齐
|
||||
snap(m)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
async function pump() {
|
||||
if (pumping) return
|
||||
pumping = true
|
||||
view.animating = true
|
||||
while (queue.length && alive) {
|
||||
const job = queue.shift()
|
||||
// 队列积压过多（连续 AI 快速行动）：快进播放避免越拖越长
|
||||
const fast = queue.length >= 2
|
||||
for (const e of job.events) {
|
||||
if (!alive) break
|
||||
await playEvent(e, fast)
|
||||
}
|
||||
snap(job.final)
|
||||
}
|
||||
view.animating = false
|
||||
pumping = false
|
||||
// 动画全部播完后轮到我：弹提醒横幅（一个回合只提醒一次）
|
||||
const m = mono.value
|
||||
if (m && m.turn === mySeat.value && m.phase === 'roll' && lastTurnBannerSeq !== lastSeq) {
|
||||
lastTurnBannerSeq = lastSeq
|
||||
showBanner('🎲 轮到你掷骰了！', 'turn', 1300)
|
||||
}
|
||||
}
|
||||
|
||||
// 播放单条动画事件；fast 为快进模式
|
||||
async function playEvent(e, fast) {
|
||||
const f = (ms) => (fast ? Math.min(ms, 80) : ms)
|
||||
switch (e.kind) {
|
||||
case 'roll':
|
||||
view.dice = [e.d1, e.d2]
|
||||
view.diceTick++
|
||||
await delay(f(1000))
|
||||
break
|
||||
case 'move': {
|
||||
// 逐格跳动前进（环形跨起点）
|
||||
const n = tileCount.value
|
||||
view.movingSeat = e.seat
|
||||
let idx = e.from
|
||||
for (let guard = 0; guard < n + 2; guard++) {
|
||||
idx = (idx + 1) % n
|
||||
view.pos[e.seat] = idx
|
||||
await delay(f(165))
|
||||
if (idx === e.to) break
|
||||
}
|
||||
view.movingSeat = -1
|
||||
break
|
||||
}
|
||||
case 'teleport':
|
||||
// 直达传送（入狱/直达起点）：长距离飞行过渡
|
||||
view.flying = e.seat
|
||||
showBanner(`${seatName(e.seat)} ${e.text || '传送'}`, e.to === 6 ? 'bad' : 'info')
|
||||
await delay(30)
|
||||
view.pos[e.seat] = e.to
|
||||
await delay(f(750))
|
||||
view.flying = -1
|
||||
break
|
||||
case 'cash':
|
||||
spawnFloat(e.seat, e.amount)
|
||||
tweenMoney(e.seat, (view.money[e.seat] ?? 0) + e.amount)
|
||||
await delay(f(330))
|
||||
break
|
||||
case 'chance':
|
||||
chanceCard.value = { text: e.text }
|
||||
await delay(f(1650))
|
||||
chanceCard.value = null
|
||||
break
|
||||
case 'buy':
|
||||
view.flashTile = e.tile
|
||||
showBanner(`🏠 ${seatName(e.seat)} 买下了「${e.text}」`, 'good')
|
||||
await delay(f(850))
|
||||
view.flashTile = -1
|
||||
break
|
||||
case 'upgrade':
|
||||
view.flashTile = e.tile
|
||||
showBanner(`🏗 ${seatName(e.seat)} 把「${e.text}」升级为${LEVEL_NAMES[e.amount] || '高级建筑'}`, 'good')
|
||||
await delay(f(850))
|
||||
view.flashTile = -1
|
||||
break
|
||||
case 'bankrupt':
|
||||
view.out[e.seat] = true
|
||||
showBanner(`💥 ${seatName(e.seat)} 破产出局！`, 'bad', 1800)
|
||||
await delay(f(950))
|
||||
break
|
||||
case 'rest':
|
||||
showBanner(`💤 ${seatName(e.seat)} 休息中，跳过回合`, 'dim', 1100)
|
||||
await delay(f(450))
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 渲染数据
|
||||
// ---------------------------------------------------------------------
|
||||
// 某座位是否集齐指定颜色组（租金×2 标记）
|
||||
function ownsFullGroup(list, owner, group) {
|
||||
if (owner < 0 || group < 0) return false
|
||||
return list.filter((t) => t.group === group).every((t) => t.owner === owner)
|
||||
}
|
||||
const tiles = computed(() => {
|
||||
const list = mono.value?.tiles || []
|
||||
return list.map((t) => ({
|
||||
...t,
|
||||
style: {
|
||||
gridRow: gridPos(t.idx).row,
|
||||
gridColumn: gridPos(t.idx).col,
|
||||
'--band': t.group >= 0 ? GROUP_COLORS[t.group % GROUP_COLORS.length] : 'transparent',
|
||||
'--owner': t.owner >= 0 ? SEAT_COLORS[t.owner] : 'transparent',
|
||||
},
|
||||
icon: TYPE_ICONS[t.type] || '',
|
||||
full: t.type === 'prop' && t.owner >= 0 && ownsFullGroup(list, t.owner, t.group),
|
||||
}))
|
||||
})
|
||||
// 棋子渲染：显示位置来自 view（动画驱动），同格四人按象限微错开
|
||||
const tokens = computed(() => {
|
||||
const players = mono.value?.players || []
|
||||
return players.map((p, i) => {
|
||||
const { x, y } = cellPercent(view.pos[i] ?? p.pos)
|
||||
const dx = (i % 2 ? 1 : -1) * 9
|
||||
const dy = (i > 1 ? 1 : -1) * 9
|
||||
return {
|
||||
seat: i,
|
||||
out: view.out[i] ?? p.out,
|
||||
x: `calc(${x}% + ${dx}px)`,
|
||||
y: `calc(${y}% + ${dy}px)`,
|
||||
color: SEAT_COLORS[i],
|
||||
emoji: TOKEN_EMOJIS[i],
|
||||
hopping: view.movingSeat === i,
|
||||
flying: view.flying === i,
|
||||
active: view.turn === i,
|
||||
}
|
||||
})
|
||||
})
|
||||
const players = computed(() => mono.value?.players || [])
|
||||
const turnName = computed(() => seatName(view.turn))
|
||||
// 建筑等级名称
|
||||
const LEVEL_NAMES = ['空地', '小屋', '楼房', '酒店']
|
||||
// 待决策信息（买地或升级，kind 区分）
|
||||
const pending = computed(() => {
|
||||
const m = mono.value
|
||||
if (!m || !m.pending) return null
|
||||
if (m.phase !== 'buy' && m.phase !== 'upgrade') return null
|
||||
return m.pending
|
||||
})
|
||||
const pendingTile = computed(() => {
|
||||
if (!pending.value) return null
|
||||
return (mono.value.tiles || []).find((t) => t.idx === pending.value.tile) || null
|
||||
})
|
||||
// 决策卡动画播完才弹出，避免棋子还没走到就先问买不买/升不升
|
||||
const showBuyCard = computed(() => myTurn.value && pending.value?.kind === 'buy' && pendingTile.value && !view.animating)
|
||||
const showUpgradeCard = computed(() => myTurn.value && pending.value?.kind === 'upgrade' && pendingTile.value && !view.animating)
|
||||
|
||||
function doRoll() {
|
||||
if (view.animating) return
|
||||
battle.monoRoll()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="mono" class="panel mono-wrap">
|
||||
<!-- 顶部信息条 -->
|
||||
<div class="mono-top">
|
||||
<span class="round">第 {{ mono.round }} / {{ mono.max_rounds }} 轮</span>
|
||||
<span class="turn-tag" :style="{ color: SEAT_COLORS[view.turn] }">
|
||||
● 轮到 {{ turnName }}{{ view.turn === mySeat ? '（你）' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 棋盘 -->
|
||||
<div class="board">
|
||||
<div
|
||||
v-for="t in tiles"
|
||||
:key="t.idx"
|
||||
class="tile"
|
||||
:class="[t.type, { owned: t.owner >= 0, flash: view.flashTile === t.idx }]"
|
||||
:style="t.style"
|
||||
>
|
||||
<span v-if="t.type === 'prop'" class="band"></span>
|
||||
<span v-if="t.type === 'prop' && t.level > 0" class="t-lvl">{{ t.level >= 3 ? '🏨' : '🏠'.repeat(t.level) }}</span>
|
||||
<span class="t-icon">{{ t.icon }}</span>
|
||||
<span class="t-name">{{ t.name }}</span>
|
||||
<span v-if="t.type === 'prop'" class="t-price">
|
||||
<template v-if="t.owner >= 0">
|
||||
<span class="owner-dot" :style="{ background: SEAT_COLORS[t.owner] }"></span>
|
||||
<span :style="{ color: SEAT_COLORS[t.owner] }">{{ t.full ? '★×2' : seatName(t.owner) }}</span>
|
||||
</template>
|
||||
<template v-else>¥{{ t.price }}</template>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 中央区域 -->
|
||||
<div class="center">
|
||||
<div class="players">
|
||||
<div
|
||||
v-for="(p, i) in players"
|
||||
:key="p.seat"
|
||||
class="p-row"
|
||||
:class="{ out: view.out[i] ?? p.out, cur: view.turn === i }"
|
||||
>
|
||||
<span class="p-token" :style="{ background: SEAT_COLORS[i] }">{{ TOKEN_EMOJIS[i] }}</span>
|
||||
<span class="p-name">{{ seatName(i) }}</span>
|
||||
<b class="p-money">¥{{ view.money[i] ?? p.money }}</b>
|
||||
<span class="p-assets text-dim">总{{ p.assets }}</span>
|
||||
<span v-if="view.out[i] ?? p.out" class="p-out">破产</span>
|
||||
<span v-else-if="p.skip > 0" class="p-skip">💤</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dice-row">
|
||||
<Dice3D :value="view.dice[0]" :tick="view.diceTick" :size="46" />
|
||||
<Dice3D :value="view.dice[1]" :tick="view.diceTick" :size="46" />
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
v-if="myTurn && mono.phase === 'roll'"
|
||||
class="btn btn-lg roll-btn"
|
||||
:disabled="view.animating"
|
||||
@click="doRoll"
|
||||
>
|
||||
🎲 掷骰子
|
||||
</button>
|
||||
<p v-else-if="(mono.phase === 'buy' || mono.phase === 'upgrade') && !myTurn" class="text-dim wait-hint">
|
||||
{{ turnName }} 正在考虑{{ mono.phase === 'buy' ? '购买' : '升级' }}…
|
||||
</p>
|
||||
<p v-else-if="mono.phase !== 'buy' && mono.phase !== 'upgrade'" class="text-dim wait-hint">
|
||||
等待 {{ turnName }} 行动…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 棋子层（覆盖全棋盘，逐格移动动画） -->
|
||||
<div class="tokens-layer">
|
||||
<div
|
||||
v-for="tk in tokens"
|
||||
:key="tk.seat"
|
||||
class="token"
|
||||
:class="{ out: tk.out, hopping: tk.hopping, flying: tk.flying, active: tk.active }"
|
||||
:style="{ left: tk.x, top: tk.y, '--tc': tk.color }"
|
||||
>
|
||||
<span class="token-body">{{ tk.emoji }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 金钱漂浮层 -->
|
||||
<div class="fx-layer">
|
||||
<span
|
||||
v-for="fl in floats"
|
||||
:key="fl.id"
|
||||
class="cash-float"
|
||||
:class="fl.cls"
|
||||
:style="{ left: fl.x + '%', top: fl.y + '%' }"
|
||||
>
|
||||
{{ fl.text }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 事件横幅 -->
|
||||
<transition name="mbanner">
|
||||
<div v-if="banner" :key="banner.id" class="banner" :class="banner.cls">{{ banner.text }}</div>
|
||||
</transition>
|
||||
<!-- 机会卡翻牌 -->
|
||||
<transition name="cardpop">
|
||||
<div v-if="chanceCard" class="overlay">
|
||||
<div class="chance-card">
|
||||
<div class="cc-title">❓ 机 会</div>
|
||||
<div class="cc-text">{{ chanceCard.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 地契购买卡 -->
|
||||
<transition name="cardpop">
|
||||
<div v-if="showBuyCard" class="overlay deed-overlay">
|
||||
<div class="deed-card">
|
||||
<div class="deed-band" :style="{ background: GROUP_COLORS[pendingTile.group % GROUP_COLORS.length] }">
|
||||
地 契
|
||||
</div>
|
||||
<div class="deed-name">{{ pendingTile.name }}</div>
|
||||
<div class="deed-rows">
|
||||
<div class="deed-row"><span>地价</span><b>¥{{ pendingTile.price }}</b></div>
|
||||
<div class="deed-row"><span>租金</span><b>¥{{ Math.floor(pendingTile.price * 0.3) }}</b></div>
|
||||
<div class="deed-row"><span>集齐同色</span><b>租金 ×2</b></div>
|
||||
<div class="deed-row dim"><span>我的现金</span><b>¥{{ view.money[mySeat] ?? 0 }}</b></div>
|
||||
</div>
|
||||
<div class="deed-btns">
|
||||
<button class="btn" @click="battle.monoBuy(true)">买下</button>
|
||||
<button class="btn btn-ghost" @click="battle.monoBuy(false)">不买</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 建筑升级卡 -->
|
||||
<transition name="cardpop">
|
||||
<div v-if="showUpgradeCard" class="overlay deed-overlay">
|
||||
<div class="deed-card">
|
||||
<div class="deed-band" :style="{ background: GROUP_COLORS[pendingTile.group % GROUP_COLORS.length] }">
|
||||
升 级
|
||||
</div>
|
||||
<div class="deed-name">{{ pendingTile.name }}</div>
|
||||
<div class="deed-rows">
|
||||
<div class="deed-row">
|
||||
<span>建筑</span>
|
||||
<b>{{ LEVEL_NAMES[pending.level] }} → {{ LEVEL_NAMES[pending.level + 1] }}</b>
|
||||
</div>
|
||||
<div class="deed-row"><span>费用</span><b>¥{{ pending.price }}</b></div>
|
||||
<div class="deed-row">
|
||||
<span>升级后租金</span>
|
||||
<b>¥{{ Math.floor(pendingTile.price * 0.3) * 2 ** (pending.level + 1) }}</b>
|
||||
</div>
|
||||
<div class="deed-row dim"><span>我的现金</span><b>¥{{ view.money[mySeat] ?? 0 }}</b></div>
|
||||
</div>
|
||||
<div class="deed-btns">
|
||||
<button class="btn" @click="battle.monoUpgrade(true)">升级</button>
|
||||
<button class="btn btn-ghost" @click="battle.monoUpgrade(false)">不升</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<p class="mono-tips text-dim">
|
||||
掷骰前进 · 无主地产可购买 · 回到自己地产可盖房（小屋/楼房/酒店，租金逐级翻倍）· 他人地产付租金（同色成组再翻倍）· 付不起即破产
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mono-wrap {
|
||||
padding: 14px;
|
||||
}
|
||||
.mono-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.round {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.turn-tag {
|
||||
font-weight: 700;
|
||||
}
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
aspect-ratio: 1;
|
||||
max-width: 620px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
/* ---- 地块 ---- */
|
||||
.tile {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
padding: 3px 2px 2px;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tile .band {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
background: var(--band);
|
||||
}
|
||||
.t-lvl {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 3px;
|
||||
font-size: 8px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
.tile.owned {
|
||||
box-shadow: inset 0 0 0 1.5px var(--owner);
|
||||
}
|
||||
.tile.flash {
|
||||
animation: tile-flash 0.4s ease-in-out 2;
|
||||
}
|
||||
@keyframes tile-flash {
|
||||
50% {
|
||||
background: color-mix(in srgb, var(--owner) 35%, var(--bg-card));
|
||||
}
|
||||
}
|
||||
.tile.go {
|
||||
background: color-mix(in srgb, var(--primary) 18%, var(--bg-card));
|
||||
}
|
||||
.tile.gotojail,
|
||||
.tile.jail {
|
||||
background: color-mix(in srgb, #888 14%, var(--bg-card));
|
||||
}
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.t-name {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.t-price {
|
||||
font-size: 9px;
|
||||
color: var(--text-dim);
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.owner-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* ---- 棋子层 ---- */
|
||||
.tokens-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
.token {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -12px 0 0 -12px;
|
||||
transition: left 0.15s ease-in-out, top 0.15s ease-in-out;
|
||||
}
|
||||
.token.flying {
|
||||
transition: left 0.7s cubic-bezier(0.3, 0, 0.2, 1), top 0.7s cubic-bezier(0.3, 0, 0.2, 1);
|
||||
z-index: 5;
|
||||
}
|
||||
.token.active {
|
||||
z-index: 4;
|
||||
}
|
||||
.token.out {
|
||||
opacity: 0.25;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
.token-body {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 65%, #fff), var(--tc));
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.token.active .token-body {
|
||||
box-shadow: 0 0 10px var(--tc), 0 2px 6px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.token.hopping .token-body {
|
||||
animation: hop 0.15s ease-in-out infinite;
|
||||
}
|
||||
.token.flying .token-body {
|
||||
animation: fly-pulse 0.7s ease-in-out;
|
||||
}
|
||||
@keyframes hop {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-7px) scale(1.12);
|
||||
}
|
||||
}
|
||||
@keyframes fly-pulse {
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
/* ---- 金钱漂浮 ---- */
|
||||
.fx-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 6;
|
||||
}
|
||||
.cash-float {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
animation: float-up 1.25s ease-out forwards;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cash-float.gain {
|
||||
color: #4ade80;
|
||||
}
|
||||
.cash-float.lose {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
@keyframes float-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
margin-top: -34px;
|
||||
}
|
||||
}
|
||||
/* ---- 事件横幅 ---- */
|
||||
.banner {
|
||||
position: absolute;
|
||||
top: 16%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
z-index: 7;
|
||||
background: rgba(10, 12, 24, 0.86);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.banner.good {
|
||||
color: #4ade80;
|
||||
border-color: #4ade8066;
|
||||
}
|
||||
.banner.bad {
|
||||
color: #ff6b6b;
|
||||
border-color: #ff6b6b66;
|
||||
}
|
||||
.banner.dim {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.banner.turn {
|
||||
color: var(--primary-2);
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.mbanner-enter-active,
|
||||
.mbanner-leave-active {
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
}
|
||||
.mbanner-enter-from,
|
||||
.mbanner-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-8px) scale(0.9);
|
||||
}
|
||||
/* ---- 中央区域 ---- */
|
||||
.center {
|
||||
grid-row: 2 / 7;
|
||||
grid-column: 2 / 7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.players {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.p-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 5px 9px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.p-row.cur {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.p-row.out {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.p-token {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
border: 1.5px solid #fff;
|
||||
}
|
||||
.p-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.p-money {
|
||||
color: var(--primary-2);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.p-assets {
|
||||
font-size: 10px;
|
||||
}
|
||||
.p-out {
|
||||
color: #ff6b6b;
|
||||
font-size: 10px;
|
||||
}
|
||||
.p-skip {
|
||||
font-size: 11px;
|
||||
}
|
||||
.dice-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.actions {
|
||||
text-align: center;
|
||||
}
|
||||
.roll-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.roll-btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.wait-hint {
|
||||
font-size: 12px;
|
||||
}
|
||||
/* ---- 弹层（机会卡 / 地契卡） ---- */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 9;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(4, 6, 14, 0.45);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.chance-card {
|
||||
width: min(230px, 70%);
|
||||
background: linear-gradient(160deg, #2a2350, #171232);
|
||||
border: 2px solid #8b7ae8;
|
||||
border-radius: 14px;
|
||||
padding: 18px 16px;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
|
||||
animation: card-flip 0.5s ease-out;
|
||||
}
|
||||
.cc-title {
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
color: #b8aaff;
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cc-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@keyframes card-flip {
|
||||
0% {
|
||||
transform: rotateY(90deg) scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
.deed-card {
|
||||
width: min(240px, 74%);
|
||||
background: var(--bg-panel, #141830);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
|
||||
animation: card-flip 0.4s ease-out;
|
||||
}
|
||||
.deed-band {
|
||||
padding: 9px;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
letter-spacing: 8px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.deed-name {
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
.deed-rows {
|
||||
padding: 4px 18px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.deed-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12.5px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.deed-row b {
|
||||
color: var(--primary-2);
|
||||
}
|
||||
.deed-row.dim {
|
||||
color: var(--text-dim);
|
||||
border-bottom: none;
|
||||
}
|
||||
.deed-btns {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
.deed-btns .btn {
|
||||
flex: 1;
|
||||
}
|
||||
.cardpop-enter-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.cardpop-leave-active {
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
.cardpop-enter-from,
|
||||
.cardpop-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.mono-tips {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
80
src/components/battle/PlayingCard.vue
Normal file
80
src/components/battle/PlayingCard.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
// 扑克牌组件：按编码渲染点数与花色（0-51 普通牌，52 小王，53 大王）
|
||||
const props = defineProps({
|
||||
card: { type: Number, required: true },
|
||||
small: { type: Boolean, default: false },
|
||||
selected: { type: Boolean, default: false },
|
||||
})
|
||||
const SUITS = ['♠', '♥', '♣', '♦']
|
||||
const RANKS = { 11: 'J', 12: 'Q', 13: 'K', 14: 'A', 15: '2' }
|
||||
|
||||
function rankOf(c) {
|
||||
if (c === 52) return '小王'
|
||||
if (c === 53) return '大王'
|
||||
const r = Math.floor(c / 4) + 3
|
||||
return RANKS[r] || String(r)
|
||||
}
|
||||
function suitOf(c) {
|
||||
if (c >= 52) return c === 53 ? '🃏' : '🂿'
|
||||
return SUITS[c % 4]
|
||||
}
|
||||
function isRed(c) {
|
||||
if (c === 53) return true
|
||||
if (c === 52) return false
|
||||
return c % 4 === 1 || c % 4 === 3
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pcard" :class="{ red: isRed(card), small, selected, joker: card >= 52 }">
|
||||
<span class="rank">{{ rankOf(card) }}</span>
|
||||
<span class="suit">{{ suitOf(card) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pcard {
|
||||
width: 46px;
|
||||
height: 64px;
|
||||
background: #fdfdfd;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #c9ccd6;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 3px 5px;
|
||||
color: #1c1e26;
|
||||
font-weight: 800;
|
||||
transition: transform 0.12s;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pcard.red {
|
||||
color: #d5303e;
|
||||
}
|
||||
.pcard.selected {
|
||||
transform: translateY(-14px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--accent);
|
||||
}
|
||||
.pcard.small {
|
||||
width: 34px;
|
||||
height: 48px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.rank {
|
||||
font-size: 15px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.small .rank {
|
||||
font-size: 12px;
|
||||
}
|
||||
.joker .rank {
|
||||
writing-mode: vertical-lr;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.suit {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
175
src/games/components/AimGame.vue
Normal file
175
src/games/components/AimGame.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
// 打靶训练：45 秒限时点击靶心，靶子会缩小消失，中心环分高
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 680
|
||||
const H = 500
|
||||
let ctx
|
||||
let loop
|
||||
let targets = [] // {x,y,r,maxR,life,maxLife}
|
||||
let pops = [] // 命中特效 {x,y,text,life}
|
||||
let score = 0
|
||||
let hits = 0
|
||||
let shots = 0
|
||||
let timeLeft = 45
|
||||
let countTimer = 0
|
||||
let spawnCd = 0
|
||||
let alive = false
|
||||
|
||||
function update(dt) {
|
||||
spawnCd -= dt
|
||||
if (spawnCd <= 0 && targets.length < 4) {
|
||||
const maxR = randInt(26, 42)
|
||||
targets.push({
|
||||
x: randInt(maxR + 10, W - maxR - 10),
|
||||
y: randInt(maxR + 40, H - maxR - 10),
|
||||
maxR,
|
||||
life: 0,
|
||||
maxLife: randInt(16, 24) / 10, // 1.6~2.4 秒生命周期
|
||||
})
|
||||
spawnCd = randInt(4, 8) / 10
|
||||
}
|
||||
// 靶子先长大后缩小，超时消失
|
||||
targets.forEach((t) => (t.life += dt))
|
||||
targets = targets.filter((t) => t.life < t.maxLife)
|
||||
pops.forEach((p) => (p.life -= dt))
|
||||
pops = pops.filter((p) => p.life > 0)
|
||||
draw()
|
||||
}
|
||||
|
||||
// 当前显示半径：前 30% 时间长大，后 70% 缩小
|
||||
function radiusOf(t) {
|
||||
const k = t.life / t.maxLife
|
||||
return k < 0.3 ? t.maxR * (k / 0.3) : t.maxR * (1 - (k - 0.3) / 0.7)
|
||||
}
|
||||
|
||||
function shoot(e) {
|
||||
if (!alive) return
|
||||
shots++
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
const x = (e.clientX - rect.left) * scale
|
||||
const y = (e.clientY - rect.top) * scale
|
||||
// 从最上层的靶子开始判定
|
||||
for (let i = targets.length - 1; i >= 0; i--) {
|
||||
const t = targets[i]
|
||||
const r = radiusOf(t)
|
||||
const d = Math.hypot(t.x - x, t.y - y)
|
||||
if (d <= r) {
|
||||
hits++
|
||||
// 环分：中心 20 / 中环 10 / 外环 5
|
||||
const gained = d < r * 0.33 ? 20 : d < r * 0.66 ? 10 : 5
|
||||
score += gained
|
||||
emit('score', score)
|
||||
pops.push({ x: t.x, y: t.y, text: `+${gained}`, life: 0.6 })
|
||||
targets.splice(i, 1)
|
||||
return
|
||||
}
|
||||
}
|
||||
// 空枪扣 2 分
|
||||
score = Math.max(0, score - 2)
|
||||
emit('score', score)
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 靶子（三环）
|
||||
targets.forEach((t) => {
|
||||
const r = radiusOf(t)
|
||||
if (r < 2) return
|
||||
;[
|
||||
[r, '#ff5d73'],
|
||||
[r * 0.66, '#ffffff'],
|
||||
[r * 0.33, '#ff5d73'],
|
||||
].forEach(([rr, color]) => {
|
||||
ctx.fillStyle = color
|
||||
ctx.beginPath()
|
||||
ctx.arc(t.x, t.y, rr, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.beginPath()
|
||||
ctx.arc(t.x, t.y, 2.5, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 命中飘字
|
||||
pops.forEach((pp) => {
|
||||
ctx.globalAlpha = Math.max(0, pp.life / 0.6)
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.font = 'bold 20px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(pp.text, pp.x, pp.y - (0.6 - pp.life) * 50)
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
// HUD
|
||||
ctx.fillStyle = timeLeft <= 10 ? '#ff5d73' : p.text
|
||||
ctx.font = 'bold 22px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`⏱ ${timeLeft}`, 12, 10)
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '13px sans-serif'
|
||||
const acc = shots ? Math.round((hits / shots) * 100) : 100
|
||||
ctx.fillText(`命中率 ${acc}%`, 12, 40)
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft--
|
||||
if (timeLeft <= 0) {
|
||||
alive = false
|
||||
clearInterval(countTimer)
|
||||
loop.stop()
|
||||
// 命中率奖励：≥70% 额外 +50
|
||||
if (shots > 5 && hits / shots >= 0.7) score += 50
|
||||
emit('score', score)
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
targets = []
|
||||
pops = []
|
||||
score = 0
|
||||
hits = 0
|
||||
shots = 0
|
||||
timeLeft = 45
|
||||
spawnCd = 0.2
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
clearInterval(countTimer)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
clearInterval(countTimer)
|
||||
}
|
||||
// 时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && alive) {
|
||||
timeLeft += 30
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('pointerdown', shoot)
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H" style="cursor: crosshair"></canvas>
|
||||
</template>
|
||||
270
src/games/components/AsteroidsGame.vue
Normal file
270
src/games/components/AsteroidsGame.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<script setup>
|
||||
// 小行星：旋转喷射的飞船击碎陨石，大陨石会分裂成小块
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 680
|
||||
const H = 560
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let ship = { x: W / 2, y: H / 2, angle: -Math.PI / 2, vx: 0, vy: 0 }
|
||||
let rocks = [] // {x,y,vx,vy,size:3|2|1,rot,vr}
|
||||
let bullets = [] // {x,y,vx,vy,life}
|
||||
let score = 0
|
||||
let waveNum = 1
|
||||
let alive = false
|
||||
let fireCd = 0
|
||||
let shieldOn = false
|
||||
let invincible = 0
|
||||
|
||||
// 环绕包裹坐标
|
||||
function wrap(o) {
|
||||
if (o.x < -30) o.x = W + 30
|
||||
if (o.x > W + 30) o.x = -30
|
||||
if (o.y < -30) o.y = H + 30
|
||||
if (o.y > H + 30) o.y = -30
|
||||
}
|
||||
|
||||
function spawnRocks(count) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
// 从边缘生成，避免直接压到飞船
|
||||
let x, y
|
||||
do {
|
||||
x = randInt(0, W)
|
||||
y = randInt(0, H)
|
||||
} while (Math.hypot(x - ship.x, y - ship.y) < 160)
|
||||
rocks.push({
|
||||
x, y,
|
||||
vx: randInt(-80, 80) || 40,
|
||||
vy: randInt(-80, 80) || -40,
|
||||
size: 3,
|
||||
rot: 0,
|
||||
vr: (Math.random() - 0.5) * 2,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function rockRadius(size) {
|
||||
return size === 3 ? 38 : size === 2 ? 24 : 13
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
fireCd -= dt
|
||||
// 旋转与推进
|
||||
if (keys.has('ArrowLeft') || keys.has('a')) ship.angle -= 3.6 * dt
|
||||
if (keys.has('ArrowRight') || keys.has('d')) ship.angle += 3.6 * dt
|
||||
if (keys.has('ArrowUp') || keys.has('w')) {
|
||||
ship.vx += Math.cos(ship.angle) * 320 * dt
|
||||
ship.vy += Math.sin(ship.angle) * 320 * dt
|
||||
}
|
||||
// 阻尼
|
||||
ship.vx *= 1 - 0.35 * dt
|
||||
ship.vy *= 1 - 0.35 * dt
|
||||
ship.x += ship.vx * dt
|
||||
ship.y += ship.vy * dt
|
||||
wrap(ship)
|
||||
// 开火
|
||||
if (keys.has(' ') && fireCd <= 0) {
|
||||
bullets.push({
|
||||
x: ship.x + Math.cos(ship.angle) * 16,
|
||||
y: ship.y + Math.sin(ship.angle) * 16,
|
||||
vx: Math.cos(ship.angle) * 520 + ship.vx,
|
||||
vy: Math.sin(ship.angle) * 520 + ship.vy,
|
||||
life: 1.1,
|
||||
})
|
||||
fireCd = 0.24
|
||||
}
|
||||
bullets.forEach((b) => {
|
||||
b.x += b.vx * dt
|
||||
b.y += b.vy * dt
|
||||
b.life -= dt
|
||||
wrap(b)
|
||||
})
|
||||
bullets = bullets.filter((b) => b.life > 0)
|
||||
// 陨石运动
|
||||
rocks.forEach((r) => {
|
||||
r.x += r.vx * dt
|
||||
r.y += r.vy * dt
|
||||
r.rot += r.vr * dt
|
||||
wrap(r)
|
||||
})
|
||||
// 子弹命中陨石：大石分裂
|
||||
const newRocks = []
|
||||
bullets = bullets.filter((b) => {
|
||||
for (const r of rocks) {
|
||||
if (r.dead) continue
|
||||
if (Math.hypot(r.x - b.x, r.y - b.y) < rockRadius(r.size)) {
|
||||
r.dead = true
|
||||
score += r.size === 3 ? 20 : r.size === 2 ? 30 : 50
|
||||
emit('score', score)
|
||||
if (r.size > 1) {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
newRocks.push({
|
||||
x: r.x, y: r.y,
|
||||
vx: randInt(-140, 140) || 70,
|
||||
vy: randInt(-140, 140) || -70,
|
||||
size: r.size - 1,
|
||||
rot: 0,
|
||||
vr: (Math.random() - 0.5) * 3,
|
||||
})
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
rocks = rocks.filter((r) => !r.dead).concat(newRocks)
|
||||
// 陨石撞飞船
|
||||
if (invincible <= 0) {
|
||||
for (const r of rocks) {
|
||||
if (Math.hypot(r.x - ship.x, r.y - ship.y) < rockRadius(r.size) + 12) {
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
invincible = 1.4
|
||||
} else {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 清场 → 下一波
|
||||
if (rocks.length === 0) {
|
||||
score += 100
|
||||
waveNum++
|
||||
emit('score', score)
|
||||
spawnRocks(2 + waveNum)
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 飞船（三角形，无敌闪烁）
|
||||
if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
|
||||
ctx.save()
|
||||
ctx.translate(ship.x, ship.y)
|
||||
ctx.rotate(ship.angle + Math.PI / 2)
|
||||
ctx.fillStyle = p.accent
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, -16)
|
||||
ctx.lineTo(11, 12)
|
||||
ctx.lineTo(0, 6)
|
||||
ctx.lineTo(-11, 12)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
// 推进火焰
|
||||
if (keys.has('ArrowUp') || keys.has('w')) {
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(-5, 12)
|
||||
ctx.lineTo(0, 22 + Math.random() * 6)
|
||||
ctx.lineTo(5, 12)
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
if (shieldOn) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(ship.x, ship.y, 26, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 陨石（多边形）
|
||||
ctx.strokeStyle = p.dim
|
||||
ctx.lineWidth = 2
|
||||
rocks.forEach((r) => {
|
||||
const rad = rockRadius(r.size)
|
||||
ctx.save()
|
||||
ctx.translate(r.x, r.y)
|
||||
ctx.rotate(r.rot)
|
||||
ctx.beginPath()
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const a = (i / 8) * Math.PI * 2
|
||||
const rr = rad * (0.82 + ((i * 7919) % 10) / 33) // 固定伪随机凹凸
|
||||
if (i === 0) ctx.moveTo(Math.cos(a) * rr, Math.sin(a) * rr)
|
||||
else ctx.lineTo(Math.cos(a) * rr, Math.sin(a) * rr)
|
||||
}
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
})
|
||||
// 子弹
|
||||
ctx.fillStyle = p.primary2
|
||||
bullets.forEach((b) => {
|
||||
ctx.beginPath()
|
||||
ctx.arc(b.x, b.y, 3, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 波次
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '13px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`第 ${waveNum} 波`, 10, 8)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
ship = { x: W / 2, y: H / 2, angle: -Math.PI / 2, vx: 0, vy: 0 }
|
||||
rocks = []
|
||||
bullets = []
|
||||
score = 0
|
||||
waveNum = 1
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
alive = true
|
||||
spawnRocks(3)
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活：原地复活+2秒无敌；炸弹：清除全部陨石；护盾：挡一次
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
invincible = 2
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'bomb' && alive) {
|
||||
score += rocks.length * 15
|
||||
emit('score', score)
|
||||
rocks = []
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
251
src/games/components/BallMaze3dGame.vue
Normal file
251
src/games/components/BallMaze3dGame.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<script setup>
|
||||
// 3D 滚球迷宫（Three.js）：方向键倾斜迷宫，小球滚到金色终点，限时闯关
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { Keys } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const holder = ref(null)
|
||||
const W = 640
|
||||
const H = 560
|
||||
const N = 11 // 迷宫格数（奇数）
|
||||
const CELL = 1
|
||||
let renderer, scene, camera, rafId
|
||||
let keys
|
||||
let boardGroup // 整个迷宫组（倾斜它实现"倾斜迷宫"）
|
||||
let ball, goalMesh
|
||||
let ballV = { x: 0, z: 0 }
|
||||
let ballPos = { x: 0, z: 0 }
|
||||
let maze = []
|
||||
const level = ref(1)
|
||||
let score = 0
|
||||
const timeLeft = ref(60)
|
||||
let countTimer = 0
|
||||
let alive = false
|
||||
let lastTs = 0
|
||||
|
||||
// 生成迷宫（深度优先挖墙，1=墙 0=路）
|
||||
function genMaze() {
|
||||
maze = Array.from({ length: N }, () => Array(N).fill(1))
|
||||
const stack = [[1, 1]]
|
||||
maze[1][1] = 0
|
||||
while (stack.length) {
|
||||
const [cx, cy] = stack[stack.length - 1]
|
||||
const dirs = [[2, 0], [-2, 0], [0, 2], [0, -2]].sort(() => Math.random() - 0.5)
|
||||
let moved = false
|
||||
for (const [dx, dy] of dirs) {
|
||||
const nx = cx + dx
|
||||
const ny = cy + dy
|
||||
if (nx > 0 && nx < N - 1 && ny > 0 && ny < N - 1 && maze[ny][nx] === 1) {
|
||||
maze[ny][nx] = 0
|
||||
maze[cy + dy / 2][cx + dx / 2] = 0
|
||||
stack.push([nx, ny])
|
||||
moved = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!moved) stack.pop()
|
||||
}
|
||||
maze[N - 2][N - 2] = 0 // 终点
|
||||
}
|
||||
|
||||
// 网格坐标 → 世界坐标（迷宫居中）
|
||||
function toWorld(gx, gz) {
|
||||
return { x: (gx - (N - 1) / 2) * CELL, z: (gz - (N - 1) / 2) * CELL }
|
||||
}
|
||||
|
||||
// 构建迷宫场景
|
||||
function buildBoard() {
|
||||
if (boardGroup) scene.remove(boardGroup)
|
||||
boardGroup = new THREE.Group()
|
||||
// 地板
|
||||
const floor = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(N * CELL, 0.3, N * CELL),
|
||||
new THREE.MeshLambertMaterial({ color: '#2a2c5e' })
|
||||
)
|
||||
floor.position.y = -0.15
|
||||
boardGroup.add(floor)
|
||||
// 墙体
|
||||
const wallMat = new THREE.MeshLambertMaterial({ color: '#4f8cff' })
|
||||
for (let z = 0; z < N; z++) {
|
||||
for (let x = 0; x < N; x++) {
|
||||
if (maze[z][x] === 1) {
|
||||
const wall = new THREE.Mesh(new THREE.BoxGeometry(CELL, 0.8, CELL), wallMat)
|
||||
const w = toWorld(x, z)
|
||||
wall.position.set(w.x, 0.4, w.z)
|
||||
boardGroup.add(wall)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 终点（发光金块）
|
||||
goalMesh = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(CELL * 0.7, 0.1, CELL * 0.7),
|
||||
new THREE.MeshBasicMaterial({ color: '#ffd500' })
|
||||
)
|
||||
const g = toWorld(N - 2, N - 2)
|
||||
goalMesh.position.set(g.x, 0.06, g.z)
|
||||
boardGroup.add(goalMesh)
|
||||
// 小球
|
||||
ball = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(0.3, 24, 24),
|
||||
new THREE.MeshPhongMaterial({ color: '#ff3e7f', shininess: 80 })
|
||||
)
|
||||
const s = toWorld(1, 1)
|
||||
ballPos = { x: s.x, z: s.z }
|
||||
ballV = { x: 0, z: 0 }
|
||||
ball.position.set(s.x, 0.3, s.z)
|
||||
boardGroup.add(ball)
|
||||
scene.add(boardGroup)
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color('#0d0e2b')
|
||||
camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100)
|
||||
camera.position.set(0, 12, 7.5)
|
||||
camera.lookAt(0, 0, 0)
|
||||
const dir = new THREE.DirectionalLight(0xffffff, 1.4)
|
||||
dir.position.set(5, 10, 5)
|
||||
scene.add(dir)
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.65))
|
||||
}
|
||||
|
||||
// 球所在网格是否墙（用于碰撞）
|
||||
function isWall(wx, wz) {
|
||||
const gx = Math.round(wx / CELL + (N - 1) / 2)
|
||||
const gz = Math.round(wz / CELL + (N - 1) / 2)
|
||||
if (gx < 0 || gx >= N || gz < 0 || gz >= N) return true
|
||||
return maze[gz][gx] === 1
|
||||
}
|
||||
|
||||
function animate(ts) {
|
||||
rafId = requestAnimationFrame(animate)
|
||||
const dt = Math.min((ts - lastTs) / 1000 || 0.016, 0.05)
|
||||
lastTs = ts
|
||||
if (alive) {
|
||||
// 按键 → 倾斜角
|
||||
const maxTilt = 0.32
|
||||
const targetX = (keys.has('ArrowDown') || keys.has('s') ? maxTilt : 0) - (keys.has('ArrowUp') || keys.has('w') ? maxTilt : 0)
|
||||
const targetZ = (keys.has('ArrowLeft') || keys.has('a') ? maxTilt : 0) - (keys.has('ArrowRight') || keys.has('d') ? maxTilt : 0)
|
||||
boardGroup.rotation.x += (targetX - boardGroup.rotation.x) * 6 * dt
|
||||
boardGroup.rotation.z += (targetZ - boardGroup.rotation.z) * 6 * dt
|
||||
// 倾斜产生加速度（重力沿斜面分量）
|
||||
const g = 14
|
||||
ballV.x += Math.sin(boardGroup.rotation.z) * -g * dt
|
||||
ballV.z += Math.sin(boardGroup.rotation.x) * g * dt
|
||||
// 阻尼
|
||||
ballV.x *= 1 - 0.8 * dt
|
||||
ballV.z *= 1 - 0.8 * dt
|
||||
// 分轴移动 + 墙体碰撞（球半径 0.3）
|
||||
const r = 0.32
|
||||
let nx = ballPos.x + ballV.x * dt
|
||||
if (
|
||||
isWall(nx + Math.sign(ballV.x) * r, ballPos.z - r * 0.7) ||
|
||||
isWall(nx + Math.sign(ballV.x) * r, ballPos.z + r * 0.7)
|
||||
) {
|
||||
ballV.x *= -0.25 // 撞墙轻微反弹
|
||||
} else {
|
||||
ballPos.x = nx
|
||||
}
|
||||
let nz = ballPos.z + ballV.z * dt
|
||||
if (
|
||||
isWall(ballPos.x - r * 0.7, nz + Math.sign(ballV.z) * r) ||
|
||||
isWall(ballPos.x + r * 0.7, nz + Math.sign(ballV.z) * r)
|
||||
) {
|
||||
ballV.z *= -0.25
|
||||
} else {
|
||||
ballPos.z = nz
|
||||
}
|
||||
ball.position.set(ballPos.x, 0.3, ballPos.z)
|
||||
// 终点判定
|
||||
if (Math.hypot(ballPos.x - goalMesh.position.x, ballPos.z - goalMesh.position.z) < 0.45) {
|
||||
// 过关：+80 + 剩余时间，刷新迷宫并补时
|
||||
score += 80 + timeLeft.value
|
||||
timeLeft.value = Math.min(90, timeLeft.value + 15)
|
||||
level.value++
|
||||
emit('score', score)
|
||||
genMaze()
|
||||
buildBoard()
|
||||
}
|
||||
// 终点呼吸灯
|
||||
goalMesh.material.color.setHSL(0.14, 1, 0.5 + 0.2 * Math.sin(ts / 200))
|
||||
}
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft.value--
|
||||
if (timeLeft.value <= 0) {
|
||||
alive = false
|
||||
clearInterval(countTimer)
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
score = 0
|
||||
level.value = 1
|
||||
timeLeft.value = 60
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
genMaze()
|
||||
buildBoard()
|
||||
boardGroup.rotation.set(0, 0, 0)
|
||||
clearInterval(countTimer)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
}
|
||||
function stop() {
|
||||
cancelAnimationFrame(rafId)
|
||||
clearInterval(countTimer)
|
||||
keys?.detach()
|
||||
renderer?.dispose()
|
||||
}
|
||||
// 时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && alive) {
|
||||
timeLeft.value += 30
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setSize(W, H)
|
||||
holder.value.appendChild(renderer.domElement)
|
||||
renderer.domElement.style.borderRadius = '10px'
|
||||
renderer.domElement.style.maxWidth = '100%'
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
initScene()
|
||||
genMaze()
|
||||
buildBoard()
|
||||
animate(0)
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrap3d">
|
||||
<div ref="holder"></div>
|
||||
<div class="hud3d">⏱ {{ timeLeft }}s · 第 {{ level }} 关</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrap3d {
|
||||
position: relative;
|
||||
}
|
||||
.hud3d {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 12px;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
206
src/games/components/BreakoutGame.vue
Normal file
206
src/games/components/BreakoutGame.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<script setup>
|
||||
// 打砖块：挡板反弹小球击碎砖块，越上层分越高
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 760
|
||||
const H = 500
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let paddle = { x: W / 2 - 55, w: 110, h: 14 }
|
||||
let ball = { x: W / 2, y: H - 60, vx: 240, vy: -300, r: 8 }
|
||||
let bricks = [] // {x,y,w,h,hp,row}
|
||||
let score = 0
|
||||
let livesLeft = 3
|
||||
let alive = false
|
||||
let launched = false
|
||||
const BRICK_COLORS = ['#ff5d73', '#ff9f45', '#ffd500', '#4ade80', '#00e5ff']
|
||||
|
||||
// 生成砖块阵：8 列 × 5 行，上层砖更硬更值钱
|
||||
function buildBricks() {
|
||||
bricks = []
|
||||
const cols = 10
|
||||
const bw = (W - 40 - (cols - 1) * 6) / cols
|
||||
for (let row = 0; row < 5; row++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
bricks.push({
|
||||
x: 20 + c * (bw + 6),
|
||||
y: 50 + row * 26,
|
||||
w: bw,
|
||||
h: 20,
|
||||
hp: row < 1 ? 2 : 1, // 顶排两滴血
|
||||
row,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetBall() {
|
||||
ball = { x: paddle.x + paddle.w / 2, y: H - 60, vx: 240 * (Math.random() < 0.5 ? 1 : -1), vy: -300, r: 8 }
|
||||
launched = false
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
// 键盘移动挡板
|
||||
if (keys.has('ArrowLeft')) paddle.x -= 480 * dt
|
||||
if (keys.has('ArrowRight')) paddle.x += 480 * dt
|
||||
paddle.x = Math.max(0, Math.min(W - paddle.w, paddle.x))
|
||||
if (!launched) {
|
||||
// 未发射时球黏在挡板上
|
||||
ball.x = paddle.x + paddle.w / 2
|
||||
ball.y = H - 40 - ball.r
|
||||
draw()
|
||||
return
|
||||
}
|
||||
ball.x += ball.vx * dt
|
||||
ball.y += ball.vy * dt
|
||||
// 撞墙反弹
|
||||
if (ball.x < ball.r || ball.x > W - ball.r) {
|
||||
ball.vx *= -1
|
||||
ball.x = Math.max(ball.r, Math.min(W - ball.r, ball.x))
|
||||
}
|
||||
if (ball.y < ball.r) {
|
||||
ball.vy *= -1
|
||||
ball.y = ball.r
|
||||
}
|
||||
// 挡板反弹（按落点位置改变角度）
|
||||
if (ball.vy > 0 && ball.y > H - 40 - ball.r && ball.y < H - 20 && ball.x > paddle.x - ball.r && ball.x < paddle.x + paddle.w + ball.r) {
|
||||
const t = (ball.x - paddle.x - paddle.w / 2) / (paddle.w / 2)
|
||||
const speed = Math.hypot(ball.vx, ball.vy) * 1.02 // 每次反弹微加速
|
||||
const angle = t * (Math.PI / 3) // 最大 60 度
|
||||
ball.vx = speed * Math.sin(angle)
|
||||
ball.vy = -Math.abs(speed * Math.cos(angle))
|
||||
}
|
||||
// 撞砖
|
||||
for (const b of bricks) {
|
||||
if (b.hp <= 0) continue
|
||||
if (ball.x > b.x - ball.r && ball.x < b.x + b.w + ball.r && ball.y > b.y - ball.r && ball.y < b.y + b.h + ball.r) {
|
||||
b.hp--
|
||||
// 简单反弹：按进入深度判断水平还是垂直
|
||||
const fromLeft = Math.abs(ball.x - b.x)
|
||||
const fromRight = Math.abs(ball.x - (b.x + b.w))
|
||||
const fromTop = Math.abs(ball.y - b.y)
|
||||
const fromBottom = Math.abs(ball.y - (b.y + b.h))
|
||||
const minH = Math.min(fromLeft, fromRight)
|
||||
const minV = Math.min(fromTop, fromBottom)
|
||||
if (minH < minV) ball.vx *= -1
|
||||
else ball.vy *= -1
|
||||
if (b.hp <= 0) {
|
||||
score += (5 - b.row) * 10 // 越上层越值钱
|
||||
emit('score', score)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
// 全部击碎 → 胜利加分并重开一面更快的砖墙
|
||||
if (bricks.every((b) => b.hp <= 0)) {
|
||||
score += 200
|
||||
emit('score', score)
|
||||
buildBricks()
|
||||
resetBall()
|
||||
}
|
||||
// 球落底
|
||||
if (ball.y > H + ball.r) {
|
||||
livesLeft--
|
||||
if (livesLeft <= 0) {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
resetBall()
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 砖块
|
||||
bricks.forEach((b) => {
|
||||
if (b.hp <= 0) return
|
||||
ctx.fillStyle = BRICK_COLORS[b.row]
|
||||
ctx.globalAlpha = b.hp === 2 ? 1 : 0.88
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(b.x, b.y, b.w, b.h, 5)
|
||||
ctx.fill()
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
// 挡板
|
||||
ctx.fillStyle = p.primary
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(paddle.x, H - 40, paddle.w, paddle.h, 7)
|
||||
ctx.fill()
|
||||
// 球
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.beginPath()
|
||||
ctx.arc(ball.x, ball.y, ball.r, 0, 7)
|
||||
ctx.fill()
|
||||
// 生命
|
||||
ctx.font = '16px serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText('❤️'.repeat(Math.max(0, livesLeft)), 10, 8)
|
||||
}
|
||||
|
||||
function onMouse(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
paddle.x = (e.clientX - rect.left) * scale - paddle.w / 2
|
||||
paddle.x = Math.max(0, Math.min(W - paddle.w, paddle.x))
|
||||
}
|
||||
function onClick() {
|
||||
launched = true
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
score = 0
|
||||
livesLeft = 3
|
||||
alive = true
|
||||
buildBricks()
|
||||
resetBall()
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活卡：+1 条命继续
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
livesLeft = 1
|
||||
alive = true
|
||||
resetBall()
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
keys.onPress((k) => {
|
||||
if (k === ' ') launched = true
|
||||
})
|
||||
canvas.value.addEventListener('mousemove', onMouse)
|
||||
canvas.value.addEventListener('click', onClick)
|
||||
loop = createLoop(update)
|
||||
buildBricks()
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
333
src/games/components/BubbleGame.vue
Normal file
333
src/games/components/BubbleGame.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<script setup>
|
||||
// 泡泡龙：发射彩色泡泡，三连同色消除，泡泡压到底线失败
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 560
|
||||
const H = 600
|
||||
const R = 20 // 泡泡半径
|
||||
const COLS = 13
|
||||
let ctx
|
||||
let loop
|
||||
let grid = new Map() // "row,col" -> colorIdx（奇数行错位半格）
|
||||
let shooter = { angle: -Math.PI / 2, current: 0, next: 0 }
|
||||
let flying = null // 飞行中的泡泡 {x,y,vx,vy,color}
|
||||
let score = 0
|
||||
let alive = false
|
||||
let shotCount = 0 // 每 6 发整体下压一行
|
||||
let rowOffset = 0 // 顶部已下压的行数
|
||||
const COLORS = ['#ff5d73', '#ffd500', '#4ade80', '#4f8cff', '#b26bff']
|
||||
|
||||
// 网格坐标 → 像素中心
|
||||
function cellPos(row, col) {
|
||||
const offset = (row + rowOffset) % 2 === 1 ? R : 0
|
||||
return { x: col * R * 2 + R + offset, y: row * R * 1.75 + R + 4 }
|
||||
}
|
||||
|
||||
// 初始 5 行泡泡
|
||||
function buildGrid() {
|
||||
grid.clear()
|
||||
rowOffset = 0
|
||||
for (let row = 0; row < 5; row++) {
|
||||
const cols = COLS - ((row + rowOffset) % 2)
|
||||
for (let col = 0; col < cols; col++) {
|
||||
grid.set(`${row},${col}`, randInt(0, COLORS.length - 1))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 场上仍存在的颜色（发射器只给有用的颜色）
|
||||
function activeColors() {
|
||||
const set = new Set(grid.values())
|
||||
return set.size ? [...set] : [0]
|
||||
}
|
||||
|
||||
function nextBubble() {
|
||||
const colors = activeColors()
|
||||
shooter.current = shooter.next
|
||||
if (!colors.includes(shooter.current)) shooter.current = colors[randInt(0, colors.length - 1)]
|
||||
shooter.next = colors[randInt(0, colors.length - 1)]
|
||||
}
|
||||
|
||||
// 找飞行泡泡吸附的最近空格
|
||||
function snapCell(x, y) {
|
||||
let best = null
|
||||
let bestDist = 1e9
|
||||
const maxRow = Math.ceil(H / (R * 1.75))
|
||||
for (let row = 0; row < maxRow; row++) {
|
||||
const cols = COLS - ((row + rowOffset) % 2)
|
||||
for (let col = 0; col < cols; col++) {
|
||||
if (grid.has(`${row},${col}`)) continue
|
||||
const p = cellPos(row, col)
|
||||
const d = Math.hypot(p.x - x, p.y - y)
|
||||
if (d < bestDist) {
|
||||
bestDist = d
|
||||
best = { row, col }
|
||||
}
|
||||
}
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
// 六边形邻居
|
||||
function neighborKeys(row, col) {
|
||||
const odd = (row + rowOffset) % 2 === 1
|
||||
const deltas = odd
|
||||
? [[0, -1], [0, 1], [-1, 0], [-1, 1], [1, 0], [1, 1]]
|
||||
: [[0, -1], [0, 1], [-1, -1], [-1, 0], [1, -1], [1, 0]]
|
||||
return deltas.map(([dr, dc]) => `${row + dr},${col + dc}`)
|
||||
}
|
||||
|
||||
// 同色连通块
|
||||
function sameColorCluster(row, col, color) {
|
||||
const seen = new Set()
|
||||
const stack = [`${row},${col}`]
|
||||
while (stack.length) {
|
||||
const key = stack.pop()
|
||||
if (seen.has(key) || grid.get(key) !== color) continue
|
||||
seen.add(key)
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
neighborKeys(r, c).forEach((k) => {
|
||||
if (!seen.has(k) && grid.has(k)) stack.push(k)
|
||||
})
|
||||
}
|
||||
return seen
|
||||
}
|
||||
|
||||
// 移除悬空泡泡（不与顶行连通的全部掉落）
|
||||
function dropFloating() {
|
||||
const anchored = new Set()
|
||||
const stack = []
|
||||
for (const key of grid.keys()) {
|
||||
if (key.startsWith('0,')) stack.push(key)
|
||||
}
|
||||
while (stack.length) {
|
||||
const key = stack.pop()
|
||||
if (anchored.has(key) || !grid.has(key)) continue
|
||||
anchored.add(key)
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
neighborKeys(r, c).forEach((k) => {
|
||||
if (grid.has(k) && !anchored.has(k)) stack.push(k)
|
||||
})
|
||||
}
|
||||
let dropped = 0
|
||||
for (const key of [...grid.keys()]) {
|
||||
if (!anchored.has(key)) {
|
||||
grid.delete(key)
|
||||
dropped++
|
||||
}
|
||||
}
|
||||
return dropped
|
||||
}
|
||||
|
||||
// 泡泡落定后的消除结算
|
||||
function settle(row, col, color) {
|
||||
grid.set(`${row},${col}`, color)
|
||||
const cluster = sameColorCluster(row, col, color)
|
||||
if (cluster.size >= 3) {
|
||||
cluster.forEach((k) => grid.delete(k))
|
||||
const dropped = dropFloating()
|
||||
// 消除 10 分/个，掉落 20 分/个
|
||||
score += cluster.size * 10 + dropped * 20
|
||||
emit('score', score)
|
||||
}
|
||||
// 全清奖励并刷新一批
|
||||
if (grid.size === 0) {
|
||||
score += 300
|
||||
emit('score', score)
|
||||
buildGrid()
|
||||
}
|
||||
// 每 6 发下压一行
|
||||
shotCount++
|
||||
if (shotCount % 6 === 0) {
|
||||
pushDown()
|
||||
}
|
||||
// 失败判定：泡泡越过底线
|
||||
for (const key of grid.keys()) {
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
if (cellPos(r, c).y > H - 90) {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
}
|
||||
nextBubble()
|
||||
}
|
||||
|
||||
// 整体下压一行：所有行号 +1，顶部生成新行
|
||||
function pushDown() {
|
||||
const entries = [...grid.entries()]
|
||||
grid.clear()
|
||||
rowOffset ^= 1 // 奇偶错位翻转
|
||||
entries.forEach(([key, v]) => {
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
grid.set(`${r + 1},${c}`, v)
|
||||
})
|
||||
const cols = COLS - (rowOffset % 2)
|
||||
for (let col = 0; col < cols; col++) {
|
||||
grid.set(`0,${col}`, randInt(0, COLORS.length - 1))
|
||||
}
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (flying) {
|
||||
flying.x += flying.vx * dt
|
||||
flying.y += flying.vy * dt
|
||||
// 左右墙反弹
|
||||
if (flying.x < R || flying.x > W - R) {
|
||||
flying.vx *= -1
|
||||
flying.x = Math.max(R, Math.min(W - R, flying.x))
|
||||
}
|
||||
// 顶部或碰到已有泡泡 → 吸附
|
||||
let hit = flying.y < R + 4
|
||||
if (!hit) {
|
||||
for (const key of grid.keys()) {
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
const p = cellPos(r, c)
|
||||
if (Math.hypot(p.x - flying.x, p.y - flying.y) < R * 1.8) {
|
||||
hit = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hit) {
|
||||
const cell = snapCell(flying.x, flying.y)
|
||||
const color = flying.color
|
||||
flying = null
|
||||
if (cell) settle(cell.row, cell.col, color)
|
||||
}
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 场上泡泡
|
||||
for (const [key, colorIdx] of grid) {
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
const pos = cellPos(r, c)
|
||||
drawBubble(pos.x, pos.y, COLORS[colorIdx])
|
||||
}
|
||||
// 底线
|
||||
ctx.strokeStyle = p.primary
|
||||
ctx.setLineDash([8, 8])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, H - 90)
|
||||
ctx.lineTo(W, H - 90)
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
// 瞄准线
|
||||
const sx = W / 2
|
||||
const sy = H - 40
|
||||
ctx.strokeStyle = p.dim
|
||||
ctx.setLineDash([4, 8])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(sx, sy)
|
||||
ctx.lineTo(sx + Math.cos(shooter.angle) * 130, sy + Math.sin(shooter.angle) * 130)
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
// 飞行中的泡泡
|
||||
if (flying) drawBubble(flying.x, flying.y, COLORS[flying.color])
|
||||
// 发射器当前/下一个
|
||||
drawBubble(sx, sy, COLORS[shooter.current])
|
||||
drawBubble(sx + 56, sy + 10, COLORS[shooter.next], 0.62)
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '11px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText('下一个', sx + 56, sy + 40)
|
||||
}
|
||||
|
||||
function drawBubble(x, y, color, scale = 1) {
|
||||
const r = R * scale
|
||||
const grad = ctx.createRadialGradient(x - r / 3, y - r / 3, r / 5, x, y, r)
|
||||
grad.addColorStop(0, '#ffffffcc')
|
||||
grad.addColorStop(0.25, color)
|
||||
grad.addColorStop(1, color)
|
||||
ctx.fillStyle = grad
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, r - 1, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
function aim(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
const x = (e.clientX - rect.left) * scale
|
||||
const y = (e.clientY - rect.top) * scale
|
||||
const angle = Math.atan2(y - (H - 40), x - W / 2)
|
||||
// 限制向上扇形范围
|
||||
shooter.angle = Math.max(-Math.PI + 0.25, Math.min(-0.25, angle))
|
||||
}
|
||||
|
||||
function shoot() {
|
||||
if (!alive || flying) return
|
||||
const speed = 640
|
||||
flying = {
|
||||
x: W / 2,
|
||||
y: H - 40,
|
||||
vx: Math.cos(shooter.angle) * speed,
|
||||
vy: Math.sin(shooter.angle) * speed,
|
||||
color: shooter.current,
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
buildGrid()
|
||||
score = 0
|
||||
shotCount = 0
|
||||
flying = null
|
||||
alive = true
|
||||
shooter.next = randInt(0, COLORS.length - 1)
|
||||
nextBubble()
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
}
|
||||
// 炸弹清屏：清除最下面两行泡泡
|
||||
function useProp(code) {
|
||||
if (code !== 'bomb' || !alive) return false
|
||||
let maxRow = -1
|
||||
for (const key of grid.keys()) {
|
||||
maxRow = Math.max(maxRow, Number(key.split(',')[0]))
|
||||
}
|
||||
if (maxRow < 0) return false
|
||||
let cleared = 0
|
||||
for (const key of [...grid.keys()]) {
|
||||
const r = Number(key.split(',')[0])
|
||||
if (r >= maxRow - 1) {
|
||||
grid.delete(key)
|
||||
cleared++
|
||||
}
|
||||
}
|
||||
score += cleared * 5
|
||||
emit('score', score)
|
||||
dropFloating()
|
||||
return true
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('mousemove', aim)
|
||||
canvas.value.addEventListener('click', shoot)
|
||||
loop = createLoop(update)
|
||||
buildGrid()
|
||||
shooter.next = randInt(0, COLORS.length - 1)
|
||||
nextBubble()
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
175
src/games/components/ColorReactGame.vue
Normal file
175
src/games/components/ColorReactGame.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
// 颜色反应（斯特鲁普效应）：判断文字含义与显示颜色是否一致，答错或超时扣命
|
||||
import { ref } from 'vue'
|
||||
import { pick } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const COLOR_DEFS = [
|
||||
{ name: '红色', value: '#ff5d73' },
|
||||
{ name: '绿色', value: '#4ade80' },
|
||||
{ name: '蓝色', value: '#4f8cff' },
|
||||
{ name: '黄色', value: '#ffd500' },
|
||||
{ name: '紫色', value: '#b26bff' },
|
||||
]
|
||||
const word = ref('') // 显示的文字
|
||||
const color = ref('') // 文字的颜色
|
||||
const score = ref(0)
|
||||
const lives = ref(3)
|
||||
const timeLeft = ref(45)
|
||||
const playing = ref(false)
|
||||
const feedback = ref('')
|
||||
let isMatch = false
|
||||
let questionTs = 0
|
||||
let countTimer = 0
|
||||
|
||||
function nextQuestion() {
|
||||
const wordDef = pick(COLOR_DEFS)
|
||||
// 50% 概率颜色与文字一致
|
||||
const colorDef = Math.random() < 0.5 ? wordDef : pick(COLOR_DEFS.filter((c) => c !== wordDef))
|
||||
word.value = wordDef.name
|
||||
color.value = colorDef.value
|
||||
isMatch = wordDef === colorDef
|
||||
questionTs = Date.now()
|
||||
}
|
||||
|
||||
function answerIt(saidMatch) {
|
||||
if (!playing.value) return
|
||||
if (saidMatch === isMatch) {
|
||||
// 答对：基础 8 分 + 反应速度奖励（1秒内答满 +7）
|
||||
const ms = Date.now() - questionTs
|
||||
score.value += 8 + Math.max(0, 7 - Math.floor(ms / 150))
|
||||
feedback.value = 'good'
|
||||
} else {
|
||||
lives.value--
|
||||
feedback.value = 'bad'
|
||||
if (lives.value <= 0) {
|
||||
finish()
|
||||
return
|
||||
}
|
||||
}
|
||||
emit('score', score.value)
|
||||
setTimeout(() => (feedback.value = ''), 180)
|
||||
nextQuestion()
|
||||
}
|
||||
|
||||
function finish() {
|
||||
playing.value = false
|
||||
clearInterval(countTimer)
|
||||
emit('score', score.value)
|
||||
emit('end', { score: score.value })
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft.value--
|
||||
if (timeLeft.value <= 0) finish()
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
score.value = 0
|
||||
lives.value = 3
|
||||
timeLeft.value = 45
|
||||
playing.value = true
|
||||
emit('score', 0)
|
||||
nextQuestion()
|
||||
clearInterval(countTimer)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
}
|
||||
function stop() {
|
||||
clearInterval(countTimer)
|
||||
}
|
||||
// 时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && playing.value) {
|
||||
timeLeft.value += 30
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
nextQuestion()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="cr" :class="feedback">
|
||||
<div class="hud">
|
||||
<span>⏱ {{ timeLeft }}s</span>
|
||||
<span>{{ '❤️'.repeat(Math.max(0, lives)) }}</span>
|
||||
<span>得分 <b class="text-primary">{{ score }}</b></span>
|
||||
</div>
|
||||
<p class="ask text-dim">文字的<b>含义</b>和它的<b>颜色</b>一致吗？</p>
|
||||
<div class="word" :style="{ color }">{{ word }}</div>
|
||||
<div class="btns">
|
||||
<button class="ans yes" @click="answerIt(true)">✔ 一致</button>
|
||||
<button class="ans no" @click="answerIt(false)">✘ 不一致</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cr {
|
||||
width: min(420px, 92vw);
|
||||
text-align: center;
|
||||
}
|
||||
.cr.good {
|
||||
animation: pop 0.18s;
|
||||
}
|
||||
.cr.bad {
|
||||
animation: shake 0.18s;
|
||||
}
|
||||
@keyframes pop {
|
||||
50% {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
@keyframes shake {
|
||||
25% {
|
||||
transform: translateX(-7px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(7px);
|
||||
}
|
||||
}
|
||||
.hud {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ask {
|
||||
font-size: 13px;
|
||||
}
|
||||
.word {
|
||||
font-size: 72px;
|
||||
font-weight: 900;
|
||||
margin: 26px 0 34px;
|
||||
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.btns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
.ans {
|
||||
padding: 18px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
transition: transform 0.1s, filter 0.15s;
|
||||
}
|
||||
.ans:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
.ans:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.yes {
|
||||
background: linear-gradient(135deg, #2f9e6e, #4ade80);
|
||||
}
|
||||
.no {
|
||||
background: linear-gradient(135deg, #c0384b, #ff5d73);
|
||||
}
|
||||
</style>
|
||||
214
src/games/components/Connect4Game.vue
Normal file
214
src/games/components/Connect4Game.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<script setup>
|
||||
// 四子棋：点击竖列投子，先四连者胜（与启发式 AI 对战）
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const ROWS = 6
|
||||
const COLS = 7
|
||||
const board = ref([]) // [row][col] 0空 1我 2AI
|
||||
const playing = ref(false)
|
||||
const status = ref('你执红先手')
|
||||
const lastDrop = ref(null) // 最近落子位置（高亮）
|
||||
let round = 0
|
||||
let score = 0
|
||||
let busy = false
|
||||
|
||||
function initBoard() {
|
||||
board.value = Array.from({ length: ROWS }, () => Array(COLS).fill(0))
|
||||
}
|
||||
|
||||
// 找某列可落的行（底部优先），满列返回 -1
|
||||
function dropRow(col, b = board.value) {
|
||||
for (let r = ROWS - 1; r >= 0; r--) {
|
||||
if (!b[r][col]) return r
|
||||
}
|
||||
return -1
|
||||
}
|
||||
|
||||
// 检查 who 是否四连
|
||||
function checkWin(b, who) {
|
||||
const dirs = [[1, 0], [0, 1], [1, 1], [1, -1]]
|
||||
for (let r = 0; r < ROWS; r++) {
|
||||
for (let c = 0; c < COLS; c++) {
|
||||
if (b[r][c] !== who) continue
|
||||
for (const [dr, dc] of dirs) {
|
||||
let n = 1
|
||||
let rr = r + dr
|
||||
let cc = c + dc
|
||||
while (rr >= 0 && rr < ROWS && cc >= 0 && cc < COLS && b[rr][cc] === who) {
|
||||
n++
|
||||
rr += dr
|
||||
cc += dc
|
||||
}
|
||||
if (n >= 4) return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// AI 选列：能赢就赢 → 能堵就堵 → 偏好中间列
|
||||
function aiPick() {
|
||||
const tryCol = (who) => {
|
||||
for (let c = 0; c < COLS; c++) {
|
||||
const r = dropRow(c)
|
||||
if (r < 0) continue
|
||||
board.value[r][c] = who
|
||||
const win = checkWin(board.value, who)
|
||||
board.value[r][c] = 0
|
||||
if (win) return c
|
||||
}
|
||||
return -1
|
||||
}
|
||||
let col = tryCol(2) // 自己能赢
|
||||
if (col < 0) col = tryCol(1) // 堵玩家
|
||||
if (col < 0) {
|
||||
// 中间优先的候选顺序
|
||||
const order = [3, 2, 4, 1, 5, 0, 6].filter((c) => dropRow(c) >= 0)
|
||||
col = order[Math.floor(Math.random() * Math.min(3, order.length))]
|
||||
}
|
||||
return col
|
||||
}
|
||||
|
||||
function play(col) {
|
||||
if (!playing.value || busy) return
|
||||
const r = dropRow(col)
|
||||
if (r < 0) return
|
||||
board.value[r][col] = 1
|
||||
lastDrop.value = [r, col]
|
||||
if (checkWin(board.value, 1)) {
|
||||
// 赢一局 +80 续局
|
||||
round++
|
||||
score += 80
|
||||
emit('score', score)
|
||||
status.value = `第 ${round} 局获胜！+80，新一局开始`
|
||||
setTimeout(() => {
|
||||
initBoard()
|
||||
status.value = '你执红先手'
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
if (board.value.every((row) => row.every((v) => v))) {
|
||||
endGame(30, '平局收场 +30')
|
||||
return
|
||||
}
|
||||
busy = true
|
||||
status.value = 'AI 思考中…'
|
||||
setTimeout(() => {
|
||||
busy = false
|
||||
if (!playing.value) return
|
||||
const c = aiPick()
|
||||
const rr = dropRow(c)
|
||||
board.value[rr][c] = 2
|
||||
lastDrop.value = [rr, c]
|
||||
if (checkWin(board.value, 2)) {
|
||||
endGame(score > 0 ? 10 : 5, 'AI 获胜')
|
||||
return
|
||||
}
|
||||
if (board.value.every((row) => row.every((v) => v))) {
|
||||
endGame(30, '平局收场 +30')
|
||||
return
|
||||
}
|
||||
status.value = '轮到你了'
|
||||
}, 420)
|
||||
}
|
||||
|
||||
function endGame(bonus, msg) {
|
||||
score += bonus
|
||||
playing.value = false
|
||||
status.value = msg
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
initBoard()
|
||||
playing.value = true
|
||||
round = 0
|
||||
score = 0
|
||||
busy = false
|
||||
lastDrop.value = null
|
||||
status.value = '你执红先手'
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
initBoard()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="c4">
|
||||
<p class="status">{{ status }}</p>
|
||||
<div class="board">
|
||||
<div v-for="c in COLS" :key="c" class="col" @click="play(c - 1)">
|
||||
<div
|
||||
v-for="r in ROWS"
|
||||
:key="r"
|
||||
class="slot"
|
||||
:class="{
|
||||
me: board[r - 1][c - 1] === 1,
|
||||
ai: board[r - 1][c - 1] === 2,
|
||||
last: lastDrop && lastDrop[0] === r - 1 && lastDrop[1] === c - 1,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tip text-dim">🔴 你 🟡 AI 连续获胜可累计得分</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.c4 {
|
||||
text-align: center;
|
||||
width: min(460px, 92vw);
|
||||
}
|
||||
.status {
|
||||
margin-bottom: 12px;
|
||||
min-height: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 6px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.col:hover .slot:not(.me):not(.ai) {
|
||||
background: color-mix(in srgb, var(--primary) 14%, var(--bg-card));
|
||||
}
|
||||
.slot {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.slot.me {
|
||||
background: radial-gradient(circle at 35% 35%, #ff8fa3, #e5484d);
|
||||
border-color: #e5484d;
|
||||
}
|
||||
.slot.ai {
|
||||
background: radial-gradient(circle at 35% 35%, #ffe98a, #f5b301);
|
||||
border-color: #f5b301;
|
||||
}
|
||||
.slot.last {
|
||||
box-shadow: 0 0 0 3px var(--accent);
|
||||
}
|
||||
.tip {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
190
src/games/components/DinoGame.vue
Normal file
190
src/games/components/DinoGame.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<script setup>
|
||||
// 恐龙跑酷：跳跃躲避仙人掌与飞鸟，里程即分数
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 760
|
||||
const H = 300
|
||||
const GROUND = H - 50
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let dino = { y: GROUND, vy: 0, ducking: false }
|
||||
let obstacles = [] // {x, type: cactus|bird, h, w, flyY}
|
||||
let clouds = []
|
||||
let dist = 0 // 里程（分数）
|
||||
let speed = 300
|
||||
let alive = false
|
||||
let spawnGap = 0
|
||||
let shieldOn = false
|
||||
let invincible = 0
|
||||
|
||||
function jump() {
|
||||
if (alive && dino.y >= GROUND - 1) dino.vy = -640
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
// 里程与提速
|
||||
dist += speed * dt * 0.05
|
||||
const score = Math.floor(dist)
|
||||
emit('score', score)
|
||||
speed = 300 + Math.min(340, dist * 0.5)
|
||||
// 恐龙物理
|
||||
dino.vy += 1800 * dt
|
||||
dino.y += dino.vy * dt
|
||||
if (dino.y > GROUND) {
|
||||
dino.y = GROUND
|
||||
dino.vy = 0
|
||||
}
|
||||
dino.ducking = keys.has('ArrowDown') && dino.y >= GROUND - 1
|
||||
// 云
|
||||
clouds.forEach((c) => (c.x -= 30 * dt))
|
||||
clouds = clouds.filter((c) => c.x > -60)
|
||||
if (clouds.length < 4 && Math.random() < 0.01) {
|
||||
clouds.push({ x: W + 40, y: randInt(30, 120) })
|
||||
}
|
||||
// 障碍生成
|
||||
spawnGap -= speed * dt
|
||||
if (spawnGap <= 0) {
|
||||
const isBird = dist > 120 && Math.random() < 0.28
|
||||
obstacles.push(
|
||||
isBird
|
||||
? { x: W + 30, type: 'bird', flyY: [GROUND - 20, GROUND - 55, GROUND - 90][randInt(0, 2)] }
|
||||
: { x: W + 30, type: 'cactus', h: randInt(34, 58), w: randInt(18, 40) }
|
||||
)
|
||||
spawnGap = randInt(320, 620) + speed * 0.25
|
||||
}
|
||||
obstacles.forEach((o) => (o.x -= speed * dt))
|
||||
obstacles = obstacles.filter((o) => o.x > -60)
|
||||
// 碰撞（恐龙判定盒：站立 30x44 / 下蹲 40x26）
|
||||
const dw = dino.ducking ? 40 : 28
|
||||
const dh = dino.ducking ? 26 : 44
|
||||
const dx = 70 - dw / 2
|
||||
const dy = dino.y - dh
|
||||
for (const o of obstacles) {
|
||||
let ox, oy, ow, oh
|
||||
if (o.type === 'cactus') {
|
||||
ox = o.x - o.w / 2
|
||||
oy = GROUND - o.h
|
||||
ow = o.w
|
||||
oh = o.h
|
||||
} else {
|
||||
ox = o.x - 20
|
||||
oy = o.flyY - 14
|
||||
ow = 40
|
||||
oh = 24
|
||||
}
|
||||
if (dx < ox + ow && dx + dw > ox && dy < oy + oh && dy + dh > oy) {
|
||||
if (invincible > 0) continue
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
invincible = 1
|
||||
continue
|
||||
}
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 云
|
||||
ctx.font = '28px serif'
|
||||
ctx.textAlign = 'center'
|
||||
clouds.forEach((c) => ctx.fillText('☁️', c.x, c.y))
|
||||
// 地面
|
||||
ctx.strokeStyle = p.dim
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, GROUND + 2)
|
||||
ctx.lineTo(W, GROUND + 2)
|
||||
ctx.stroke()
|
||||
// 恐龙（无敌闪烁）
|
||||
if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
|
||||
ctx.font = dino.ducking ? '30px serif' : '38px serif'
|
||||
ctx.textBaseline = 'bottom'
|
||||
ctx.fillText('🦖', 70, dino.y + 4)
|
||||
}
|
||||
if (shieldOn) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(70, dino.y - 20, 30, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 障碍
|
||||
obstacles.forEach((o) => {
|
||||
ctx.textBaseline = 'bottom'
|
||||
if (o.type === 'cactus') {
|
||||
ctx.font = `${o.h}px serif`
|
||||
ctx.fillText('🌵', o.x, GROUND + 4)
|
||||
} else {
|
||||
ctx.font = '30px serif'
|
||||
ctx.fillText('🦅', o.x, o.flyY + 14)
|
||||
}
|
||||
})
|
||||
ctx.textBaseline = 'alphabetic'
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
dino = { y: GROUND, vy: 0, ducking: false }
|
||||
obstacles = []
|
||||
clouds = [{ x: 200, y: 60 }, { x: 520, y: 100 }]
|
||||
dist = 0
|
||||
speed = 300
|
||||
spawnGap = 500
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活：清空面前障碍继续跑；护盾：挡一次
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
obstacles = []
|
||||
invincible = 1.5
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
keys.onPress((k) => {
|
||||
if (k === ' ' || k === 'ArrowUp') jump()
|
||||
})
|
||||
canvas.value.addEventListener('pointerdown', jump)
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
181
src/games/components/Down100Game.vue
Normal file
181
src/games/components/Down100Game.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
// 下100层：不断下落踩稳平台，顶部尖刺不能碰，层数即分数
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 480
|
||||
const H = 560
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let player = { x: W / 2, y: 100, vy: 0, onPlat: null }
|
||||
let platforms = [] // {x,y,w,type: normal|spike|move, dir}
|
||||
let cameraY = 0 // 摄像机向下滚动
|
||||
let floor = 0 // 已下的层数（分数）
|
||||
let alive = false
|
||||
let scrollSpeed = 40 // 画面自动上移速度
|
||||
|
||||
function spawnPlatform(y) {
|
||||
const roll = Math.random()
|
||||
const type = roll < 0.68 ? 'normal' : roll < 0.85 ? 'move' : 'spike'
|
||||
platforms.push({
|
||||
x: randInt(20, W - 120),
|
||||
y,
|
||||
w: randInt(80, 140),
|
||||
type,
|
||||
dir: Math.random() < 0.5 ? 1 : -1,
|
||||
})
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
// 画面自动上滚（越来越快）
|
||||
scrollSpeed = 40 + floor * 0.9
|
||||
cameraY += scrollSpeed * dt
|
||||
// 左右移动
|
||||
const ms = 300
|
||||
if (keys.has('ArrowLeft') || keys.has('a')) player.x -= ms * dt
|
||||
if (keys.has('ArrowRight') || keys.has('d')) player.x += ms * dt
|
||||
player.x = Math.max(14, Math.min(W - 14, player.x))
|
||||
// 重力
|
||||
player.vy += 1300 * dt
|
||||
const prevY = player.y
|
||||
player.y += player.vy * dt
|
||||
// 平台碰撞（只在下落时检测顶面）
|
||||
player.onPlat = null
|
||||
for (const p of platforms) {
|
||||
if (player.vy >= 0 && prevY <= p.y - 10 + 1 && player.y >= p.y - 10 && player.x > p.x - 10 && player.x < p.x + p.w + 10) {
|
||||
if (p.type === 'spike') {
|
||||
// 尖刺平台：踩上即死
|
||||
die()
|
||||
return
|
||||
}
|
||||
player.y = p.y - 10
|
||||
player.vy = 0
|
||||
player.onPlat = p
|
||||
}
|
||||
}
|
||||
// 移动平台带着玩家走
|
||||
platforms.forEach((p) => {
|
||||
if (p.type === 'move') {
|
||||
p.x += p.dir * 90 * dt
|
||||
if (p.x < 10 || p.x + p.w > W - 10) p.dir *= -1
|
||||
if (player.onPlat === p) player.x += p.dir * 90 * dt
|
||||
}
|
||||
})
|
||||
// 计层：每通过一块平台的高度 +1 层
|
||||
const newFloor = Math.floor((player.y - 160) / 90)
|
||||
if (newFloor > floor) {
|
||||
floor = newFloor
|
||||
emit('score', floor)
|
||||
}
|
||||
// 生成更深的平台 / 清理头顶的
|
||||
const deepest = Math.max(...platforms.map((p) => p.y))
|
||||
if (deepest < cameraY + H + 200) spawnPlatform(deepest + 90)
|
||||
platforms = platforms.filter((p) => p.y > cameraY - 60)
|
||||
// 死亡判定：被顶出屏幕上沿（被卷进尖刺天花板）或掉出屏幕下沿
|
||||
if (player.y < cameraY + 24 || player.y > cameraY + H + 40) {
|
||||
die()
|
||||
return
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function die() {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score: floor })
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 顶部尖刺天花板
|
||||
ctx.fillStyle = p.primary
|
||||
for (let x = 0; x < W; x += 24) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, 0)
|
||||
ctx.lineTo(x + 12, 18)
|
||||
ctx.lineTo(x + 24, 0)
|
||||
ctx.fill()
|
||||
}
|
||||
// 平台
|
||||
platforms.forEach((pl) => {
|
||||
const sy = pl.y - cameraY
|
||||
if (sy < -20 || sy > H + 20) return
|
||||
if (pl.type === 'spike') {
|
||||
ctx.fillStyle = p.primary
|
||||
for (let x = pl.x; x < pl.x + pl.w - 10; x += 14) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, sy)
|
||||
ctx.lineTo(x + 7, sy - 12)
|
||||
ctx.lineTo(x + 14, sy)
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.fillStyle = '#8b3a44'
|
||||
ctx.fillRect(pl.x, sy, pl.w, 10)
|
||||
} else {
|
||||
ctx.fillStyle = pl.type === 'move' ? p.accent : p.primary2
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(pl.x, sy, pl.w, 10, 5)
|
||||
ctx.fill()
|
||||
}
|
||||
})
|
||||
// 玩家
|
||||
ctx.font = '26px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'bottom'
|
||||
ctx.fillText('🧗', player.x, player.y - cameraY + 4)
|
||||
// 层数
|
||||
ctx.fillStyle = p.text
|
||||
ctx.font = 'bold 18px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`第 ${floor} 层`, 10, 26)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
player = { x: W / 2, y: 120, vy: 0, onPlat: null }
|
||||
platforms = [{ x: W / 2 - 70, y: 180, w: 140, type: 'normal', dir: 1 }]
|
||||
for (let y = 270; y < H + 300; y += 90) spawnPlatform(y)
|
||||
cameraY = 0
|
||||
floor = 0
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活卡：回到屏幕中间的安全平台继续
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
const safe = { x: W / 2 - 70, y: cameraY + H / 2, w: 140, type: 'normal', dir: 1 }
|
||||
platforms.push(safe)
|
||||
player = { x: W / 2, y: safe.y - 10, vy: 0, onPlat: safe }
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
173
src/games/components/FlappyGame.vue
Normal file
173
src/games/components/FlappyGame.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<script setup>
|
||||
// 像素鸟：点击/空格扇翅膀，穿过管道缝隙
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 440
|
||||
const H = 560
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let bird = { y: H / 2, vy: 0 }
|
||||
let pipes = [] // {x, gapY, passed}
|
||||
let score = 0
|
||||
let alive = false
|
||||
let shieldOn = false // 护盾：抵挡一次撞击
|
||||
let invincible = 0 // 复活后的无敌秒数
|
||||
const GAP = 155 // 管道缝隙
|
||||
const PIPE_W = 64
|
||||
|
||||
function flap() {
|
||||
if (alive) bird.vy = -330
|
||||
}
|
||||
|
||||
function spawnPipe(x) {
|
||||
pipes.push({ x, gapY: randInt(120, H - 200), passed: false })
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
// 重力
|
||||
bird.vy += 980 * dt
|
||||
bird.y += bird.vy * dt
|
||||
// 管道移动
|
||||
const speed = 170 + Math.min(90, score * 3) // 越玩越快
|
||||
pipes.forEach((p) => (p.x -= speed * dt))
|
||||
if (pipes.length && pipes[0].x < -PIPE_W) pipes.shift()
|
||||
if (!pipes.length || pipes[pipes.length - 1].x < W - 220) spawnPipe(W + 20)
|
||||
// 计分：穿过管道
|
||||
pipes.forEach((p) => {
|
||||
if (!p.passed && p.x + PIPE_W < 90) {
|
||||
p.passed = true
|
||||
score++
|
||||
emit('score', score)
|
||||
}
|
||||
})
|
||||
// 碰撞检测
|
||||
const bx = 90
|
||||
const br = 15
|
||||
let hit = bird.y < br || bird.y > H - br
|
||||
for (const p of pipes) {
|
||||
if (bx + br > p.x && bx - br < p.x + PIPE_W) {
|
||||
if (bird.y - br < p.gapY - GAP / 2 || bird.y + br > p.gapY + GAP / 2) hit = true
|
||||
}
|
||||
}
|
||||
if (hit && invincible <= 0) {
|
||||
if (shieldOn) {
|
||||
// 护盾抵挡一次并给 1 秒无敌
|
||||
shieldOn = false
|
||||
invincible = 1
|
||||
} else {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
// 天空渐变
|
||||
const grad = ctx.createLinearGradient(0, 0, 0, H)
|
||||
grad.addColorStop(0, p.bg)
|
||||
grad.addColorStop(1, p.panel)
|
||||
ctx.fillStyle = grad
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 管道
|
||||
pipes.forEach((pp) => {
|
||||
ctx.fillStyle = p.accent
|
||||
ctx.globalAlpha = 0.9
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(pp.x, 0, PIPE_W, pp.gapY - GAP / 2, 6)
|
||||
ctx.fill()
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(pp.x, pp.gapY + GAP / 2, PIPE_W, H - pp.gapY - GAP / 2, 6)
|
||||
ctx.fill()
|
||||
// 管口
|
||||
ctx.fillStyle = p.primary
|
||||
ctx.fillRect(pp.x - 4, pp.gapY - GAP / 2 - 12, PIPE_W + 8, 12)
|
||||
ctx.fillRect(pp.x - 4, pp.gapY + GAP / 2, PIPE_W + 8, 12)
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
// 小鸟（无敌时闪烁）
|
||||
if (invincible <= 0 || Math.floor(performance.now() / 100) % 2 === 0) {
|
||||
ctx.font = '30px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.save()
|
||||
ctx.translate(90, bird.y)
|
||||
ctx.rotate(Math.max(-0.5, Math.min(0.9, bird.vy / 600)))
|
||||
ctx.fillText('🐤', 0, 0)
|
||||
ctx.restore()
|
||||
}
|
||||
// 护盾光圈
|
||||
if (shieldOn) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(90, bird.y, 26, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 分数
|
||||
ctx.font = 'bold 40px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillStyle = p.text
|
||||
ctx.fillText(score, W / 2, 20)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
bird = { y: H / 2, vy: 0 }
|
||||
pipes = []
|
||||
score = 0
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
alive = true
|
||||
spawnPipe(W + 120)
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活卡：原地复活 + 2 秒无敌；护盾：抵挡一次撞击
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
bird = { y: H / 2, vy: 0 }
|
||||
invincible = 2
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
keys.onPress((k) => {
|
||||
if (k === ' ') flap()
|
||||
})
|
||||
canvas.value.addEventListener('pointerdown', flap)
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
249
src/games/components/FruitGame.vue
Normal file
249
src/games/components/FruitGame.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<script setup>
|
||||
// 切水果：60 秒限时，按住鼠标划刀切水果，切到炸弹扣分并震屏
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, palette, randInt, pick } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 720
|
||||
const H = 540
|
||||
let ctx
|
||||
let loop
|
||||
let fruits = [] // {x,y,vx,vy,emoji,r,isBomb,sliced,rot,vr}
|
||||
let halves = [] // 切开后的两半 {x,y,vx,vy,emoji,rot,vr,life}
|
||||
let trail = [] // 刀光轨迹 [{x,y,t}]
|
||||
let slicing = false
|
||||
let score = 0
|
||||
let combo = 0 // 一次挥刀连切数
|
||||
let comboTimer = 0
|
||||
let timeLeft = 60
|
||||
let countTimer = 0
|
||||
let spawnCd = 0
|
||||
let shake = 0
|
||||
let alive = false
|
||||
const FRUITS = ['🍉', '🍎', '🍊', '🍋', '🍓', '🥝', '🍑', '🍍']
|
||||
|
||||
function spawnWave() {
|
||||
const count = randInt(1, 3)
|
||||
for (let i = 0; i < count; i++) {
|
||||
const x = randInt(100, W - 100)
|
||||
fruits.push({
|
||||
x,
|
||||
y: H + 40,
|
||||
vx: (W / 2 - x) * 0.9 + randInt(-60, 60),
|
||||
vy: -randInt(620, 780),
|
||||
emoji: Math.random() < 0.12 ? '💣' : pick(FRUITS),
|
||||
r: 30,
|
||||
rot: 0,
|
||||
vr: (Math.random() - 0.5) * 4,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (shake > 0) shake -= dt
|
||||
// 重力运动
|
||||
const g = 900
|
||||
fruits.forEach((f) => {
|
||||
f.x += f.vx * dt
|
||||
f.y += f.vy * dt
|
||||
f.vy += g * dt
|
||||
f.rot += f.vr * dt
|
||||
})
|
||||
fruits = fruits.filter((f) => f.y < H + 80)
|
||||
halves.forEach((h) => {
|
||||
h.x += h.vx * dt
|
||||
h.y += h.vy * dt
|
||||
h.vy += g * dt
|
||||
h.rot += h.vr * dt
|
||||
h.life -= dt
|
||||
})
|
||||
halves = halves.filter((h) => h.life > 0)
|
||||
// 刀光轨迹保留 0.18 秒
|
||||
const now = performance.now()
|
||||
trail = trail.filter((t) => now - t.t < 180)
|
||||
// 刷新一波水果
|
||||
spawnCd -= dt
|
||||
if (spawnCd <= 0) {
|
||||
spawnWave()
|
||||
spawnCd = randInt(9, 16) / 10
|
||||
}
|
||||
// 连击窗口
|
||||
comboTimer -= dt
|
||||
if (comboTimer <= 0) combo = 0
|
||||
draw()
|
||||
}
|
||||
|
||||
// 处理刀光切割
|
||||
function slice(x, y, px, py) {
|
||||
for (const f of fruits) {
|
||||
if (f.sliced) continue
|
||||
// 线段与圆碰撞（简化：两端点任一在圆内或中点在圆内）
|
||||
const midX = (x + px) / 2
|
||||
const midY = (y + py) / 2
|
||||
const hit =
|
||||
Math.hypot(f.x - x, f.y - y) < f.r + 12 ||
|
||||
Math.hypot(f.x - midX, f.y - midY) < f.r + 12
|
||||
if (!hit) continue
|
||||
f.sliced = true
|
||||
if (f.emoji === '💣') {
|
||||
// 炸弹：扣 30 分 + 震屏
|
||||
score = Math.max(0, score - 30)
|
||||
combo = 0
|
||||
shake = 0.4
|
||||
emit('score', score)
|
||||
} else {
|
||||
combo++
|
||||
comboTimer = 0.5
|
||||
// 连切加成：第 n 个 +10×n
|
||||
score += 10 * combo
|
||||
emit('score', score)
|
||||
// 生成两半飞散
|
||||
halves.push(
|
||||
{ x: f.x - 8, y: f.y, vx: -140 + randInt(-40, 0), vy: f.vy * 0.4, emoji: f.emoji, rot: f.rot, vr: -3, life: 1 },
|
||||
{ x: f.x + 8, y: f.y, vx: 140 + randInt(0, 40), vy: f.vy * 0.4, emoji: f.emoji, rot: f.rot, vr: 3, life: 1 }
|
||||
)
|
||||
}
|
||||
}
|
||||
fruits = fruits.filter((f) => !f.sliced)
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.save()
|
||||
if (shake > 0) {
|
||||
ctx.translate(randInt(-6, 6), randInt(-6, 6))
|
||||
}
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(-10, -10, W + 20, H + 20)
|
||||
// 倒计时
|
||||
ctx.fillStyle = timeLeft <= 10 ? '#ff5d73' : p.text
|
||||
ctx.font = 'bold 26px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`⏱ ${timeLeft}`, W / 2, 14)
|
||||
// 连击提示
|
||||
if (combo >= 2) {
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.font = 'bold 20px sans-serif'
|
||||
ctx.fillText(`${combo} 连切！`, W / 2, 50)
|
||||
}
|
||||
// 水果与两半
|
||||
ctx.textBaseline = 'middle'
|
||||
fruits.forEach((f) => {
|
||||
ctx.save()
|
||||
ctx.translate(f.x, f.y)
|
||||
ctx.rotate(f.rot)
|
||||
ctx.font = '52px serif'
|
||||
ctx.fillText(f.emoji, 0, 0)
|
||||
ctx.restore()
|
||||
})
|
||||
halves.forEach((h) => {
|
||||
ctx.save()
|
||||
ctx.translate(h.x, h.y)
|
||||
ctx.rotate(h.rot)
|
||||
ctx.globalAlpha = Math.max(0, h.life)
|
||||
ctx.font = '30px serif'
|
||||
ctx.fillText(h.emoji, 0, 0)
|
||||
ctx.restore()
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
// 刀光
|
||||
if (trail.length > 1) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 4
|
||||
ctx.lineCap = 'round'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(trail[0].x, trail[0].y)
|
||||
for (let i = 1; i < trail.length; i++) ctx.lineTo(trail[i].x, trail[i].y)
|
||||
ctx.stroke()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
function toXY(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
return [(e.clientX - rect.left) * scale, (e.clientY - rect.top) * scale]
|
||||
}
|
||||
function onDown(e) {
|
||||
slicing = true
|
||||
const [x, y] = toXY(e)
|
||||
trail.push({ x, y, t: performance.now() })
|
||||
}
|
||||
function onMove(e) {
|
||||
if (!slicing || !alive) return
|
||||
const [x, y] = toXY(e)
|
||||
const prev = trail[trail.length - 1]
|
||||
trail.push({ x, y, t: performance.now() })
|
||||
if (prev) slice(x, y, prev.x, prev.y)
|
||||
}
|
||||
function onUp() {
|
||||
slicing = false
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft--
|
||||
if (timeLeft <= 0) {
|
||||
alive = false
|
||||
clearInterval(countTimer)
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
fruits = []
|
||||
halves = []
|
||||
trail = []
|
||||
score = 0
|
||||
combo = 0
|
||||
timeLeft = 60
|
||||
shake = 0
|
||||
spawnCd = 0.5
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
clearInterval(countTimer)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
clearInterval(countTimer)
|
||||
}
|
||||
// 复活卡：时间归零后再续 15 秒；时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
timeLeft = 15
|
||||
alive = true
|
||||
countTimer = setInterval(tick, 1000)
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'time_extend' && alive) {
|
||||
timeLeft += 30
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('pointerdown', onDown)
|
||||
canvas.value.addEventListener('pointermove', onMove)
|
||||
window.addEventListener('pointerup', onUp)
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
stop()
|
||||
window.removeEventListener('pointerup', onUp)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H" style="touch-action: none; cursor: crosshair"></canvas>
|
||||
</template>
|
||||
147
src/games/components/Game2048.vue
Normal file
147
src/games/components/Game2048.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<script setup>
|
||||
// 2048：方向键滑动合并相同数字
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const SIZE = 4
|
||||
const CELL = 100
|
||||
const GAP = 10
|
||||
const W = SIZE * CELL + (SIZE + 1) * GAP
|
||||
let ctx
|
||||
let keys
|
||||
let grid = []
|
||||
let score = 0
|
||||
let alive = false
|
||||
|
||||
// 数字对应的底色（大数逐渐变暖）
|
||||
const TILE_COLORS = {
|
||||
2: '#3c4a7a', 4: '#43578f', 8: '#f2b179', 16: '#f59563', 32: '#f67c5f',
|
||||
64: '#f65e3b', 128: '#edcf72', 256: '#edcc61', 512: '#edc850', 1024: '#edc53f', 2048: '#edc22e',
|
||||
}
|
||||
|
||||
// 随机空位放一个 2（90%）或 4（10%）
|
||||
function addTile() {
|
||||
const empty = []
|
||||
for (let y = 0; y < SIZE; y++) {
|
||||
for (let x = 0; x < SIZE; x++) {
|
||||
if (!grid[y][x]) empty.push([x, y])
|
||||
}
|
||||
}
|
||||
if (!empty.length) return
|
||||
const [x, y] = empty[randInt(0, empty.length - 1)]
|
||||
grid[y][x] = Math.random() < 0.9 ? 2 : 4
|
||||
}
|
||||
|
||||
// 压缩并合并一行（向左），返回 [新行, 得分]
|
||||
function slideRow(row) {
|
||||
const vals = row.filter((v) => v)
|
||||
let gained = 0
|
||||
for (let i = 0; i < vals.length - 1; i++) {
|
||||
if (vals[i] === vals[i + 1]) {
|
||||
vals[i] *= 2
|
||||
gained += vals[i]
|
||||
vals.splice(i + 1, 1)
|
||||
}
|
||||
}
|
||||
while (vals.length < SIZE) vals.push(0)
|
||||
return [vals, gained]
|
||||
}
|
||||
|
||||
// 朝指定方向滑动，返回是否发生变化
|
||||
function move(dirKey) {
|
||||
const before = JSON.stringify(grid)
|
||||
let gained = 0
|
||||
const rotateCW = (g) => g[0].map((_, i) => g.map((r) => r[i]).reverse())
|
||||
// 统一转成"向左滑"处理：先旋转到位，滑完转回来
|
||||
let turns = { ArrowLeft: 0, ArrowUp: 1, ArrowRight: 2, ArrowDown: 3 }[dirKey]
|
||||
for (let i = 0; i < turns; i++) grid = rotateCW(grid)
|
||||
grid = grid.map((row) => {
|
||||
const [nr, g] = slideRow(row)
|
||||
gained += g
|
||||
return nr
|
||||
})
|
||||
for (let i = 0; i < (4 - turns) % 4; i++) grid = rotateCW(grid)
|
||||
if (JSON.stringify(grid) !== before) {
|
||||
score += gained
|
||||
emit('score', score)
|
||||
addTile()
|
||||
draw()
|
||||
// 无空位且无可合并 → 结束
|
||||
if (isDead()) {
|
||||
alive = false
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isDead() {
|
||||
for (let y = 0; y < SIZE; y++) {
|
||||
for (let x = 0; x < SIZE; x++) {
|
||||
if (!grid[y][x]) return false
|
||||
if (x + 1 < SIZE && grid[y][x] === grid[y][x + 1]) return false
|
||||
if (y + 1 < SIZE && grid[y][x] === grid[y + 1][x]) return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, W)
|
||||
for (let y = 0; y < SIZE; y++) {
|
||||
for (let x = 0; x < SIZE; x++) {
|
||||
const v = grid[y][x]
|
||||
const px = GAP + x * (CELL + GAP)
|
||||
const py = GAP + y * (CELL + GAP)
|
||||
ctx.fillStyle = v ? TILE_COLORS[v] || '#3c3a32' : 'rgba(255,255,255,0.07)'
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(px, py, CELL, CELL, 10)
|
||||
ctx.fill()
|
||||
if (v) {
|
||||
ctx.fillStyle = v <= 4 ? '#eee' : '#3a2f1b'
|
||||
ctx.font = `bold ${v >= 1024 ? 30 : v >= 128 ? 36 : 42}px sans-serif`
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText(v, px + CELL / 2, py + CELL / 2 + 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
grid = Array.from({ length: SIZE }, () => Array(SIZE).fill(0))
|
||||
score = 0
|
||||
alive = true
|
||||
addTile()
|
||||
addTile()
|
||||
emit('score', 0)
|
||||
draw()
|
||||
}
|
||||
function stop() {
|
||||
keys?.detach()
|
||||
}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
keys.onPress((k) => {
|
||||
if (alive && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(k)) move(k)
|
||||
})
|
||||
grid = Array.from({ length: SIZE }, () => Array(SIZE).fill(0))
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="W"></canvas>
|
||||
</template>
|
||||
244
src/games/components/GomokuGame.vue
Normal file
244
src/games/components/GomokuGame.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<script setup>
|
||||
// 五子棋：与启发式 AI 对弈，先连五者胜
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { palette } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const N = 15 // 15×15 路
|
||||
const CELL = 34
|
||||
const PAD = 24
|
||||
const SIZE = PAD * 2 + CELL * (N - 1)
|
||||
let ctx
|
||||
let board = [] // 0空 1我(黑) 2AI(白)
|
||||
let myTurn = true
|
||||
let playing = false
|
||||
let moveCount = 0
|
||||
let hintCell = null // 提示卡高亮的位置
|
||||
let startTs = 0
|
||||
|
||||
// 落子后检查是否五连
|
||||
function checkWin(x, y, who) {
|
||||
const dirs = [[1, 0], [0, 1], [1, 1], [1, -1]]
|
||||
for (const [dx, dy] of dirs) {
|
||||
let count = 1
|
||||
for (const s of [1, -1]) {
|
||||
let nx = x + dx * s
|
||||
let ny = y + dy * s
|
||||
while (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx] === who) {
|
||||
count++
|
||||
nx += dx * s
|
||||
ny += dy * s
|
||||
}
|
||||
}
|
||||
if (count >= 5) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 评估某点对 who 的进攻价值（数各方向连子与开口）
|
||||
function evalPoint(x, y, who) {
|
||||
const dirs = [[1, 0], [0, 1], [1, 1], [1, -1]]
|
||||
let total = 0
|
||||
for (const [dx, dy] of dirs) {
|
||||
let count = 1
|
||||
let open = 0
|
||||
for (const s of [1, -1]) {
|
||||
let nx = x + dx * s
|
||||
let ny = y + dy * s
|
||||
while (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx] === who) {
|
||||
count++
|
||||
nx += dx * s
|
||||
ny += dy * s
|
||||
}
|
||||
if (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx] === 0) open++
|
||||
}
|
||||
// 连子数×开口数的分级打分
|
||||
if (count >= 5) total += 1000000
|
||||
else if (count === 4) total += open === 2 ? 100000 : 10000
|
||||
else if (count === 3) total += open === 2 ? 5000 : 500
|
||||
else if (count === 2) total += open === 2 ? 200 : 40
|
||||
else total += 10
|
||||
}
|
||||
return total
|
||||
}
|
||||
|
||||
// 找出对 who 最有价值的落点（进攻 + 1.1 倍防守权重）
|
||||
function bestMove(who) {
|
||||
const opp = who === 1 ? 2 : 1
|
||||
let best = null
|
||||
let bestScore = -1
|
||||
for (let y = 0; y < N; y++) {
|
||||
for (let x = 0; x < N; x++) {
|
||||
if (board[y][x]) continue
|
||||
// 只考虑已有棋子附近两格内的位置（提速）
|
||||
if (moveCount > 0 && !nearStone(x, y)) continue
|
||||
const s = evalPoint(x, y, who) + evalPoint(x, y, opp) * 1.1
|
||||
if (s > bestScore) {
|
||||
bestScore = s
|
||||
best = { x, y }
|
||||
}
|
||||
}
|
||||
}
|
||||
return best || { x: 7, y: 7 }
|
||||
}
|
||||
|
||||
function nearStone(x, y) {
|
||||
for (let dy = -2; dy <= 2; dy++) {
|
||||
for (let dx = -2; dx <= 2; dx++) {
|
||||
const nx = x + dx
|
||||
const ny = y + dy
|
||||
if (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx]) return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 我方落子
|
||||
function place(x, y) {
|
||||
if (!playing || !myTurn || board[y][x]) return
|
||||
board[y][x] = 1
|
||||
moveCount++
|
||||
hintCell = null
|
||||
draw()
|
||||
if (checkWin(x, y, 1)) {
|
||||
finish(true)
|
||||
return
|
||||
}
|
||||
if (moveCount >= N * N) {
|
||||
finishDraw()
|
||||
return
|
||||
}
|
||||
myTurn = false
|
||||
// AI 思考延迟一点更自然
|
||||
setTimeout(aiMove, 260)
|
||||
}
|
||||
|
||||
function aiMove() {
|
||||
if (!playing) return
|
||||
const m = bestMove(2)
|
||||
board[m.y][m.x] = 2
|
||||
moveCount++
|
||||
draw()
|
||||
if (checkWin(m.x, m.y, 2)) {
|
||||
finish(false)
|
||||
return
|
||||
}
|
||||
if (moveCount >= N * N) {
|
||||
finishDraw()
|
||||
return
|
||||
}
|
||||
myTurn = true
|
||||
}
|
||||
|
||||
// 结束：赢 150 + 速度奖励，输 10
|
||||
function finish(win) {
|
||||
playing = false
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
const score = win ? 150 + Math.max(0, 60 - secs) : 10
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
}
|
||||
function finishDraw() {
|
||||
playing = false
|
||||
emit('score', 50)
|
||||
emit('end', { score: 50 })
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, SIZE, SIZE)
|
||||
// 棋盘线
|
||||
ctx.strokeStyle = p.dim
|
||||
ctx.lineWidth = 1
|
||||
for (let i = 0; i < N; i++) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(PAD, PAD + i * CELL)
|
||||
ctx.lineTo(SIZE - PAD, PAD + i * CELL)
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(PAD + i * CELL, PAD)
|
||||
ctx.lineTo(PAD + i * CELL, SIZE - PAD)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 星位
|
||||
ctx.fillStyle = p.dim
|
||||
;[[3, 3], [11, 3], [7, 7], [3, 11], [11, 11]].forEach(([x, y]) => {
|
||||
ctx.beginPath()
|
||||
ctx.arc(PAD + x * CELL, PAD + y * CELL, 3.5, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 棋子
|
||||
for (let y = 0; y < N; y++) {
|
||||
for (let x = 0; x < N; x++) {
|
||||
if (!board[y][x]) continue
|
||||
const cx = PAD + x * CELL
|
||||
const cy = PAD + y * CELL
|
||||
const grad = ctx.createRadialGradient(cx - 4, cy - 4, 2, cx, cy, 14)
|
||||
if (board[y][x] === 1) {
|
||||
grad.addColorStop(0, '#555')
|
||||
grad.addColorStop(1, '#0a0a0a')
|
||||
} else {
|
||||
grad.addColorStop(0, '#ffffff')
|
||||
grad.addColorStop(1, '#c8c8c8')
|
||||
}
|
||||
ctx.fillStyle = grad
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, 14, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
// 提示位置
|
||||
if (hintCell) {
|
||||
ctx.strokeStyle = p.primary2
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(PAD + hintCell.x * CELL, PAD + hintCell.y * CELL, 15, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
function onClick(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
const x = Math.round(((e.clientX - rect.left) * scale - PAD) / CELL)
|
||||
const y = Math.round(((e.clientY - rect.top) * scale - PAD) / CELL)
|
||||
if (x >= 0 && x < N && y >= 0 && y < N) place(x, y)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
board = Array.from({ length: N }, () => Array(N).fill(0))
|
||||
myTurn = true
|
||||
playing = true
|
||||
moveCount = 0
|
||||
hintCell = null
|
||||
startTs = Date.now()
|
||||
emit('score', 0)
|
||||
draw()
|
||||
}
|
||||
function stop() {}
|
||||
// 提示卡：为我标出当前最佳落点
|
||||
function useProp(code) {
|
||||
if (code === 'hint' && playing && myTurn) {
|
||||
hintCell = bestMove(1)
|
||||
draw()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('click', onClick)
|
||||
board = Array.from({ length: N }, () => Array(N).fill(0))
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="SIZE" :height="SIZE"></canvas>
|
||||
</template>
|
||||
201
src/games/components/JumpJumpGame.vue
Normal file
201
src/games/components/JumpJumpGame.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
// 跳一跳：按住蓄力松开起跳，落点越接近平台中心分越高
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, palette, randInt, pick } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 560
|
||||
const H = 560
|
||||
let ctx
|
||||
let loop
|
||||
let plats = [] // {x, w}（世界坐标，只需 x 轴）
|
||||
let player = { x: 0, y: 0, vx: 0, vy: 0, jumping: false }
|
||||
let cameraX = 0
|
||||
let charging = false
|
||||
let power = 0
|
||||
let score = 0
|
||||
let comboCenter = 0 // 连续踩中心次数
|
||||
let alive = false
|
||||
const PLAT_Y = H - 140 // 平台顶面（屏幕坐标）
|
||||
const COLORS_POOL = ['#ff5d73', '#4f8cff', '#4ade80', '#ffd500', '#b26bff', '#00e5ff']
|
||||
|
||||
function addPlat() {
|
||||
const last = plats[plats.length - 1]
|
||||
const gap = randInt(110, 210)
|
||||
const w = randInt(56, 110)
|
||||
plats.push({ x: last.x + last.w / 2 + gap, w, color: pick(COLORS_POOL) })
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
// 蓄力
|
||||
if (charging && !player.jumping) {
|
||||
power = Math.min(1, power + dt * 0.9)
|
||||
}
|
||||
// 跳跃物理（抛物线）
|
||||
if (player.jumping) {
|
||||
player.x += player.vx * dt
|
||||
player.y += player.vy * dt
|
||||
player.vy += 1500 * dt
|
||||
// 落回平台高度线
|
||||
if (player.y >= 0 && player.vy > 0) {
|
||||
player.y = 0
|
||||
player.jumping = false
|
||||
// 判定落点
|
||||
const p = plats.find((pl) => player.x >= pl.x - pl.w / 2 - 8 && player.x <= pl.x + pl.w / 2 + 8)
|
||||
if (!p) {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
// 距中心的偏差换算得分：中心 ≤8px 算完美（连续完美翻倍：2/4/8...）
|
||||
const off = Math.abs(player.x - p.x)
|
||||
if (off <= 8) {
|
||||
comboCenter++
|
||||
score += 2 * comboCenter
|
||||
} else {
|
||||
comboCenter = 0
|
||||
score += 1
|
||||
}
|
||||
emit('score', score)
|
||||
// 目标相机：让玩家保持在屏幕 1/3 处
|
||||
addPlat()
|
||||
}
|
||||
}
|
||||
// 相机平滑跟随
|
||||
const targetCam = player.x - W / 3
|
||||
cameraX += (targetCam - cameraX) * Math.min(1, dt * 6)
|
||||
// 清理走过的平台
|
||||
if (plats.length > 8) plats.shift()
|
||||
draw()
|
||||
}
|
||||
|
||||
function pressDown() {
|
||||
if (!alive || player.jumping) return
|
||||
charging = true
|
||||
power = 0
|
||||
}
|
||||
function release() {
|
||||
if (!alive || !charging || player.jumping) return
|
||||
charging = false
|
||||
// 起跳：功率决定水平速度
|
||||
player.jumping = true
|
||||
player.vx = 220 + power * 480
|
||||
player.vy = -620
|
||||
player.y = -0.01
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 平台
|
||||
plats.forEach((pl) => {
|
||||
const sx = pl.x - cameraX
|
||||
if (sx < -150 || sx > W + 150) return
|
||||
ctx.fillStyle = pl.color
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(sx - pl.w / 2, PLAT_Y, pl.w, 18, 8)
|
||||
ctx.fill()
|
||||
// 柱身
|
||||
ctx.globalAlpha = 0.35
|
||||
ctx.fillRect(sx - pl.w / 2 + 6, PLAT_Y + 18, pl.w - 12, H - PLAT_Y - 18)
|
||||
ctx.globalAlpha = 1
|
||||
// 中心点标记
|
||||
ctx.fillStyle = '#ffffff88'
|
||||
ctx.beginPath()
|
||||
ctx.arc(sx, PLAT_Y + 9, 3, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 玩家（蓄力时压扁）
|
||||
const px = player.x - cameraX
|
||||
const py = PLAT_Y + player.y - 16
|
||||
const squash = charging ? power * 8 : 0
|
||||
ctx.font = `${34 - squash}px serif`
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'bottom'
|
||||
ctx.fillText('🐸', px, py + squash / 2)
|
||||
// 蓄力条
|
||||
if (charging) {
|
||||
ctx.fillStyle = p.panel
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(W / 2 - 90, H - 46, 180, 14, 7)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = power > 0.85 ? '#ff5d73' : p.primary2
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(W / 2 - 90, H - 46, 180 * power, 14, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
// 连击提示
|
||||
if (comboCenter >= 2) {
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.font = 'bold 18px sans-serif'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`精准 ×${comboCenter}！`, W / 2, 46)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
plats = [{ x: 120, w: 110, color: pick(COLORS_POOL) }]
|
||||
addPlat()
|
||||
addPlat()
|
||||
player = { x: 120, y: 0, vx: 0, vy: 0, jumping: false }
|
||||
cameraX = 0
|
||||
power = 0
|
||||
charging = false
|
||||
score = 0
|
||||
comboCenter = 0
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
window.removeEventListener('keyup', onKeyUp)
|
||||
window.removeEventListener('keydown', onKeyDown)
|
||||
}
|
||||
// 复活卡：回到最近平台中心继续
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
const nearest = plats.reduce((a, b) => (Math.abs(a.x - player.x) < Math.abs(b.x - player.x) ? a : b))
|
||||
player = { x: nearest.x, y: 0, vx: 0, vy: 0, jumping: false }
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
function onKeyDown(e) {
|
||||
if (e.key === ' ') {
|
||||
e.preventDefault()
|
||||
pressDown()
|
||||
}
|
||||
}
|
||||
function onKeyUp(e) {
|
||||
if (e.key === ' ') release()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('pointerdown', pressDown)
|
||||
window.addEventListener('pointerup', release)
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
window.addEventListener('keyup', onKeyUp)
|
||||
loop = createLoop(update)
|
||||
plats = [{ x: 120, w: 110, color: pick(COLORS_POOL) }]
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
stop()
|
||||
window.removeEventListener('pointerup', release)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
204
src/games/components/KlotskiGame.vue
Normal file
204
src/games/components/KlotskiGame.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup>
|
||||
// 华容道：经典"横刀立马"布局，把曹操（2×2）移到底部出口
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
// 棋盘 4 列 × 5 行；块定义 {id, name, x, y, w, h, type}
|
||||
const blocks = ref([])
|
||||
const moves = ref(0)
|
||||
const playing = ref(false)
|
||||
const selected = ref(null)
|
||||
let startTs = 0
|
||||
|
||||
// 经典开局：横刀立马
|
||||
function layout() {
|
||||
blocks.value = [
|
||||
{ id: 'cc', name: '曹操', x: 1, y: 0, w: 2, h: 2, type: 'boss' },
|
||||
{ id: 'gy', name: '关羽', x: 1, y: 2, w: 2, h: 1, type: 'h' },
|
||||
{ id: 'zf', name: '张飞', x: 0, y: 0, w: 1, h: 2, type: 'v' },
|
||||
{ id: 'zy', name: '赵云', x: 3, y: 0, w: 1, h: 2, type: 'v' },
|
||||
{ id: 'mc', name: '马超', x: 0, y: 2, w: 1, h: 2, type: 'v' },
|
||||
{ id: 'hz', name: '黄忠', x: 3, y: 2, w: 1, h: 2, type: 'v' },
|
||||
{ id: 's1', name: '兵', x: 0, y: 4, w: 1, h: 1, type: 's' },
|
||||
{ id: 's2', name: '兵', x: 1, y: 3, w: 1, h: 1, type: 's' },
|
||||
{ id: 's3', name: '兵', x: 2, y: 3, w: 1, h: 1, type: 's' },
|
||||
{ id: 's4', name: '兵', x: 3, y: 4, w: 1, h: 1, type: 's' },
|
||||
]
|
||||
}
|
||||
|
||||
// 检查块移动 (dx,dy) 后是否合法
|
||||
function canMove(b, dx, dy) {
|
||||
const nx = b.x + dx
|
||||
const ny = b.y + dy
|
||||
if (nx < 0 || ny < 0 || nx + b.w > 4 || ny + b.h > 5) return false
|
||||
for (const o of blocks.value) {
|
||||
if (o.id === b.id) continue
|
||||
// 矩形重叠检测
|
||||
if (nx < o.x + o.w && nx + b.w > o.x && ny < o.y + o.h && ny + b.h > o.y) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function select(b) {
|
||||
if (!playing.value) return
|
||||
selected.value = b.id
|
||||
}
|
||||
|
||||
// 方向按钮移动选中块
|
||||
function moveSelected(dx, dy) {
|
||||
if (!playing.value || !selected.value) return
|
||||
const b = blocks.value.find((x) => x.id === selected.value)
|
||||
if (!b || !canMove(b, dx, dy)) return
|
||||
b.x += dx
|
||||
b.y += dy
|
||||
moves.value++
|
||||
// 胜利：曹操到达底部中间出口 (1,3)
|
||||
if (b.id === 'cc' && b.x === 1 && b.y === 3) {
|
||||
playing.value = false
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
// 得分：500 - 步数×2 - 用时，下限 60
|
||||
const score = Math.max(60, 500 - moves.value * 2 - secs)
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// 点击移动：优先尝试朝空位滑动（四方向找第一个可行方向）
|
||||
function tapMove(b) {
|
||||
if (!playing.value) return
|
||||
selected.value = b.id
|
||||
const dirs = [
|
||||
[0, 1],
|
||||
[0, -1],
|
||||
[1, 0],
|
||||
[-1, 0],
|
||||
]
|
||||
for (const [dx, dy] of dirs) {
|
||||
if (canMove(b, dx, dy)) {
|
||||
moveSelected(dx, dy)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
layout()
|
||||
moves.value = 0
|
||||
selected.value = null
|
||||
playing.value = true
|
||||
startTs = Date.now()
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
layout()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="klotski">
|
||||
<p class="hud text-dim">步数 {{ moves }} · 点击滑块自动滑动，或选中后用方向按钮</p>
|
||||
<div class="board">
|
||||
<div
|
||||
v-for="b in blocks"
|
||||
:key="b.id"
|
||||
class="block"
|
||||
:class="[b.type, { sel: selected === b.id }]"
|
||||
:style="{
|
||||
left: `calc(${b.x} * (25% ))`,
|
||||
top: `calc(${b.y} * 20%)`,
|
||||
width: `calc(${b.w} * 25% - 6px)`,
|
||||
height: `calc(${b.h} * 20% - 6px)`,
|
||||
}"
|
||||
@click="tapMove(b)"
|
||||
>
|
||||
{{ b.name }}
|
||||
</div>
|
||||
<!-- 出口标记 -->
|
||||
<div class="exit">▼ 出口 ▼</div>
|
||||
</div>
|
||||
<div class="pad">
|
||||
<button class="btn btn-ghost btn-sm" @click="moveSelected(0, -1)">↑</button>
|
||||
<div>
|
||||
<button class="btn btn-ghost btn-sm" @click="moveSelected(-1, 0)">←</button>
|
||||
<button class="btn btn-ghost btn-sm" @click="moveSelected(0, 1)">↓</button>
|
||||
<button class="btn btn-ghost btn-sm" @click="moveSelected(1, 0)">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.klotski {
|
||||
width: min(380px, 90vw);
|
||||
text-align: center;
|
||||
}
|
||||
.hud {
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.board {
|
||||
position: relative;
|
||||
aspect-ratio: 4/5;
|
||||
background: var(--bg-panel);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
margin: 3px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
transition: left 0.16s ease, top 0.16s ease, box-shadow 0.15s;
|
||||
user-select: none;
|
||||
color: #fff;
|
||||
}
|
||||
.block.boss {
|
||||
background: linear-gradient(135deg, #e5484d, #ff8fa3);
|
||||
font-size: 24px;
|
||||
}
|
||||
.block.h {
|
||||
background: linear-gradient(135deg, #2f9e6e, #4ade80);
|
||||
}
|
||||
.block.v {
|
||||
background: linear-gradient(135deg, #3563c4, #4f8cff);
|
||||
}
|
||||
.block.s {
|
||||
background: linear-gradient(135deg, #b98718, #ffd500);
|
||||
color: #443300;
|
||||
}
|
||||
.block.sel {
|
||||
box-shadow: 0 0 0 3px var(--accent), var(--glow);
|
||||
z-index: 2;
|
||||
}
|
||||
.exit {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
font-size: 11px;
|
||||
color: var(--primary);
|
||||
border-top: 2px dashed var(--primary);
|
||||
padding: 2px 0;
|
||||
}
|
||||
.pad {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.pad div {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
</style>
|
||||
147
src/games/components/LightsOutGame.vue
Normal file
147
src/games/components/LightsOutGame.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<script setup>
|
||||
// 关灯游戏：点击翻转自身与上下左右，全部关掉过关，关卡越深灯越多
|
||||
import { ref } from 'vue'
|
||||
import { randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const N = 5
|
||||
const lights = ref([]) // 5×5 布尔
|
||||
const level = ref(1)
|
||||
const moves = ref(0)
|
||||
const playing = ref(false)
|
||||
const totalLevels = 5 // 通关 5 关后结算
|
||||
let score = 0
|
||||
let hintCell = ref(null)
|
||||
let pressLog = [] // 打乱时按过的格子（提示卡用：再按一次即撤销）
|
||||
|
||||
function flip(r, c, log = false) {
|
||||
const toggle = (rr, cc) => {
|
||||
if (rr >= 0 && rr < N && cc >= 0 && cc < N) lights.value[rr][cc] = !lights.value[rr][cc]
|
||||
}
|
||||
toggle(r, c)
|
||||
toggle(r - 1, c)
|
||||
toggle(r + 1, c)
|
||||
toggle(r, c - 1)
|
||||
toggle(r, c + 1)
|
||||
if (log) {
|
||||
// 记录打乱按键（同一格按两次=没按，成对抵消）
|
||||
const key = `${r},${c}`
|
||||
const idx = pressLog.indexOf(key)
|
||||
if (idx >= 0) pressLog.splice(idx, 1)
|
||||
else pressLog.push(key)
|
||||
}
|
||||
}
|
||||
|
||||
// 生成第 lv 关：从全灭状态随机按 lv+4 次（保证有解）
|
||||
function build(lv) {
|
||||
lights.value = Array.from({ length: N }, () => Array(N).fill(false))
|
||||
pressLog = []
|
||||
for (let i = 0; i < lv + 4; i++) {
|
||||
flip(randInt(0, N - 1), randInt(0, N - 1), true)
|
||||
}
|
||||
// 万一全灭（抵消光了）再按一次
|
||||
if (allOff()) flip(randInt(0, N - 1), randInt(0, N - 1), true)
|
||||
hintCell.value = null
|
||||
}
|
||||
|
||||
function allOff() {
|
||||
return lights.value.every((row) => row.every((v) => !v))
|
||||
}
|
||||
|
||||
function click(r, c) {
|
||||
if (!playing.value) return
|
||||
flip(r, c, true)
|
||||
moves.value++
|
||||
hintCell.value = null
|
||||
if (allOff()) {
|
||||
// 过关：120 - 步数×2，下限 30
|
||||
score += Math.max(30, 120 - moves.value * 2)
|
||||
emit('score', score)
|
||||
if (level.value >= totalLevels) {
|
||||
playing.value = false
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
level.value++
|
||||
moves.value = 0
|
||||
build(level.value)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
level.value = 1
|
||||
moves.value = 0
|
||||
score = 0
|
||||
playing.value = true
|
||||
build(1)
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {}
|
||||
// 提示卡：高亮一个"按下即接近解"的格子（打乱记录中剩余的一步）
|
||||
function useProp(code) {
|
||||
if (code === 'hint' && playing.value && pressLog.length) {
|
||||
const [r, c] = pressLog[0].split(',').map(Number)
|
||||
hintCell.value = [r, c]
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
build(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="lo">
|
||||
<p class="status text-dim">第 {{ level }}/{{ totalLevels }} 关 · 本关步数 {{ moves }}</p>
|
||||
<div class="board">
|
||||
<template v-for="(row, r) in lights" :key="r">
|
||||
<button
|
||||
v-for="(v, c) in row"
|
||||
:key="`${r}-${c}`"
|
||||
class="light"
|
||||
:class="{ on: v, hint: hintCell && hintCell[0] === r && hintCell[1] === c }"
|
||||
@click="click(r, c)"
|
||||
></button>
|
||||
</template>
|
||||
</div>
|
||||
<p class="tip text-dim">点击会翻转自身与相邻的灯，把所有灯关掉！</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.lo {
|
||||
text-align: center;
|
||||
width: min(400px, 90vw);
|
||||
}
|
||||
.status {
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.light {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.light.on {
|
||||
background: radial-gradient(circle at 40% 35%, #fff6c8, var(--primary-2));
|
||||
border-color: var(--primary-2);
|
||||
box-shadow: 0 0 18px color-mix(in srgb, var(--primary-2) 65%, transparent);
|
||||
}
|
||||
.light.hint {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.tip {
|
||||
margin-top: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
527
src/games/components/LinkGame.vue
Normal file
527
src/games/components/LinkGame.vue
Normal file
@@ -0,0 +1,527 @@
|
||||
<script setup>
|
||||
// 连连看：12×8 图案盘（外围一圈虚拟空格供连线绕行）
|
||||
// 两个相同图案间若存在拐弯不超过两次的空路径即可消除
|
||||
// 关卡制：共 12 关，每关消除后剩余图块按不同规则移动（静止/下落/上浮/左靠/右靠/分裂），
|
||||
// 后 6 关（⚡加速轮）起始时间更紧；通关第 N 关解锁第 N+1 关（emit progress 上报进度）
|
||||
// 道具：hint 提示一对、time_extend 加 30 秒、bomb 直接消除一对
|
||||
import { ref, computed, onBeforeUnmount } from 'vue'
|
||||
|
||||
const emit = defineEmits(['score', 'end', 'progress'])
|
||||
|
||||
const COLS = 12
|
||||
const ROWS = 8
|
||||
// 虚拟网格含外围空圈：(ROWS+2) × (COLS+2)
|
||||
const GW = COLS + 2
|
||||
const GH = ROWS + 2
|
||||
const ICONS = ['🍎', '🍌', '🍇', '🍉', '🍓', '🍑', '🍍', '🥝', '🍒', '🥕', '🌽', '🍄', '🐱', '🐶', '🐼', '🦊', '🐸', '🐤', '🦁', '🐙', '⚽', '🎈', '⭐', '🌙']
|
||||
|
||||
const TOTAL_LEVELS = 12 // 通关第 12 关即全通关
|
||||
// 关卡移动模式：经典连连看每关规则不同，6 种循环（第 7~12 关为限时更紧的加速轮）
|
||||
const MODES = [
|
||||
{ key: 'none', name: '经典', tip: '图块不动' },
|
||||
{ key: 'down', name: '下落', tip: '消除后图块向下坠落' },
|
||||
{ key: 'up', name: '上浮', tip: '消除后图块向上浮起' },
|
||||
{ key: 'left', name: '左靠', tip: '消除后图块向左靠拢' },
|
||||
{ key: 'right', name: '右靠', tip: '消除后图块向右靠拢' },
|
||||
{ key: 'split', name: '分裂', tip: '消除后图块向两侧分开' },
|
||||
]
|
||||
// 每关起始时间：前 6 关 240 秒，加速轮 180 秒
|
||||
const levelTime = (lv) => (lv <= 6 ? 240 : 180)
|
||||
|
||||
const grid = ref([]) // 虚拟网格：'' 为空，否则为图案
|
||||
const selected = ref(null) // {r,c} 虚拟坐标
|
||||
const hintPair = ref(null) // 提示中的两个坐标
|
||||
const pathLine = ref('') // SVG 连线点串
|
||||
const score = ref(0)
|
||||
const level = ref(1)
|
||||
const timeLeft = ref(240)
|
||||
const playing = ref(false)
|
||||
const remain = ref(0)
|
||||
const modeBannerT = ref(0) // 关卡开场模式提示（秒）
|
||||
let timer = 0
|
||||
let comboAt = 0
|
||||
|
||||
// 当前关卡对应的移动模式
|
||||
const curMode = computed(() => MODES[(level.value - 1) % MODES.length])
|
||||
|
||||
// ---- 布板 ----
|
||||
function buildBoard() {
|
||||
// 每关 24 种图案 × 每种 4 个 = 96 格铺满
|
||||
const cells = []
|
||||
for (const icon of ICONS) for (let i = 0; i < 4; i++) cells.push(icon)
|
||||
// 洗牌
|
||||
for (let i = cells.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1))
|
||||
;[cells[i], cells[j]] = [cells[j], cells[i]]
|
||||
}
|
||||
const g = Array.from({ length: GH }, () => Array(GW).fill(''))
|
||||
let k = 0
|
||||
for (let r = 1; r <= ROWS; r++) {
|
||||
for (let c = 1; c <= COLS; c++) g[r][c] = cells[k++]
|
||||
}
|
||||
grid.value = g
|
||||
remain.value = ROWS * COLS
|
||||
// 保证开局有解
|
||||
if (!findRemovablePair()) shuffleBoard()
|
||||
}
|
||||
|
||||
// shuffleBoard 把剩余图案打乱重摆（保持位置集合不变）
|
||||
function shuffleBoard() {
|
||||
const g = grid.value
|
||||
const pos = []
|
||||
const icons = []
|
||||
for (let r = 1; r <= ROWS; r++) {
|
||||
for (let c = 1; c <= COLS; c++) {
|
||||
if (g[r][c]) {
|
||||
pos.push([r, c])
|
||||
icons.push(g[r][c])
|
||||
}
|
||||
}
|
||||
}
|
||||
do {
|
||||
for (let i = icons.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1))
|
||||
;[icons[i], icons[j]] = [icons[j], icons[i]]
|
||||
}
|
||||
pos.forEach(([r, c], i) => (g[r][c] = icons[i]))
|
||||
} while (!findRemovablePair() && icons.length > 2)
|
||||
grid.value = [...g.map((row) => [...row])]
|
||||
}
|
||||
|
||||
// ---- 路径搜索：BFS 状态 (r,c,方向)，拐弯数为代价，≤2 次可达即连通 ----
|
||||
const DIRS = [
|
||||
[-1, 0],
|
||||
[1, 0],
|
||||
[0, -1],
|
||||
[0, 1],
|
||||
]
|
||||
function findPath(a, b) {
|
||||
const g = grid.value
|
||||
// turns[r][c][dir] = 到达该格且朝向 dir 的最少拐弯数
|
||||
const best = Array.from({ length: GH }, () => Array.from({ length: GW }, () => [9, 9, 9, 9]))
|
||||
const queue = []
|
||||
// 记录前驱以还原路径
|
||||
const prev = {}
|
||||
for (let d = 0; d < 4; d++) {
|
||||
const nr = a.r + DIRS[d][0]
|
||||
const nc = a.c + DIRS[d][1]
|
||||
if (nr < 0 || nr >= GH || nc < 0 || nc >= GW) continue
|
||||
if (!(nr === b.r && nc === b.c) && g[nr][nc]) continue
|
||||
best[nr][nc][d] = 0
|
||||
prev[`${nr},${nc},${d}`] = null
|
||||
queue.push([nr, nc, d])
|
||||
}
|
||||
let found = null
|
||||
while (queue.length) {
|
||||
// 取拐弯数最小的状态（队列短，直接线性找）
|
||||
let bi = 0
|
||||
for (let i = 1; i < queue.length; i++) {
|
||||
const [r1, c1, d1] = queue[i]
|
||||
const [r0, c0, d0] = queue[bi]
|
||||
if (best[r1][c1][d1] < best[r0][c0][d0]) bi = i
|
||||
}
|
||||
const [r, c, d] = queue.splice(bi, 1)[0]
|
||||
const turns = best[r][c][d]
|
||||
if (turns > 2) continue
|
||||
if (r === b.r && c === b.c) {
|
||||
found = [r, c, d]
|
||||
break
|
||||
}
|
||||
for (let nd = 0; nd < 4; nd++) {
|
||||
const nt = turns + (nd === d ? 0 : 1)
|
||||
if (nt > 2) continue
|
||||
const nr = r + DIRS[nd][0]
|
||||
const nc = c + DIRS[nd][1]
|
||||
if (nr < 0 || nr >= GH || nc < 0 || nc >= GW) continue
|
||||
if (!(nr === b.r && nc === b.c) && g[nr][nc]) continue
|
||||
if (nt < best[nr][nc][nd]) {
|
||||
best[nr][nc][nd] = nt
|
||||
prev[`${nr},${nc},${nd}`] = [r, c, d]
|
||||
queue.push([nr, nc, nd])
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!found) return null
|
||||
// 还原路径（含起点）
|
||||
const pts = []
|
||||
let cur = found
|
||||
while (cur) {
|
||||
pts.unshift([cur[0], cur[1]])
|
||||
cur = prev[`${cur[0]},${cur[1]},${cur[2]}`]
|
||||
}
|
||||
pts.unshift([a.r, a.c])
|
||||
return pts
|
||||
}
|
||||
|
||||
// findRemovablePair 找一对可消除的图案（提示与死局检测共用）
|
||||
function findRemovablePair() {
|
||||
const g = grid.value
|
||||
const byIcon = {}
|
||||
for (let r = 1; r <= ROWS; r++) {
|
||||
for (let c = 1; c <= COLS; c++) {
|
||||
if (g[r][c]) (byIcon[g[r][c]] ||= []).push({ r, c })
|
||||
}
|
||||
}
|
||||
for (const list of Object.values(byIcon)) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
for (let j = i + 1; j < list.length; j++) {
|
||||
if (findPath(list[i], list[j])) return [list[i], list[j]]
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// ---- 交互 ----
|
||||
function clickTile(r, c) {
|
||||
if (!playing.value || !grid.value[r][c]) return
|
||||
hintPair.value = null
|
||||
const sel = selected.value
|
||||
if (!sel) {
|
||||
selected.value = { r, c }
|
||||
return
|
||||
}
|
||||
if (sel.r === r && sel.c === c) {
|
||||
selected.value = null
|
||||
return
|
||||
}
|
||||
if (grid.value[sel.r][sel.c] !== grid.value[r][c]) {
|
||||
selected.value = { r, c }
|
||||
return
|
||||
}
|
||||
const path = findPath(sel, { r, c })
|
||||
if (!path) {
|
||||
selected.value = { r, c }
|
||||
return
|
||||
}
|
||||
// 消除成功：画连线 → 300ms 后移除
|
||||
drawLine(path)
|
||||
const a = { ...sel }
|
||||
selected.value = null
|
||||
removePair(a, { r, c }, true)
|
||||
}
|
||||
|
||||
// removePair 消除一对图案（点击连线与炸弹道具共用）：计分、过关判定、按模式移动、死局洗牌
|
||||
function removePair(a, b, combo) {
|
||||
const now = Date.now()
|
||||
const isCombo = combo && now - comboAt < 3000
|
||||
comboAt = now
|
||||
score.value += isCombo ? 15 : 10
|
||||
emit('score', score.value)
|
||||
grid.value[a.r][a.c] = ''
|
||||
grid.value[b.r][b.c] = ''
|
||||
remain.value -= 2
|
||||
setTimeout(() => (pathLine.value = ''), 320)
|
||||
if (remain.value <= 0) {
|
||||
finishLevel()
|
||||
return
|
||||
}
|
||||
// 按本关模式移动剩余图块，再检查是否死局
|
||||
applyShift()
|
||||
if (!findRemovablePair()) shuffleBoard()
|
||||
}
|
||||
|
||||
// finishLevel 过关结算：上报解锁进度；最后一关给通关奖励并结束，否则进入下一关
|
||||
function finishLevel() {
|
||||
score.value += 50
|
||||
emit('score', score.value)
|
||||
emit('progress', Math.min(level.value + 1, TOTAL_LEVELS + 1))
|
||||
if (level.value >= TOTAL_LEVELS) {
|
||||
// 全部通关：额外奖励 +300
|
||||
score.value += 300
|
||||
emit('score', score.value)
|
||||
playing.value = false
|
||||
clearInterval(timer)
|
||||
emit('end', { score: score.value })
|
||||
return
|
||||
}
|
||||
level.value++
|
||||
timeLeft.value += 45
|
||||
buildBoard()
|
||||
showModeBanner()
|
||||
}
|
||||
|
||||
// drawLine 把路径转换为 SVG 折线（单位=格）
|
||||
function drawLine(pts) {
|
||||
pathLine.value = pts.map(([r, c]) => `${c + 0.5},${r + 0.5}`).join(' ')
|
||||
}
|
||||
|
||||
// applyShift：按当前关卡模式移动剩余图块（每次消除后调用）
|
||||
function applyShift() {
|
||||
const mode = curMode.value.key
|
||||
if (mode === 'none') return
|
||||
const g = grid.value
|
||||
if (mode === 'down' || mode === 'up') {
|
||||
// 纵向压实：逐列收集非空图案，贴到底部（下落）或顶部（上浮）
|
||||
for (let c = 1; c <= COLS; c++) {
|
||||
const stack = []
|
||||
for (let r = 1; r <= ROWS; r++) if (g[r][c]) stack.push(g[r][c])
|
||||
for (let r = 1; r <= ROWS; r++) g[r][c] = ''
|
||||
stack.forEach((icon, i) => {
|
||||
const r = mode === 'down' ? ROWS - stack.length + 1 + i : 1 + i
|
||||
g[r][c] = icon
|
||||
})
|
||||
}
|
||||
} else if (mode === 'left' || mode === 'right') {
|
||||
// 横向压实：逐行收集，贴到左端或右端
|
||||
for (let r = 1; r <= ROWS; r++) {
|
||||
const line = []
|
||||
for (let c = 1; c <= COLS; c++) if (g[r][c]) line.push(g[r][c])
|
||||
for (let c = 1; c <= COLS; c++) g[r][c] = ''
|
||||
line.forEach((icon, i) => {
|
||||
const c = mode === 'left' ? 1 + i : COLS - line.length + 1 + i
|
||||
g[r][c] = icon
|
||||
})
|
||||
}
|
||||
} else if (mode === 'split') {
|
||||
// 分裂：左半区向左靠、右半区向右靠，中间逐渐掏空
|
||||
const mid = COLS / 2
|
||||
for (let r = 1; r <= ROWS; r++) {
|
||||
const leftIcons = []
|
||||
const rightIcons = []
|
||||
for (let c = 1; c <= mid; c++) if (g[r][c]) leftIcons.push(g[r][c])
|
||||
for (let c = mid + 1; c <= COLS; c++) if (g[r][c]) rightIcons.push(g[r][c])
|
||||
for (let c = 1; c <= COLS; c++) g[r][c] = ''
|
||||
leftIcons.forEach((icon, i) => (g[r][1 + i] = icon))
|
||||
rightIcons.forEach((icon, i) => (g[r][COLS - rightIcons.length + 1 + i] = icon))
|
||||
}
|
||||
}
|
||||
grid.value = [...g.map((row) => [...row])]
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft.value--
|
||||
if (timeLeft.value <= 0) {
|
||||
playing.value = false
|
||||
clearInterval(timer)
|
||||
emit('end', { score: score.value })
|
||||
}
|
||||
}
|
||||
|
||||
// 关卡开场：展示 2.4 秒的模式提示横幅
|
||||
let bannerTimer = 0
|
||||
function showModeBanner() {
|
||||
modeBannerT.value = 1
|
||||
clearTimeout(bannerTimer)
|
||||
bannerTimer = setTimeout(() => (modeBannerT.value = 0), 2400)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
// start 开局：opts.level 指定起始关（来自关卡选择面板，默认第 1 关）
|
||||
function start(opts) {
|
||||
score.value = 0
|
||||
level.value = Math.min(Math.max(opts?.level || 1, 1), TOTAL_LEVELS)
|
||||
timeLeft.value = levelTime(level.value)
|
||||
selected.value = null
|
||||
hintPair.value = null
|
||||
pathLine.value = ''
|
||||
playing.value = true
|
||||
buildBoard()
|
||||
showModeBanner()
|
||||
emit('score', 0)
|
||||
clearInterval(timer)
|
||||
timer = setInterval(tick, 1000)
|
||||
}
|
||||
function stop() {
|
||||
playing.value = false
|
||||
clearInterval(timer)
|
||||
}
|
||||
// hint：闪烁提示一对可消除图案；time_extend：+30 秒；bomb：直接炸掉一对（无视连线规则）
|
||||
function useProp(code) {
|
||||
if (!playing.value) return false
|
||||
if (code === 'time_extend') {
|
||||
timeLeft.value += 30
|
||||
return true
|
||||
}
|
||||
if (code === 'hint') {
|
||||
const pair = findRemovablePair()
|
||||
if (!pair) return false
|
||||
hintPair.value = pair
|
||||
setTimeout(() => (hintPair.value = null), 2000)
|
||||
return true
|
||||
}
|
||||
if (code === 'bomb') {
|
||||
// 优先炸可连的一对；没有就炸任意相同的一对
|
||||
let pair = findRemovablePair()
|
||||
if (!pair) {
|
||||
const g = grid.value
|
||||
const byIcon = {}
|
||||
for (let r = 1; r <= ROWS; r++) {
|
||||
for (let c = 1; c <= COLS; c++) {
|
||||
if (g[r][c]) (byIcon[g[r][c]] ||= []).push({ r, c })
|
||||
}
|
||||
}
|
||||
pair = Object.values(byIcon).find((l) => l.length >= 2)?.slice(0, 2) || null
|
||||
}
|
||||
if (!pair) return false
|
||||
selected.value = null
|
||||
removePair(pair[0], pair[1], false)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer)
|
||||
clearTimeout(bannerTimer)
|
||||
})
|
||||
|
||||
function isHint(r, c) {
|
||||
return hintPair.value?.some((p) => p.r === r && p.c === c)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="link-board">
|
||||
<div class="hud">
|
||||
<span>⏱ <b :class="{ danger: timeLeft <= 30 }">{{ timeLeft }}</b> 秒</span>
|
||||
<span>第 {{ level }}/12 关 <b class="mode-name">{{ curMode.name }}</b> · 剩 {{ remain }} 块</span>
|
||||
<span>得分 <b class="score">{{ score }}</b></span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<!-- 关卡开场：模式提示横幅 -->
|
||||
<div v-if="modeBannerT" class="mode-banner">
|
||||
<div class="mb-title">第 {{ level }} 关 · {{ curMode.name }}</div>
|
||||
<div class="mb-tip">{{ curMode.tip }}</div>
|
||||
</div>
|
||||
<!-- 含外圈虚拟空格的完整网格（外圈不可见但参与连线） -->
|
||||
<div class="grid" :style="{ gridTemplateColumns: `repeat(${GW}, 1fr)` }">
|
||||
<template v-for="(row, r) in grid" :key="r">
|
||||
<button
|
||||
v-for="(icon, c) in row"
|
||||
:key="`${r}-${c}`"
|
||||
class="tile"
|
||||
:class="{
|
||||
empty: !icon,
|
||||
border: r === 0 || r === GH - 1 || c === 0 || c === GW - 1,
|
||||
sel: selected?.r === r && selected?.c === c,
|
||||
hint: isHint(r, c),
|
||||
}"
|
||||
@click="clickTile(r, c)"
|
||||
>
|
||||
{{ icon }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 消除连线 -->
|
||||
<svg v-if="pathLine" class="line-svg" :viewBox="`0 0 ${GW} ${GH}`" preserveAspectRatio="none">
|
||||
<polyline :points="pathLine" fill="none" stroke="var(--accent)" stroke-width="0.14" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="tips">点击两个相同图案消除，连线最多拐两次弯 · 3 秒内连续消除有加成 · 共 12 关每关规则不同，通关自动解锁下一关</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.link-board {
|
||||
width: min(680px, 94vw);
|
||||
text-align: center;
|
||||
}
|
||||
.hud {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.danger {
|
||||
color: #ff5d73;
|
||||
}
|
||||
.score {
|
||||
color: var(--primary);
|
||||
}
|
||||
.grid-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
.tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
font-size: clamp(14px, 2.6vw, 24px);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.tile.empty {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.tile.border {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tile.sel {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
.tile.hint {
|
||||
border-color: var(--accent);
|
||||
animation: blink 0.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% {
|
||||
background: color-mix(in srgb, var(--accent) 35%, var(--bg-card));
|
||||
}
|
||||
}
|
||||
.line-svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mode-banner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
border-radius: 10px;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
animation: mb-fade 2.4s ease forwards;
|
||||
}
|
||||
.mb-title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
.mb-tip {
|
||||
font-size: 14px;
|
||||
color: var(--accent);
|
||||
}
|
||||
@keyframes mb-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
12% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.mode-name {
|
||||
color: var(--accent);
|
||||
}
|
||||
.tips {
|
||||
margin-top: 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
904
src/games/components/MarioGame.vue
Normal file
904
src/games/components/MarioGame.vue
Normal file
@@ -0,0 +1,904 @@
|
||||
<script setup>
|
||||
// 超级马里奥：按原版《超级马里奥兄弟》还原 World 1-1 / 1-2 / 1-3 / 1-4 完整第一世界
|
||||
// 机制还原：顶问号块出金币/蘑菇、吃蘑菇变大、大个子顶碎砖块、
|
||||
// 板栗仔走崖会掉落、乌龟沿平台折返、旗杆按抓取高度计分、1-1 水管暗道通地下奖励室、
|
||||
// 1-4 城堡关：岩浆即死、旋转火棍、库巴守桥（不可踩只能跳过）、摸斧头断桥库巴落岩浆
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette } from '../engine'
|
||||
import { buildLevels } from './marioLevels'
|
||||
|
||||
const emit = defineEmits(['score', 'end', 'progress'])
|
||||
const canvas = ref(null)
|
||||
const W = 800
|
||||
const H = 480
|
||||
const TILE = 32
|
||||
const LV = buildLevels() // 关卡数据不可变，重开/复活时重新解析即可复原砖块
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
// 玩家状态（big=吃过蘑菇的大个子形态）
|
||||
let player = { x: 0, y: 0, vx: 0, vy: 0, onGround: false, face: 1, big: false }
|
||||
const PW = 24
|
||||
function ph() {
|
||||
return player.big ? 56 : 30
|
||||
}
|
||||
let solidMap = new Map() // "列,行" → {c,r,kind} 全部实心块
|
||||
let coins = []
|
||||
let enemies = []
|
||||
let mushrooms = [] // 顶出来的蘑菇道具
|
||||
let particles = [] // 金币弹出/砖块碎片
|
||||
let flag = { x: -9999, topY: 0, baseY: 0 }
|
||||
let cameraX = 0
|
||||
let score = 0
|
||||
let levelIdx = 0
|
||||
let alive = false
|
||||
let won = false
|
||||
let shieldOn = false
|
||||
let invincible = 0
|
||||
let bannerT = 0 // 关卡开场横幅倒计时
|
||||
// ---- 城堡关（1-4）专属元素 ----
|
||||
let firebars = [] // 旋转火棍 {cx,cy,angle,speed}
|
||||
let lavaSet = new Set() // 岩浆格 "列,行"
|
||||
let axe = null // 斧头中心点 {x,y}
|
||||
let axeTaken = false
|
||||
let winT = 0 // 砍斧后的断桥演出倒计时（结束后过关）
|
||||
|
||||
// 四种场景的经典配色（原版 NES 色感）
|
||||
const THEMES = {
|
||||
overworld: { sky: '#5c94fc', block: '#c84c0c', seam: '#7a2400', deco: true, bush: true },
|
||||
underground: { sky: '#050510', block: '#3858e8', seam: '#101878', deco: false, bush: false },
|
||||
// 高空关：树顶平台是绿色，地面与阶梯仍是经典橙砖
|
||||
athletic: { sky: '#5c94fc', block: '#1f9a44', seam: '#0c5424', groundBlock: '#c84c0c', groundSeam: '#7a2400', deco: true, bush: false },
|
||||
// 城堡关：黑底灰砖
|
||||
castle: { sky: '#080810', block: '#b8b8c0', seam: '#50505c', deco: false, bush: false },
|
||||
}
|
||||
const Q_COLOR = '#e8a020'
|
||||
const USED_COLOR = '#8a5c28'
|
||||
const PIPE = { body: '#30a830', dark: '#186018', light: '#98e058' }
|
||||
|
||||
// 解析关卡网格为运行时对象
|
||||
function loadLevel(idx) {
|
||||
const lv = LV[idx]
|
||||
solidMap = new Map()
|
||||
coins = []
|
||||
enemies = []
|
||||
mushrooms = []
|
||||
particles = []
|
||||
firebars = []
|
||||
lavaSet = new Set()
|
||||
axe = null
|
||||
axeTaken = false
|
||||
winT = 0
|
||||
flag = { x: -9999, topY: 0, baseY: 0 } // 城堡关没有旗杆，必须重置避免残留上一关的判定
|
||||
lv.grid.forEach((row, r) => {
|
||||
for (let c = 0; c < row.length; c++) {
|
||||
const ch = row[c]
|
||||
if (['#', '%', '=', '?', 'M', '[', ']', '-'].includes(ch)) {
|
||||
solidMap.set(`${c},${r}`, { c, r, kind: ch })
|
||||
} else if (ch === 'X') {
|
||||
// 火棍轴心：本身是硬块，外加一条旋转火球链（相邻火棍反向旋转）
|
||||
solidMap.set(`${c},${r}`, { c, r, kind: '%' })
|
||||
firebars.push({ cx: c * TILE + TILE / 2, cy: r * TILE + TILE / 2, angle: firebars.length * 1.7, speed: firebars.length % 2 ? -2 : 2 })
|
||||
} else if (ch === '~') {
|
||||
lavaSet.add(`${c},${r}`)
|
||||
} else if (ch === 'A') {
|
||||
axe = { x: c * TILE + TILE / 2, y: r * TILE + TILE / 2 }
|
||||
} else if (ch === 'B') {
|
||||
enemies.push({ x: c * TILE, y: r * TILE, vx: -34, vy: 0, w: 52, h: 52, type: 'bowser', awake: false, dead: false, onGround: false, homeX: c * TILE, jumpT: 2.2 })
|
||||
} else if (ch === 'o') {
|
||||
coins.push({ x: c * TILE + TILE / 2, y: r * TILE + TILE / 2, taken: false })
|
||||
} else if (ch === 'E') {
|
||||
enemies.push({ x: c * TILE + 3, y: r * TILE + 4, vx: -46, vy: 0, w: 26, h: 28, type: 'goomba', awake: false, dead: false, onGround: false })
|
||||
} else if (ch === 'T') {
|
||||
enemies.push({ x: c * TILE + 3, y: r * TILE + 4, vx: -58, vy: 0, w: 26, h: 28, type: 'turtle', awake: false, dead: false, onGround: false })
|
||||
} else if (ch === 'S') {
|
||||
player.x = c * TILE + 4
|
||||
player.y = (r + 1) * TILE - ph()
|
||||
player.vx = 0
|
||||
player.vy = 0
|
||||
player.face = 1
|
||||
} else if (ch === 'F') {
|
||||
flag = { x: c * TILE + TILE / 2, topY: 3 * TILE, baseY: (r + 1) * TILE }
|
||||
}
|
||||
}
|
||||
})
|
||||
cameraX = 0
|
||||
bannerT = 1.6
|
||||
}
|
||||
|
||||
// 矩形是否碰到实心块
|
||||
function hitSolid(x, y, w, h) {
|
||||
const x1 = Math.floor(x / TILE)
|
||||
const x2 = Math.floor((x + w - 1) / TILE)
|
||||
const y1 = Math.floor(y / TILE)
|
||||
const y2 = Math.floor((y + h - 1) / TILE)
|
||||
for (let gy = y1; gy <= y2; gy++) {
|
||||
for (let gx = x1; gx <= x2; gx++) {
|
||||
if (solidMap.has(`${gx},${gy}`)) return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 是否处于地下奖励室（决定镜头边界与配色）
|
||||
function inBonus() {
|
||||
const lv = LV[levelIdx]
|
||||
return lv.bonusStartCol && player.x >= lv.bonusStartCol * TILE
|
||||
}
|
||||
// 当前镜头可移动范围
|
||||
function cameraBounds() {
|
||||
const lv = LV[levelIdx]
|
||||
if (inBonus()) return [lv.bonusStartCol * TILE, lv.grid[0].length * TILE - W]
|
||||
return [0, lv.mainCols * TILE - W]
|
||||
}
|
||||
|
||||
// 玩家脚下正踩着的暗道（站在水管顶时返回配置）
|
||||
function warpUnderFeet() {
|
||||
if (!player.onGround) return null
|
||||
const feetRow = Math.round((player.y + ph()) / TILE)
|
||||
const centerCol = Math.floor((player.x + PW / 2) / TILE)
|
||||
return (LV[levelIdx].warps || []).find((w) => w.row === feetRow && centerCol >= w.cols[0] && centerCol <= w.cols[1]) || null
|
||||
}
|
||||
|
||||
// 顶头撞到某一行的砖块：问号块弹金币/蘑菇，大个子可顶碎普通砖
|
||||
function bumpBlocks(row) {
|
||||
const x1 = Math.floor(player.x / TILE)
|
||||
const x2 = Math.floor((player.x + PW - 1) / TILE)
|
||||
for (let gx = x1; gx <= x2; gx++) {
|
||||
const s = solidMap.get(`${gx},${row}`)
|
||||
if (!s) continue
|
||||
if (s.kind === '?' || s.kind === 'M') {
|
||||
const hasMushroom = s.kind === 'M'
|
||||
s.kind = 'x' // 变成用过的哑块
|
||||
if (hasMushroom) {
|
||||
mushrooms.push({ x: gx * TILE + 4, y: row * TILE - 26, vx: 60, vy: 0, w: 24, h: 24 })
|
||||
} else {
|
||||
particles.push({ type: 'coin', x: gx * TILE + TILE / 2, y: row * TILE - 8, vy: -280, t: 0.55 })
|
||||
score += 20
|
||||
emit('score', score)
|
||||
}
|
||||
} else if (s.kind === '=' && player.big) {
|
||||
solidMap.delete(`${gx},${row}`)
|
||||
for (let i = 0; i < 4; i++) {
|
||||
particles.push({
|
||||
type: 'chip',
|
||||
x: gx * TILE + TILE / 2,
|
||||
y: row * TILE + TILE / 2,
|
||||
vx: (i % 2 ? 1 : -1) * (60 + Math.random() * 90),
|
||||
vy: -180 - Math.random() * 160,
|
||||
t: 0.7,
|
||||
})
|
||||
}
|
||||
score += 10
|
||||
emit('score', score)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 受伤：护盾 → 大变小 → 死亡 三级缓冲
|
||||
function hurt() {
|
||||
if (invincible > 0) return
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
invincible = 1.2
|
||||
return
|
||||
}
|
||||
if (player.big) {
|
||||
const feet = player.y + ph()
|
||||
player.big = false
|
||||
player.y = feet - ph()
|
||||
invincible = 1.6
|
||||
return
|
||||
}
|
||||
die()
|
||||
}
|
||||
|
||||
function die() {
|
||||
if (!alive) return
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
|
||||
// 过关推进：上报解锁进度；还有下一关则加载，否则全通关结算
|
||||
function finishLevel() {
|
||||
emit('progress', levelIdx + 2) // 通关第 N 关（下标+1）解锁第 N+1 关
|
||||
if (levelIdx < LV.length - 1) {
|
||||
levelIdx++
|
||||
loadLevel(levelIdx)
|
||||
} else {
|
||||
score += 300 // 全通关奖励
|
||||
emit('score', score)
|
||||
won = true
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// 摸到旗杆：按抓取高度给分（越高越多，原版规则），然后进入下一关
|
||||
function grabFlag() {
|
||||
const frac = Math.max(0, Math.min(1, (flag.baseY - (player.y + ph())) / (flag.baseY - flag.topY - 30)))
|
||||
score += Math.round(20 + 180 * frac)
|
||||
emit('score', score)
|
||||
finishLevel()
|
||||
}
|
||||
|
||||
// 摸到斧头（1-4 终点）：砍断锁链桥塌，库巴落岩浆，短暂演出后过关
|
||||
function grabAxe() {
|
||||
axeTaken = true
|
||||
score += 400
|
||||
emit('score', score)
|
||||
for (const [key, s] of [...solidMap]) {
|
||||
if (s.kind === '-') {
|
||||
solidMap.delete(key)
|
||||
particles.push({
|
||||
type: 'chip',
|
||||
x: s.c * TILE + TILE / 2,
|
||||
y: s.r * TILE + TILE / 2,
|
||||
vx: (Math.random() - 0.5) * 140,
|
||||
vy: -120 - Math.random() * 140,
|
||||
t: 0.8,
|
||||
})
|
||||
}
|
||||
}
|
||||
winT = 1.5
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
if (bannerT > 0) bannerT -= dt
|
||||
const phv = ph()
|
||||
// 水平移动
|
||||
const acc = 900
|
||||
const maxSpeed = 240
|
||||
if (keys.has('ArrowLeft') || keys.has('a')) {
|
||||
player.vx = Math.max(-maxSpeed, player.vx - acc * dt)
|
||||
player.face = -1
|
||||
} else if (keys.has('ArrowRight') || keys.has('d')) {
|
||||
player.vx = Math.min(maxSpeed, player.vx + acc * dt)
|
||||
player.face = 1
|
||||
} else {
|
||||
player.vx *= 1 - Math.min(1, 8 * dt)
|
||||
}
|
||||
// 跳跃
|
||||
if ((keys.has(' ') || keys.has('ArrowUp') || keys.has('w')) && player.onGround) {
|
||||
player.vy = -650
|
||||
player.onGround = false
|
||||
}
|
||||
// 暗道：站在水管顶按 ↓ 传送
|
||||
if ((keys.has('ArrowDown') || keys.has('s')) && player.onGround) {
|
||||
const w = warpUnderFeet()
|
||||
if (w) {
|
||||
player.x = w.dest.c * TILE + (TILE - PW) / 2
|
||||
player.y = w.dest.r * TILE - ph()
|
||||
player.vx = 0
|
||||
player.vy = 0
|
||||
const [lo, hi] = cameraBounds()
|
||||
cameraX = Math.max(lo, Math.min(hi, player.x - W / 3))
|
||||
}
|
||||
}
|
||||
// 重力
|
||||
player.vy = Math.min(900, player.vy + 1500 * dt)
|
||||
// X 轴移动 + 碰撞
|
||||
player.x += player.vx * dt
|
||||
if (hitSolid(player.x, player.y, PW, phv)) {
|
||||
player.x -= player.vx * dt
|
||||
player.vx = 0
|
||||
}
|
||||
if (player.x < 0) player.x = 0
|
||||
// Y 轴移动 + 碰撞（上顶触发砖块交互）
|
||||
player.y += player.vy * dt
|
||||
if (hitSolid(player.x, player.y, PW, phv)) {
|
||||
if (player.vy > 0) {
|
||||
player.y = Math.floor((player.y + phv) / TILE) * TILE - phv
|
||||
player.onGround = true
|
||||
} else {
|
||||
const bumpRow = Math.floor(player.y / TILE)
|
||||
player.y = (bumpRow + 1) * TILE
|
||||
bumpBlocks(bumpRow)
|
||||
}
|
||||
player.vy = 0
|
||||
} else {
|
||||
player.onGround = false
|
||||
}
|
||||
// 掉坑死亡
|
||||
if (player.y > H + 80) {
|
||||
die()
|
||||
return
|
||||
}
|
||||
// 岩浆即死（护盾与变大都救不了，原版城堡关规则）
|
||||
if (lavaSet.size) {
|
||||
const feetRow = Math.floor((player.y + phv - 4) / TILE)
|
||||
const midCol = Math.floor((player.x + PW / 2) / TILE)
|
||||
if (lavaSet.has(`${midCol},${feetRow}`)) {
|
||||
die()
|
||||
return
|
||||
}
|
||||
}
|
||||
// 吃金币
|
||||
const pcx = player.x + PW / 2
|
||||
const pcy = player.y + phv / 2
|
||||
coins.forEach((c) => {
|
||||
if (!c.taken && Math.abs(c.x - pcx) < 24 && Math.abs(c.y - pcy) < phv / 2 + 12) {
|
||||
c.taken = true
|
||||
score += 10
|
||||
emit('score', score)
|
||||
}
|
||||
})
|
||||
// 蘑菇道具：滑动 + 重力，吃到变大
|
||||
mushrooms = mushrooms.filter((m) => {
|
||||
m.vy = Math.min(700, m.vy + 1500 * dt)
|
||||
m.x += m.vx * dt
|
||||
if (hitSolid(m.x, m.y, m.w, m.h)) {
|
||||
m.x -= m.vx * dt
|
||||
m.vx *= -1
|
||||
}
|
||||
m.y += m.vy * dt
|
||||
if (hitSolid(m.x, m.y, m.w, m.h)) {
|
||||
if (m.vy > 0) m.y = Math.floor((m.y + m.h) / TILE) * TILE - m.h
|
||||
else m.y = Math.ceil(m.y / TILE) * TILE
|
||||
m.vy = 0
|
||||
}
|
||||
if (m.y > H + 80) return false
|
||||
// 拾取判定
|
||||
if (player.x + PW > m.x && player.x < m.x + m.w && player.y + phv > m.y && player.y < m.y + m.h) {
|
||||
score += 50
|
||||
emit('score', score)
|
||||
if (!player.big) {
|
||||
const feet = player.y + phv
|
||||
player.big = true
|
||||
player.y = feet - ph()
|
||||
if (hitSolid(player.x, player.y, PW, ph())) player.y = feet - 30 // 头顶太低则保持位置（依然变大）
|
||||
}
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
// 敌人：进入视野才激活；板栗仔会走下悬崖，乌龟在平台边折返
|
||||
enemies.forEach((e) => {
|
||||
if (e.dead) return
|
||||
if (!e.awake) {
|
||||
if (e.x < cameraX + W + 48) e.awake = true
|
||||
else return
|
||||
}
|
||||
e.vy = Math.min(900, e.vy + 1500 * dt)
|
||||
e.x += e.vx * dt
|
||||
if (hitSolid(e.x, e.y, e.w, e.h)) {
|
||||
e.x -= e.vx * dt
|
||||
e.vx *= -1
|
||||
}
|
||||
e.y += e.vy * dt
|
||||
e.onGround = false
|
||||
if (hitSolid(e.x, e.y, e.w, e.h)) {
|
||||
if (e.vy > 0) {
|
||||
e.y = Math.floor((e.y + e.h) / TILE) * TILE - e.h
|
||||
e.onGround = true
|
||||
} else {
|
||||
e.y = Math.ceil(e.y / TILE) * TILE
|
||||
}
|
||||
e.vy = 0
|
||||
}
|
||||
// 乌龟（红龟习性）：前方没路就掉头，不会走下平台
|
||||
if (e.type === 'turtle' && e.onGround) {
|
||||
const aheadX = e.vx < 0 ? e.x - 2 : e.x + e.w
|
||||
if (!hitSolid(aheadX, e.y + e.h + 2, 2, 6)) e.vx *= -1
|
||||
}
|
||||
// 库巴：在桥上小范围巡逻，周期性起跳（原版守桥行为）
|
||||
if (e.type === 'bowser') {
|
||||
e.jumpT -= dt
|
||||
if (e.jumpT <= 0 && e.onGround) {
|
||||
e.vy = -430
|
||||
e.jumpT = 2 + Math.random() * 1.6
|
||||
}
|
||||
if (e.x < e.homeX - 76) e.vx = Math.abs(e.vx)
|
||||
if (e.x > e.homeX + 76) e.vx = -Math.abs(e.vx)
|
||||
}
|
||||
// 落入岩浆：溅起火花后消失（断桥后的库巴就是这个下场）
|
||||
if (lavaSet.size) {
|
||||
const eRow = Math.floor((e.y + e.h - 4) / TILE)
|
||||
const eCol = Math.floor((e.x + e.w / 2) / TILE)
|
||||
if (lavaSet.has(`${eCol},${eRow}`)) {
|
||||
e.dead = true
|
||||
for (let i = 0; i < 6; i++) {
|
||||
particles.push({ type: 'chip', x: e.x + e.w / 2, y: e.y + e.h, vx: (Math.random() - 0.5) * 180, vy: -140 - Math.random() * 160, t: 0.6 })
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
// 掉出场景
|
||||
if (e.y > H + 80) {
|
||||
e.dead = true
|
||||
return
|
||||
}
|
||||
// 与玩家碰撞（库巴不可踩，任何接触都受伤）
|
||||
const overlapX = player.x + PW > e.x && player.x < e.x + e.w
|
||||
const overlapY = player.y + phv > e.y && player.y < e.y + e.h
|
||||
if (overlapX && overlapY) {
|
||||
if (e.type !== 'bowser' && player.vy > 60 && player.y + phv - e.y < 22) {
|
||||
e.dead = true
|
||||
player.vy = -380
|
||||
score += e.type === 'turtle' ? 80 : 50
|
||||
emit('score', score)
|
||||
} else {
|
||||
hurt()
|
||||
if (!alive) return
|
||||
}
|
||||
}
|
||||
})
|
||||
if (!alive) return
|
||||
enemies = enemies.filter((e) => !e.dead)
|
||||
// 旋转火棍：转动火球链，碰到任意火球受伤
|
||||
firebars.forEach((fb) => {
|
||||
fb.angle += fb.speed * dt
|
||||
if (invincible > 0 || !alive) return
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
const bx = fb.cx + Math.cos(fb.angle) * i * 13
|
||||
const by = fb.cy + Math.sin(fb.angle) * i * 13
|
||||
// 圆（火球半径 8）与玩家矩形的最近点距离判定
|
||||
const nx = Math.max(player.x, Math.min(bx, player.x + PW))
|
||||
const ny = Math.max(player.y, Math.min(by, player.y + phv))
|
||||
if ((bx - nx) ** 2 + (by - ny) ** 2 < 64) {
|
||||
hurt()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
if (!alive) return
|
||||
// 粒子（金币弹出 / 砖块碎片）
|
||||
particles = particles.filter((p) => {
|
||||
p.t -= dt
|
||||
p.y += p.vy * dt
|
||||
p.vy += 900 * dt
|
||||
if (p.vx) p.x += p.vx * dt
|
||||
return p.t > 0
|
||||
})
|
||||
// 斧头判定（1-4 终点）：摸到即断桥
|
||||
if (axe && !axeTaken && Math.abs(pcx - axe.x) < 26 && Math.abs(pcy - axe.y) < 30) {
|
||||
grabAxe()
|
||||
}
|
||||
// 断桥演出结束 → 过关
|
||||
if (winT > 0) {
|
||||
winT -= dt
|
||||
if (winT <= 0) {
|
||||
finishLevel()
|
||||
draw()
|
||||
return
|
||||
}
|
||||
}
|
||||
// 旗杆判定（奖励室内不判定；城堡关没有旗杆）
|
||||
if (flag.x > 0 && !inBonus() && Math.abs(pcx - flag.x) < 14 && player.y + phv > flag.topY) {
|
||||
grabFlag()
|
||||
draw()
|
||||
return
|
||||
}
|
||||
// 镜头跟随
|
||||
const [lo, hi] = cameraBounds()
|
||||
const target = player.x - W / 3
|
||||
cameraX = Math.max(lo, Math.min(hi, cameraX + (target - cameraX) * Math.min(1, dt * 8)))
|
||||
draw()
|
||||
}
|
||||
|
||||
// ---------------- 绘制 ----------------
|
||||
// 远景装饰：山丘 / 灌木 / 云朵（按列取模确定位置，与原版风景节奏近似）
|
||||
function drawDeco(theme) {
|
||||
const c1 = Math.floor(cameraX / TILE) - 4
|
||||
const c2 = Math.floor((cameraX + W) / TILE) + 4
|
||||
const groundY = 13 * TILE
|
||||
for (let c = c1; c <= c2; c++) {
|
||||
if (c < 0) continue
|
||||
const x = c * TILE
|
||||
if (c % 44 === 2) {
|
||||
// 大山丘
|
||||
ctx.fillStyle = '#12a022'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x - 60, groundY)
|
||||
ctx.quadraticCurveTo(x + 20, groundY - 110, x + 100, groundY)
|
||||
ctx.fill()
|
||||
} else if (c % 44 === 24) {
|
||||
// 小山丘
|
||||
ctx.fillStyle = '#12a022'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x - 40, groundY)
|
||||
ctx.quadraticCurveTo(x + 10, groundY - 60, x + 60, groundY)
|
||||
ctx.fill()
|
||||
}
|
||||
if (theme.bush && c % 36 === 13) {
|
||||
ctx.fillStyle = '#28c040'
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, groundY - 10, 14, 0, 7)
|
||||
ctx.arc(x + 20, groundY - 14, 17, 0, 7)
|
||||
ctx.arc(x + 40, groundY - 10, 14, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
if (c % 28 === 6 || c % 28 === 19) {
|
||||
// 云朵（两种高度交错）
|
||||
const cy = c % 28 === 6 ? 2.4 * TILE : 3.6 * TILE
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.92)'
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, cy, 13, 0, 7)
|
||||
ctx.arc(x + 18, cy - 7, 15, 0, 7)
|
||||
ctx.arc(x + 38, cy, 13, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 单块绘制：根据种类画出地砖/硬块/砖块/问号块/水管
|
||||
function drawTile(s, theme) {
|
||||
const x = s.c * TILE
|
||||
const y = s.r * TILE
|
||||
if (s.kind === '#') {
|
||||
ctx.fillStyle = theme.groundBlock || theme.block
|
||||
ctx.fillRect(x, y, TILE, TILE)
|
||||
ctx.strokeStyle = theme.groundSeam || theme.seam
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + 1, y + 1, TILE - 2, TILE - 2)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + TILE / 2)
|
||||
ctx.lineTo(x + TILE, y + TILE / 2)
|
||||
ctx.moveTo(x + TILE / 2, y)
|
||||
ctx.lineTo(x + TILE / 2, y + TILE / 2)
|
||||
ctx.moveTo(x + TILE / 4, y + TILE / 2)
|
||||
ctx.lineTo(x + TILE / 4, y + TILE)
|
||||
ctx.stroke()
|
||||
} else if (s.kind === '%') {
|
||||
// 硬块（阶梯石）：四角铆钉
|
||||
ctx.fillStyle = theme.groundBlock || theme.block
|
||||
ctx.fillRect(x, y, TILE, TILE)
|
||||
ctx.strokeStyle = theme.groundSeam || theme.seam
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + 2, y + 2, TILE - 4, TILE - 4)
|
||||
ctx.fillStyle = theme.seam
|
||||
for (const [dx, dy] of [[7, 7], [TILE - 10, 7], [7, TILE - 10], [TILE - 10, TILE - 10]]) {
|
||||
ctx.fillRect(x + dx, y + dy, 3, 3)
|
||||
}
|
||||
} else if (s.kind === '=') {
|
||||
// 砖块：横缝 + 错位竖缝
|
||||
ctx.fillStyle = theme.block
|
||||
ctx.fillRect(x, y, TILE, TILE)
|
||||
ctx.strokeStyle = theme.seam
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + 1, y + 1, TILE - 2, TILE - 2)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + 10)
|
||||
ctx.lineTo(x + TILE, y + 10)
|
||||
ctx.moveTo(x, y + 21)
|
||||
ctx.lineTo(x + TILE, y + 21)
|
||||
ctx.moveTo(x + TILE / 2, y)
|
||||
ctx.lineTo(x + TILE / 2, y + 10)
|
||||
ctx.moveTo(x + TILE / 4, y + 10)
|
||||
ctx.lineTo(x + TILE / 4, y + 21)
|
||||
ctx.moveTo(x + (TILE * 3) / 4, y + 10)
|
||||
ctx.lineTo(x + (TILE * 3) / 4, y + 21)
|
||||
ctx.stroke()
|
||||
} else if (s.kind === '?' || s.kind === 'M') {
|
||||
// 问号块（金币块与蘑菇块外观一致，保持原版的"惊喜感"）
|
||||
ctx.fillStyle = Q_COLOR
|
||||
ctx.fillRect(x, y, TILE, TILE)
|
||||
ctx.strokeStyle = '#7a4a00'
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + 1.5, y + 1.5, TILE - 3, TILE - 3)
|
||||
ctx.fillStyle = '#7a4a00'
|
||||
for (const [dx, dy] of [[5, 5], [TILE - 8, 5], [5, TILE - 8], [TILE - 8, TILE - 8]]) {
|
||||
ctx.fillRect(x + dx, y + dy, 3, 3)
|
||||
}
|
||||
ctx.fillStyle = '#fff8e8'
|
||||
ctx.font = 'bold 20px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText('?', x + TILE / 2, y + TILE / 2 + 1)
|
||||
} else if (s.kind === 'x') {
|
||||
// 已用过的哑块
|
||||
ctx.fillStyle = USED_COLOR
|
||||
ctx.fillRect(x, y, TILE, TILE)
|
||||
ctx.strokeStyle = '#4a3010'
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + 1.5, y + 1.5, TILE - 3, TILE - 3)
|
||||
ctx.fillStyle = '#4a3010'
|
||||
for (const [dx, dy] of [[5, 5], [TILE - 8, 5], [5, TILE - 8], [TILE - 8, TILE - 8]]) {
|
||||
ctx.fillRect(x + dx, y + dy, 3, 3)
|
||||
}
|
||||
} else if (s.kind === '-') {
|
||||
// 库巴木桥板：顶部锁链绳 + 木板（砍斧后整段塌落）
|
||||
ctx.fillStyle = '#a06428'
|
||||
ctx.fillRect(x, y, TILE, 12)
|
||||
ctx.strokeStyle = '#5c3410'
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + 1, y + 1, TILE - 2, 10)
|
||||
ctx.strokeStyle = '#c8c8d0'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y - 6)
|
||||
ctx.quadraticCurveTo(x + TILE / 2, y - 10, x + TILE, y - 6)
|
||||
ctx.stroke()
|
||||
} else if (s.kind === '[' || s.kind === ']') {
|
||||
// 水管：管口比管身宽一圈
|
||||
const isTop = !['[', ']'].includes(solidMap.get(`${s.c},${s.r - 1}`)?.kind)
|
||||
const left = s.kind === '['
|
||||
ctx.fillStyle = PIPE.body
|
||||
ctx.fillRect(x + (left ? 3 : 0), y, TILE - 3, TILE)
|
||||
ctx.fillStyle = PIPE.light
|
||||
ctx.fillRect(x + (left ? 6 : 2), y, 5, TILE)
|
||||
ctx.fillStyle = PIPE.dark
|
||||
ctx.fillRect(x + (left ? TILE - 4 : TILE - 7), y, 4, TILE)
|
||||
if (isTop) {
|
||||
ctx.fillStyle = PIPE.body
|
||||
ctx.fillRect(x + (left ? 0 : -1), y, TILE + 1, 12)
|
||||
ctx.strokeStyle = PIPE.dark
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x + (left ? 0.5 : -0.5), y + 0.5, TILE + 0.5, 12)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 终点城堡（装饰物）
|
||||
function drawCastle(colX, theme) {
|
||||
const x0 = colX * TILE
|
||||
const gy = 13 * TILE
|
||||
ctx.fillStyle = theme.block
|
||||
ctx.fillRect(x0, gy - 4 * TILE, 5 * TILE, 4 * TILE)
|
||||
ctx.fillRect(x0 + TILE, gy - 6 * TILE, 3 * TILE, 2 * TILE)
|
||||
// 城齿
|
||||
for (let i = 0; i < 5; i += 2) ctx.fillRect(x0 + i * TILE, gy - 4 * TILE - 10, TILE, 10)
|
||||
for (let i = 1; i < 4; i += 2) ctx.fillRect(x0 + i * TILE, gy - 6 * TILE - 10, TILE, 10)
|
||||
ctx.strokeStyle = theme.seam
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(x0 + 1, gy - 4 * TILE + 1, 5 * TILE - 2, 4 * TILE - 2)
|
||||
ctx.strokeRect(x0 + TILE + 1, gy - 6 * TILE + 1, 3 * TILE - 2, 2 * TILE - 2)
|
||||
// 门洞与窗
|
||||
ctx.fillStyle = '#1a0a00'
|
||||
ctx.beginPath()
|
||||
ctx.arc(x0 + 2.5 * TILE, gy - 44, 18, Math.PI, 0)
|
||||
ctx.rect(x0 + 2.5 * TILE - 18, gy - 44, 36, 44)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.fillRect(x0 + 14, gy - 3 * TILE, 10, 13)
|
||||
ctx.fillRect(x0 + 5 * TILE - 24, gy - 3 * TILE, 10, 13)
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const lv = LV[levelIdx]
|
||||
const theme = inBonus() ? THEMES.underground : THEMES[lv.theme]
|
||||
const p = palette()
|
||||
ctx.fillStyle = theme.sky
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
ctx.save()
|
||||
ctx.translate(-Math.round(cameraX), 0)
|
||||
if (theme.deco) drawDeco(theme)
|
||||
// 岩浆：暗红底 + 顶面流动的亮橙波纹
|
||||
if (lavaSet.size) {
|
||||
const t = performance.now() / 300
|
||||
for (const key of lavaSet) {
|
||||
const [c, r] = key.split(',').map(Number)
|
||||
const x = c * TILE
|
||||
if (x < cameraX - TILE || x > cameraX + W + TILE) continue
|
||||
ctx.fillStyle = '#c83008'
|
||||
ctx.fillRect(x, r * TILE, TILE, TILE)
|
||||
if (!lavaSet.has(`${c},${r - 1}`)) {
|
||||
ctx.fillStyle = '#f89000'
|
||||
ctx.fillRect(x, r * TILE, TILE, 6)
|
||||
ctx.fillStyle = '#ffd860'
|
||||
ctx.fillRect(x + 4 + 3 * Math.sin(t + c * 1.7), r * TILE, 9, 3)
|
||||
ctx.fillRect(x + 19 + 3 * Math.sin(t * 1.3 + c), r * TILE, 7, 3)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 实心块（裁剪出镜头范围）
|
||||
for (const s of solidMap.values()) {
|
||||
const sx = s.c * TILE
|
||||
if (sx < cameraX - TILE || sx > cameraX + W + TILE) continue
|
||||
drawTile(s, theme)
|
||||
}
|
||||
// 金币
|
||||
ctx.font = '20px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
coins.forEach((c) => {
|
||||
if (c.taken || c.x < cameraX - 30 || c.x > cameraX + W + 30) return
|
||||
const t = Math.abs(Math.sin(performance.now() / 240 + c.x))
|
||||
ctx.save()
|
||||
ctx.translate(c.x, c.y)
|
||||
ctx.scale(0.4 + 0.6 * t, 1)
|
||||
ctx.fillText('🪙', 0, 0)
|
||||
ctx.restore()
|
||||
})
|
||||
// 粒子
|
||||
particles.forEach((pt) => {
|
||||
if (pt.type === 'coin') {
|
||||
ctx.globalAlpha = Math.max(0, pt.t / 0.55)
|
||||
ctx.font = '18px serif'
|
||||
ctx.fillText('🪙', pt.x, pt.y)
|
||||
ctx.globalAlpha = 1
|
||||
} else {
|
||||
ctx.fillStyle = THEMES[lv.theme].block
|
||||
ctx.fillRect(pt.x - 4, pt.y - 4, 8, 8)
|
||||
}
|
||||
})
|
||||
// 蘑菇道具：红盖白点
|
||||
mushrooms.forEach((m) => {
|
||||
ctx.fillStyle = '#e8d8b0'
|
||||
ctx.fillRect(m.x + 7, m.y + 12, 10, 12)
|
||||
ctx.fillStyle = '#e02818'
|
||||
ctx.beginPath()
|
||||
ctx.arc(m.x + 12, m.y + 12, 12, Math.PI, 0)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.beginPath()
|
||||
ctx.arc(m.x + 6, m.y + 8, 3, 0, 7)
|
||||
ctx.arc(m.x + 17, m.y + 8, 3, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 敌人（库巴大一号，其余小敌人 24px）
|
||||
ctx.font = '24px serif'
|
||||
enemies.forEach((e) => {
|
||||
if (e.x < cameraX - 80 || e.x > cameraX + W + 80) return
|
||||
if (e.type === 'bowser') {
|
||||
ctx.font = '46px serif'
|
||||
ctx.fillText('🐲', e.x + e.w / 2, e.y + e.h / 2 + 4)
|
||||
ctx.font = '24px serif'
|
||||
} else {
|
||||
ctx.fillText(e.type === 'turtle' ? '🐢' : '👿', e.x + 13, e.y + 15)
|
||||
}
|
||||
})
|
||||
// 旋转火棍：外焰橙、内芯亮黄交替
|
||||
firebars.forEach((fb) => {
|
||||
if (fb.cx < cameraX - 110 || fb.cx > cameraX + W + 110) return
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
const bx = fb.cx + Math.cos(fb.angle) * i * 13
|
||||
const by = fb.cy + Math.sin(fb.angle) * i * 13
|
||||
ctx.fillStyle = i % 2 ? '#ff9820' : '#ffd020'
|
||||
ctx.beginPath()
|
||||
ctx.arc(bx, by, 7, 0, 7)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = '#fff8d0'
|
||||
ctx.beginPath()
|
||||
ctx.arc(bx, by, 3, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
})
|
||||
// 斧头（1-4 终点）
|
||||
if (axe && !axeTaken) {
|
||||
ctx.font = '26px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText('🪓', axe.x, axe.y)
|
||||
}
|
||||
// 旗杆：杆 + 顶球 + 绿旗（城堡关没有旗杆）
|
||||
if (flag.x > 0) {
|
||||
ctx.strokeStyle = '#c8d0d8'
|
||||
ctx.lineWidth = 4
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(flag.x, flag.baseY)
|
||||
ctx.lineTo(flag.x, flag.topY)
|
||||
ctx.stroke()
|
||||
ctx.fillStyle = '#e8c020'
|
||||
ctx.beginPath()
|
||||
ctx.arc(flag.x, flag.topY - 4, 6, 0, 7)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = '#28a838'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(flag.x - 2, flag.topY + 4)
|
||||
ctx.lineTo(flag.x - 30, flag.topY + 15)
|
||||
ctx.lineTo(flag.x - 2, flag.topY + 26)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
}
|
||||
// 城堡
|
||||
if (lv.castleCol) drawCastle(lv.castleCol, THEMES[lv.theme])
|
||||
// 玩家（受伤无敌时闪烁）
|
||||
if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
|
||||
const px = player.x
|
||||
const py = player.y
|
||||
const u = ph() / 32 // 大个子按比例拉高
|
||||
ctx.fillStyle = '#e5484d'
|
||||
ctx.fillRect(px + 3, py, PW - 6, 8 * u)
|
||||
ctx.fillRect(player.face > 0 ? px + PW - 8 : px - 2, py + 2 * u, 10, 4 * u)
|
||||
ctx.fillStyle = '#ffcf9e'
|
||||
ctx.fillRect(px + 4, py + 8 * u, PW - 8, 9 * u)
|
||||
ctx.fillStyle = '#111'
|
||||
ctx.fillRect(player.face > 0 ? px + PW - 10 : px + 6, py + 10 * u, 3, 4 * u)
|
||||
ctx.fillStyle = '#3563c4'
|
||||
ctx.fillRect(px + 3, py + 17 * u, PW - 6, 10 * u)
|
||||
ctx.fillStyle = '#e5484d'
|
||||
ctx.fillRect(px, py + 17 * u, 5, 7 * u)
|
||||
ctx.fillRect(px + PW - 5, py + 17 * u, 5, 7 * u)
|
||||
ctx.fillStyle = '#6b3f23'
|
||||
ctx.fillRect(px + 2, py + 27 * u, 9, 5 * u)
|
||||
ctx.fillRect(px + PW - 11, py + 27 * u, 9, 5 * u)
|
||||
}
|
||||
if (shieldOn) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(player.x + PW / 2, player.y + ph() / 2, player.big ? 38 : 28, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 暗道提示：站在可进入的水管顶时显示
|
||||
const wp = warpUnderFeet()
|
||||
if (wp) {
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.55)'
|
||||
ctx.font = 'bold 13px sans-serif'
|
||||
const hx = player.x + PW / 2
|
||||
const hy = player.y - 22
|
||||
ctx.fillRect(hx - 42, hy - 12, 84, 20)
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.fillText('按 ↓ 进入', hx, hy - 2)
|
||||
}
|
||||
ctx.restore()
|
||||
// HUD（深色场景用白字）
|
||||
ctx.fillStyle = lv.theme === 'underground' || lv.theme === 'castle' || inBonus() ? '#fff' : '#103048'
|
||||
ctx.font = 'bold 15px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`世界 ${lv.name}`, 12, 10)
|
||||
if (player.big) ctx.fillText('🍄', 100, 8)
|
||||
// 关卡开场横幅
|
||||
if (bannerT > 0) {
|
||||
ctx.fillStyle = `rgba(0,0,0,${Math.min(0.55, bannerT)})`
|
||||
ctx.fillRect(W / 2 - 130, H / 2 - 46, 260, 76)
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.font = 'bold 30px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText(`世界 ${lv.name}`, W / 2, H / 2 - 8)
|
||||
}
|
||||
if (won) {
|
||||
ctx.font = 'bold 34px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillStyle = '#ffe040'
|
||||
ctx.fillText('🎉 全部通关！', W / 2, H / 2 - 60)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
// start 开局：opts.level 指定起始世界（来自关卡选择面板，1~4，默认从 1-1 开始）
|
||||
function start(opts) {
|
||||
levelIdx = Math.min(Math.max((opts?.level || 1) - 1, 0), LV.length - 1)
|
||||
score = 0
|
||||
won = false
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
player.big = false
|
||||
alive = true
|
||||
loadLevel(levelIdx)
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活：回到本关出生点重来（分数保留，形态重置）；护盾：挡一次伤害
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive && !won) {
|
||||
player.big = false
|
||||
loadLevel(levelIdx)
|
||||
invincible = 2
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
loop = createLoop(update)
|
||||
loadLevel(0)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
746
src/games/components/Match3Game.vue
Normal file
746
src/games/components/Match3Game.vue
Normal file
@@ -0,0 +1,746 @@
|
||||
<script setup>
|
||||
// 消消乐（团子版）：8×8 果冻团子盘，拖拽或点击相邻两只交换，凑三连消除
|
||||
// 关卡制：共 12 关，每关限定步数内把「本关得分」刷到目标分即过关（通关解锁下一关）
|
||||
// 动画流水线：交换动画 → 三连判定 →（不成立则弹回+摇头+气泡提示，不扣步数）
|
||||
// → 消除爆浆动画 → 重力下落 → 顶部补新团子 → 连锁循环
|
||||
// 道具：hint 提示一组可行交换、bomb 随机引爆 3×3
|
||||
import { ref, computed, onBeforeUnmount } from 'vue'
|
||||
|
||||
const emit = defineEmits(['score', 'end', 'progress'])
|
||||
|
||||
const N = 8
|
||||
const TOTAL_LEVELS = 12
|
||||
// 每关配置：target 本关目标分 / moves 步数 / colors 团子种类数（越多越难凑）
|
||||
const LEVELS = [
|
||||
{ target: 400, moves: 22, colors: 4 },
|
||||
{ target: 500, moves: 22, colors: 4 },
|
||||
{ target: 650, moves: 24, colors: 5 },
|
||||
{ target: 800, moves: 24, colors: 5 },
|
||||
{ target: 950, moves: 26, colors: 5 },
|
||||
{ target: 1100, moves: 26, colors: 5 },
|
||||
{ target: 1250, moves: 26, colors: 6 },
|
||||
{ target: 1400, moves: 28, colors: 6 },
|
||||
{ target: 1600, moves: 28, colors: 6 },
|
||||
{ target: 1800, moves: 30, colors: 6 },
|
||||
{ target: 2000, moves: 30, colors: 6 },
|
||||
{ target: 2200, moves: 32, colors: 6 },
|
||||
]
|
||||
// 无效交换的友好提示（轮换展示）
|
||||
const INVALID_TIPS = ['这样换凑不成三连哦～', '换过去也消不了呢', '再想想，要凑齐 3 个同色！']
|
||||
|
||||
const playing = ref(false)
|
||||
const level = ref(1)
|
||||
const moves = ref(0)
|
||||
const score = ref(0) // 全局累计分（结算用）
|
||||
const levelScore = ref(0) // 本关得分（过关判定用）
|
||||
const target = ref(LEVELS[0].target)
|
||||
const blobs = ref([]) // 团子数组 {id,t,r,c,yFrom,pop,shake,hint,born}
|
||||
const sel = ref(null) // 点选模式下选中的团子 id
|
||||
const tips = ref([]) // 浮动提示 {id,x,y,text,cls}
|
||||
const banner = ref(null) // 关卡横幅 {title,sub}
|
||||
let busy = false // 动画结算中锁输入
|
||||
let idSeq = 1
|
||||
let tipSeq = 1
|
||||
let tipIdx = 0
|
||||
let colors = 4
|
||||
let drag = null // 拖拽状态 {id,x0,y0,done}
|
||||
let timers = []
|
||||
|
||||
const sleep = (ms) => new Promise((res) => setTimeout(res, ms))
|
||||
const later = (fn, ms) => timers.push(setTimeout(fn, ms))
|
||||
const targetPct = computed(() => Math.min(100, Math.round((levelScore.value / target.value) * 100)))
|
||||
|
||||
// ---- 盘面数据 ----
|
||||
function at(r, c) {
|
||||
return blobs.value.find((b) => !b.pop && b.r === r && b.c === c)
|
||||
}
|
||||
// types 矩阵（三连判定用）
|
||||
function typeGrid() {
|
||||
const g = Array.from({ length: N }, () => Array(N).fill(-1))
|
||||
for (const b of blobs.value) {
|
||||
if (!b.pop && b.r >= 0 && b.r < N) g[b.r][b.c] = b.t
|
||||
}
|
||||
return g
|
||||
}
|
||||
|
||||
// findMatchSet 找出所有三连及以上的格子（返回 "r,c" 集合）
|
||||
function findMatchSet(g) {
|
||||
const marked = new Set()
|
||||
for (let r = 0; r < N; r++) {
|
||||
let run = 1
|
||||
for (let c = 1; c <= N; c++) {
|
||||
if (c < N && g[r][c] >= 0 && g[r][c] === g[r][c - 1]) run++
|
||||
else {
|
||||
if (run >= 3) for (let k = c - run; k < c; k++) marked.add(`${r},${k}`)
|
||||
run = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let c = 0; c < N; c++) {
|
||||
let run = 1
|
||||
for (let r = 1; r <= N; r++) {
|
||||
if (r < N && g[r]?.[c] >= 0 && g[r][c] === g[r - 1][c]) run++
|
||||
else {
|
||||
if (run >= 3) for (let k = r - run; k < r; k++) marked.add(`${k},${c}`)
|
||||
run = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
return marked
|
||||
}
|
||||
|
||||
// findValidSwap 找一组能成三连的交换（提示与死局检测共用）
|
||||
function findValidSwap() {
|
||||
const g = typeGrid()
|
||||
for (let r = 0; r < N; r++) {
|
||||
for (let c = 0; c < N; c++) {
|
||||
for (const [dr, dc] of [[0, 1], [1, 0]]) {
|
||||
const r2 = r + dr
|
||||
const c2 = c + dc
|
||||
if (r2 >= N || c2 >= N) continue
|
||||
;[g[r][c], g[r2][c2]] = [g[r2][c2], g[r][c]]
|
||||
const ok = findMatchSet(g).size > 0
|
||||
;[g[r][c], g[r2][c2]] = [g[r2][c2], g[r][c]]
|
||||
if (ok) return [{ r, c }, { r: r2, c: c2 }]
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// buildBoard 重新铺满盘面（保证无初始三连且有解）
|
||||
function buildBoard() {
|
||||
const g = Array.from({ length: N }, () => Array(N).fill(-1))
|
||||
for (let r = 0; r < N; r++) {
|
||||
for (let c = 0; c < N; c++) {
|
||||
let t
|
||||
do {
|
||||
t = Math.floor(Math.random() * colors)
|
||||
} while ((c >= 2 && g[r][c - 1] === t && g[r][c - 2] === t) || (r >= 2 && g[r - 1][c] === t && g[r - 2][c] === t))
|
||||
g[r][c] = t
|
||||
}
|
||||
}
|
||||
blobs.value = []
|
||||
for (let r = 0; r < N; r++) {
|
||||
for (let c = 0; c < N; c++) {
|
||||
blobs.value.push({ id: idSeq++, t: g[r][c], r, c, yFrom: null, pop: false, shake: false, hint: false })
|
||||
}
|
||||
}
|
||||
if (!findValidSwap()) buildBoard()
|
||||
}
|
||||
|
||||
// reshuffle 死局洗牌：保留位置，打乱现有团子的种类
|
||||
function reshuffle() {
|
||||
const ts = blobs.value.map((b) => b.t)
|
||||
let guard = 0
|
||||
do {
|
||||
for (let i = ts.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1))
|
||||
;[ts[i], ts[j]] = [ts[j], ts[i]]
|
||||
}
|
||||
blobs.value.forEach((b, i) => (b.t = ts[i]))
|
||||
} while ((findMatchSet(typeGrid()).size > 0 || !findValidSwap()) && ++guard < 60)
|
||||
floatTip(N / 2 - 0.5, N / 2 - 0.5, '无可消除，帮你洗好牌啦', 'info')
|
||||
}
|
||||
|
||||
// ---- 浮动提示 ----
|
||||
function floatTip(r, c, text, cls = 'warn') {
|
||||
const id = tipSeq++
|
||||
tips.value.push({ id, x: c, y: r, text, cls })
|
||||
later(() => (tips.value = tips.value.filter((t) => t.id !== id)), 1500)
|
||||
}
|
||||
|
||||
// ---- 交换与消除流水线 ----
|
||||
async function attemptSwap(a, b) {
|
||||
if (!a || !b || busy || !playing.value) return
|
||||
busy = true
|
||||
sel.value = null
|
||||
// 数据交换 → 位置过渡动画自动播放
|
||||
;[a.r, b.r] = [b.r, a.r]
|
||||
;[a.c, b.c] = [b.c, a.c]
|
||||
await sleep(260)
|
||||
const matches = findMatchSet(typeGrid())
|
||||
if (!matches.size) {
|
||||
// 不可消除：弹回 + 摇头 + 气泡提示（不扣步数）
|
||||
;[a.r, b.r] = [b.r, a.r]
|
||||
;[a.c, b.c] = [b.c, a.c]
|
||||
a.shake = b.shake = true
|
||||
floatTip(Math.min(a.r, b.r) - 0.4, (a.c + b.c) / 2, INVALID_TIPS[tipIdx++ % INVALID_TIPS.length])
|
||||
later(() => (a.shake = b.shake = false), 450)
|
||||
await sleep(300)
|
||||
busy = false
|
||||
return
|
||||
}
|
||||
moves.value--
|
||||
await resolveCascades(matches)
|
||||
busy = false
|
||||
afterResolve()
|
||||
}
|
||||
|
||||
// resolveCascades 消除→下落→补充→连锁（每一步等动画播完再进行下一步）
|
||||
async function resolveCascades(firstMatches) {
|
||||
let chain = 0
|
||||
let matches = firstMatches || findMatchSet(typeGrid())
|
||||
while (playing.value && matches.size) {
|
||||
chain++
|
||||
// 1) 爆浆动画
|
||||
let n = 0
|
||||
for (const key of matches) {
|
||||
const [r, c] = key.split(',').map(Number)
|
||||
const b = at(r, c)
|
||||
if (b) {
|
||||
b.pop = true
|
||||
n++
|
||||
}
|
||||
}
|
||||
const gain = n * 10 * chain
|
||||
levelScore.value += gain
|
||||
score.value += gain
|
||||
emit('score', score.value)
|
||||
if (chain >= 2) {
|
||||
const [fr, fc] = [...matches][0].split(',').map(Number)
|
||||
floatTip(fr, fc, `连锁 ×${chain}！+${gain}`, 'chain')
|
||||
}
|
||||
await sleep(300)
|
||||
// 2) 移除已爆的团子
|
||||
blobs.value = blobs.value.filter((b) => !b.pop)
|
||||
// 3) 重力下落 + 顶部补新（yFrom 从上方掉入）
|
||||
for (let c = 0; c < N; c++) {
|
||||
const col = blobs.value.filter((b) => b.c === c).sort((x, y) => y.r - x.r)
|
||||
let write = N - 1
|
||||
for (const b of col) {
|
||||
b.r = write--
|
||||
}
|
||||
let spawnK = 1
|
||||
while (write >= 0) {
|
||||
blobs.value.push({
|
||||
id: idSeq++, t: Math.floor(Math.random() * colors),
|
||||
r: write, c, yFrom: -spawnK, pop: false, shake: false, hint: false,
|
||||
})
|
||||
write--
|
||||
spawnK++
|
||||
}
|
||||
}
|
||||
// 触发新团子的下落过渡（渲染在上方一帧后落位）
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => blobs.value.forEach((b) => (b.yFrom = null)))
|
||||
})
|
||||
await sleep(360)
|
||||
matches = findMatchSet(typeGrid())
|
||||
}
|
||||
// 死局自动洗牌
|
||||
if (playing.value && !findValidSwap()) reshuffle()
|
||||
}
|
||||
|
||||
// afterResolve 一轮结算后的关卡判定：达标过关 / 步数用尽结束
|
||||
async function afterResolve() {
|
||||
if (!playing.value) return
|
||||
if (levelScore.value >= target.value) {
|
||||
// 过关：横幅演出 → 上报进度 → 下一关或全通关
|
||||
emit('progress', Math.min(level.value + 1, TOTAL_LEVELS + 1))
|
||||
if (level.value >= TOTAL_LEVELS) {
|
||||
score.value += 500 // 全通关奖励
|
||||
emit('score', score.value)
|
||||
banner.value = { title: '🏆 全部通关！', sub: '奖励 +500 分' }
|
||||
await sleep(1600)
|
||||
finish()
|
||||
return
|
||||
}
|
||||
banner.value = { title: `⭐ 第 ${level.value} 关通过！`, sub: `进入第 ${level.value + 1} 关` }
|
||||
await sleep(1500)
|
||||
banner.value = null
|
||||
loadLevel(level.value + 1)
|
||||
return
|
||||
}
|
||||
if (moves.value <= 0) {
|
||||
banner.value = { title: '💧 步数用完了', sub: `本关 ${levelScore.value} / ${target.value} 分` }
|
||||
await sleep(1400)
|
||||
finish()
|
||||
}
|
||||
}
|
||||
|
||||
function finish() {
|
||||
banner.value = null
|
||||
playing.value = false
|
||||
emit('end', { score: score.value })
|
||||
}
|
||||
|
||||
// loadLevel 进入某关：重置本关目标/步数/盘面并展示开场横幅
|
||||
function loadLevel(lv) {
|
||||
level.value = lv
|
||||
const conf = LEVELS[lv - 1]
|
||||
colors = conf.colors
|
||||
moves.value = conf.moves
|
||||
target.value = conf.target
|
||||
levelScore.value = 0
|
||||
sel.value = null
|
||||
buildBoard()
|
||||
banner.value = { title: `第 ${lv} 关`, sub: `${conf.moves} 步内拿到 ${conf.target} 分（${conf.colors} 色团子）` }
|
||||
later(() => (banner.value = null), 1800)
|
||||
}
|
||||
|
||||
// ---- 交互：拖拽换位 + 点选换位 ----
|
||||
function onDown(b, e) {
|
||||
if (!playing.value || busy) return
|
||||
drag = { id: b.id, x0: e.clientX, y0: e.clientY, done: false }
|
||||
}
|
||||
function onMove(e) {
|
||||
if (!drag || drag.done || busy) return
|
||||
const dx = e.clientX - drag.x0
|
||||
const dy = e.clientY - drag.y0
|
||||
if (Math.max(Math.abs(dx), Math.abs(dy)) < 16) return
|
||||
drag.done = true
|
||||
const b = blobs.value.find((x) => x.id === drag.id)
|
||||
if (!b) return
|
||||
const horizontal = Math.abs(dx) > Math.abs(dy)
|
||||
const nb = horizontal ? at(b.r, b.c + (dx > 0 ? 1 : -1)) : at(b.r + (dy > 0 ? 1 : -1), b.c)
|
||||
if (nb) attemptSwap(b, nb)
|
||||
}
|
||||
function onUp(b) {
|
||||
if (!drag || drag.done) {
|
||||
drag = null
|
||||
return
|
||||
}
|
||||
drag = null
|
||||
// 未构成拖拽 → 视为点选
|
||||
if (busy || !playing.value) return
|
||||
const cur = sel.value != null ? blobs.value.find((x) => x.id === sel.value) : null
|
||||
if (!cur) {
|
||||
sel.value = b.id
|
||||
return
|
||||
}
|
||||
if (cur.id === b.id) {
|
||||
sel.value = null
|
||||
return
|
||||
}
|
||||
if (Math.abs(cur.r - b.r) + Math.abs(cur.c - b.c) === 1) {
|
||||
attemptSwap(cur, b)
|
||||
} else {
|
||||
sel.value = b.id
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
// start 开局：opts.level 指定起始关（来自关卡选择面板）
|
||||
function start(opts) {
|
||||
score.value = 0
|
||||
emit('score', 0)
|
||||
playing.value = true
|
||||
busy = false
|
||||
tips.value = []
|
||||
loadLevel(Math.min(Math.max(opts?.level || 1, 1), TOTAL_LEVELS))
|
||||
}
|
||||
function stop() {
|
||||
playing.value = false
|
||||
timers.forEach(clearTimeout)
|
||||
timers = []
|
||||
}
|
||||
// hint：高亮一组可行交换；bomb：随机引爆 3×3（计分并触发连锁）
|
||||
function useProp(code) {
|
||||
if (!playing.value || busy) return false
|
||||
if (code === 'hint') {
|
||||
const pair = findValidSwap()
|
||||
if (!pair) return false
|
||||
for (const p of pair) {
|
||||
const b = at(p.r, p.c)
|
||||
if (b) {
|
||||
b.hint = true
|
||||
later(() => (b.hint = false), 2200)
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
if (code === 'bomb') {
|
||||
const cr = 1 + Math.floor(Math.random() * (N - 2))
|
||||
const cc = 1 + Math.floor(Math.random() * (N - 2))
|
||||
const keys = new Set()
|
||||
for (let r = cr - 1; r <= cr + 1; r++) for (let c = cc - 1; c <= cc + 1; c++) keys.add(`${r},${c}`)
|
||||
busy = true
|
||||
floatTip(cr, cc, '💥 轰！', 'chain')
|
||||
resolveCascades(keys).then(() => {
|
||||
busy = false
|
||||
afterResolve()
|
||||
})
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
onBeforeUnmount(stop)
|
||||
|
||||
// 团子样式定位：left/top 百分比（响应式），yFrom 用于新团子从上方掉入
|
||||
function blobStyle(b) {
|
||||
return {
|
||||
left: `${b.c * 12.5}%`,
|
||||
top: `${(b.yFrom ?? b.r) * 12.5}%`,
|
||||
zIndex: b.pop ? 3 : sel.value === b.id ? 2 : 1,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m3-board">
|
||||
<div class="hud">
|
||||
<span>第 <b>{{ level }}</b>/12 关</span>
|
||||
<span>剩余步数 <b :class="{ danger: moves <= 5 }">{{ moves }}</b></span>
|
||||
<span>总分 <b class="score">{{ score }}</b></span>
|
||||
</div>
|
||||
<!-- 本关目标进度条 -->
|
||||
<div class="tgt-row">
|
||||
<span class="tgt-label">本关 {{ levelScore }} / {{ target }}</span>
|
||||
<div class="tgt-bar"><i :style="{ width: targetPct + '%' }"></i></div>
|
||||
</div>
|
||||
<div class="board" @pointermove="onMove" @pointerleave="drag = null">
|
||||
<!-- 棋盘底格 -->
|
||||
<div class="cells">
|
||||
<i v-for="i in N * N" :key="i" class="cell" :class="{ alt: (Math.floor((i - 1) / N) + ((i - 1) % N)) % 2 }"></i>
|
||||
</div>
|
||||
<!-- 团子们 -->
|
||||
<div
|
||||
v-for="b in blobs"
|
||||
:key="b.id"
|
||||
class="blob"
|
||||
:class="[`t${b.t}`, { pop: b.pop, shake: b.shake, hint: b.hint, sel: sel === b.id }]"
|
||||
:style="blobStyle(b)"
|
||||
@pointerdown.prevent="onDown(b, $event)"
|
||||
@pointerup="onUp(b)"
|
||||
>
|
||||
<div class="body">
|
||||
<template v-if="b.t === 4">
|
||||
<span class="star-eye l">★</span><span class="star-eye r">★</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="eye l"></span><span class="eye r"></span>
|
||||
</template>
|
||||
<span class="mouth"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 浮动提示（无效交换/连锁/洗牌） -->
|
||||
<div v-for="t in tips" :key="t.id" class="float-tip" :class="t.cls" :style="{ left: `${(t.x + 0.5) * 12.5}%`, top: `${(t.y + 0.5) * 12.5}%` }">
|
||||
{{ t.text }}
|
||||
</div>
|
||||
<!-- 关卡横幅 -->
|
||||
<div v-if="banner" class="lv-banner">
|
||||
<div class="lb-title">{{ banner.title }}</div>
|
||||
<div class="lb-sub">{{ banner.sub }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips">拖拽（或点击选中再点相邻）团子交换 · 三连消除，连锁翻倍 · 步数内达到本关目标分即过关</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.m3-board {
|
||||
width: min(460px, 92vw);
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.hud {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.danger {
|
||||
color: #ff5d73;
|
||||
}
|
||||
.score {
|
||||
color: var(--primary);
|
||||
}
|
||||
.tgt-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tgt-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tgt-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tgt-bar i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
border-radius: 999px;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
.board {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 14px;
|
||||
background: var(--bg-card);
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
.cells {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-template-rows: repeat(8, 1fr);
|
||||
}
|
||||
.cell {
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
.cell.alt {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
/* ---- 团子 ---- */
|
||||
.blob {
|
||||
position: absolute;
|
||||
width: 12.5%;
|
||||
aspect-ratio: 1;
|
||||
cursor: grab;
|
||||
/* 位置过渡：交换 / 下落都靠它，带一点回弹 */
|
||||
transition: left 0.24s cubic-bezier(0.36, 1.35, 0.5, 1), top 0.3s cubic-bezier(0.36, 1.35, 0.5, 1);
|
||||
}
|
||||
.blob:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.body {
|
||||
position: absolute;
|
||||
inset: 7%;
|
||||
border-radius: 48% 52% 50% 50% / 56% 56% 44% 44%;
|
||||
/* 果冻质感：高光渐变 + 底部内阴影 */
|
||||
box-shadow:
|
||||
inset 0 -6px 10px rgba(0, 0, 0, 0.28),
|
||||
inset 0 4px 6px rgba(255, 255, 255, 0.35),
|
||||
0 3px 8px rgba(0, 0, 0, 0.35);
|
||||
animation: jelly 3.4s ease-in-out infinite;
|
||||
}
|
||||
/* 每只团子的呼吸错开，看起来更活 */
|
||||
.blob:nth-child(3n) .body { animation-delay: -1.1s; }
|
||||
.blob:nth-child(3n + 1) .body { animation-delay: -2.3s; }
|
||||
.blob:nth-child(5n) .body { animation-delay: -0.6s; }
|
||||
@keyframes jelly {
|
||||
0%, 100% { transform: scale(1, 1); }
|
||||
30% { transform: scale(1.05, 0.94); }
|
||||
60% { transform: scale(0.96, 1.05); }
|
||||
}
|
||||
/* 六种团子配色（草莓/芒果/抹茶/苏打/葡萄/薄荷） */
|
||||
.t0 .body { background: radial-gradient(circle at 34% 28%, #ff9eae, #ff5d73 58%, #d63b52); }
|
||||
.t1 .body { background: radial-gradient(circle at 34% 28%, #ffd97a, #ffb300 58%, #d68f00); }
|
||||
.t2 .body { background: radial-gradient(circle at 34% 28%, #93f0b8, #4ade80 58%, #2ea75c); }
|
||||
.t3 .body { background: radial-gradient(circle at 34% 28%, #9ecbff, #4da3ff 58%, #2f7fd6); }
|
||||
.t4 .body { background: radial-gradient(circle at 34% 28%, #d7a6ff, #b967ff 58%, #9440e0); }
|
||||
.t5 .body { background: radial-gradient(circle at 34% 28%, #8ceee0, #2dd4bf 58%, #1ba894); }
|
||||
/* ---- 脸：眼睛 + 嘴，按类型做出不同表情 ---- */
|
||||
.eye {
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
width: 13%;
|
||||
height: 16%;
|
||||
background: #26202e;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.eye::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 18%;
|
||||
width: 45%;
|
||||
height: 40%;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.eye.l { left: 26%; }
|
||||
.eye.r { right: 26%; }
|
||||
/* 芒果：眯眯眼（弯线） */
|
||||
.t1 .eye {
|
||||
height: 7%;
|
||||
border-radius: 999px;
|
||||
top: 38%;
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
.t1 .eye.r { transform: rotate(8deg); }
|
||||
.t1 .eye::after { display: none; }
|
||||
/* 苏打：右眼眨眼 */
|
||||
.t3 .eye.r {
|
||||
height: 6%;
|
||||
border-radius: 999px;
|
||||
top: 40%;
|
||||
}
|
||||
.t3 .eye.r::after { display: none; }
|
||||
/* 薄荷：困困半闭眼 */
|
||||
.t5 .eye {
|
||||
height: 9%;
|
||||
border-radius: 0 0 999px 999px;
|
||||
top: 38%;
|
||||
}
|
||||
.t5 .eye::after { display: none; }
|
||||
/* 葡萄：星星眼 */
|
||||
.star-eye {
|
||||
position: absolute;
|
||||
top: 26%;
|
||||
font-size: 0.9em;
|
||||
color: #fff28a;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
animation: twinkle 1.6s ease-in-out infinite;
|
||||
line-height: 1;
|
||||
}
|
||||
.star-eye.l { left: 18%; }
|
||||
.star-eye.r { right: 18%; animation-delay: -0.8s; }
|
||||
@keyframes twinkle {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(0.78) rotate(18deg); }
|
||||
}
|
||||
/* 嘴：默认微笑弧 */
|
||||
.mouth {
|
||||
position: absolute;
|
||||
bottom: 22%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 26%;
|
||||
height: 13%;
|
||||
border: 2.5px solid #26202e;
|
||||
border-top: none;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-radius: 0 0 999px 999px;
|
||||
}
|
||||
/* 抹茶：惊讶 o 嘴 */
|
||||
.t2 .mouth {
|
||||
width: 16%;
|
||||
height: 16%;
|
||||
border: none;
|
||||
background: #26202e;
|
||||
border-radius: 50%;
|
||||
bottom: 18%;
|
||||
}
|
||||
/* 芒果：张嘴大笑 */
|
||||
.t1 .mouth {
|
||||
width: 34%;
|
||||
height: 20%;
|
||||
border: none;
|
||||
background: #7a3016;
|
||||
border-radius: 0 0 999px 999px;
|
||||
bottom: 18%;
|
||||
}
|
||||
.t1 .mouth::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
width: 60%;
|
||||
height: 40%;
|
||||
background: #ff8b9e;
|
||||
border-radius: 999px 999px 0 0;
|
||||
}
|
||||
/* 薄荷：波浪小嘴 */
|
||||
.t5 .mouth {
|
||||
width: 20%;
|
||||
height: 8%;
|
||||
border: none;
|
||||
border-bottom: 2.5px solid #26202e;
|
||||
border-radius: 999px;
|
||||
}
|
||||
/* ---- 状态动画 ---- */
|
||||
/* 选中：外圈光环 + 提起 */
|
||||
.blob.sel .body {
|
||||
box-shadow:
|
||||
0 0 0 3px #fff,
|
||||
0 0 14px var(--primary),
|
||||
inset 0 -6px 10px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
/* 提示：呼吸光环 */
|
||||
.blob.hint .body {
|
||||
animation: hintPulse 0.7s ease-in-out infinite;
|
||||
}
|
||||
@keyframes hintPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 8px var(--accent), inset 0 -6px 10px rgba(0, 0, 0, 0.28); transform: scale(1); }
|
||||
50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 0 20px var(--accent), inset 0 -6px 10px rgba(0, 0, 0, 0.28); transform: scale(1.08); }
|
||||
}
|
||||
/* 无效交换：摇头 */
|
||||
.blob.shake .body {
|
||||
animation: headShake 0.42s ease;
|
||||
}
|
||||
@keyframes headShake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
20% { transform: translateX(-14%) rotate(-6deg); }
|
||||
45% { transform: translateX(12%) rotate(5deg); }
|
||||
70% { transform: translateX(-8%) rotate(-3deg); }
|
||||
}
|
||||
/* 消除：鼓起爆浆消失 */
|
||||
.blob.pop {
|
||||
pointer-events: none;
|
||||
}
|
||||
.blob.pop .body {
|
||||
animation: popBoom 0.3s ease forwards;
|
||||
}
|
||||
@keyframes popBoom {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
45% { transform: scale(1.32, 1.18); opacity: 1; }
|
||||
100% { transform: scale(0.1); opacity: 0; }
|
||||
}
|
||||
/* ---- 浮动提示 ---- */
|
||||
.float-tip {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(12, 10, 24, 0.88);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 6;
|
||||
animation: tipUp 1.5s ease forwards;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.float-tip.warn { border-color: #ff5d73; }
|
||||
.float-tip.chain {
|
||||
color: #ffe28a;
|
||||
font-weight: 800;
|
||||
border-color: #ffb300;
|
||||
}
|
||||
.float-tip.info { border-color: var(--accent); }
|
||||
@keyframes tipUp {
|
||||
0% { opacity: 0; margin-top: 6px; }
|
||||
15% { opacity: 1; margin-top: 0; }
|
||||
75% { opacity: 1; margin-top: -14px; }
|
||||
100% { opacity: 0; margin-top: -22px; }
|
||||
}
|
||||
/* ---- 关卡横幅 ---- */
|
||||
.lv-banner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 7;
|
||||
pointer-events: none;
|
||||
animation: bannerFade 0.3s ease;
|
||||
}
|
||||
.lb-title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.lb-sub {
|
||||
font-size: 14px;
|
||||
color: var(--accent);
|
||||
}
|
||||
@keyframes bannerFade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
.tips {
|
||||
margin-top: 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
187
src/games/components/MathRushGame.vue
Normal file
187
src/games/components/MathRushGame.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<script setup>
|
||||
// 疯狂算术：60 秒限时心算，四选一，连对有额外加成
|
||||
import { ref } from 'vue'
|
||||
import { randInt, pick } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const question = ref('')
|
||||
const options = ref([])
|
||||
const score = ref(0)
|
||||
const combo = ref(0)
|
||||
const timeLeft = ref(60)
|
||||
const playing = ref(false)
|
||||
const flash = ref('') // 答题反馈动画 class
|
||||
let answer = 0
|
||||
let countTimer = 0
|
||||
let level = 1
|
||||
|
||||
// 生成题目：难度随答题数提升（加减 → 乘 → 混合）
|
||||
function nextQuestion() {
|
||||
const kind = level < 4 ? pick(['+', '-']) : level < 8 ? pick(['+', '-', '×']) : pick(['+', '-', '×', '混'])
|
||||
let a, b, text
|
||||
if (kind === '+') {
|
||||
a = randInt(10, 20 + level * 10)
|
||||
b = randInt(10, 20 + level * 10)
|
||||
answer = a + b
|
||||
text = `${a} + ${b}`
|
||||
} else if (kind === '-') {
|
||||
a = randInt(20, 30 + level * 10)
|
||||
b = randInt(10, a - 1)
|
||||
answer = a - b
|
||||
text = `${a} - ${b}`
|
||||
} else if (kind === '×') {
|
||||
a = randInt(3, 9 + Math.min(6, level))
|
||||
b = randInt(3, 12)
|
||||
answer = a * b
|
||||
text = `${a} × ${b}`
|
||||
} else {
|
||||
a = randInt(2, 9)
|
||||
b = randInt(2, 9)
|
||||
const c = randInt(5, 40)
|
||||
answer = a * b + c
|
||||
text = `${a} × ${b} + ${c}`
|
||||
}
|
||||
question.value = text
|
||||
// 干扰项：答案±小偏移
|
||||
const set = new Set([answer])
|
||||
while (set.size < 4) {
|
||||
set.add(answer + pick([-1, 1, -2, 2, -10, 10, randInt(-12, 12) || 3]))
|
||||
}
|
||||
options.value = [...set].sort(() => Math.random() - 0.5)
|
||||
}
|
||||
|
||||
function choose(v) {
|
||||
if (!playing.value) return
|
||||
if (v === answer) {
|
||||
combo.value++
|
||||
// 基础 10 + 连击加成（每连 1 加 2，上限 +20）
|
||||
score.value += 10 + Math.min(20, (combo.value - 1) * 2)
|
||||
level = Math.floor(score.value / 100) + 1
|
||||
flash.value = 'good'
|
||||
} else {
|
||||
combo.value = 0
|
||||
score.value = Math.max(0, score.value - 5)
|
||||
flash.value = 'bad'
|
||||
}
|
||||
emit('score', score.value)
|
||||
setTimeout(() => (flash.value = ''), 220)
|
||||
nextQuestion()
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft.value--
|
||||
if (timeLeft.value <= 0) {
|
||||
playing.value = false
|
||||
clearInterval(countTimer)
|
||||
emit('end', { score: score.value })
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
score.value = 0
|
||||
combo.value = 0
|
||||
timeLeft.value = 60
|
||||
level = 1
|
||||
playing.value = true
|
||||
emit('score', 0)
|
||||
nextQuestion()
|
||||
clearInterval(countTimer)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
}
|
||||
function stop() {
|
||||
clearInterval(countTimer)
|
||||
}
|
||||
// 时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && playing.value) {
|
||||
timeLeft.value += 30
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
nextQuestion()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="math" :class="flash">
|
||||
<div class="hud">
|
||||
<span>⏱ <b :class="{ danger: timeLeft <= 10 }">{{ timeLeft }}</b>s</span>
|
||||
<span v-if="combo >= 2" class="combo">🔥 {{ combo }} 连对</span>
|
||||
<span>得分 <b class="text-primary">{{ score }}</b></span>
|
||||
</div>
|
||||
<div class="q">{{ question }} = ?</div>
|
||||
<div class="opts">
|
||||
<button v-for="o in options" :key="o" class="opt" @click="choose(o)">{{ o }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.math {
|
||||
width: min(440px, 92vw);
|
||||
text-align: center;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.math.good {
|
||||
animation: pulse-good 0.22s;
|
||||
}
|
||||
.math.bad {
|
||||
animation: shake 0.22s;
|
||||
}
|
||||
@keyframes pulse-good {
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
@keyframes shake {
|
||||
25% {
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(6px);
|
||||
}
|
||||
}
|
||||
.hud {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.danger {
|
||||
color: #ff5d73;
|
||||
}
|
||||
.combo {
|
||||
color: var(--primary-2);
|
||||
font-weight: 700;
|
||||
}
|
||||
.q {
|
||||
font-size: 46px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 26px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.opts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.opt {
|
||||
padding: 20px 0;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.opt:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
160
src/games/components/MazeGame.vue
Normal file
160
src/games/components/MazeGame.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
// 迷宫探险：随机生成迷宫（深度优先挖墙），限时走到终点，越快分越高
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const N = 21 // 迷宫尺寸（奇数）
|
||||
const CELL = 26
|
||||
const SIZE = N * CELL
|
||||
let ctx
|
||||
let keys
|
||||
let maze = [] // 1=墙 0=路
|
||||
let player = { x: 1, y: 1 }
|
||||
let level = 1
|
||||
let score = 0
|
||||
let timeLeft = 60
|
||||
let countTimer = 0
|
||||
let playing = false
|
||||
|
||||
// 深度优先挖墙生成迷宫
|
||||
function generate() {
|
||||
maze = Array.from({ length: N }, () => Array(N).fill(1))
|
||||
const stack = [[1, 1]]
|
||||
maze[1][1] = 0
|
||||
while (stack.length) {
|
||||
const [cx, cy] = stack[stack.length - 1]
|
||||
// 随机方向找未访问的相邻格（步长2）
|
||||
const dirs = [[2, 0], [-2, 0], [0, 2], [0, -2]].sort(() => Math.random() - 0.5)
|
||||
let moved = false
|
||||
for (const [dx, dy] of dirs) {
|
||||
const nx = cx + dx
|
||||
const ny = cy + dy
|
||||
if (nx > 0 && nx < N - 1 && ny > 0 && ny < N - 1 && maze[ny][nx] === 1) {
|
||||
maze[ny][nx] = 0
|
||||
maze[cy + dy / 2][cx + dx / 2] = 0 // 打通中间墙
|
||||
stack.push([nx, ny])
|
||||
moved = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!moved) stack.pop()
|
||||
}
|
||||
// 终点保证可达（右下角）
|
||||
maze[N - 2][N - 2] = 0
|
||||
}
|
||||
|
||||
function move(dx, dy) {
|
||||
if (!playing) return
|
||||
const nx = player.x + dx
|
||||
const ny = player.y + dy
|
||||
if (maze[ny]?.[nx] === 0) {
|
||||
player.x = nx
|
||||
player.y = ny
|
||||
draw()
|
||||
// 到达终点：加分并进入下一关（迷宫重新生成，时间+20）
|
||||
if (nx === N - 2 && ny === N - 2) {
|
||||
score += 100 + timeLeft
|
||||
timeLeft = Math.min(90, timeLeft + 20)
|
||||
level++
|
||||
emit('score', score)
|
||||
generate()
|
||||
player = { x: 1, y: 1 }
|
||||
draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft--
|
||||
draw()
|
||||
if (timeLeft <= 0) {
|
||||
playing = false
|
||||
clearInterval(countTimer)
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, SIZE, SIZE)
|
||||
for (let y = 0; y < N; y++) {
|
||||
for (let x = 0; x < N; x++) {
|
||||
if (maze[y][x] === 1) {
|
||||
ctx.fillStyle = p.panel
|
||||
ctx.fillRect(x * CELL, y * CELL, CELL, CELL)
|
||||
ctx.strokeStyle = p.border
|
||||
ctx.strokeRect(x * CELL + 0.5, y * CELL + 0.5, CELL - 1, CELL - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 终点
|
||||
ctx.fillStyle = '#4ade80'
|
||||
ctx.beginPath()
|
||||
ctx.roundRect((N - 2) * CELL + 4, (N - 2) * CELL + 4, CELL - 8, CELL - 8, 6)
|
||||
ctx.fill()
|
||||
// 玩家
|
||||
ctx.font = `${CELL - 4}px serif`
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText('🐭', player.x * CELL + CELL / 2, player.y * CELL + CELL / 2 + 1)
|
||||
// 顶部信息
|
||||
ctx.fillStyle = p.text
|
||||
ctx.font = 'bold 14px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`第 ${level} 关 ⏱ ${timeLeft}s`, 6, 4)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
generate()
|
||||
player = { x: 1, y: 1 }
|
||||
level = 1
|
||||
score = 0
|
||||
timeLeft = 60
|
||||
playing = true
|
||||
emit('score', 0)
|
||||
clearInterval(countTimer)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
draw()
|
||||
}
|
||||
function stop() {
|
||||
clearInterval(countTimer)
|
||||
keys?.detach()
|
||||
}
|
||||
// 时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && playing) {
|
||||
timeLeft += 30
|
||||
draw()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
keys.onPress((k) => {
|
||||
const map = {
|
||||
ArrowUp: [0, -1], w: [0, -1],
|
||||
ArrowDown: [0, 1], s: [0, 1],
|
||||
ArrowLeft: [-1, 0], a: [-1, 0],
|
||||
ArrowRight: [1, 0], d: [1, 0],
|
||||
}
|
||||
if (map[k]) move(...map[k])
|
||||
})
|
||||
generate()
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="SIZE" :height="SIZE"></canvas>
|
||||
</template>
|
||||
150
src/games/components/MemoryGame.vue
Normal file
150
src/games/components/MemoryGame.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup>
|
||||
// 记忆翻牌：翻开两张相同的卡片配对，步数越少得分越高
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const EMOJIS = ['🍕', '🚀', '🐱', '🌈', '⚽', '🎸', '🍩', '👑']
|
||||
const cards = ref([]) // {id, emoji, open, matched}
|
||||
const moves = ref(0)
|
||||
const playing = ref(false)
|
||||
let flipped = [] // 当前翻开待比对的卡
|
||||
let startTs = 0
|
||||
let hintTimer = 0
|
||||
let lock = false // 比对动画期间锁定点击
|
||||
|
||||
// 洗牌生成 4×4 卡组
|
||||
function shuffle() {
|
||||
const pool = [...EMOJIS, ...EMOJIS]
|
||||
.map((e) => ({ e, r: Math.random() }))
|
||||
.sort((a, b) => a.r - b.r)
|
||||
cards.value = pool.map((p, i) => ({ id: i, emoji: p.e, open: false, matched: false }))
|
||||
}
|
||||
|
||||
function clickCard(c) {
|
||||
if (!playing.value || lock || c.open || c.matched) return
|
||||
c.open = true
|
||||
flipped.push(c)
|
||||
if (flipped.length === 2) {
|
||||
moves.value++
|
||||
lock = true
|
||||
const [a, b] = flipped
|
||||
if (a.emoji === b.emoji) {
|
||||
a.matched = true
|
||||
b.matched = true
|
||||
flipped = []
|
||||
lock = false
|
||||
updateScore()
|
||||
// 全部配对 → 结束
|
||||
if (cards.value.every((x) => x.matched)) {
|
||||
playing.value = false
|
||||
emit('end', { score: calcScore() })
|
||||
}
|
||||
} else {
|
||||
// 不匹配：0.7 秒后盖回
|
||||
setTimeout(() => {
|
||||
a.open = false
|
||||
b.open = false
|
||||
flipped = []
|
||||
lock = false
|
||||
}, 700)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 得分：基础 260 - 步数×8 - 用时（秒），下限 20
|
||||
function calcScore() {
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
return Math.max(20, 260 - moves.value * 8 - secs)
|
||||
}
|
||||
function updateScore() {
|
||||
emit('score', calcScore())
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
shuffle()
|
||||
moves.value = 0
|
||||
flipped = []
|
||||
lock = false
|
||||
playing.value = true
|
||||
startTs = Date.now()
|
||||
emit('score', 260)
|
||||
}
|
||||
function stop() {
|
||||
clearTimeout(hintTimer)
|
||||
}
|
||||
// 提示卡：亮出全部卡片 1.2 秒
|
||||
function useProp(code) {
|
||||
if (code !== 'hint' || !playing.value) return false
|
||||
const hidden = cards.value.filter((c) => !c.open && !c.matched)
|
||||
hidden.forEach((c) => (c.open = true))
|
||||
lock = true
|
||||
hintTimer = setTimeout(() => {
|
||||
hidden.forEach((c) => {
|
||||
if (!c.matched && !flipped.includes(c)) c.open = false
|
||||
})
|
||||
lock = false
|
||||
}, 1200)
|
||||
return true
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
shuffle()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="memory-board">
|
||||
<div class="stats">步数：{{ moves }}</div>
|
||||
<div class="grid">
|
||||
<button
|
||||
v-for="c in cards"
|
||||
:key="c.id"
|
||||
class="mcard"
|
||||
:class="{ open: c.open || c.matched, matched: c.matched }"
|
||||
@click="clickCard(c)"
|
||||
>
|
||||
<span class="face">{{ c.open || c.matched ? c.emoji : '❓' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.memory-board {
|
||||
width: min(480px, 90vw);
|
||||
}
|
||||
.stats {
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.mcard {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
font-size: 34px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s, background 0.18s, border-color 0.18s;
|
||||
}
|
||||
.mcard:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.mcard.open {
|
||||
background: var(--bg-panel);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.mcard.matched {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
|
||||
cursor: default;
|
||||
}
|
||||
.face {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
195
src/games/components/MinesweeperGame.vue
Normal file
195
src/games/components/MinesweeperGame.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script setup>
|
||||
// 扫雷：翻开所有安全格并避开地雷，右键插旗
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const COLS = 16
|
||||
const ROWS = 12
|
||||
const CELL = 34
|
||||
const MINES = 26
|
||||
let ctx
|
||||
let cells = [] // {mine, open, flag, num}
|
||||
let firstClick = true
|
||||
let opened = 0
|
||||
let score = 0
|
||||
let alive = false
|
||||
let startTs = 0
|
||||
|
||||
// 数字颜色
|
||||
const NUM_COLORS = ['', '#4f8cff', '#4ade80', '#ff5d73', '#b26bff', '#ff9f45', '#00e5ff', '#ffd500', '#fff']
|
||||
|
||||
function idx(x, y) {
|
||||
return y * COLS + x
|
||||
}
|
||||
function neighbors(x, y) {
|
||||
const list = []
|
||||
for (let dy = -1; dy <= 1; dy++) {
|
||||
for (let dx = -1; dx <= 1; dx++) {
|
||||
if (!dx && !dy) continue
|
||||
const nx = x + dx
|
||||
const ny = y + dy
|
||||
if (nx >= 0 && nx < COLS && ny >= 0 && ny < ROWS) list.push([nx, ny])
|
||||
}
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
||||
// 布雷（首点及其周围保证安全）
|
||||
function placeMines(safeX, safeY) {
|
||||
const banned = new Set([idx(safeX, safeY), ...neighbors(safeX, safeY).map(([x, y]) => idx(x, y))])
|
||||
let placed = 0
|
||||
while (placed < MINES) {
|
||||
const i = randInt(0, COLS * ROWS - 1)
|
||||
if (banned.has(i) || cells[i].mine) continue
|
||||
cells[i].mine = true
|
||||
placed++
|
||||
}
|
||||
// 计算每格周围雷数
|
||||
for (let y = 0; y < ROWS; y++) {
|
||||
for (let x = 0; x < COLS; x++) {
|
||||
cells[idx(x, y)].num = neighbors(x, y).filter(([nx, ny]) => cells[idx(nx, ny)].mine).length
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 翻开格子（0 格洪水展开）
|
||||
function open(x, y) {
|
||||
const c = cells[idx(x, y)]
|
||||
if (c.open || c.flag) return
|
||||
c.open = true
|
||||
if (c.mine) {
|
||||
// 踩雷：结束
|
||||
alive = false
|
||||
draw(true)
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
opened++
|
||||
score += 5
|
||||
emit('score', score)
|
||||
if (c.num === 0) {
|
||||
neighbors(x, y).forEach(([nx, ny]) => open(nx, ny))
|
||||
}
|
||||
// 全部安全格翻开 → 胜利（加时间奖励分）
|
||||
if (opened === COLS * ROWS - MINES && alive) {
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
score += Math.max(50, 300 - secs * 2)
|
||||
emit('score', score)
|
||||
alive = false
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
function draw(revealMines = false) {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)
|
||||
for (let y = 0; y < ROWS; y++) {
|
||||
for (let x = 0; x < COLS; x++) {
|
||||
const c = cells[idx(x, y)]
|
||||
const px = x * CELL
|
||||
const py = y * CELL
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(px + 1.5, py + 1.5, CELL - 3, CELL - 3, 6)
|
||||
if (c.open) {
|
||||
ctx.fillStyle = c.mine ? '#e5484d' : 'rgba(255,255,255,0.06)'
|
||||
ctx.fill()
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
if (c.mine) {
|
||||
ctx.font = `${CELL - 12}px serif`
|
||||
ctx.fillText('💥', px + CELL / 2, py + CELL / 2 + 1)
|
||||
} else if (c.num) {
|
||||
ctx.font = `bold ${CELL - 16}px sans-serif`
|
||||
ctx.fillStyle = NUM_COLORS[c.num]
|
||||
ctx.fillText(c.num, px + CELL / 2, py + CELL / 2 + 1)
|
||||
}
|
||||
} else {
|
||||
ctx.fillStyle = p.panel
|
||||
ctx.fill()
|
||||
ctx.strokeStyle = p.border
|
||||
ctx.stroke()
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.font = `${CELL - 14}px serif`
|
||||
if (c.flag) ctx.fillText('🚩', px + CELL / 2, py + CELL / 2 + 1)
|
||||
else if (revealMines && c.mine) ctx.fillText('💣', px + CELL / 2, py + CELL / 2 + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 事件坐标 → 网格坐标
|
||||
function toGrid(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
const x = Math.floor(((e.clientX - rect.left) * scale) / CELL)
|
||||
const y = Math.floor(((e.clientY - rect.top) * scale) / CELL)
|
||||
return [x, y]
|
||||
}
|
||||
|
||||
function onClick(e) {
|
||||
if (!alive) return
|
||||
const [x, y] = toGrid(e)
|
||||
if (x < 0 || x >= COLS || y < 0 || y >= ROWS) return
|
||||
if (firstClick) {
|
||||
placeMines(x, y)
|
||||
firstClick = false
|
||||
startTs = Date.now()
|
||||
}
|
||||
open(x, y)
|
||||
if (alive) draw()
|
||||
}
|
||||
|
||||
function onRight(e) {
|
||||
e.preventDefault()
|
||||
if (!alive || firstClick) return
|
||||
const [x, y] = toGrid(e)
|
||||
const c = cells[idx(x, y)]
|
||||
if (c && !c.open) {
|
||||
c.flag = !c.flag
|
||||
draw()
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
cells = Array.from({ length: COLS * ROWS }, () => ({ mine: false, open: false, flag: false, num: 0 }))
|
||||
firstClick = true
|
||||
opened = 0
|
||||
score = 0
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
draw()
|
||||
}
|
||||
function stop() {}
|
||||
// 提示卡：自动翻开一个安全格
|
||||
function useProp(code) {
|
||||
if (code !== 'hint' || !alive || firstClick) return false
|
||||
const candidates = cells
|
||||
.map((c, i) => ({ c, i }))
|
||||
.filter(({ c }) => !c.open && !c.mine && !c.flag)
|
||||
if (!candidates.length) return false
|
||||
const target = candidates[randInt(0, candidates.length - 1)]
|
||||
open(target.i % COLS, Math.floor(target.i / COLS))
|
||||
if (alive) draw()
|
||||
return true
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('click', onClick)
|
||||
canvas.value.addEventListener('contextmenu', onRight)
|
||||
start()
|
||||
alive = false // 等待点开始
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="COLS * CELL" :height="ROWS * CELL"></canvas>
|
||||
</template>
|
||||
166
src/games/components/PianoTilesGame.vue
Normal file
166
src/games/components/PianoTilesGame.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<script setup>
|
||||
// 别踩白块：四列下落黑块，点击黑块得分，点到白块或黑块落地即结束
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 420
|
||||
const H = 560
|
||||
const COLS = 4
|
||||
const TILE_H = 130
|
||||
let ctx
|
||||
let loop
|
||||
let tiles = [] // {col, y, hit}
|
||||
let score = 0
|
||||
let speed = 240
|
||||
let alive = false
|
||||
let lastCol = -1
|
||||
|
||||
function spawnRow(y) {
|
||||
let col = randInt(0, COLS - 1)
|
||||
if (col === lastCol && Math.random() < 0.5) col = (col + randInt(1, 3)) % COLS
|
||||
lastCol = col
|
||||
tiles.push({ col, y, hit: false })
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
speed = 240 + score * 2.4 // 越点越快
|
||||
tiles.forEach((t) => (t.y += speed * dt))
|
||||
// 黑块落地未点 → 结束
|
||||
for (const t of tiles) {
|
||||
if (!t.hit && t.y > H) {
|
||||
gameOver()
|
||||
return
|
||||
}
|
||||
}
|
||||
tiles = tiles.filter((t) => t.y < H + TILE_H)
|
||||
// 顶部补新行
|
||||
const topY = Math.min(...tiles.map((t) => t.y), H)
|
||||
if (topY > -TILE_H / 2) spawnRow(topY - TILE_H)
|
||||
draw()
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
|
||||
function tapCol(col, y) {
|
||||
if (!alive) return
|
||||
// 找该列最靠下的未点黑块
|
||||
const candidates = tiles.filter((t) => t.col === col && !t.hit && t.y + TILE_H > 0)
|
||||
candidates.sort((a, b) => b.y - a.y)
|
||||
const target = candidates[0]
|
||||
// 点击位置必须落在该黑块范围内（其余算踩白块）
|
||||
if (target && y >= target.y && y <= target.y + TILE_H) {
|
||||
target.hit = true
|
||||
score++
|
||||
emit('score', score)
|
||||
} else {
|
||||
gameOver()
|
||||
}
|
||||
}
|
||||
|
||||
function onPointer(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
const x = (e.clientX - rect.left) * scale
|
||||
const y = (e.clientY - rect.top) * scale
|
||||
tapCol(Math.floor(x / (W / COLS)), y)
|
||||
}
|
||||
|
||||
function onKey(e) {
|
||||
const map = { a: 0, s: 1, d: 2, f: 3 }
|
||||
const col = map[e.key?.toLowerCase()]
|
||||
if (col === undefined || !alive) return
|
||||
// 键盘模式：点该列最靠下的黑块（不校验 y）
|
||||
const candidates = tiles.filter((t) => t.col === col && !t.hit && t.y + TILE_H > 0 && t.y < H)
|
||||
candidates.sort((a, b) => b.y - a.y)
|
||||
if (candidates[0]) {
|
||||
candidates[0].hit = true
|
||||
score++
|
||||
emit('score', score)
|
||||
} else {
|
||||
gameOver()
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
const colW = W / COLS
|
||||
ctx.fillStyle = '#f5f5f7'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 列分隔线
|
||||
ctx.strokeStyle = '#ccc'
|
||||
for (let i = 1; i < COLS; i++) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(i * colW, 0)
|
||||
ctx.lineTo(i * colW, H)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 黑块
|
||||
tiles.forEach((t) => {
|
||||
if (t.hit) {
|
||||
ctx.fillStyle = 'rgba(120,120,140,0.25)'
|
||||
} else {
|
||||
ctx.fillStyle = '#16161e'
|
||||
}
|
||||
ctx.fillRect(t.col * colW + 1, t.y, colW - 2, TILE_H - 3)
|
||||
})
|
||||
// 按键提示
|
||||
ctx.fillStyle = '#999'
|
||||
ctx.font = '13px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
;['A', 'S', 'D', 'F'].forEach((k, i) => {
|
||||
ctx.fillText(k, i * colW + colW / 2, H - 10)
|
||||
})
|
||||
// 分数
|
||||
ctx.fillStyle = p.primary
|
||||
ctx.font = 'bold 30px sans-serif'
|
||||
ctx.fillText(score, W / 2, 42)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
tiles = []
|
||||
score = 0
|
||||
speed = 240
|
||||
lastCol = -1
|
||||
alive = true
|
||||
for (let i = 0; i < 4; i++) spawnRow(-TILE_H * i - TILE_H)
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
window.removeEventListener('keydown', onKey)
|
||||
}
|
||||
// 复活卡：清掉当前屏幕的块继续
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
tiles = []
|
||||
for (let i = 0; i < 4; i++) spawnRow(-TILE_H * i - TILE_H)
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
canvas.value.addEventListener('pointerdown', onPointer)
|
||||
window.addEventListener('keydown', onKey)
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
168
src/games/components/PongGame.vue
Normal file
168
src/games/components/PongGame.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<script setup>
|
||||
// 乒乓对战：与电脑对打，先得 11 分获胜
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 760
|
||||
const H = 460
|
||||
const PW = 12 // 球拍宽
|
||||
const PH = 90 // 球拍高
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let my = { y: H / 2 - PH / 2, score: 0 }
|
||||
let aiP = { y: H / 2 - PH / 2, score: 0 }
|
||||
let ball = null
|
||||
let alive = false
|
||||
|
||||
function resetBall(towardMe) {
|
||||
const angle = (Math.random() * 0.6 - 0.3) * Math.PI
|
||||
const speed = 380
|
||||
ball = {
|
||||
x: W / 2,
|
||||
y: H / 2,
|
||||
vx: (towardMe ? -1 : 1) * speed * Math.cos(angle),
|
||||
vy: speed * Math.sin(angle),
|
||||
r: 9,
|
||||
}
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
// 我方球拍：键盘或鼠标
|
||||
if (keys.has('ArrowUp') || keys.has('w')) my.y -= 420 * dt
|
||||
if (keys.has('ArrowDown') || keys.has('s')) my.y += 420 * dt
|
||||
my.y = Math.max(0, Math.min(H - PH, my.y))
|
||||
// 电脑球拍：追踪球（速度受限，留破绽）
|
||||
const target = ball.y - PH / 2
|
||||
const aiSpeed = 300
|
||||
if (Math.abs(target - aiP.y) > 6) {
|
||||
aiP.y += Math.sign(target - aiP.y) * aiSpeed * dt
|
||||
}
|
||||
aiP.y = Math.max(0, Math.min(H - PH, aiP.y))
|
||||
// 球移动
|
||||
ball.x += ball.vx * dt
|
||||
ball.y += ball.vy * dt
|
||||
if (ball.y < ball.r || ball.y > H - ball.r) {
|
||||
ball.vy *= -1
|
||||
ball.y = Math.max(ball.r, Math.min(H - ball.r, ball.y))
|
||||
}
|
||||
// 我方拍（左侧 x=30）
|
||||
if (ball.vx < 0 && ball.x < 30 + PW + ball.r && ball.x > 30 && ball.y > my.y - ball.r && ball.y < my.y + PH + ball.r) {
|
||||
const t = (ball.y - my.y - PH / 2) / (PH / 2)
|
||||
const speed = Math.hypot(ball.vx, ball.vy) * 1.03
|
||||
ball.vx = Math.abs(speed * Math.cos(t * 1.05))
|
||||
ball.vy = speed * Math.sin(t * 1.05)
|
||||
}
|
||||
// 电脑拍（右侧）
|
||||
if (ball.vx > 0 && ball.x > W - 30 - PW - ball.r && ball.x < W - 30 && ball.y > aiP.y - ball.r && ball.y < aiP.y + PH + ball.r) {
|
||||
const t = (ball.y - aiP.y - PH / 2) / (PH / 2)
|
||||
const speed = Math.hypot(ball.vx, ball.vy) * 1.03
|
||||
ball.vx = -Math.abs(speed * Math.cos(t * 1.05))
|
||||
ball.vy = speed * Math.sin(t * 1.05)
|
||||
}
|
||||
// 出界得分
|
||||
if (ball.x < -20) {
|
||||
aiP.score++
|
||||
afterPoint(true)
|
||||
} else if (ball.x > W + 20) {
|
||||
my.score++
|
||||
emit('score', my.score)
|
||||
afterPoint(false)
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
// 一分结束后的处理：先到 11 分终局
|
||||
function afterPoint(towardMe) {
|
||||
if (my.score >= 11 || aiP.score >= 11) {
|
||||
alive = false
|
||||
loop.stop()
|
||||
// 总分 = 我的得分 + 获胜奖励 15
|
||||
const total = my.score + (my.score >= 11 ? 15 : 0)
|
||||
emit('score', total)
|
||||
draw()
|
||||
emit('end', { score: total })
|
||||
return
|
||||
}
|
||||
resetBall(towardMe)
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 中线
|
||||
ctx.strokeStyle = p.border
|
||||
ctx.setLineDash([10, 12])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(W / 2, 0)
|
||||
ctx.lineTo(W / 2, H)
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
// 比分
|
||||
ctx.font = 'bold 44px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillStyle = p.primary
|
||||
ctx.fillText(my.score, W / 2 - 70, 16)
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.fillText(aiP.score, W / 2 + 70, 16)
|
||||
// 球拍与球
|
||||
ctx.fillStyle = p.primary
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(30, my.y, PW, PH, 6)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = p.accent
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(W - 30 - PW, aiP.y, PW, PH, 6)
|
||||
ctx.fill()
|
||||
if (ball) {
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.beginPath()
|
||||
ctx.arc(ball.x, ball.y, ball.r, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
function onMouse(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.height / rect.height
|
||||
my.y = (e.clientY - rect.top) * scale - PH / 2
|
||||
my.y = Math.max(0, Math.min(H - PH, my.y))
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
my = { y: H / 2 - PH / 2, score: 0 }
|
||||
aiP = { y: H / 2 - PH / 2, score: 0 }
|
||||
alive = true
|
||||
resetBall(Math.random() < 0.5)
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
canvas.value.addEventListener('mousemove', onMouse)
|
||||
loop = createLoop(update)
|
||||
resetBall(true)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
123
src/games/components/Puzzle15Game.vue
Normal file
123
src/games/components/Puzzle15Game.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<script setup>
|
||||
// 数字华容道：滑动数字方块按 1-15 复原，步数越少用时越短分越高
|
||||
import { ref } from 'vue'
|
||||
import { randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const tiles = ref([]) // 16 格，0 表示空位
|
||||
const moves = ref(0)
|
||||
const playing = ref(false)
|
||||
let startTs = 0
|
||||
|
||||
// 打乱：从完成态做 300 次随机合法移动（保证有解）
|
||||
function shuffle() {
|
||||
tiles.value = [...Array(15).keys()].map((i) => i + 1).concat(0)
|
||||
for (let i = 0; i < 300; i++) {
|
||||
const empty = tiles.value.indexOf(0)
|
||||
const options = neighborsOf(empty)
|
||||
const pick = options[randInt(0, options.length - 1)]
|
||||
;[tiles.value[empty], tiles.value[pick]] = [tiles.value[pick], tiles.value[empty]]
|
||||
}
|
||||
}
|
||||
|
||||
// 与空位相邻的下标
|
||||
function neighborsOf(idx) {
|
||||
const r = Math.floor(idx / 4)
|
||||
const c = idx % 4
|
||||
const list = []
|
||||
if (r > 0) list.push(idx - 4)
|
||||
if (r < 3) list.push(idx + 4)
|
||||
if (c > 0) list.push(idx - 1)
|
||||
if (c < 3) list.push(idx + 1)
|
||||
return list
|
||||
}
|
||||
|
||||
function clickTile(idx) {
|
||||
if (!playing.value) return
|
||||
const empty = tiles.value.indexOf(0)
|
||||
if (!neighborsOf(empty).includes(idx)) return
|
||||
;[tiles.value[empty], tiles.value[idx]] = [tiles.value[idx], tiles.value[empty]]
|
||||
moves.value++
|
||||
// 完成判定
|
||||
const done = tiles.value.slice(0, 15).every((v, i) => v === i + 1)
|
||||
if (done) {
|
||||
playing.value = false
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
// 得分：400 - 步数 - 用时，下限 40
|
||||
const score = Math.max(40, 400 - moves.value - secs)
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
shuffle()
|
||||
moves.value = 0
|
||||
playing.value = true
|
||||
startTs = Date.now()
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
shuffle()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p15">
|
||||
<div class="hud text-dim">步数：{{ moves }}</div>
|
||||
<div class="board">
|
||||
<button
|
||||
v-for="(v, i) in tiles"
|
||||
:key="i"
|
||||
class="tile"
|
||||
:class="{ empty: v === 0, right: v !== 0 && v === i + 1 }"
|
||||
@click="clickTile(i)"
|
||||
>
|
||||
{{ v || '' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.p15 {
|
||||
width: min(400px, 90vw);
|
||||
text-align: center;
|
||||
}
|
||||
.hud {
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: linear-gradient(135deg, var(--bg-card), var(--bg-panel));
|
||||
color: var(--text);
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.tile:hover:not(.empty) {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.tile.right {
|
||||
color: var(--accent);
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||
}
|
||||
.tile.empty {
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border);
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
440
src/games/components/PvzGame.vue
Normal file
440
src/games/components/PvzGame.vue
Normal file
@@ -0,0 +1,440 @@
|
||||
<script setup>
|
||||
// 植物大战僵尸（简化版）：5 行 9 列草坪塔防
|
||||
// 向日葵产阳光、豌豆射手攻击、坚果墙挡路；每行一台割草机作最后防线
|
||||
// 道具：bomb 清场炸弹、shield 补满割草机
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
|
||||
// 画布与网格
|
||||
const COLS = 9
|
||||
const ROWS = 5
|
||||
const CELL_W = 90
|
||||
const CELL_H = 92
|
||||
const LAWN_X = 70
|
||||
const LAWN_Y = 10
|
||||
const W = LAWN_X + COLS * CELL_W + 10
|
||||
const H = LAWN_Y + ROWS * CELL_H + 10
|
||||
|
||||
// 植物卡片定义
|
||||
const PLANT_DEFS = {
|
||||
sunflower: { icon: '🌻', name: '向日葵', cost: 50, hp: 80, cd: 5 },
|
||||
peashooter: { icon: '🫛', name: '豌豆射手', cost: 100, hp: 100, cd: 5 },
|
||||
wallnut: { icon: '🥜', name: '坚果墙', cost: 75, hp: 420, cd: 12 },
|
||||
}
|
||||
// 僵尸类型：血量/速度/击杀得分
|
||||
const ZOMBIE_DEFS = {
|
||||
normal: { icon: '🧟', hp: 100, speed: 11, score: 10 },
|
||||
cone: { icon: '🧟', hp: 190, speed: 10, score: 20 },
|
||||
bucket: { icon: '🧟', hp: 320, speed: 8.5, score: 30 },
|
||||
}
|
||||
|
||||
const canvasRef = ref(null)
|
||||
const playing = ref(false)
|
||||
const sun = ref(50)
|
||||
const score = ref(0)
|
||||
const waveNo = ref(0)
|
||||
const selected = ref('') // 当前选中的植物卡
|
||||
const cooldowns = ref({ sunflower: 0, peashooter: 0, wallnut: 0 })
|
||||
|
||||
let ctx = null
|
||||
let plants = [] // {row,col,type,hp,maxHp,timer}
|
||||
let zombies = [] // {row,x,type,hp,eating,walkT}
|
||||
let peas = [] // {row,x}
|
||||
let suns = [] // {x,y,targetY,ttl,fromSky}
|
||||
let mowers = [] // {row,active,x,used}
|
||||
let spawnTimer = 0
|
||||
let spawnInterval = 7
|
||||
let skyTimer = 4
|
||||
let waveTimer = 40
|
||||
let elapsed = 0
|
||||
|
||||
const loop = createLoop(update)
|
||||
|
||||
// ---- 核心更新 ----
|
||||
function update(dt) {
|
||||
elapsed += dt
|
||||
// 卡片冷却
|
||||
for (const k of Object.keys(cooldowns.value)) {
|
||||
if (cooldowns.value[k] > 0) cooldowns.value[k] = Math.max(0, cooldowns.value[k] - dt)
|
||||
}
|
||||
// 天降阳光
|
||||
skyTimer -= dt
|
||||
if (skyTimer <= 0) {
|
||||
skyTimer = 9
|
||||
suns.push({
|
||||
x: LAWN_X + randInt(20, COLS * CELL_W - 40),
|
||||
y: -20,
|
||||
targetY: LAWN_Y + randInt(30, ROWS * CELL_H - 40),
|
||||
ttl: 9,
|
||||
fromSky: true,
|
||||
})
|
||||
}
|
||||
for (const s of suns) {
|
||||
if (s.fromSky && s.y < s.targetY) s.y = Math.min(s.targetY, s.y + 60 * dt)
|
||||
else s.ttl -= dt
|
||||
}
|
||||
suns = suns.filter((s) => s.ttl > 0)
|
||||
// 僵尸生成：间隔随时间缩短，定期一大波
|
||||
spawnTimer -= dt
|
||||
if (spawnTimer <= 0) {
|
||||
spawnInterval = Math.max(2.2, spawnInterval - 0.12)
|
||||
spawnTimer = spawnInterval
|
||||
spawnZombie()
|
||||
}
|
||||
waveTimer -= dt
|
||||
if (waveTimer <= 0) {
|
||||
waveTimer = 40
|
||||
waveNo.value++
|
||||
for (let i = 0; i < 2 + Math.min(waveNo.value, 4); i++) spawnZombie()
|
||||
}
|
||||
// 植物行为
|
||||
for (const p of plants) {
|
||||
p.timer -= dt
|
||||
if (p.type === 'sunflower' && p.timer <= 0) {
|
||||
p.timer = 9
|
||||
suns.push({
|
||||
x: LAWN_X + p.col * CELL_W + CELL_W / 2 + randInt(-18, 18),
|
||||
y: LAWN_Y + p.row * CELL_H + CELL_H / 2,
|
||||
targetY: 0,
|
||||
ttl: 9,
|
||||
fromSky: false,
|
||||
})
|
||||
}
|
||||
if (p.type === 'peashooter' && p.timer <= 0) {
|
||||
// 该行前方有僵尸才开火
|
||||
const px = LAWN_X + p.col * CELL_W + CELL_W / 2
|
||||
if (zombies.some((z) => z.row === p.row && z.x > px - 20)) {
|
||||
p.timer = 1.4
|
||||
peas.push({ row: p.row, x: px + 18 })
|
||||
}
|
||||
}
|
||||
}
|
||||
// 豌豆飞行与命中
|
||||
for (const pea of peas) {
|
||||
pea.x += 320 * dt
|
||||
const hit = zombies.find((z) => z.row === pea.row && Math.abs(z.x - pea.x) < 16)
|
||||
if (hit) {
|
||||
hit.hp -= 22
|
||||
pea.dead = true
|
||||
if (hit.hp <= 0) killZombie(hit)
|
||||
}
|
||||
}
|
||||
peas = peas.filter((p) => !p.dead && p.x < W + 20)
|
||||
// 僵尸行进与啃食
|
||||
for (const z of zombies) {
|
||||
z.walkT += dt
|
||||
const front = plants.find(
|
||||
(p) => p.row === z.row && Math.abs(LAWN_X + p.col * CELL_W + CELL_W / 2 - z.x) < 26
|
||||
)
|
||||
if (front) {
|
||||
z.eating = true
|
||||
front.hp -= 30 * dt
|
||||
if (front.hp <= 0) plants = plants.filter((p) => p !== front)
|
||||
} else {
|
||||
z.eating = false
|
||||
z.x -= ZOMBIE_DEFS[z.type].speed * (1 + elapsed / 240) * dt
|
||||
}
|
||||
// 突破草坪左缘：割草机是最后防线
|
||||
if (z.x < LAWN_X - 6) {
|
||||
const mower = mowers.find((m) => m.row === z.row && !m.used && !m.active)
|
||||
if (mower) {
|
||||
mower.active = true
|
||||
} else if (!mowers.some((m) => m.row === z.row && m.active)) {
|
||||
gameOver()
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
// 割草机清行
|
||||
for (const m of mowers) {
|
||||
if (!m.active) continue
|
||||
m.x += 420 * dt
|
||||
for (const z of zombies) {
|
||||
if (z.row === m.row && z.hp > 0 && Math.abs(z.x - m.x) < 34) killZombie(z)
|
||||
}
|
||||
if (m.x > W + 40) {
|
||||
m.active = false
|
||||
m.used = true
|
||||
}
|
||||
}
|
||||
zombies = zombies.filter((z) => z.hp > 0)
|
||||
draw()
|
||||
}
|
||||
|
||||
function spawnZombie() {
|
||||
const roll = Math.random()
|
||||
const type = roll < 0.55 ? 'normal' : roll < 0.85 ? 'cone' : 'bucket'
|
||||
zombies.push({
|
||||
row: randInt(0, ROWS - 1),
|
||||
x: W + randInt(0, 60),
|
||||
type,
|
||||
hp: ZOMBIE_DEFS[type].hp,
|
||||
eating: false,
|
||||
walkT: Math.random() * 3,
|
||||
})
|
||||
}
|
||||
|
||||
function killZombie(z) {
|
||||
if (z.hp <= -9999) return
|
||||
z.hp = -10000
|
||||
score.value += ZOMBIE_DEFS[z.type].score
|
||||
emit('score', score.value)
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
playing.value = false
|
||||
loop.stop()
|
||||
emit('end', { score: score.value })
|
||||
}
|
||||
|
||||
// ---- 交互 ----
|
||||
function onCanvasClick(e) {
|
||||
if (!playing.value) return
|
||||
const rect = canvasRef.value.getBoundingClientRect()
|
||||
const x = ((e.clientX - rect.left) / rect.width) * W
|
||||
const y = ((e.clientY - rect.top) / rect.height) * H
|
||||
// 先看是否点中阳光（点击范围放宽）
|
||||
const s = suns.find((s) => Math.hypot(s.x - x, s.y - y) < 30)
|
||||
if (s) {
|
||||
s.ttl = 0
|
||||
sun.value += 25
|
||||
return
|
||||
}
|
||||
// 再尝试种植
|
||||
if (!selected.value) return
|
||||
const col = Math.floor((x - LAWN_X) / CELL_W)
|
||||
const row = Math.floor((y - LAWN_Y) / CELL_H)
|
||||
if (col < 0 || col >= COLS || row < 0 || row >= ROWS) return
|
||||
const def = PLANT_DEFS[selected.value]
|
||||
if (sun.value < def.cost || cooldowns.value[selected.value] > 0) return
|
||||
if (plants.some((p) => p.row === row && p.col === col)) return
|
||||
sun.value -= def.cost
|
||||
cooldowns.value[selected.value] = def.cd
|
||||
plants.push({ row, col, type: selected.value, hp: def.hp, maxHp: def.hp, timer: 1 })
|
||||
}
|
||||
|
||||
function pickCard(type) {
|
||||
selected.value = selected.value === type ? '' : type
|
||||
}
|
||||
|
||||
// ---- 绘制 ----
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, W, H)
|
||||
// 草坪棋盘格
|
||||
for (let r = 0; r < ROWS; r++) {
|
||||
for (let c = 0; c < COLS; c++) {
|
||||
ctx.fillStyle = (r + c) % 2 ? '#1c7a37' : '#239644'
|
||||
ctx.fillRect(LAWN_X + c * CELL_W, LAWN_Y + r * CELL_H, CELL_W, CELL_H)
|
||||
}
|
||||
}
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
// 割草机
|
||||
for (const m of mowers) {
|
||||
if (m.used && !m.active) continue
|
||||
ctx.font = '30px sans-serif'
|
||||
ctx.fillText('🚜', m.active ? m.x : LAWN_X - 34, LAWN_Y + m.row * CELL_H + CELL_H / 2 + 14)
|
||||
}
|
||||
// 植物与血条
|
||||
for (const p of plants) {
|
||||
const cx = LAWN_X + p.col * CELL_W + CELL_W / 2
|
||||
const cy = LAWN_Y + p.row * CELL_H + CELL_H / 2
|
||||
ctx.font = '42px sans-serif'
|
||||
ctx.fillText(PLANT_DEFS[p.type].icon, cx, cy + 4)
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.4)'
|
||||
ctx.fillRect(cx - 22, cy - 34, 44, 5)
|
||||
ctx.fillStyle = '#4ade80'
|
||||
ctx.fillRect(cx - 22, cy - 34, (44 * p.hp) / p.maxHp, 5)
|
||||
}
|
||||
// 豌豆
|
||||
ctx.fillStyle = '#7ed957'
|
||||
for (const pea of peas) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(pea.x, LAWN_Y + pea.row * CELL_H + CELL_H / 2 - 10, 7, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
}
|
||||
// 僵尸（走路摇摆 + 头饰区分种类 + 血条）
|
||||
for (const z of zombies) {
|
||||
const cy = LAWN_Y + z.row * CELL_H + CELL_H / 2
|
||||
const sway = z.eating ? 0 : Math.sin(z.walkT * 6) * 3
|
||||
ctx.font = '42px sans-serif'
|
||||
ctx.fillText('🧟', z.x, cy + 6 + sway)
|
||||
if (z.type === 'cone') {
|
||||
ctx.font = '20px sans-serif'
|
||||
ctx.fillText('🔺', z.x, cy - 26 + sway)
|
||||
} else if (z.type === 'bucket') {
|
||||
ctx.font = '20px sans-serif'
|
||||
ctx.fillText('🪣', z.x, cy - 26 + sway)
|
||||
}
|
||||
const def = ZOMBIE_DEFS[z.type]
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.4)'
|
||||
ctx.fillRect(z.x - 20, cy - 40, 40, 4)
|
||||
ctx.fillStyle = '#ff5d73'
|
||||
ctx.fillRect(z.x - 20, cy - 40, (40 * Math.max(z.hp, 0)) / def.hp, 4)
|
||||
}
|
||||
// 阳光
|
||||
for (const s of suns) {
|
||||
ctx.font = '32px sans-serif'
|
||||
ctx.fillText('☀️', s.x, s.y)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
sun.value = 50
|
||||
score.value = 0
|
||||
waveNo.value = 0
|
||||
selected.value = ''
|
||||
cooldowns.value = { sunflower: 0, peashooter: 0, wallnut: 0 }
|
||||
plants = []
|
||||
zombies = []
|
||||
peas = []
|
||||
suns = []
|
||||
mowers = Array.from({ length: ROWS }, (_, r) => ({ row: r, active: false, x: LAWN_X - 34, used: false }))
|
||||
spawnTimer = 5
|
||||
spawnInterval = 7
|
||||
skyTimer = 3
|
||||
waveTimer = 40
|
||||
elapsed = 0
|
||||
playing.value = true
|
||||
emit('score', 0)
|
||||
const cv = canvasRef.value
|
||||
cv.width = W
|
||||
cv.height = H
|
||||
ctx = cv.getContext('2d')
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
playing.value = false
|
||||
loop.stop()
|
||||
}
|
||||
// bomb：清除全场僵尸并计分；shield：修复全部割草机
|
||||
function useProp(code) {
|
||||
if (!playing.value) return false
|
||||
if (code === 'bomb' && zombies.length) {
|
||||
for (const z of zombies) killZombie(z)
|
||||
zombies = []
|
||||
return true
|
||||
}
|
||||
if (code === 'shield') {
|
||||
const broken = mowers.filter((m) => m.used)
|
||||
if (!broken.length) return false
|
||||
for (const m of broken) {
|
||||
m.used = false
|
||||
m.active = false
|
||||
m.x = LAWN_X - 34
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
onBeforeUnmount(() => loop.stop())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pvz-board">
|
||||
<div class="hud">
|
||||
<span class="sun-box">☀️ <b>{{ sun }}</b></span>
|
||||
<div class="cards">
|
||||
<button
|
||||
v-for="(def, type) in PLANT_DEFS"
|
||||
:key="type"
|
||||
class="card"
|
||||
:class="{ on: selected === type, disabled: sun < def.cost || cooldowns[type] > 0 }"
|
||||
@click="pickCard(type)"
|
||||
>
|
||||
<span class="c-icon">{{ def.icon }}</span>
|
||||
<span class="c-cost">{{ def.cost }}</span>
|
||||
<span v-if="cooldowns[type] > 0" class="c-cd" :style="{ height: (cooldowns[type] / def.cd) * 100 + '%' }"></span>
|
||||
</button>
|
||||
</div>
|
||||
<span>第 <b>{{ waveNo }}</b> 波 · 得分 <b class="score">{{ score }}</b></span>
|
||||
</div>
|
||||
<canvas ref="canvasRef" class="lawn" @click="onCanvasClick"></canvas>
|
||||
<p class="tips">🌻 产阳光 🫛 射僵尸 🥜 挡路 🚜 每行最后防线</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pvz-board {
|
||||
width: min(920px, 94vw);
|
||||
text-align: center;
|
||||
}
|
||||
.hud {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.sun-box {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.sun-box b {
|
||||
color: #ffd400;
|
||||
}
|
||||
.cards {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
width: 58px;
|
||||
height: 64px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card.on {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.card.disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.c-icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
.c-cost {
|
||||
font-size: 11px;
|
||||
color: #ffd400;
|
||||
font-weight: 700;
|
||||
}
|
||||
.c-cd {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
pointer-events: none;
|
||||
}
|
||||
.score {
|
||||
color: var(--primary);
|
||||
}
|
||||
.lawn {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
background: #175c2c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tips {
|
||||
margin-top: 8px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
241
src/games/components/Racing3dGame.vue
Normal file
241
src/games/components/Racing3dGame.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup>
|
||||
// 3D 极速赛车（Three.js）：三车道公路，左右变道躲避车流，里程即分数
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { Keys, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const holder = ref(null)
|
||||
const W = 640
|
||||
const H = 560
|
||||
const LANES = [-2.2, 0, 2.2] // 三车道 X 坐标
|
||||
let renderer, scene, camera, rafId
|
||||
let keys
|
||||
let myCar
|
||||
let traffic = [] // 敌车 {mesh, lane, z, speed}
|
||||
let stripes = [] // 车道虚线
|
||||
let myLane = 1
|
||||
let dist = 0
|
||||
let speed = 26
|
||||
let alive = false
|
||||
let lastTs = 0
|
||||
let spawnZ = -40
|
||||
let shieldOn = false
|
||||
let invincible = 0
|
||||
let shieldRing
|
||||
const CAR_COLORS = ['#ff5d73', '#ffd500', '#4ade80', '#b26bff', '#ff9f45']
|
||||
|
||||
// 组装一辆简单小车（车身+车顶）
|
||||
function makeCar(color) {
|
||||
const group = new THREE.Group()
|
||||
const body = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(1.4, 0.5, 2.6),
|
||||
new THREE.MeshLambertMaterial({ color })
|
||||
)
|
||||
body.position.y = 0.45
|
||||
const top = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(1.1, 0.42, 1.3),
|
||||
new THREE.MeshLambertMaterial({ color: '#dfe6ff' })
|
||||
)
|
||||
top.position.set(0, 0.85, 0.1)
|
||||
group.add(body, top)
|
||||
// 四个轮子
|
||||
const wheelGeo = new THREE.CylinderGeometry(0.26, 0.26, 0.24, 14)
|
||||
const wheelMat = new THREE.MeshLambertMaterial({ color: '#16161e' })
|
||||
;[[-0.72, 0.9], [0.72, 0.9], [-0.72, -0.9], [0.72, -0.9]].forEach(([x, z]) => {
|
||||
const wheel = new THREE.Mesh(wheelGeo, wheelMat)
|
||||
wheel.rotation.z = Math.PI / 2
|
||||
wheel.position.set(x, 0.26, z)
|
||||
group.add(wheel)
|
||||
})
|
||||
return group
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color('#0d0e2b')
|
||||
scene.fog = new THREE.Fog('#0d0e2b', 22, 60)
|
||||
camera = new THREE.PerspectiveCamera(65, W / H, 0.1, 120)
|
||||
camera.position.set(0, 4.6, 7.5)
|
||||
camera.lookAt(0, 0, -6)
|
||||
const dir = new THREE.DirectionalLight(0xffffff, 1.4)
|
||||
dir.position.set(4, 10, 4)
|
||||
scene.add(dir)
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.6))
|
||||
// 公路
|
||||
const road = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(8.2, 200),
|
||||
new THREE.MeshLambertMaterial({ color: '#23253f' })
|
||||
)
|
||||
road.rotation.x = -Math.PI / 2
|
||||
road.position.z = -70
|
||||
scene.add(road)
|
||||
// 路肩
|
||||
const sideMat = new THREE.MeshLambertMaterial({ color: '#141530' })
|
||||
;[-7, 7].forEach((x) => {
|
||||
const side = new THREE.Mesh(new THREE.PlaneGeometry(6, 200), sideMat)
|
||||
side.rotation.x = -Math.PI / 2
|
||||
side.position.set(x, -0.01, -70)
|
||||
scene.add(side)
|
||||
})
|
||||
// 车道虚线
|
||||
const stripeMat = new THREE.MeshBasicMaterial({ color: '#8f95c9' })
|
||||
for (let z = 8; z > -120; z -= 4) {
|
||||
;[-1.1, 1.1].forEach((x) => {
|
||||
const s = new THREE.Mesh(new THREE.PlaneGeometry(0.14, 1.6), stripeMat)
|
||||
s.rotation.x = -Math.PI / 2
|
||||
s.position.set(x, 0.01, z)
|
||||
scene.add(s)
|
||||
stripes.push(s)
|
||||
})
|
||||
}
|
||||
// 我的车
|
||||
myCar = makeCar('#00e5ff')
|
||||
myCar.position.set(LANES[1], 0, 3.5)
|
||||
scene.add(myCar)
|
||||
// 护盾光环
|
||||
shieldRing = new THREE.Mesh(
|
||||
new THREE.TorusGeometry(1.5, 0.06, 10, 40),
|
||||
new THREE.MeshBasicMaterial({ color: '#00e5ff' })
|
||||
)
|
||||
shieldRing.rotation.x = Math.PI / 2
|
||||
shieldRing.visible = false
|
||||
myCar.add(shieldRing)
|
||||
}
|
||||
|
||||
function spawnTraffic() {
|
||||
// 随机 1~2 辆占道（永远至少留一条通路）
|
||||
const lanes = [0, 1, 2].sort(() => Math.random() - 0.5).slice(0, randInt(1, 2))
|
||||
lanes.forEach((lane) => {
|
||||
const car = makeCar(CAR_COLORS[randInt(0, CAR_COLORS.length - 1)])
|
||||
car.position.set(LANES[lane], 0, spawnZ)
|
||||
car.rotation.y = Math.PI // 对头方向摆放
|
||||
scene.add(car)
|
||||
traffic.push({ mesh: car, lane, z: spawnZ, speed: speed * 0.45 })
|
||||
})
|
||||
spawnZ -= randInt(14, 22)
|
||||
}
|
||||
|
||||
function animate(ts) {
|
||||
rafId = requestAnimationFrame(animate)
|
||||
const dt = Math.min((ts - lastTs) / 1000 || 0.016, 0.05)
|
||||
lastTs = ts
|
||||
if (alive) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
// 里程与提速
|
||||
dist += speed * dt
|
||||
speed = 26 + Math.min(30, dist * 0.02)
|
||||
const score = Math.floor(dist)
|
||||
emit('score', score)
|
||||
// 我的车向目标车道平滑移动
|
||||
const targetX = LANES[myLane]
|
||||
myCar.position.x += (targetX - myCar.position.x) * Math.min(1, 10 * dt)
|
||||
myCar.rotation.z = (targetX - myCar.position.x) * -0.08
|
||||
// 车流相对接近
|
||||
traffic.forEach((t) => {
|
||||
t.z += (speed - t.speed) * dt
|
||||
t.mesh.position.z = t.z
|
||||
})
|
||||
// 移除超过屏幕的车 & 补新车
|
||||
traffic = traffic.filter((t) => {
|
||||
if (t.z > 12) {
|
||||
scene.remove(t.mesh)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
if (!traffic.length || Math.max(...traffic.map((t) => t.z)) > -22) {
|
||||
if (spawnZ > -60) spawnTraffic()
|
||||
}
|
||||
spawnZ = Math.min(spawnZ + speed * dt, -40)
|
||||
// 虚线滚动（视觉速度感）
|
||||
stripes.forEach((s) => {
|
||||
s.position.z += speed * dt
|
||||
if (s.position.z > 10) s.position.z -= 128
|
||||
})
|
||||
// 碰撞判定
|
||||
if (invincible <= 0) {
|
||||
for (const t of traffic) {
|
||||
if (Math.abs(t.z - myCar.position.z) < 2.4 && Math.abs(LANES[t.lane] - myCar.position.x) < 1.4) {
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
shieldRing.visible = false
|
||||
invincible = 1.2
|
||||
scene.remove(t.mesh)
|
||||
traffic = traffic.filter((x) => x !== t)
|
||||
} else {
|
||||
alive = false
|
||||
emit('end', { score })
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// 无敌闪烁
|
||||
myCar.visible = invincible <= 0 || Math.floor(ts / 90) % 2 === 0
|
||||
}
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
traffic.forEach((t) => scene.remove(t.mesh))
|
||||
traffic = []
|
||||
myLane = 1
|
||||
dist = 0
|
||||
speed = 26
|
||||
spawnZ = -40
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
alive = true
|
||||
myCar.position.set(LANES[1], 0, 3.5)
|
||||
myCar.visible = true
|
||||
shieldRing.visible = false
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {
|
||||
cancelAnimationFrame(rafId)
|
||||
keys?.detach()
|
||||
renderer?.dispose()
|
||||
}
|
||||
// 复活：清空车流+2秒无敌；护盾：挡一次碰撞
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
traffic.forEach((t) => scene.remove(t.mesh))
|
||||
traffic = []
|
||||
invincible = 2
|
||||
alive = true
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
shieldRing.visible = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setSize(W, H)
|
||||
holder.value.appendChild(renderer.domElement)
|
||||
renderer.domElement.style.borderRadius = '10px'
|
||||
renderer.domElement.style.maxWidth = '100%'
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
// 变道输入
|
||||
keys.onPress((k) => {
|
||||
if (!alive) return
|
||||
if ((k === 'ArrowLeft' || k === 'a') && myLane > 0) myLane--
|
||||
if ((k === 'ArrowRight' || k === 'd') && myLane < 2) myLane++
|
||||
})
|
||||
initScene()
|
||||
animate(0)
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="holder"></div>
|
||||
</template>
|
||||
154
src/games/components/SimonGame.vue
Normal file
154
src/games/components/SimonGame.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup>
|
||||
// 记忆序列（西蒙说）：记住不断变长的灯光序列并复述
|
||||
import { ref } from 'vue'
|
||||
import { randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const pads = [
|
||||
{ id: 0, color: '#ff5d73', emoji: '🔴' },
|
||||
{ id: 1, color: '#4ade80', emoji: '🟢' },
|
||||
{ id: 2, color: '#4f8cff', emoji: '🔵' },
|
||||
{ id: 3, color: '#ffd500', emoji: '🟡' },
|
||||
]
|
||||
const litPad = ref(-1) // 当前亮起的按钮
|
||||
const round = ref(0)
|
||||
const phase = ref('idle') // idle / showing / input
|
||||
const message = ref('记住闪烁顺序')
|
||||
let sequence = []
|
||||
let inputIdx = 0
|
||||
let score = 0
|
||||
let timers = []
|
||||
|
||||
// 播放当前序列
|
||||
async function playSequence() {
|
||||
phase.value = 'showing'
|
||||
message.value = `第 ${round.value} 关：注意看！`
|
||||
await wait(600)
|
||||
for (const id of sequence) {
|
||||
litPad.value = id
|
||||
await wait(Math.max(220, 520 - round.value * 22)) // 关卡越高闪得越快
|
||||
litPad.value = -1
|
||||
await wait(140)
|
||||
}
|
||||
phase.value = 'input'
|
||||
message.value = '轮到你了，按顺序点击'
|
||||
inputIdx = 0
|
||||
}
|
||||
|
||||
function wait(ms) {
|
||||
return new Promise((resolve) => {
|
||||
timers.push(setTimeout(resolve, ms))
|
||||
})
|
||||
}
|
||||
|
||||
// 玩家点击
|
||||
async function clickPad(id) {
|
||||
if (phase.value !== 'input') return
|
||||
litPad.value = id
|
||||
setTimeout(() => (litPad.value = -1), 180)
|
||||
if (id !== sequence[inputIdx]) {
|
||||
// 按错 → 结束
|
||||
phase.value = 'idle'
|
||||
message.value = '按错啦！'
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
inputIdx++
|
||||
if (inputIdx >= sequence.length) {
|
||||
// 本关通过：得分 = 关数×12
|
||||
score += round.value * 12
|
||||
emit('score', score)
|
||||
message.value = '漂亮！进入下一关'
|
||||
await wait(700)
|
||||
nextRound()
|
||||
}
|
||||
}
|
||||
|
||||
function nextRound() {
|
||||
round.value++
|
||||
sequence.push(randInt(0, 3))
|
||||
playSequence()
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
timers.forEach(clearTimeout)
|
||||
timers = []
|
||||
sequence = []
|
||||
round.value = 0
|
||||
score = 0
|
||||
emit('score', 0)
|
||||
nextRound()
|
||||
}
|
||||
function stop() {
|
||||
timers.forEach(clearTimeout)
|
||||
}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="simon">
|
||||
<p class="msg">{{ message }}</p>
|
||||
<div class="ring">
|
||||
<button
|
||||
v-for="p in pads"
|
||||
:key="p.id"
|
||||
class="pad"
|
||||
:class="{ lit: litPad === p.id, waiting: phase === 'input' }"
|
||||
:style="{ '--pad-color': p.color }"
|
||||
@click="clickPad(p.id)"
|
||||
>
|
||||
{{ p.emoji }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="round text-dim">第 {{ round }} 关 · 序列长度 {{ round }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.simon {
|
||||
text-align: center;
|
||||
width: min(400px, 90vw);
|
||||
}
|
||||
.msg {
|
||||
margin-bottom: 16px;
|
||||
font-size: 15px;
|
||||
min-height: 22px;
|
||||
}
|
||||
.ring {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.pad {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 22px;
|
||||
border: 2px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
font-size: 52px;
|
||||
cursor: pointer;
|
||||
opacity: 0.55;
|
||||
transition: all 0.12s;
|
||||
filter: saturate(0.6);
|
||||
}
|
||||
.pad.waiting {
|
||||
cursor: pointer;
|
||||
}
|
||||
.pad.waiting:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.pad.lit {
|
||||
opacity: 1;
|
||||
filter: saturate(1.3) brightness(1.2);
|
||||
border-color: var(--pad-color);
|
||||
box-shadow: 0 0 24px var(--pad-color);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.round {
|
||||
margin-top: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
194
src/games/components/SnakeGame.vue
Normal file
194
src/games/components/SnakeGame.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<script setup>
|
||||
// 贪吃蛇：方向键控制小蛇吃食物成长，撞墙或咬到自己结束
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
// 网格参数：24 列 × 18 行，每格 28 像素
|
||||
const COLS = 24
|
||||
const ROWS = 18
|
||||
const CELL = 28
|
||||
let ctx
|
||||
let keys
|
||||
let timer = 0 // 移动定时器
|
||||
let snake = [] // 蛇身（头在前）
|
||||
let dir = { x: 1, y: 0 } // 当前方向
|
||||
let nextDir = { x: 1, y: 0 } // 缓冲方向（防止一帧内反向）
|
||||
let food = null // 普通食物
|
||||
let bonus = null // 限时奖励食物
|
||||
let bonusTtl = 0 // 奖励食物剩余口数
|
||||
let score = 0
|
||||
let speed = 130 // 每步间隔 ms（越小越快）
|
||||
let alive = false
|
||||
|
||||
// 重置整局
|
||||
function reset() {
|
||||
snake = [
|
||||
{ x: 8, y: 9 },
|
||||
{ x: 7, y: 9 },
|
||||
{ x: 6, y: 9 },
|
||||
]
|
||||
dir = { x: 1, y: 0 }
|
||||
nextDir = { x: 1, y: 0 }
|
||||
score = 0
|
||||
speed = 130
|
||||
bonus = null
|
||||
spawnFood()
|
||||
emit('score', 0)
|
||||
}
|
||||
|
||||
// 生成食物（避开蛇身）
|
||||
function spawnFood() {
|
||||
do {
|
||||
food = { x: randInt(0, COLS - 1), y: randInt(0, ROWS - 1) }
|
||||
} while (snake.some((s) => s.x === food.x && s.y === food.y))
|
||||
// 15% 概率同时刷出限时奖励食物
|
||||
if (!bonus && Math.random() < 0.15) {
|
||||
do {
|
||||
bonus = { x: randInt(0, COLS - 1), y: randInt(0, ROWS - 1) }
|
||||
} while (snake.some((s) => s.x === bonus.x && s.y === bonus.y) || (bonus.x === food.x && bonus.y === food.y))
|
||||
bonusTtl = 40 // 40 步内有效
|
||||
}
|
||||
}
|
||||
|
||||
// 每步移动逻辑
|
||||
function step() {
|
||||
dir = nextDir
|
||||
const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y }
|
||||
// 撞墙或咬到自己 → 结束
|
||||
if (
|
||||
head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS ||
|
||||
snake.some((s) => s.x === head.x && s.y === head.y)
|
||||
) {
|
||||
die()
|
||||
return
|
||||
}
|
||||
snake.unshift(head)
|
||||
if (head.x === food.x && head.y === food.y) {
|
||||
score += 10
|
||||
emit('score', score)
|
||||
// 越吃越快（下限 65ms）
|
||||
speed = Math.max(65, speed - 2)
|
||||
spawnFood()
|
||||
restartTimer()
|
||||
} else if (bonus && head.x === bonus.x && head.y === bonus.y) {
|
||||
score += 30
|
||||
emit('score', score)
|
||||
bonus = null
|
||||
} else {
|
||||
snake.pop() // 没吃到就收尾
|
||||
}
|
||||
if (bonus && --bonusTtl <= 0) bonus = null
|
||||
draw()
|
||||
}
|
||||
|
||||
function die() {
|
||||
alive = false
|
||||
clearInterval(timer)
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
|
||||
function restartTimer() {
|
||||
clearInterval(timer)
|
||||
timer = setInterval(step, speed)
|
||||
}
|
||||
|
||||
// 绘制画面
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)
|
||||
// 网格底纹
|
||||
ctx.strokeStyle = p.border + '55'
|
||||
ctx.lineWidth = 1
|
||||
for (let x = 0; x <= COLS; x++) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x * CELL, 0)
|
||||
ctx.lineTo(x * CELL, ROWS * CELL)
|
||||
ctx.stroke()
|
||||
}
|
||||
for (let y = 0; y <= ROWS; y++) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, y * CELL)
|
||||
ctx.lineTo(COLS * CELL, y * CELL)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 食物
|
||||
ctx.font = `${CELL - 6}px serif`
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText('🍎', food.x * CELL + CELL / 2, food.y * CELL + CELL / 2 + 1)
|
||||
if (bonus) ctx.fillText('⭐', bonus.x * CELL + CELL / 2, bonus.y * CELL + CELL / 2 + 1)
|
||||
// 蛇身（头亮尾暗渐变）
|
||||
snake.forEach((s, i) => {
|
||||
ctx.fillStyle = i === 0 ? p.primary2 : p.primary
|
||||
ctx.globalAlpha = Math.max(0.35, 1 - i * 0.02)
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(s.x * CELL + 2, s.y * CELL + 2, CELL - 4, CELL - 4, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
// 蛇眼睛
|
||||
const h = snake[0]
|
||||
ctx.fillStyle = '#111'
|
||||
ctx.beginPath()
|
||||
ctx.arc(h.x * CELL + CELL / 2 + dir.x * 5 - dir.y * 5, h.y * CELL + CELL / 2 + dir.y * 5 + dir.x * 5, 2.6, 0, 7)
|
||||
ctx.arc(h.x * CELL + CELL / 2 + dir.x * 5 + dir.y * 5, h.y * CELL + CELL / 2 + dir.y * 5 - dir.x * 5, 2.6, 0, 7)
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
reset()
|
||||
alive = true
|
||||
restartTimer()
|
||||
draw()
|
||||
}
|
||||
function stop() {
|
||||
clearInterval(timer)
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活卡：蛇缩短为 3 节回到中央继续，分数保留
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
snake = [
|
||||
{ x: 8, y: 9 },
|
||||
{ x: 7, y: 9 },
|
||||
{ x: 6, y: 9 },
|
||||
]
|
||||
dir = { x: 1, y: 0 }
|
||||
nextDir = { x: 1, y: 0 }
|
||||
alive = true
|
||||
restartTimer()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
// 方向输入（禁止直接反向）
|
||||
keys.onPress((k) => {
|
||||
const map = {
|
||||
ArrowUp: { x: 0, y: -1 }, w: { x: 0, y: -1 },
|
||||
ArrowDown: { x: 0, y: 1 }, s: { x: 0, y: 1 },
|
||||
ArrowLeft: { x: -1, y: 0 }, a: { x: -1, y: 0 },
|
||||
ArrowRight: { x: 1, y: 0 }, d: { x: 1, y: 0 },
|
||||
}
|
||||
const nd = map[k]
|
||||
if (nd && !(nd.x === -dir.x && nd.y === -dir.y)) nextDir = nd
|
||||
})
|
||||
reset()
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="COLS * CELL" :height="ROWS * CELL"></canvas>
|
||||
</template>
|
||||
243
src/games/components/SpaceShooterGame.vue
Normal file
243
src/games/components/SpaceShooterGame.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<script setup>
|
||||
// 太空射击：自动开火，躲避敌机与弹幕，波次越打越猛
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 640
|
||||
const H = 560
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let ship = { x: W / 2, y: H - 60 }
|
||||
let bullets = [] // 我方子弹
|
||||
let enemies = [] // {x,y,hp,type,vy,fireCd}
|
||||
let enemyBullets = []
|
||||
let stars = [] // 背景星星
|
||||
let score = 0
|
||||
let wave = 1
|
||||
let alive = false
|
||||
let fireCd = 0
|
||||
let spawnCd = 0
|
||||
let shieldOn = false
|
||||
let invincible = 0
|
||||
|
||||
function update(dt) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
// 背景星星滚动
|
||||
stars.forEach((s) => {
|
||||
s.y += s.v * dt
|
||||
if (s.y > H) {
|
||||
s.y = -2
|
||||
s.x = Math.random() * W
|
||||
}
|
||||
})
|
||||
// 移动（键盘）
|
||||
const speed = 340
|
||||
if (keys.has('ArrowLeft') || keys.has('a')) ship.x -= speed * dt
|
||||
if (keys.has('ArrowRight') || keys.has('d')) ship.x += speed * dt
|
||||
ship.x = Math.max(20, Math.min(W - 20, ship.x))
|
||||
// 自动开火
|
||||
fireCd -= dt
|
||||
if (fireCd <= 0) {
|
||||
bullets.push({ x: ship.x, y: ship.y - 18 })
|
||||
fireCd = 0.22
|
||||
}
|
||||
bullets.forEach((b) => (b.y -= 560 * dt))
|
||||
bullets = bullets.filter((b) => b.y > -10)
|
||||
// 刷敌机（波次越高越快）
|
||||
spawnCd -= dt
|
||||
if (spawnCd <= 0) {
|
||||
const type = Math.random() < 0.82 ? 'small' : 'big'
|
||||
enemies.push({
|
||||
x: randInt(30, W - 30),
|
||||
y: -24,
|
||||
hp: type === 'big' ? 4 : 1,
|
||||
type,
|
||||
vy: type === 'big' ? 60 : randInt(90, 140) + wave * 6,
|
||||
fireCd: Math.random() * 2 + 1,
|
||||
})
|
||||
spawnCd = Math.max(0.28, 0.9 - wave * 0.06)
|
||||
}
|
||||
// 敌机移动与开火
|
||||
enemies.forEach((e) => {
|
||||
e.y += e.vy * dt
|
||||
e.fireCd -= dt
|
||||
if (e.fireCd <= 0 && e.y > 0 && e.y < H - 150) {
|
||||
// 朝玩家方向射一发
|
||||
const dx = ship.x - e.x
|
||||
const dy = ship.y - e.y
|
||||
const len = Math.hypot(dx, dy)
|
||||
enemyBullets.push({ x: e.x, y: e.y, vx: (dx / len) * 220, vy: (dy / len) * 220 })
|
||||
e.fireCd = Math.random() * 2.2 + 1.4
|
||||
}
|
||||
})
|
||||
enemies = enemies.filter((e) => e.y < H + 30)
|
||||
enemyBullets.forEach((b) => {
|
||||
b.x += b.vx * dt
|
||||
b.y += b.vy * dt
|
||||
})
|
||||
enemyBullets = enemyBullets.filter((b) => b.y < H + 10 && b.y > -10 && b.x > -10 && b.x < W + 10)
|
||||
// 我方子弹命中敌机
|
||||
for (const b of bullets) {
|
||||
for (const e of enemies) {
|
||||
const r = e.type === 'big' ? 22 : 15
|
||||
if (Math.abs(b.x - e.x) < r && Math.abs(b.y - e.y) < r) {
|
||||
e.hp--
|
||||
b.y = -100 // 标记子弹消失
|
||||
if (e.hp <= 0) {
|
||||
score += e.type === 'big' ? 50 : 10
|
||||
emit('score', score)
|
||||
// 每 300 分升一波
|
||||
const newWave = Math.floor(score / 300) + 1
|
||||
if (newWave > wave) wave = newWave
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
enemies = enemies.filter((e) => e.hp > 0)
|
||||
bullets = bullets.filter((b) => b.y > -50)
|
||||
// 玩家被弹幕/敌机撞
|
||||
if (invincible <= 0) {
|
||||
let hit = enemyBullets.some((b) => Math.hypot(b.x - ship.x, b.y - ship.y) < 16)
|
||||
hit = hit || enemies.some((e) => Math.hypot(e.x - ship.x, e.y - ship.y) < (e.type === 'big' ? 30 : 24))
|
||||
if (hit) {
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
invincible = 1.2
|
||||
} else {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 星空
|
||||
ctx.fillStyle = p.dim
|
||||
stars.forEach((s) => ctx.fillRect(s.x, s.y, s.size, s.size))
|
||||
// 我方飞船（无敌时闪烁）
|
||||
if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
|
||||
ctx.font = '34px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText('🚀', ship.x, ship.y)
|
||||
}
|
||||
if (shieldOn) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(ship.x, ship.y, 28, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 子弹
|
||||
ctx.fillStyle = p.primary2
|
||||
bullets.forEach((b) => {
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(b.x - 2.5, b.y - 9, 5, 14, 3)
|
||||
ctx.fill()
|
||||
})
|
||||
ctx.fillStyle = p.primary
|
||||
enemyBullets.forEach((b) => {
|
||||
ctx.beginPath()
|
||||
ctx.arc(b.x, b.y, 5, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 敌机
|
||||
ctx.font = '26px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
enemies.forEach((e) => {
|
||||
ctx.font = e.type === 'big' ? '40px serif' : '26px serif'
|
||||
ctx.fillText(e.type === 'big' ? '🛸' : '👾', e.x, e.y)
|
||||
})
|
||||
// 波次
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '13px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`第 ${wave} 波`, 10, 10)
|
||||
}
|
||||
|
||||
function onMouse(e) {
|
||||
const rect = canvas.value.getBoundingClientRect()
|
||||
const scale = canvas.value.width / rect.width
|
||||
ship.x = Math.max(20, Math.min(W - 20, (e.clientX - rect.left) * scale))
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
ship = { x: W / 2, y: H - 60 }
|
||||
bullets = []
|
||||
enemies = []
|
||||
enemyBullets = []
|
||||
score = 0
|
||||
wave = 1
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
fireCd = 0
|
||||
spawnCd = 0.4
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活：清屏并无敌 2 秒；炸弹：清除所有敌机与弹幕；护盾：挡一次
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
enemyBullets = []
|
||||
enemies = []
|
||||
invincible = 2
|
||||
alive = true
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'bomb' && alive) {
|
||||
enemies.forEach((e) => {
|
||||
score += e.type === 'big' ? 50 : 10
|
||||
})
|
||||
emit('score', score)
|
||||
enemies = []
|
||||
enemyBullets = []
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
canvas.value.addEventListener('mousemove', onMouse)
|
||||
loop = createLoop(update)
|
||||
stars = Array.from({ length: 70 }, () => ({
|
||||
x: Math.random() * W,
|
||||
y: Math.random() * H,
|
||||
v: 24 + Math.random() * 60,
|
||||
size: Math.random() < 0.3 ? 2 : 1,
|
||||
}))
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
177
src/games/components/Stack3dGame.vue
Normal file
177
src/games/components/Stack3dGame.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
// 3D 堆堆乐（Three.js）：方块来回移动，点击放下，重叠部分保留，越高越难
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const holder = ref(null)
|
||||
const W = 640
|
||||
const H = 560
|
||||
let renderer, scene, camera, rafId
|
||||
let stack = [] // 已叠的层 {mesh, w, d, x, z}
|
||||
let moving = null // 当前移动层 {mesh, w, d, axis, dir}
|
||||
let score = 0
|
||||
let alive = false
|
||||
let baseY = 0 // 塔顶高度
|
||||
const LAYER_H = 0.5
|
||||
const START_SIZE = 3
|
||||
|
||||
// 每层随高度渐变颜色
|
||||
function layerColor(i) {
|
||||
return new THREE.Color().setHSL((0.55 + i * 0.035) % 1, 0.65, 0.55)
|
||||
}
|
||||
|
||||
function makeBox(w, d, color) {
|
||||
const geo = new THREE.BoxGeometry(w, LAYER_H, d)
|
||||
const mat = new THREE.MeshLambertMaterial({ color })
|
||||
return new THREE.Mesh(geo, mat)
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color('#101230')
|
||||
// 正交相机（经典堆塔视角）
|
||||
const aspect = W / H
|
||||
const size = 6
|
||||
camera = new THREE.OrthographicCamera(-size * aspect, size * aspect, size, -size, 0.1, 100)
|
||||
camera.position.set(6, 7, 6)
|
||||
camera.lookAt(0, 0.5, 0)
|
||||
// 灯光
|
||||
const dir = new THREE.DirectionalLight(0xffffff, 1.6)
|
||||
dir.position.set(6, 12, 4)
|
||||
scene.add(dir)
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.7))
|
||||
}
|
||||
|
||||
// 放置底座并生成第一块移动层
|
||||
function resetTower() {
|
||||
stack.forEach((s) => scene.remove(s.mesh))
|
||||
if (moving) scene.remove(moving.mesh)
|
||||
stack = []
|
||||
baseY = 0
|
||||
const base = makeBox(START_SIZE, START_SIZE, layerColor(0))
|
||||
base.position.set(0, -LAYER_H / 2, 0)
|
||||
scene.add(base)
|
||||
stack.push({ mesh: base, w: START_SIZE, d: START_SIZE, x: 0, z: 0 })
|
||||
spawnMoving()
|
||||
}
|
||||
|
||||
// 生成下一块移动层（交替沿 X/Z 轴移动）
|
||||
function spawnMoving() {
|
||||
const top = stack[stack.length - 1]
|
||||
const axis = stack.length % 2 === 1 ? 'x' : 'z'
|
||||
const mesh = makeBox(top.w, top.d, layerColor(stack.length))
|
||||
baseY = (stack.length - 1) * LAYER_H + LAYER_H / 2
|
||||
mesh.position.set(axis === 'x' ? -5 : top.x, baseY + LAYER_H, axis === 'z' ? -5 : top.z)
|
||||
scene.add(mesh)
|
||||
moving = { mesh, w: top.w, d: top.d, axis, dir: 1, speed: 3 + stack.length * 0.12 }
|
||||
}
|
||||
|
||||
// 点击放下：计算与塔顶的重叠
|
||||
function drop() {
|
||||
if (!alive || !moving) return
|
||||
const top = stack[stack.length - 1]
|
||||
const m = moving.mesh.position
|
||||
let overlap, newW = moving.w, newD = moving.d, newX = m.x, newZ = m.z
|
||||
if (moving.axis === 'x') {
|
||||
const delta = m.x - top.x
|
||||
overlap = moving.w - Math.abs(delta)
|
||||
if (overlap <= 0.05) return miss()
|
||||
newW = overlap
|
||||
newX = top.x + delta / 2
|
||||
} else {
|
||||
const delta = m.z - top.z
|
||||
overlap = moving.d - Math.abs(delta)
|
||||
if (overlap <= 0.05) return miss()
|
||||
newD = overlap
|
||||
newZ = top.z + delta / 2
|
||||
}
|
||||
// 完美对齐（误差 < 0.12）不裁剪 + 奖励分
|
||||
const perfect = moving.axis === 'x' ? Math.abs(m.x - top.x) < 0.12 : Math.abs(m.z - top.z) < 0.12
|
||||
if (perfect) {
|
||||
newW = moving.w
|
||||
newD = moving.d
|
||||
newX = top.x
|
||||
newZ = top.z
|
||||
score += 3
|
||||
} else {
|
||||
score += 1
|
||||
}
|
||||
emit('score', score)
|
||||
// 用裁剪后的尺寸重建这一层
|
||||
scene.remove(moving.mesh)
|
||||
const placed = makeBox(newW, newD, layerColor(stack.length))
|
||||
placed.position.set(newX, baseY + LAYER_H, newZ)
|
||||
scene.add(placed)
|
||||
stack.push({ mesh: placed, w: newW, d: newD, x: newX, z: newZ })
|
||||
moving = null
|
||||
// 相机跟随塔高
|
||||
camera.position.y = 7 + stack.length * LAYER_H
|
||||
camera.lookAt(0, stack.length * LAYER_H, 0)
|
||||
spawnMoving()
|
||||
}
|
||||
|
||||
// 完全没接住 → 结束
|
||||
function miss() {
|
||||
alive = false
|
||||
emit('end', { score })
|
||||
}
|
||||
|
||||
function animate() {
|
||||
rafId = requestAnimationFrame(animate)
|
||||
if (moving && alive) {
|
||||
const m = moving.mesh.position
|
||||
const delta = 0.016 * moving.speed * moving.dir
|
||||
if (moving.axis === 'x') {
|
||||
m.x += delta
|
||||
if (m.x > 5 || m.x < -5) moving.dir *= -1
|
||||
} else {
|
||||
m.z += delta
|
||||
if (m.z > 5 || m.z < -5) moving.dir *= -1
|
||||
}
|
||||
}
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
function onKey(e) {
|
||||
if (e.key === ' ') {
|
||||
e.preventDefault()
|
||||
drop()
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
score = 0
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
resetTower()
|
||||
}
|
||||
function stop() {
|
||||
cancelAnimationFrame(rafId)
|
||||
window.removeEventListener('keydown', onKey)
|
||||
renderer?.dispose()
|
||||
}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setSize(W, H)
|
||||
holder.value.appendChild(renderer.domElement)
|
||||
renderer.domElement.style.borderRadius = '10px'
|
||||
renderer.domElement.style.maxWidth = '100%'
|
||||
renderer.domElement.addEventListener('pointerdown', drop)
|
||||
window.addEventListener('keydown', onKey)
|
||||
initScene()
|
||||
resetTower()
|
||||
animate()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="holder"></div>
|
||||
</template>
|
||||
3506
src/games/components/StarveGame.vue
Normal file
3506
src/games/components/StarveGame.vue
Normal file
File diff suppressed because it is too large
Load Diff
248
src/games/components/SudokuGame.vue
Normal file
248
src/games/components/SudokuGame.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<script setup>
|
||||
// 数独：挖洞生成谜题，填满全盘（错误即时标红），用时越短分越高
|
||||
import { ref, computed } from 'vue'
|
||||
import { randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const grid = ref([]) // 当前盘面（0=空）
|
||||
const fixed = ref([]) // 是否题目给定格
|
||||
const solution = ref([]) // 完整解
|
||||
const selected = ref(null) // 选中格 [r,c]
|
||||
const playing = ref(false)
|
||||
const errors = ref(0)
|
||||
let startTs = 0
|
||||
|
||||
// 生成完整数独解（回溯）
|
||||
function generateFull() {
|
||||
const g = Array.from({ length: 9 }, () => Array(9).fill(0))
|
||||
const ok = (r, c, v) => {
|
||||
for (let i = 0; i < 9; i++) {
|
||||
if (g[r][i] === v || g[i][c] === v) return false
|
||||
}
|
||||
const br = Math.floor(r / 3) * 3
|
||||
const bc = Math.floor(c / 3) * 3
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
if (g[br + i][bc + j] === v) return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
const fill = (pos) => {
|
||||
if (pos === 81) return true
|
||||
const r = Math.floor(pos / 9)
|
||||
const c = pos % 9
|
||||
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9].sort(() => Math.random() - 0.5)
|
||||
for (const v of nums) {
|
||||
if (ok(r, c, v)) {
|
||||
g[r][c] = v
|
||||
if (fill(pos + 1)) return true
|
||||
g[r][c] = 0
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
fill(0)
|
||||
return g
|
||||
}
|
||||
|
||||
// 数字键盘可用数字剩余数量
|
||||
const counts = computed(() => {
|
||||
const map = {}
|
||||
for (let v = 1; v <= 9; v++) map[v] = 9
|
||||
grid.value.forEach((row) => row.forEach((v) => v && map[v]--))
|
||||
return map
|
||||
})
|
||||
|
||||
function select(r, c) {
|
||||
if (!playing.value || fixed.value[r][c]) return
|
||||
selected.value = [r, c]
|
||||
}
|
||||
|
||||
// 填数
|
||||
function input(v) {
|
||||
if (!playing.value || !selected.value) return
|
||||
const [r, c] = selected.value
|
||||
if (fixed.value[r][c]) return
|
||||
if (grid.value[r][c] === v) {
|
||||
grid.value[r][c] = 0 // 再点一次清除
|
||||
return
|
||||
}
|
||||
grid.value[r][c] = v
|
||||
if (v !== solution.value[r][c]) errors.value++
|
||||
// 检查完成（全部与解一致）
|
||||
const done = grid.value.every((row, ri) => row.every((val, ci) => val === solution.value[ri][ci]))
|
||||
if (done) {
|
||||
playing.value = false
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
// 得分：600 基础 - 用时 - 错误×30，下限 60
|
||||
const score = Math.max(60, 600 - secs - errors.value * 30)
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// 格子样式：错误标红、选中高亮、同数字提示
|
||||
function cellClass(r, c) {
|
||||
const v = grid.value[r]?.[c]
|
||||
return {
|
||||
fixed: fixed.value[r]?.[c],
|
||||
selected: selected.value?.[0] === r && selected.value?.[1] === c,
|
||||
error: v && v !== solution.value[r][c],
|
||||
same: v && selected.value && grid.value[selected.value[0]][selected.value[1]] === v,
|
||||
'br-right': c === 2 || c === 5,
|
||||
'br-bottom': r === 2 || r === 5,
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
solution.value = generateFull()
|
||||
grid.value = solution.value.map((row) => [...row])
|
||||
// 挖 46 个洞
|
||||
let holes = 46
|
||||
while (holes > 0) {
|
||||
const r = randInt(0, 8)
|
||||
const c = randInt(0, 8)
|
||||
if (grid.value[r][c]) {
|
||||
grid.value[r][c] = 0
|
||||
holes--
|
||||
}
|
||||
}
|
||||
fixed.value = grid.value.map((row) => row.map((v) => v !== 0))
|
||||
selected.value = null
|
||||
errors.value = 0
|
||||
playing.value = true
|
||||
startTs = Date.now()
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {}
|
||||
// 提示卡：为选中格（或随机空格/错格）填入正确答案
|
||||
function useProp(code) {
|
||||
if (code !== 'hint' || !playing.value) return false
|
||||
let target = selected.value
|
||||
if (!target || grid.value[target[0]][target[1]] === solution.value[target[0]][target[1]]) {
|
||||
// 找一个未填或填错的格
|
||||
const empties = []
|
||||
grid.value.forEach((row, r) =>
|
||||
row.forEach((v, c) => {
|
||||
if (v !== solution.value[r][c]) empties.push([r, c])
|
||||
})
|
||||
)
|
||||
if (!empties.length) return false
|
||||
target = empties[randInt(0, empties.length - 1)]
|
||||
}
|
||||
const [r, c] = target
|
||||
grid.value[r][c] = solution.value[r][c]
|
||||
// 完成检查（与 input 相同的判定）
|
||||
const done = grid.value.every((row, ri) => row.every((val, ci) => val === solution.value[ri][ci]))
|
||||
if (done) {
|
||||
playing.value = false
|
||||
const secs = Math.round((Date.now() - startTs) / 1000)
|
||||
const score = Math.max(60, 600 - secs - errors.value * 30)
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
}
|
||||
return true
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sudoku">
|
||||
<div class="hud text-dim">错误：<b :class="{ err: errors > 0 }">{{ errors }}</b> 次</div>
|
||||
<div class="board">
|
||||
<template v-for="(row, r) in grid" :key="r">
|
||||
<button v-for="(v, c) in row" :key="`${r}-${c}`" class="cell" :class="cellClass(r, c)" @click="select(r, c)">
|
||||
{{ v || '' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="numpad">
|
||||
<button v-for="n in 9" :key="n" class="num" :disabled="counts[n] <= 0" @click="input(n)">
|
||||
{{ n }}<small>{{ counts[n] }}</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sudoku {
|
||||
width: min(440px, 92vw);
|
||||
text-align: center;
|
||||
}
|
||||
.hud {
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.err {
|
||||
color: #ff5d73;
|
||||
}
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--border);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cell {
|
||||
aspect-ratio: 1;
|
||||
border: none;
|
||||
background: var(--bg-card);
|
||||
color: var(--accent);
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cell.fixed {
|
||||
color: var(--text);
|
||||
background: var(--bg-panel);
|
||||
cursor: default;
|
||||
}
|
||||
.cell.same {
|
||||
background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
|
||||
}
|
||||
.cell.selected {
|
||||
background: color-mix(in srgb, var(--primary) 32%, var(--bg-card));
|
||||
}
|
||||
.cell.error {
|
||||
color: #ff5d73;
|
||||
}
|
||||
.cell.br-right {
|
||||
border-right: 2px solid var(--text-dim);
|
||||
}
|
||||
.cell.br-bottom {
|
||||
border-bottom: 2px solid var(--text-dim);
|
||||
}
|
||||
.numpad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.num {
|
||||
padding: 8px 0 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.num small {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.num:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.num:hover:not(:disabled) {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
311
src/games/components/TankGame.vue
Normal file
311
src/games/components/TankGame.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<script setup>
|
||||
// 坦克大战：消灭一波波敌军并保卫基地，敌弹与撞击都会致命
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, Keys, palette, randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 660
|
||||
const H = 560
|
||||
const TILE = 44
|
||||
let ctx
|
||||
let keys
|
||||
let loop
|
||||
let me = { x: W / 2, y: H - 60, dir: 0, cd: 0 } // dir: 0上 1右 2下 3左
|
||||
let base = { x: W / 2, y: H - 26, hp: 1 }
|
||||
let walls = [] // {x,y,hp}
|
||||
let enemies = [] // {x,y,dir,cd,moveCd,hp}
|
||||
let bullets = [] // {x,y,dir,mine}
|
||||
let score = 0
|
||||
let waveNum = 1
|
||||
let alive = false
|
||||
let shieldOn = false
|
||||
let invincible = 0
|
||||
const DIRS = [
|
||||
[0, -1],
|
||||
[1, 0],
|
||||
[0, 1],
|
||||
[-1, 0],
|
||||
]
|
||||
|
||||
// 生成一波敌人与随机砖墙
|
||||
function buildWave() {
|
||||
enemies = []
|
||||
const count = 3 + waveNum
|
||||
for (let i = 0; i < count; i++) {
|
||||
enemies.push({
|
||||
x: randInt(40, W - 40),
|
||||
y: randInt(30, 120),
|
||||
dir: 2,
|
||||
cd: Math.random() * 2 + 1,
|
||||
moveCd: 0,
|
||||
hp: waveNum >= 3 && i % 3 === 0 ? 2 : 1,
|
||||
})
|
||||
}
|
||||
walls = []
|
||||
for (let i = 0; i < 14; i++) {
|
||||
walls.push({ x: randInt(1, 13) * TILE, y: randInt(4, 9) * TILE, hp: 2 })
|
||||
}
|
||||
// 基地护墙
|
||||
walls.push({ x: base.x - TILE, y: H - TILE, hp: 3 }, { x: base.x + TILE - TILE, y: H - TILE * 2, hp: 3 }, { x: base.x, y: H - TILE * 2, hp: 3 }, { x: base.x - TILE, y: H - TILE * 2, hp: 3 })
|
||||
}
|
||||
|
||||
function fire(from, mine) {
|
||||
bullets.push({ x: from.x, y: from.y, dir: from.dir, mine })
|
||||
}
|
||||
|
||||
function rectOf(e, size = 30) {
|
||||
return { l: e.x - size / 2, t: e.y - size / 2, r: e.x + size / 2, b: e.y + size / 2 }
|
||||
}
|
||||
function overlap(a, b) {
|
||||
return a.l < b.r && a.r > b.l && a.t < b.b && a.b > b.t
|
||||
}
|
||||
|
||||
function tryMove(unit, dx, dy) {
|
||||
const nx = unit.x + dx
|
||||
const ny = unit.y + dy
|
||||
if (nx < 18 || nx > W - 18 || ny < 18 || ny > H - 18) return false
|
||||
const nr = { l: nx - 15, t: ny - 15, r: nx + 15, b: ny + 15 }
|
||||
// 撞墙判定
|
||||
for (const w of walls) {
|
||||
if (w.hp > 0 && overlap(nr, { l: w.x, t: w.y, r: w.x + TILE, b: w.y + TILE })) return false
|
||||
}
|
||||
unit.x = nx
|
||||
unit.y = ny
|
||||
return true
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
if (invincible > 0) invincible -= dt
|
||||
me.cd -= dt
|
||||
// 玩家移动（同时更新朝向）
|
||||
const speed = 190
|
||||
if (keys.has('ArrowUp') || keys.has('w')) {
|
||||
me.dir = 0
|
||||
tryMove(me, 0, -speed * dt)
|
||||
} else if (keys.has('ArrowRight') || keys.has('d')) {
|
||||
me.dir = 1
|
||||
tryMove(me, speed * dt, 0)
|
||||
} else if (keys.has('ArrowDown') || keys.has('s')) {
|
||||
me.dir = 2
|
||||
tryMove(me, 0, speed * dt)
|
||||
} else if (keys.has('ArrowLeft') || keys.has('a')) {
|
||||
me.dir = 3
|
||||
tryMove(me, -speed * dt, 0)
|
||||
}
|
||||
if (keys.has(' ') && me.cd <= 0) {
|
||||
fire(me, true)
|
||||
me.cd = 0.38
|
||||
}
|
||||
// 敌人 AI：随机转向 + 偏向基地方向 + 定时开火
|
||||
enemies.forEach((e) => {
|
||||
e.moveCd -= dt
|
||||
e.cd -= dt
|
||||
if (e.moveCd <= 0) {
|
||||
// 40% 朝基地方向，60% 随机
|
||||
if (Math.random() < 0.4) {
|
||||
e.dir = Math.abs(base.x - e.x) > Math.abs(base.y - e.y) ? (base.x > e.x ? 1 : 3) : 2
|
||||
} else {
|
||||
e.dir = randInt(0, 3)
|
||||
}
|
||||
e.moveCd = Math.random() * 1.4 + 0.5
|
||||
}
|
||||
const [dx, dy] = DIRS[e.dir]
|
||||
if (!tryMove(e, dx * 110 * dt, dy * 110 * dt)) e.moveCd = 0 // 撞墙立刻换向
|
||||
if (e.cd <= 0) {
|
||||
fire(e, false)
|
||||
e.cd = Math.random() * 2 + 1.2
|
||||
}
|
||||
})
|
||||
// 子弹飞行与命中
|
||||
bullets.forEach((b) => {
|
||||
const [dx, dy] = DIRS[b.dir]
|
||||
b.x += dx * 420 * dt
|
||||
b.y += dy * 420 * dt
|
||||
})
|
||||
bullets = bullets.filter((b) => {
|
||||
if (b.x < 0 || b.x > W || b.y < 0 || b.y > H) return false
|
||||
// 打墙
|
||||
for (const w of walls) {
|
||||
if (w.hp > 0 && b.x > w.x && b.x < w.x + TILE && b.y > w.y && b.y < w.y + TILE) {
|
||||
w.hp--
|
||||
return false
|
||||
}
|
||||
}
|
||||
if (b.mine) {
|
||||
// 打敌人
|
||||
for (const e of enemies) {
|
||||
if (Math.abs(e.x - b.x) < 18 && Math.abs(e.y - b.y) < 18) {
|
||||
e.hp--
|
||||
if (e.hp <= 0) {
|
||||
score += 20
|
||||
emit('score', score)
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 打玩家
|
||||
if (invincible <= 0 && Math.abs(me.x - b.x) < 17 && Math.abs(me.y - b.y) < 17) {
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
invincible = 1
|
||||
} else {
|
||||
gameOver()
|
||||
}
|
||||
return false
|
||||
}
|
||||
// 打基地
|
||||
if (Math.abs(base.x - b.x) < 20 && Math.abs(base.y - b.y) < 16) {
|
||||
gameOver()
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
enemies = enemies.filter((e) => e.hp > 0)
|
||||
walls = walls.filter((w) => w.hp > 0)
|
||||
// 敌人撞玩家
|
||||
if (invincible <= 0 && enemies.some((e) => Math.abs(e.x - me.x) < 30 && Math.abs(e.y - me.y) < 30)) {
|
||||
if (shieldOn) {
|
||||
shieldOn = false
|
||||
invincible = 1
|
||||
} else {
|
||||
gameOver()
|
||||
return
|
||||
}
|
||||
}
|
||||
// 全歼 → 下一波 +100
|
||||
if (alive && enemies.length === 0) {
|
||||
score += 100
|
||||
waveNum++
|
||||
emit('score', score)
|
||||
buildWave()
|
||||
}
|
||||
if (alive) draw()
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
if (!alive) return
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
|
||||
function drawTank(x, y, dir, color, emoji) {
|
||||
ctx.save()
|
||||
ctx.translate(x, y)
|
||||
ctx.rotate((dir * Math.PI) / 2)
|
||||
ctx.fillStyle = color
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(-15, -15, 30, 30, 6)
|
||||
ctx.fill()
|
||||
// 炮管
|
||||
ctx.fillRect(-3, -24, 6, 14)
|
||||
ctx.restore()
|
||||
ctx.font = '15px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText(emoji, x, y)
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 砖墙
|
||||
walls.forEach((w) => {
|
||||
ctx.fillStyle = w.hp >= 3 ? '#8a8f98' : w.hp === 2 ? '#b0703c' : '#8a5428'
|
||||
ctx.fillRect(w.x + 1, w.y + 1, TILE - 2, TILE - 2)
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.35)'
|
||||
ctx.strokeRect(w.x + 1, w.y + 1, TILE - 2, TILE - 2)
|
||||
})
|
||||
// 基地
|
||||
ctx.font = '30px serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText('🏰', base.x, base.y)
|
||||
// 玩家（无敌闪烁）
|
||||
if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
|
||||
drawTank(me.x, me.y, me.dir, p.accent, '⭐')
|
||||
}
|
||||
if (shieldOn) {
|
||||
ctx.strokeStyle = p.accent
|
||||
ctx.lineWidth = 3
|
||||
ctx.beginPath()
|
||||
ctx.arc(me.x, me.y, 26, 0, 7)
|
||||
ctx.stroke()
|
||||
}
|
||||
// 敌人
|
||||
enemies.forEach((e) => drawTank(e.x, e.y, e.dir, e.hp >= 2 ? '#ff9f45' : '#ff5d73', ''))
|
||||
// 子弹
|
||||
bullets.forEach((b) => {
|
||||
ctx.fillStyle = b.mine ? p.primary2 : '#ff5d73'
|
||||
ctx.beginPath()
|
||||
ctx.arc(b.x, b.y, 4, 0, 7)
|
||||
ctx.fill()
|
||||
})
|
||||
// 波次
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '13px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(`第 ${waveNum} 波 · 剩余敌军 ${enemies.length}`, 10, 8)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
me = { x: W / 2 - 100, y: H - 60, dir: 0, cd: 0 }
|
||||
base = { x: W / 2, y: H - 26, hp: 1 }
|
||||
bullets = []
|
||||
score = 0
|
||||
waveNum = 1
|
||||
shieldOn = false
|
||||
invincible = 0
|
||||
alive = true
|
||||
buildWave()
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
keys?.detach()
|
||||
}
|
||||
// 复活：原地复活+无敌2秒；炸弹：全歼当前敌人；护盾：挡一次
|
||||
function useProp(code) {
|
||||
if (code === 'revive' && !alive) {
|
||||
invincible = 2
|
||||
alive = true
|
||||
bullets = bullets.filter((b) => b.mine)
|
||||
loop.start()
|
||||
return true
|
||||
}
|
||||
if (code === 'bomb' && alive) {
|
||||
score += enemies.length * 20
|
||||
emit('score', score)
|
||||
enemies = []
|
||||
return true
|
||||
}
|
||||
if (code === 'shield' && alive && !shieldOn) {
|
||||
shieldOn = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
loop = createLoop(update)
|
||||
buildWave()
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
217
src/games/components/TetrisGame.vue
Normal file
217
src/games/components/TetrisGame.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script setup>
|
||||
// 俄罗斯方块：七种方块消行得分，速度随等级提升
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { Keys, palette } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
// 棋盘 10 列 × 20 行，每格 24px；右侧 150px 信息面板
|
||||
const COLS = 10
|
||||
const ROWS = 20
|
||||
const CELL = 24
|
||||
const W = COLS * CELL + 150
|
||||
const H = ROWS * CELL
|
||||
let ctx
|
||||
let keys
|
||||
let board = [] // 已固定的格子（0 空，否则颜色索引）
|
||||
let cur = null // 当前下落方块 {shape, x, y, color}
|
||||
let next = null // 下一个方块
|
||||
let dropTimer = 0
|
||||
let score = 0
|
||||
let lines = 0
|
||||
let level = 1
|
||||
let alive = false
|
||||
|
||||
// 七种方块形状（4x4 矩阵内的坐标）与配色索引
|
||||
const SHAPES = [
|
||||
{ cells: [[0, 1], [1, 1], [2, 1], [3, 1]], color: 0 }, // I
|
||||
{ cells: [[0, 0], [1, 0], [0, 1], [1, 1]], color: 1 }, // O
|
||||
{ cells: [[1, 0], [0, 1], [1, 1], [2, 1]], color: 2 }, // T
|
||||
{ cells: [[1, 0], [2, 0], [0, 1], [1, 1]], color: 3 }, // S
|
||||
{ cells: [[0, 0], [1, 0], [1, 1], [2, 1]], color: 4 }, // Z
|
||||
{ cells: [[0, 0], [0, 1], [1, 1], [2, 1]], color: 5 }, // J
|
||||
{ cells: [[2, 0], [0, 1], [1, 1], [2, 1]], color: 6 }, // L
|
||||
]
|
||||
const COLORS = ['#00e5ff', '#ffd500', '#b26bff', '#4ade80', '#ff5d73', '#4f8cff', '#ff9f45']
|
||||
|
||||
function newPiece() {
|
||||
const s = SHAPES[Math.floor(Math.random() * SHAPES.length)]
|
||||
return { cells: s.cells.map((c) => [...c]), color: s.color, x: 3, y: -1 }
|
||||
}
|
||||
|
||||
// 检测方块在 (dx,dy) 偏移或旋转后是否合法
|
||||
function fits(piece, dx = 0, dy = 0, cells = null) {
|
||||
const cs = cells || piece.cells
|
||||
return cs.every(([cx, cy]) => {
|
||||
const nx = piece.x + cx + dx
|
||||
const ny = piece.y + cy + dy
|
||||
if (nx < 0 || nx >= COLS || ny >= ROWS) return false
|
||||
if (ny < 0) return true
|
||||
return !board[ny][nx]
|
||||
})
|
||||
}
|
||||
|
||||
// 顺时针旋转（绕 1,1）
|
||||
function rotate() {
|
||||
const rotated = cur.cells.map(([cx, cy]) => [1 - (cy - 1), 1 + (cx - 1)])
|
||||
if (fits(cur, 0, 0, rotated)) cur.cells = rotated
|
||||
else if (fits(cur, -1, 0, rotated)) { cur.x -= 1; cur.cells = rotated } // 踢墙
|
||||
else if (fits(cur, 1, 0, rotated)) { cur.x += 1; cur.cells = rotated }
|
||||
}
|
||||
|
||||
// 方块固定到棋盘并消行
|
||||
function lock() {
|
||||
cur.cells.forEach(([cx, cy]) => {
|
||||
const y = cur.y + cy
|
||||
if (y >= 0) board[y][cur.x + cx] = cur.color + 1
|
||||
})
|
||||
// 消行
|
||||
let cleared = 0
|
||||
for (let y = ROWS - 1; y >= 0; y--) {
|
||||
if (board[y].every((v) => v)) {
|
||||
board.splice(y, 1)
|
||||
board.unshift(Array(COLS).fill(0))
|
||||
cleared++
|
||||
y++ // 该行已被替换，重新检查
|
||||
}
|
||||
}
|
||||
if (cleared) {
|
||||
// 消行计分：1/2/3/4 行 = 100/300/600/1000 × 等级
|
||||
score += [0, 100, 300, 600, 1000][cleared] * level
|
||||
lines += cleared
|
||||
level = Math.floor(lines / 8) + 1
|
||||
emit('score', score)
|
||||
restartDrop()
|
||||
}
|
||||
cur = next
|
||||
next = newPiece()
|
||||
// 新方块放不下 → 结束
|
||||
if (!fits(cur)) {
|
||||
alive = false
|
||||
clearInterval(dropTimer)
|
||||
draw()
|
||||
emit('end', { score })
|
||||
}
|
||||
}
|
||||
|
||||
// 下落一步
|
||||
function fall() {
|
||||
if (fits(cur, 0, 1)) cur.y++
|
||||
else lock()
|
||||
draw()
|
||||
}
|
||||
|
||||
function restartDrop() {
|
||||
clearInterval(dropTimer)
|
||||
// 等级越高下落越快（下限 90ms）
|
||||
dropTimer = setInterval(fall, Math.max(90, 650 - (level - 1) * 60))
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 棋盘区
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.28)'
|
||||
ctx.fillRect(0, 0, COLS * CELL, H)
|
||||
const cell = (x, y, colorIdx, ghost = false) => {
|
||||
ctx.fillStyle = ghost ? 'rgba(255,255,255,0.10)' : COLORS[colorIdx]
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(x * CELL + 1.5, y * CELL + 1.5, CELL - 3, CELL - 3, 5)
|
||||
ctx.fill()
|
||||
}
|
||||
// 已固定格子
|
||||
for (let y = 0; y < ROWS; y++) {
|
||||
for (let x = 0; x < COLS; x++) {
|
||||
if (board[y][x]) cell(x, y, board[y][x] - 1)
|
||||
}
|
||||
}
|
||||
if (cur && alive) {
|
||||
// 幽灵落点提示
|
||||
let gy = 0
|
||||
while (fits(cur, 0, gy + 1)) gy++
|
||||
cur.cells.forEach(([cx, cy]) => {
|
||||
if (cur.y + cy + gy >= 0) cell(cur.x + cx, cur.y + cy + gy, cur.color, true)
|
||||
})
|
||||
// 当前方块
|
||||
cur.cells.forEach(([cx, cy]) => {
|
||||
if (cur.y + cy >= 0) cell(cur.x + cx, cur.y + cy, cur.color)
|
||||
})
|
||||
}
|
||||
// 右侧信息面板
|
||||
const px = COLS * CELL + 16
|
||||
ctx.fillStyle = p.text
|
||||
ctx.font = 'bold 15px sans-serif'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText('下一个', px, 14)
|
||||
if (next) {
|
||||
next.cells.forEach(([cx, cy]) => {
|
||||
ctx.fillStyle = COLORS[next.color]
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(px + cx * 20, 44 + cy * 20, 17, 17, 4)
|
||||
ctx.fill()
|
||||
})
|
||||
}
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '13px sans-serif'
|
||||
ctx.fillText(`分数 ${score}`, px, 130)
|
||||
ctx.fillText(`行数 ${lines}`, px, 154)
|
||||
ctx.fillText(`等级 ${level}`, px, 178)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
board = Array.from({ length: ROWS }, () => Array(COLS).fill(0))
|
||||
score = 0
|
||||
lines = 0
|
||||
level = 1
|
||||
cur = newPiece()
|
||||
next = newPiece()
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
restartDrop()
|
||||
draw()
|
||||
}
|
||||
function stop() {
|
||||
clearInterval(dropTimer)
|
||||
keys?.detach()
|
||||
}
|
||||
// 炸弹清屏：清除底部两行（整体下移）
|
||||
function useProp(code) {
|
||||
if (code === 'bomb' && alive) {
|
||||
board.splice(ROWS - 2, 2)
|
||||
board.unshift(Array(COLS).fill(0), Array(COLS).fill(0))
|
||||
draw()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
keys = new Keys()
|
||||
keys.attach()
|
||||
keys.onPress((k) => {
|
||||
if (!alive || !cur) return
|
||||
if (k === 'ArrowLeft' && fits(cur, -1, 0)) cur.x--
|
||||
if (k === 'ArrowRight' && fits(cur, 1, 0)) cur.x++
|
||||
if (k === 'ArrowUp') rotate()
|
||||
if (k === 'ArrowDown') fall()
|
||||
if (k === ' ') {
|
||||
// 硬降：直接落到底
|
||||
while (fits(cur, 0, 1)) cur.y++
|
||||
lock()
|
||||
}
|
||||
draw()
|
||||
})
|
||||
board = Array.from({ length: ROWS }, () => Array(COLS).fill(0))
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
148
src/games/components/TicTacToeGame.vue
Normal file
148
src/games/components/TicTacToeGame.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<script setup>
|
||||
// 井字棋：与 AI 对战，AI 八成走最优（留两成破绽）
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const cells = ref(Array(9).fill('')) // '' | X | O
|
||||
const playing = ref(false)
|
||||
const status = ref('你执 ❌ 先手')
|
||||
let round = 0 // 连胜计分：赢一局继续下一局
|
||||
let score = 0
|
||||
|
||||
const LINES = [
|
||||
[0, 1, 2], [3, 4, 5], [6, 7, 8],
|
||||
[0, 3, 6], [1, 4, 7], [2, 5, 8],
|
||||
[0, 4, 8], [2, 4, 6],
|
||||
]
|
||||
|
||||
function winner(b) {
|
||||
for (const [a, c, d] of LINES) {
|
||||
if (b[a] && b[a] === b[c] && b[a] === b[d]) return b[a]
|
||||
}
|
||||
return b.every((v) => v) ? 'draw' : null
|
||||
}
|
||||
|
||||
// 极小极大搜索（AI 视角 O）
|
||||
function minimax(b, isAI) {
|
||||
const w = winner(b)
|
||||
if (w === 'O') return { v: 10 }
|
||||
if (w === 'X') return { v: -10 }
|
||||
if (w === 'draw') return { v: 0 }
|
||||
let best = null
|
||||
for (let i = 0; i < 9; i++) {
|
||||
if (b[i]) continue
|
||||
b[i] = isAI ? 'O' : 'X'
|
||||
const r = minimax(b, !isAI)
|
||||
b[i] = ''
|
||||
if (!best || (isAI ? r.v > best.v : r.v < best.v)) best = { v: r.v, i }
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
function click(i) {
|
||||
if (!playing.value || cells.value[i]) return
|
||||
cells.value[i] = 'X'
|
||||
if (checkEnd()) return
|
||||
// AI 落子：80% 最优，20% 随机（可被击败）
|
||||
status.value = 'AI 思考中…'
|
||||
setTimeout(() => {
|
||||
if (!playing.value) return
|
||||
const empty = cells.value.map((v, idx) => (v ? -1 : idx)).filter((v) => v >= 0)
|
||||
let move
|
||||
if (Math.random() < 0.8) {
|
||||
move = minimax([...cells.value], true).i
|
||||
} else {
|
||||
move = empty[Math.floor(Math.random() * empty.length)]
|
||||
}
|
||||
cells.value[move] = 'O'
|
||||
if (!checkEnd()) status.value = '轮到你了'
|
||||
}, 350)
|
||||
}
|
||||
|
||||
// 检查终局：赢了续局累计得分，输/平结束
|
||||
function checkEnd() {
|
||||
const w = winner(cells.value)
|
||||
if (!w) return false
|
||||
if (w === 'X') {
|
||||
round++
|
||||
score += 50
|
||||
emit('score', score)
|
||||
status.value = `第 ${round} 局获胜！+50，下一局开始`
|
||||
setTimeout(() => {
|
||||
cells.value = Array(9).fill('')
|
||||
status.value = '你执 ❌ 先手'
|
||||
}, 900)
|
||||
return true
|
||||
}
|
||||
// 平局 +20 结束，输了 +5 结束
|
||||
score += w === 'draw' ? 20 : 5
|
||||
playing.value = false
|
||||
status.value = w === 'draw' ? '平局收场' : 'AI 获胜'
|
||||
emit('score', score)
|
||||
emit('end', { score })
|
||||
return true
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
cells.value = Array(9).fill('')
|
||||
playing.value = true
|
||||
round = 0
|
||||
score = 0
|
||||
status.value = '你执 ❌ 先手'
|
||||
emit('score', 0)
|
||||
}
|
||||
function stop() {}
|
||||
function useProp() {
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ttt">
|
||||
<p class="status">{{ status }}</p>
|
||||
<div class="board">
|
||||
<button v-for="(c, i) in cells" :key="i" class="cell" :class="{ x: c === 'X', o: c === 'O' }" @click="click(i)">
|
||||
{{ c === 'X' ? '❌' : c === 'O' ? '⭕' : '' }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="tip">连续获胜可以一直加分，输或平则结算</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ttt {
|
||||
text-align: center;
|
||||
width: min(380px, 90vw);
|
||||
}
|
||||
.status {
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.cell {
|
||||
aspect-ratio: 1;
|
||||
font-size: 44px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.cell:hover {
|
||||
border-color: var(--primary);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.tip {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
161
src/games/components/TypingGame.vue
Normal file
161
src/games/components/TypingGame.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
// 极速打字：单词从顶部落下，落地前输入完成得分，漏掉 5 个结束
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { createLoop, palette, randInt, pick } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const canvas = ref(null)
|
||||
const W = 680
|
||||
const H = 520
|
||||
let ctx
|
||||
let loop
|
||||
let words = [] // {text,x,y,speed,typed}
|
||||
let input = ''
|
||||
let score = 0
|
||||
let missed = 0
|
||||
let spawnCd = 0
|
||||
let difficulty = 1
|
||||
let alive = false
|
||||
const WORD_POOL = [
|
||||
'code', 'game', 'vue', 'pixel', 'star', 'jump', 'fast', 'play', 'win', 'fun',
|
||||
'hero', 'coin', 'boss', 'level', 'super', 'magic', 'power', 'quest', 'combo', 'bonus',
|
||||
'arcade', 'rocket', 'dragon', 'wizard', 'shield', 'sword', 'crystal', 'thunder', 'victory', 'legend',
|
||||
]
|
||||
|
||||
function spawn() {
|
||||
const text = pick(WORD_POOL)
|
||||
words.push({
|
||||
text,
|
||||
x: randInt(40, W - 40 - text.length * 14),
|
||||
y: -14,
|
||||
speed: randInt(36, 60) + difficulty * 7,
|
||||
typed: 0,
|
||||
})
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
spawnCd -= dt
|
||||
if (spawnCd <= 0) {
|
||||
spawn()
|
||||
spawnCd = Math.max(0.8, 2.1 - difficulty * 0.13)
|
||||
}
|
||||
words.forEach((w) => (w.y += w.speed * dt))
|
||||
// 落地判定
|
||||
const before = words.length
|
||||
words = words.filter((w) => w.y < H - 46)
|
||||
const fell = before - words.length
|
||||
if (fell > 0) {
|
||||
missed += fell
|
||||
input = ''
|
||||
if (missed >= 5) {
|
||||
alive = false
|
||||
loop.stop()
|
||||
draw()
|
||||
emit('end', { score })
|
||||
return
|
||||
}
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function onKey(e) {
|
||||
if (!alive) return
|
||||
if (e.key === 'Backspace') {
|
||||
input = input.slice(0, -1)
|
||||
} else if (/^[a-zA-Z]$/.test(e.key)) {
|
||||
input += e.key.toLowerCase()
|
||||
} else {
|
||||
return
|
||||
}
|
||||
e.preventDefault()
|
||||
// 匹配：输入完全等于某个单词 → 消除得分
|
||||
const hit = words.findIndex((w) => w.text === input)
|
||||
if (hit >= 0) {
|
||||
const w = words[hit]
|
||||
// 得分 = 词长×5 + 高度奖励（越早打掉越高）
|
||||
score += w.text.length * 5 + Math.max(0, Math.round((H - w.y) / 40))
|
||||
emit('score', score)
|
||||
words.splice(hit, 1)
|
||||
input = ''
|
||||
difficulty = 1 + Math.floor(score / 150)
|
||||
} else {
|
||||
// 更新每个单词的已匹配前缀长度（用于高亮）
|
||||
words.forEach((w) => {
|
||||
w.typed = w.text.startsWith(input) ? input.length : 0
|
||||
})
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const p = palette()
|
||||
ctx.fillStyle = p.bg
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 单词
|
||||
ctx.font = 'bold 22px monospace'
|
||||
ctx.textBaseline = 'top'
|
||||
words.forEach((w) => {
|
||||
// 已匹配前缀高亮
|
||||
const matched = w.text.slice(0, w.typed)
|
||||
const rest = w.text.slice(w.typed)
|
||||
ctx.textAlign = 'left'
|
||||
ctx.fillStyle = p.primary2
|
||||
ctx.fillText(matched, w.x, w.y)
|
||||
ctx.fillStyle = p.text
|
||||
ctx.fillText(rest, w.x + ctx.measureText(matched).width, w.y)
|
||||
})
|
||||
// 底部输入条
|
||||
ctx.fillStyle = p.panel
|
||||
ctx.fillRect(0, H - 42, W, 42)
|
||||
ctx.strokeStyle = p.border
|
||||
ctx.strokeRect(0.5, H - 41.5, W - 1, 41)
|
||||
ctx.fillStyle = p.accent
|
||||
ctx.font = 'bold 22px monospace'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.fillText('> ' + input + '▌', 14, H - 34)
|
||||
// 漏词数
|
||||
ctx.fillStyle = p.dim
|
||||
ctx.font = '14px sans-serif'
|
||||
ctx.textAlign = 'right'
|
||||
ctx.fillText(`漏掉 ${missed}/5`, W - 12, H - 32)
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
words = []
|
||||
input = ''
|
||||
score = 0
|
||||
missed = 0
|
||||
difficulty = 1
|
||||
spawnCd = 0.3
|
||||
alive = true
|
||||
emit('score', 0)
|
||||
loop.start()
|
||||
}
|
||||
function stop() {
|
||||
loop?.stop()
|
||||
window.removeEventListener('keydown', onKey)
|
||||
}
|
||||
// 时间延长卡：清空当前屏幕上的单词（喘口气）
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && alive) {
|
||||
words = []
|
||||
draw()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
|
||||
onMounted(() => {
|
||||
ctx = canvas.value.getContext('2d')
|
||||
window.addEventListener('keydown', onKey)
|
||||
loop = createLoop(update)
|
||||
draw()
|
||||
})
|
||||
onBeforeUnmount(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" :width="W" :height="H"></canvas>
|
||||
</template>
|
||||
158
src/games/components/WhackGame.vue
Normal file
158
src/games/components/WhackGame.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<script setup>
|
||||
// 打地鼠：45 秒限时，敲地鼠加分，敲炸弹扣分
|
||||
import { ref } from 'vue'
|
||||
import { randInt } from '../engine'
|
||||
|
||||
const emit = defineEmits(['score', 'end'])
|
||||
const holes = ref(Array.from({ length: 9 }, (_, i) => ({ id: i, type: '', hitFx: false }))) // type: '' | mole | gold | bomb
|
||||
const score = ref(0)
|
||||
const timeLeft = ref(45)
|
||||
const playing = ref(false)
|
||||
let spawnTimer = 0
|
||||
let countTimer = 0
|
||||
|
||||
// 随机冒出一只（地鼠 72% / 金鼠 13% / 炸弹 15%）
|
||||
function spawn() {
|
||||
const idle = holes.value.filter((h) => !h.type)
|
||||
if (!idle.length) return
|
||||
const hole = idle[randInt(0, idle.length - 1)]
|
||||
const roll = Math.random()
|
||||
hole.type = roll < 0.72 ? 'mole' : roll < 0.85 ? 'gold' : 'bomb'
|
||||
// 冒头持续 0.7~1.2 秒后缩回
|
||||
const ttl = randInt(700, 1200)
|
||||
setTimeout(() => {
|
||||
if (hole.type) hole.type = ''
|
||||
}, ttl)
|
||||
}
|
||||
|
||||
function whack(hole) {
|
||||
if (!playing.value || !hole.type) return
|
||||
if (hole.type === 'mole') score.value += 10
|
||||
else if (hole.type === 'gold') score.value += 30
|
||||
else score.value = Math.max(0, score.value - 15) // 炸弹扣分
|
||||
hole.type = ''
|
||||
hole.hitFx = true
|
||||
setTimeout(() => (hole.hitFx = false), 180)
|
||||
emit('score', score.value)
|
||||
}
|
||||
|
||||
function tick() {
|
||||
timeLeft.value--
|
||||
if (timeLeft.value <= 0) {
|
||||
playing.value = false
|
||||
clearInterval(spawnTimer)
|
||||
clearInterval(countTimer)
|
||||
emit('end', { score: score.value })
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 对外接口 ----
|
||||
function start() {
|
||||
score.value = 0
|
||||
timeLeft.value = 45
|
||||
playing.value = true
|
||||
holes.value.forEach((h) => (h.type = ''))
|
||||
emit('score', 0)
|
||||
clearInterval(spawnTimer)
|
||||
clearInterval(countTimer)
|
||||
spawnTimer = setInterval(spawn, 520)
|
||||
countTimer = setInterval(tick, 1000)
|
||||
}
|
||||
function stop() {
|
||||
clearInterval(spawnTimer)
|
||||
clearInterval(countTimer)
|
||||
}
|
||||
// 时间延长卡：+30 秒
|
||||
function useProp(code) {
|
||||
if (code === 'time_extend' && playing.value) {
|
||||
timeLeft.value += 30
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
defineExpose({ start, stop, useProp })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="whack-board">
|
||||
<div class="hud">
|
||||
<span>⏱ 剩余 <b :class="{ danger: timeLeft <= 10 }">{{ timeLeft }}</b> 秒</span>
|
||||
<span>得分 <b class="score">{{ score }}</b></span>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<button v-for="h in holes" :key="h.id" class="hole" :class="{ fx: h.hitFx }" @click="whack(h)">
|
||||
<span class="mole" :class="{ up: h.type }">
|
||||
{{ h.type === 'mole' ? '🐹' : h.type === 'gold' ? '🐹✨' : h.type === 'bomb' ? '💣' : '' }}
|
||||
</span>
|
||||
<span class="dirt"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="tips">🐹 +10 🐹✨ +30 💣 -15</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.whack-board {
|
||||
width: min(500px, 92vw);
|
||||
text-align: center;
|
||||
}
|
||||
.hud {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.hud b {
|
||||
font-size: 18px;
|
||||
}
|
||||
.danger {
|
||||
color: #ff5d73;
|
||||
}
|
||||
.score {
|
||||
color: var(--primary);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.hole {
|
||||
aspect-ratio: 1;
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
cursor: crosshair;
|
||||
overflow: hidden;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.hole.fx {
|
||||
background: color-mix(in srgb, var(--primary) 30%, var(--bg-card));
|
||||
}
|
||||
.mole {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 22%;
|
||||
font-size: 44px;
|
||||
transform: translateY(120%);
|
||||
transition: transform 0.12s ease-out;
|
||||
}
|
||||
.mole.up {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.dirt {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
bottom: 8%;
|
||||
height: 16%;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--border) 70%, #000);
|
||||
}
|
||||
.tips {
|
||||
margin-top: 12px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
317
src/games/components/marioLevels.js
Normal file
317
src/games/components/marioLevels.js
Normal file
@@ -0,0 +1,317 @@
|
||||
// 超级玛丽关卡数据：按原版《超级马里奥兄弟》World 1-1 / 1-2 / 1-3 / 1-4 布局还原
|
||||
// 网格 15 行（13 行天空 + 2 行地面），每格 32px，与原版 NES 屏幕比例一致
|
||||
// 图例：
|
||||
// # 地面砖/墙 % 硬块（阶梯石块） = 可顶碎的砖块
|
||||
// ? 问号块（金币） M 问号块（蘑菇） [ ] 水管左/右半
|
||||
// o 金币 E 板栗仔（走到悬崖会掉下去）
|
||||
// T 乌龟（红龟习性，走到平台边缘会折返）
|
||||
// S 出生点 F 旗杆
|
||||
// 城堡关（1-4）专用：
|
||||
// ~ 岩浆（碰到即死） X 旋转火棍轴心（硬块 + 火球链）
|
||||
// - 木桥板（砍斧后塌落） A 斧头（摸到砍断桥，库巴落岩浆过关）
|
||||
// B 库巴（守桥 Boss，不可踩，只能跳过）
|
||||
export const ROWS = 15
|
||||
|
||||
function emptyGrid(width) {
|
||||
return Array.from({ length: ROWS }, () => Array(width).fill(' '))
|
||||
}
|
||||
function put(g, c, r, ch) {
|
||||
g[r][c] = ch
|
||||
}
|
||||
function fillRow(g, r, c1, c2, ch) {
|
||||
for (let c = c1; c <= c2; c++) g[r][c] = ch
|
||||
}
|
||||
// 地面：两行厚的地砖（原版地面即 2 格厚）
|
||||
function ground(g, c1, c2) {
|
||||
fillRow(g, 13, c1, c2, '#')
|
||||
fillRow(g, 14, c1, c2, '#')
|
||||
}
|
||||
// 水管：高 h 格，占两列
|
||||
function pipe(g, c, h) {
|
||||
for (let r = 13 - h; r <= 12; r++) {
|
||||
put(g, c, r, '[')
|
||||
put(g, c + 1, r, ']')
|
||||
}
|
||||
}
|
||||
// 实心柱：从地面往上 h 格
|
||||
function column(g, c, h, ch) {
|
||||
for (let r = 13 - h; r <= 12; r++) put(g, c, r, ch)
|
||||
}
|
||||
// 上行阶梯：从左到右逐级升高（原版金字塔/终点阶梯）
|
||||
function stairUp(g, c1, h) {
|
||||
for (let i = 0; i < h; i++) column(g, c1 + i, i + 1, '%')
|
||||
}
|
||||
// 下行阶梯：从左到右逐级降低
|
||||
function stairDown(g, c1, h) {
|
||||
for (let i = 0; i < h; i++) column(g, c1 + i, h - i, '%')
|
||||
}
|
||||
// 竖墙：指定行区间填实
|
||||
function wall(g, c, r1, r2) {
|
||||
for (let r = r1; r <= r2; r++) put(g, c, r, '#')
|
||||
}
|
||||
// 岩浆池：填满地面两行的坑
|
||||
function lava(g, c1, c2) {
|
||||
fillRow(g, 13, c1, c2, '~')
|
||||
fillRow(g, 14, c1, c2, '~')
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
// World 1-1：地面关。所有标志性段落按原版顺序还原：
|
||||
// 开场问号块阵 → 四根渐高水管（第四根可钻入地下奖励室）→ 双坑 →
|
||||
// 高空砖排 → 金字塔阶梯对 → 终点八级阶梯 → 旗杆与城堡
|
||||
// ---------------------------------------------------------------
|
||||
function buildWorld11() {
|
||||
const g = emptyGrid(234)
|
||||
// 地面四段，之间是三个坑（2 格、3 格、2 格，与原版一致）
|
||||
ground(g, 0, 68)
|
||||
ground(g, 71, 87)
|
||||
ground(g, 91, 135)
|
||||
ground(g, 138, 203)
|
||||
put(g, 3, 12, 'S')
|
||||
// 开场：单个问号块 + 砖?砖?砖 五连阵，高处再悬一个问号块
|
||||
put(g, 16, 9, '?')
|
||||
put(g, 20, 9, '=')
|
||||
put(g, 21, 9, 'M') // 原版第一个蘑菇就藏在这里
|
||||
put(g, 22, 9, '=')
|
||||
put(g, 23, 9, '?')
|
||||
put(g, 24, 9, '=')
|
||||
put(g, 22, 5, '?')
|
||||
put(g, 25, 12, 'E') // 全游戏第一只板栗仔
|
||||
// 四根水管：高度 2/3/4/4，最后一根是通往地下奖励室的暗道
|
||||
pipe(g, 28, 2)
|
||||
pipe(g, 38, 3)
|
||||
pipe(g, 46, 4)
|
||||
pipe(g, 57, 4)
|
||||
put(g, 36, 12, 'E')
|
||||
put(g, 51, 12, 'E')
|
||||
put(g, 53, 12, 'E')
|
||||
// 第一个坑之后：砖?砖 + 8 连高空砖排
|
||||
put(g, 77, 9, '=')
|
||||
put(g, 78, 9, '?')
|
||||
put(g, 79, 9, '=')
|
||||
fillRow(g, 5, 80, 87, '=')
|
||||
put(g, 81, 12, 'E')
|
||||
put(g, 84, 12, 'E')
|
||||
// 第二个坑上方：高空砖收尾 + 蘑菇问号块
|
||||
fillRow(g, 5, 91, 92, '=')
|
||||
put(g, 93, 5, 'M')
|
||||
put(g, 96, 9, '=')
|
||||
put(g, 100, 12, 'E')
|
||||
put(g, 102, 12, 'E')
|
||||
// 双问号块 + 乌龟（原版中段唯一一只绿龟位置）
|
||||
put(g, 106, 9, '?')
|
||||
put(g, 109, 9, '?')
|
||||
put(g, 107, 12, 'T')
|
||||
fillRow(g, 5, 112, 114, '=')
|
||||
// 金字塔阶梯第一对：上四级、平两格、下四级
|
||||
stairUp(g, 118, 4)
|
||||
stairDown(g, 124, 4)
|
||||
// 金字塔第二对：上四级后隔着 2 格深坑接双柱下三级（原版著名的"坑上跳"）
|
||||
stairUp(g, 132, 4)
|
||||
column(g, 138, 4, '%')
|
||||
column(g, 139, 4, '%')
|
||||
stairDown(g, 140, 3)
|
||||
// 终点前两根矮水管夹着一对板栗仔
|
||||
pipe(g, 147, 2)
|
||||
put(g, 151, 12, 'E')
|
||||
put(g, 153, 12, 'E')
|
||||
pipe(g, 163, 2)
|
||||
// 终点八级大阶梯 → 旗杆 → 城堡
|
||||
stairUp(g, 169, 8)
|
||||
put(g, 184, 12, 'F')
|
||||
// 右侧挡墙：防止跑出主世界（正好在镜头最大范围之外）
|
||||
wall(g, 204, 0, 12)
|
||||
wall(g, 205, 0, 12)
|
||||
ground(g, 204, 205)
|
||||
// 地下奖励室（原版 1-1 暗道）：顶棚 + 四面墙 + 两排金币 + 出口水管
|
||||
fillRow(g, 0, 206, 232, '#')
|
||||
fillRow(g, 1, 206, 232, '#')
|
||||
ground(g, 206, 232)
|
||||
wall(g, 206, 2, 12)
|
||||
wall(g, 232, 2, 12)
|
||||
fillRow(g, 8, 212, 222, 'o')
|
||||
fillRow(g, 11, 212, 222, 'o')
|
||||
pipe(g, 227, 2)
|
||||
return {
|
||||
name: '1-1',
|
||||
theme: 'overworld',
|
||||
grid: g,
|
||||
mainCols: 204, // 主世界镜头边界（列）
|
||||
bonusStartCol: 206, // 奖励室起始列（镜头与配色切换分界）
|
||||
castleCol: 189,
|
||||
warps: [
|
||||
// 站在第四根水管顶按 ↓ → 进地下奖励室；站在出口水管顶按 ↓ → 回主世界
|
||||
{ cols: [57, 58], row: 9, dest: { c: 209, r: 4 } },
|
||||
{ cols: [227, 228], row: 11, dest: { c: 61, r: 13 } },
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
// World 1-2：地下关。全程顶棚封顶，蓝砖配色：
|
||||
// 开场双层砖台阶配金币 → 砖柱穿行 → 深坑 → 高台金币 →
|
||||
// 硬块阶梯群 → 地底水管 → 出口长阶梯
|
||||
// ---------------------------------------------------------------
|
||||
function buildWorld12() {
|
||||
const g = emptyGrid(140)
|
||||
// 顶棚（原版地下关标志性的两格厚天花板）
|
||||
fillRow(g, 0, 0, 139, '#')
|
||||
fillRow(g, 1, 0, 139, '#')
|
||||
// 地面三段，两个深坑
|
||||
ground(g, 0, 45)
|
||||
ground(g, 49, 65)
|
||||
ground(g, 69, 139)
|
||||
put(g, 2, 12, 'S')
|
||||
// 开场双层砖平台 + 顶上金币排（原版进洞第一眼）
|
||||
fillRow(g, 9, 8, 13, '=')
|
||||
fillRow(g, 8, 9, 12, 'o')
|
||||
fillRow(g, 5, 16, 21, '=')
|
||||
fillRow(g, 4, 17, 20, 'o')
|
||||
put(g, 18, 12, 'E')
|
||||
put(g, 24, 12, 'E')
|
||||
// 砖柱穿行段：三根渐高砖柱，柱间夹金币
|
||||
column(g, 28, 3, '=')
|
||||
column(g, 34, 4, '=')
|
||||
column(g, 40, 3, '=')
|
||||
fillRow(g, 11, 30, 32, 'o')
|
||||
fillRow(g, 11, 36, 38, 'o')
|
||||
put(g, 37, 12, 'T')
|
||||
// 第一个坑（46-48）后的高台：砖排 + 金币 + 台上乌龟巡逻
|
||||
fillRow(g, 9, 50, 54, '=')
|
||||
fillRow(g, 8, 50, 54, 'o')
|
||||
put(g, 52, 8, 'T')
|
||||
put(g, 58, 12, 'E')
|
||||
// 蘑菇问号块 + 金币问号块
|
||||
put(g, 60, 9, 'M')
|
||||
put(g, 62, 9, '?')
|
||||
// 第二个坑（66-68）后的硬块阶梯群：2/3/4 三柱，柱间乌龟看守
|
||||
column(g, 72, 2, '%')
|
||||
column(g, 76, 3, '%')
|
||||
column(g, 80, 4, '%')
|
||||
put(g, 78, 12, 'T')
|
||||
// 地面金币长排 + 板栗仔双人组
|
||||
fillRow(g, 11, 84, 90, 'o')
|
||||
put(g, 88, 12, 'E')
|
||||
put(g, 91, 12, 'E')
|
||||
// 地底水管两根（原版地下关也有水管）
|
||||
pipe(g, 96, 2)
|
||||
pipe(g, 104, 3)
|
||||
put(g, 101, 12, 'E')
|
||||
// 砖台 + 金币收尾
|
||||
fillRow(g, 10, 108, 112, '=')
|
||||
fillRow(g, 9, 108, 112, 'o')
|
||||
// 出口六级长阶梯 → 旗杆
|
||||
stairUp(g, 118, 6)
|
||||
put(g, 134, 12, 'F')
|
||||
return { name: '1-2', theme: 'underground', grid: g, mainCols: 140, warps: [] }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
// World 1-3：高空平台关。大部分是悬崖，踩着树顶平台跳跃前进：
|
||||
// 起步島 → 渐高平台链（乌龟看守）→ 中段小岛（蘑菇块）→
|
||||
// 高空金币平台 → 踏板跳 → 终点阶梯与旗杆
|
||||
// ---------------------------------------------------------------
|
||||
function buildWorld13() {
|
||||
const g = emptyGrid(124)
|
||||
// 起步岛
|
||||
ground(g, 0, 8)
|
||||
put(g, 2, 12, 'S')
|
||||
// 平台链第一段：低台阶配金币
|
||||
fillRow(g, 11, 12, 16, '=')
|
||||
fillRow(g, 10, 13, 15, 'o')
|
||||
// 乌龟看守的平台（红龟习性来回巡逻）
|
||||
fillRow(g, 9, 20, 23, '=')
|
||||
fillRow(g, 7, 20, 23, 'o')
|
||||
put(g, 21, 8, 'T')
|
||||
fillRow(g, 11, 27, 29, '=')
|
||||
// 渐高平台 + 金币 + 乌龟
|
||||
fillRow(g, 8, 33, 37, '=')
|
||||
fillRow(g, 7, 34, 36, 'o')
|
||||
put(g, 35, 7, 'T')
|
||||
fillRow(g, 10, 41, 44, '=')
|
||||
put(g, 42, 9, 'T')
|
||||
fillRow(g, 12, 48, 52, '=')
|
||||
// 中段落脚小岛：悬空蘑菇块 + 板栗仔双人组
|
||||
ground(g, 56, 63)
|
||||
put(g, 58, 8, 'M')
|
||||
put(g, 60, 12, 'E')
|
||||
put(g, 62, 12, 'E')
|
||||
// 后半段高空平台链
|
||||
fillRow(g, 10, 67, 70, '=')
|
||||
fillRow(g, 7, 74, 77, '=')
|
||||
fillRow(g, 4, 74, 77, 'o')
|
||||
put(g, 75, 6, 'T')
|
||||
// 双踏板跳
|
||||
fillRow(g, 10, 82, 84, '=')
|
||||
fillRow(g, 10, 87, 89, '=')
|
||||
fillRow(g, 9, 87, 89, 'o')
|
||||
// 终点大陆：板栗仔迎接 + 四级阶梯 + 旗杆 + 城堡
|
||||
ground(g, 93, 123)
|
||||
put(g, 97, 12, 'E')
|
||||
put(g, 99, 12, 'E')
|
||||
stairUp(g, 103, 4)
|
||||
put(g, 112, 12, 'F')
|
||||
return { name: '1-3', theme: 'athletic', grid: g, mainCols: 124, castleCol: 116, warps: [] }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
// World 1-4：城堡关（第一世界收官）。灰砖封顶配色，按原版节奏还原：
|
||||
// 入口大厅 → 岩浆坑与旋转火棍交替的长廊 → 高空砖台捷径 →
|
||||
// 桥前高台 → 库巴守木桥 → 摸到斧头砍断锁链，桥塌库巴落岩浆 → 过关
|
||||
// ---------------------------------------------------------------
|
||||
function buildWorld14() {
|
||||
const g = emptyGrid(150)
|
||||
// 城堡封顶（两格厚天花板）
|
||||
fillRow(g, 0, 0, 149, '#')
|
||||
fillRow(g, 1, 0, 149, '#')
|
||||
// 地面段，坑内全部是岩浆
|
||||
ground(g, 0, 37)
|
||||
ground(g, 42, 63)
|
||||
ground(g, 68, 95)
|
||||
ground(g, 100, 121)
|
||||
ground(g, 138, 149)
|
||||
lava(g, 38, 41)
|
||||
lava(g, 64, 67)
|
||||
lava(g, 96, 99)
|
||||
lava(g, 122, 137) // 库巴桥下的大岩浆池
|
||||
put(g, 2, 12, 'S')
|
||||
// 入口大厅：一对装饰柱，先见识第一根火棍
|
||||
column(g, 8, 1, '%')
|
||||
column(g, 11, 1, '%')
|
||||
put(g, 16, 9, 'X') // 半空火棍：练习钻档期
|
||||
put(g, 25, 12, 'X') // 贴地火棍：跳过轴心块
|
||||
fillRow(g, 8, 30, 33, 'o')
|
||||
// 第一岩浆坑上方的高空砖台（可走上路避火）
|
||||
fillRow(g, 9, 44, 48, '=')
|
||||
fillRow(g, 8, 45, 47, 'o')
|
||||
put(g, 52, 9, 'X')
|
||||
put(g, 60, 12, 'X')
|
||||
// 第二段长廊：蘑菇补给 + 双火棍
|
||||
put(g, 71, 9, 'M')
|
||||
put(g, 76, 9, 'X')
|
||||
fillRow(g, 10, 80, 83, '=')
|
||||
fillRow(g, 9, 80, 83, 'o')
|
||||
put(g, 88, 12, 'X')
|
||||
fillRow(g, 8, 91, 93, 'o')
|
||||
// 桥前最后一根火棍 + 上桥高台
|
||||
put(g, 106, 9, 'X')
|
||||
fillRow(g, 11, 112, 114, 'o')
|
||||
column(g, 118, 1, '%')
|
||||
column(g, 119, 1, '%')
|
||||
column(g, 120, 1, '%')
|
||||
column(g, 121, 1, '%')
|
||||
// 库巴木桥（横跨大岩浆池，砍斧后整段塌落）
|
||||
fillRow(g, 12, 122, 137, '-')
|
||||
put(g, 128, 10, 'B')
|
||||
// 斧头：桥尾地面上方一格
|
||||
put(g, 139, 12, 'A')
|
||||
// 尾墙封死
|
||||
wall(g, 148, 2, 12)
|
||||
wall(g, 149, 2, 12)
|
||||
return { name: '1-4', theme: 'castle', grid: g, mainCols: 150, warps: [] }
|
||||
}
|
||||
|
||||
// 构建全部关卡（每次调用返回全新副本，供重开/复活时重置砖块状态）
|
||||
export function buildLevels() {
|
||||
return [buildWorld11(), buildWorld12(), buildWorld13(), buildWorld14()]
|
||||
}
|
||||
112
src/games/engine.js
Normal file
112
src/games/engine.js
Normal file
@@ -0,0 +1,112 @@
|
||||
// 小游戏通用辅助：主循环、键盘状态、主题取色、绘图工具
|
||||
// 所有 Canvas 游戏共用，保证手感与视觉风格统一
|
||||
|
||||
// createLoop 创建 requestAnimationFrame 主循环
|
||||
// update(dt) 每帧回调，dt 为秒（上限 0.05 防止切后台后大步长）
|
||||
export function createLoop(update) {
|
||||
let rafId = 0
|
||||
let last = 0
|
||||
let running = false
|
||||
function frame(ts) {
|
||||
if (!running) return
|
||||
const dt = Math.min((ts - last) / 1000, 0.05)
|
||||
last = ts
|
||||
update(dt)
|
||||
rafId = requestAnimationFrame(frame)
|
||||
}
|
||||
return {
|
||||
start() {
|
||||
if (running) return
|
||||
running = true
|
||||
last = performance.now()
|
||||
rafId = requestAnimationFrame(frame)
|
||||
},
|
||||
stop() {
|
||||
running = false
|
||||
cancelAnimationFrame(rafId)
|
||||
},
|
||||
get running() {
|
||||
return running
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// Keys 键盘状态跟踪：keys.has('ArrowLeft') 查询按住状态，onPress 注册单次按下
|
||||
export class Keys {
|
||||
constructor() {
|
||||
this.down = new Set()
|
||||
this.pressHandlers = []
|
||||
this._kd = (e) => {
|
||||
// 游戏用按键阻止页面滚动
|
||||
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
|
||||
e.preventDefault()
|
||||
}
|
||||
if (!this.down.has(e.key)) {
|
||||
this.pressHandlers.forEach((fn) => fn(e.key))
|
||||
}
|
||||
this.down.add(e.key)
|
||||
}
|
||||
this._ku = (e) => this.down.delete(e.key)
|
||||
}
|
||||
attach() {
|
||||
window.addEventListener('keydown', this._kd)
|
||||
window.addEventListener('keyup', this._ku)
|
||||
}
|
||||
detach() {
|
||||
window.removeEventListener('keydown', this._kd)
|
||||
window.removeEventListener('keyup', this._ku)
|
||||
this.down.clear()
|
||||
}
|
||||
has(key) {
|
||||
return this.down.has(key)
|
||||
}
|
||||
onPress(fn) {
|
||||
this.pressHandlers.push(fn)
|
||||
}
|
||||
}
|
||||
|
||||
// themeColor 读取当前主题的 CSS 变量颜色（游戏画面与全站主题联动）
|
||||
export function themeColor(name, fallback) {
|
||||
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
|
||||
return v || fallback
|
||||
}
|
||||
|
||||
// palette 一次性取出游戏常用的主题色
|
||||
export function palette() {
|
||||
return {
|
||||
bg: themeColor('--bg-card', '#1d1f4e'),
|
||||
panel: themeColor('--bg-panel', '#16173d'),
|
||||
primary: themeColor('--primary', '#ff3e7f'),
|
||||
primary2: themeColor('--primary-2', '#ffb300'),
|
||||
accent: themeColor('--accent', '#00e5ff'),
|
||||
text: themeColor('--text', '#ffffff'),
|
||||
dim: themeColor('--text-dim', '#9a9ac4'),
|
||||
border: themeColor('--border', '#2c2e6e'),
|
||||
}
|
||||
}
|
||||
|
||||
// roundRect 圆角矩形路径（部分旧浏览器无原生 API 时的兜底实现）
|
||||
export function roundRect(ctx, x, y, w, h, r) {
|
||||
if (ctx.roundRect) {
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(x, y, w, h, r)
|
||||
return
|
||||
}
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + r, y)
|
||||
ctx.arcTo(x + w, y, x + w, y + h, r)
|
||||
ctx.arcTo(x + w, y + h, x, y + h, r)
|
||||
ctx.arcTo(x, y + h, x, y, r)
|
||||
ctx.arcTo(x, y, x + w, y, r)
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
// randInt 取 [min, max] 闭区间随机整数
|
||||
export function randInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
// pick 从数组随机取一个元素
|
||||
export function pick(arr) {
|
||||
return arr[Math.floor(Math.random() * arr.length)]
|
||||
}
|
||||
210
src/games/index.js
Normal file
210
src/games/index.js
Normal file
@@ -0,0 +1,210 @@
|
||||
// 游戏注册表：游戏编码 → 组件加载器 + 支持的道具 + 操作说明
|
||||
// 编码必须与数据库 games.code 一致；supports 决定游玩页道具栏显示哪些道具
|
||||
export const gameRegistry = {
|
||||
snake: {
|
||||
loader: () => import('./components/SnakeGame.vue'),
|
||||
supports: ['double_points', 'revive'],
|
||||
controls: '方向键 / WASD 控制移动方向',
|
||||
},
|
||||
tetris: {
|
||||
loader: () => import('./components/TetrisGame.vue'),
|
||||
supports: ['double_points', 'bomb'],
|
||||
controls: '←→ 移动，↑ 旋转，↓ 软降，空格 硬降',
|
||||
},
|
||||
g2048: {
|
||||
loader: () => import('./components/Game2048.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '方向键滑动合并数字',
|
||||
},
|
||||
minesweeper: {
|
||||
loader: () => import('./components/MinesweeperGame.vue'),
|
||||
supports: ['double_points', 'hint'],
|
||||
controls: '左键翻格，右键插旗',
|
||||
},
|
||||
breakout: {
|
||||
loader: () => import('./components/BreakoutGame.vue'),
|
||||
supports: ['double_points', 'revive'],
|
||||
controls: '鼠标 / ←→ 移动挡板',
|
||||
},
|
||||
pong: {
|
||||
loader: () => import('./components/PongGame.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '鼠标 / ↑↓ 移动球拍，先得 11 分获胜',
|
||||
},
|
||||
flappy: {
|
||||
loader: () => import('./components/FlappyGame.vue'),
|
||||
supports: ['double_points', 'revive', 'shield'],
|
||||
controls: '点击 / 空格 扇动翅膀',
|
||||
},
|
||||
memory: {
|
||||
loader: () => import('./components/MemoryGame.vue'),
|
||||
supports: ['double_points', 'hint'],
|
||||
controls: '点击卡片翻开，找出所有相同的一对',
|
||||
},
|
||||
whack: {
|
||||
loader: () => import('./components/WhackGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '点击冒头的地鼠，小心炸弹',
|
||||
},
|
||||
gomoku: {
|
||||
loader: () => import('./components/GomokuGame.vue'),
|
||||
supports: ['double_points', 'hint'],
|
||||
controls: '点击棋盘落子，先五连者胜',
|
||||
},
|
||||
tictactoe: {
|
||||
loader: () => import('./components/TicTacToeGame.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '点击格子落子，三连即胜',
|
||||
},
|
||||
spaceshooter: {
|
||||
loader: () => import('./components/SpaceShooterGame.vue'),
|
||||
supports: ['double_points', 'revive', 'bomb', 'shield'],
|
||||
controls: '←→ / 鼠标移动，自动开火',
|
||||
},
|
||||
dino: {
|
||||
loader: () => import('./components/DinoGame.vue'),
|
||||
supports: ['double_points', 'revive', 'shield'],
|
||||
controls: '空格 / 点击跳跃，↓ 下蹲',
|
||||
},
|
||||
down100: {
|
||||
loader: () => import('./components/Down100Game.vue'),
|
||||
supports: ['double_points', 'revive'],
|
||||
controls: '←→ 移动，踩稳平台往下走',
|
||||
},
|
||||
sudoku: {
|
||||
loader: () => import('./components/SudokuGame.vue'),
|
||||
supports: ['double_points', 'hint'],
|
||||
controls: '点击格子后输入 1-9，填满全盘',
|
||||
},
|
||||
puzzle15: {
|
||||
loader: () => import('./components/Puzzle15Game.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '点击与空位相邻的数字滑动，按 1-15 复原',
|
||||
},
|
||||
simon: {
|
||||
loader: () => import('./components/SimonGame.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '看完灯光序列后按相同顺序点击',
|
||||
},
|
||||
bubble: {
|
||||
loader: () => import('./components/BubbleGame.vue'),
|
||||
supports: ['double_points', 'bomb'],
|
||||
controls: '鼠标瞄准点击发射，三个同色即消除',
|
||||
},
|
||||
fruit: {
|
||||
loader: () => import('./components/FruitGame.vue'),
|
||||
supports: ['double_points', 'revive', 'time_extend'],
|
||||
controls: '按住鼠标滑动切开水果，别碰炸弹',
|
||||
},
|
||||
maze: {
|
||||
loader: () => import('./components/MazeGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '方向键 / WASD 移动，走到绿色终点',
|
||||
},
|
||||
connect4: {
|
||||
loader: () => import('./components/Connect4Game.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '点击竖列投子，先四连者胜',
|
||||
},
|
||||
lightsout: {
|
||||
loader: () => import('./components/LightsOutGame.vue'),
|
||||
supports: ['double_points', 'hint'],
|
||||
controls: '点灯会翻转自身与上下左右，关掉全部灯',
|
||||
},
|
||||
typing: {
|
||||
loader: () => import('./components/TypingGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '单词落地前用键盘输入完成',
|
||||
},
|
||||
mathrush: {
|
||||
loader: () => import('./components/MathRushGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '心算后点击正确答案，连对有加成',
|
||||
},
|
||||
colorreact: {
|
||||
loader: () => import('./components/ColorReactGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '文字含义与颜色一致按 ✔，否则按 ✘',
|
||||
},
|
||||
aim: {
|
||||
loader: () => import('./components/AimGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '点击出现的靶心，越快越准分越高',
|
||||
},
|
||||
pianotiles: {
|
||||
loader: () => import('./components/PianoTilesGame.vue'),
|
||||
supports: ['double_points', 'revive'],
|
||||
controls: '点击黑块（或按 ASDF 对应四列）',
|
||||
},
|
||||
jumpjump: {
|
||||
loader: () => import('./components/JumpJumpGame.vue'),
|
||||
supports: ['double_points', 'revive'],
|
||||
controls: '按住蓄力，松开起跳到下一个平台',
|
||||
},
|
||||
tank: {
|
||||
loader: () => import('./components/TankGame.vue'),
|
||||
supports: ['double_points', 'revive', 'bomb', 'shield'],
|
||||
controls: 'WASD / 方向键移动，空格 / 点击开炮',
|
||||
},
|
||||
asteroids: {
|
||||
loader: () => import('./components/AsteroidsGame.vue'),
|
||||
supports: ['double_points', 'revive', 'bomb', 'shield'],
|
||||
controls: '←→ 旋转，↑ 喷射推进，空格开火',
|
||||
},
|
||||
klotski: {
|
||||
loader: () => import('./components/KlotskiGame.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '拖动/点击滑块移动，让曹操走到底部出口',
|
||||
},
|
||||
mario: {
|
||||
loader: () => import('./components/MarioGame.vue'),
|
||||
supports: ['double_points', 'revive', 'shield'],
|
||||
controls: '←→ 移动，空格/↑ 跳跃，↓ 可钻特定水管；复刻原版 1-1~1-4 四关：顶?块出金币蘑菇，吃蘑菇变大能顶碎砖，旗杆抓得越高分越多，1-4 城堡关躲火棍跳过库巴摸斧头断桥',
|
||||
levels: { total: 4, names: ['世界 1-1', '世界 1-2', '世界 1-3', '世界 1-4'] },
|
||||
},
|
||||
stack3d: {
|
||||
loader: () => import('./components/Stack3dGame.vue'),
|
||||
supports: ['double_points'],
|
||||
controls: '点击 / 空格 放下移动中的方块，对齐越准塔越高',
|
||||
},
|
||||
ballmaze3d: {
|
||||
loader: () => import('./components/BallMaze3dGame.vue'),
|
||||
supports: ['double_points', 'time_extend'],
|
||||
controls: '方向键倾斜迷宫控制小球滚动，滚到金色终点',
|
||||
},
|
||||
racing3d: {
|
||||
loader: () => import('./components/Racing3dGame.vue'),
|
||||
supports: ['double_points', 'revive', 'shield'],
|
||||
controls: '←→ 变道躲避车流，速度会越来越快',
|
||||
},
|
||||
pvz: {
|
||||
loader: () => import('./components/PvzGame.vue'),
|
||||
supports: ['double_points', 'bomb', 'shield'],
|
||||
controls: '点击卡片选植物后点击草坪种植，点击阳光收集，守住五条防线',
|
||||
},
|
||||
linkgame: {
|
||||
loader: () => import('./components/LinkGame.vue'),
|
||||
supports: ['double_points', 'hint', 'time_extend', 'bomb'],
|
||||
controls: '点击两个相同图案，连线拐弯不超过两次即可消除；共 12 关，每关图块移动规则不同，后 6 关限时更紧',
|
||||
levels: {
|
||||
total: 12,
|
||||
names: ['经典', '下落', '上浮', '左靠', '右靠', '分裂', '经典⚡', '下落⚡', '上浮⚡', '左靠⚡', '右靠⚡', '分裂⚡'],
|
||||
},
|
||||
},
|
||||
match3: {
|
||||
loader: () => import('./components/Match3Game.vue'),
|
||||
supports: ['double_points', 'hint', 'bomb'],
|
||||
controls: '拖拽（或点击）相邻两个团子交换位置，凑成三连消除；共 12 关，步数内达成目标分即过关',
|
||||
levels: { total: 12 },
|
||||
},
|
||||
starve: {
|
||||
loader: () => import('./components/StarveGame.vue'),
|
||||
supports: ['double_points'],
|
||||
saveable: true, // 云存档：每天清晨自动存，死亡删档（永久死亡）；仅单人模式
|
||||
wide: true, // 宽屏游戏：游玩页解除 1200px 限宽，画布自适应铺满可视区域
|
||||
coop: true, // 组队联机：进入时可选单人冒险 / 组队联机（2~4 人共享世界）
|
||||
mods: true, // Mod 装载：开局可勾选内置 mod（难度类 mod 影响得分系数）
|
||||
controls:
|
||||
'WASD 移动 · 空格采集 · F 攻击 · 1~9 使用物品栏 · C 合成 · M 地图 · Esc 关面板（鼠标点击同样可用）；夜晚完全黑暗会遭查理袭击，务必备火；科学机器/炼金引擎解锁高级配方，烹饪锅可炖官方料理；历经秋冬春夏四季（冬季注意保暖、提防独眼巨鹿），猪人可喂肉结盟；每活一天 +100 分并自动云存档；支持 2~4 人组队联机与 30 款人物皮肤',
|
||||
},
|
||||
}
|
||||
134
src/games/pixelAvatars.js
Normal file
134
src/games/pixelAvatars.js
Normal file
@@ -0,0 +1,134 @@
|
||||
// 手绘像素头像：8 个形象 × 4 套配色 = 32 个可选
|
||||
// 存储格式：'px:NN'（NN = 01~32 的两位编号），旧 emoji 数据自动降级原样显示
|
||||
// 每个形象是 8×8 字符画：`.`透明 `1`主色 `2`副色 `3`描边深色 `4`白色 `5`黑色（眼/细节）
|
||||
|
||||
// ---- 8 个基础形象（8×8 字符画） ----
|
||||
export const AVATAR_SHAPES = {
|
||||
// 男孩：短发 + 笑脸
|
||||
boy: [
|
||||
'..3333..',
|
||||
'.311113.',
|
||||
'.311113.',
|
||||
'.334433.',
|
||||
'.351415.',
|
||||
'.311113.',
|
||||
'.322223.',
|
||||
'..3333..',
|
||||
],
|
||||
// 女孩：长发 + 刘海
|
||||
girl: [
|
||||
'.333333.',
|
||||
'3111113.',
|
||||
'3133313.',
|
||||
'3344333.',
|
||||
'3351533.',
|
||||
'3311133.',
|
||||
'3311133.',
|
||||
'.33333..',
|
||||
],
|
||||
// 猫耳：立耳 + 胡须脸
|
||||
cat: [
|
||||
'3.333.3.',
|
||||
'3311133.',
|
||||
'3111113.',
|
||||
'.34443..',
|
||||
'.35153..',
|
||||
'.31113..',
|
||||
'.32223..',
|
||||
'..333...',
|
||||
],
|
||||
// 兔耳：双长耳 + 圆脸
|
||||
bunny: [
|
||||
'3.333.3.',
|
||||
'3.313.3.',
|
||||
'3311133.',
|
||||
'.311113.',
|
||||
'.351513.',
|
||||
'.311113.',
|
||||
'.322223.',
|
||||
'..3333..',
|
||||
],
|
||||
// 机器人：方头 + 天线 + 单眼屏
|
||||
robot: [
|
||||
'...3....',
|
||||
'..323...',
|
||||
'.33333..',
|
||||
'3144413.',
|
||||
'3144413.',
|
||||
'3155133.',
|
||||
'3111113.',
|
||||
'.33333..',
|
||||
],
|
||||
// 外星人：圆头 + 大黑眼
|
||||
alien: [
|
||||
'..333...',
|
||||
'.31113..',
|
||||
'3111113.',
|
||||
'3155513.',
|
||||
'3155513.',
|
||||
'3111113.',
|
||||
'.31113..',
|
||||
'..3.3...',
|
||||
],
|
||||
// 幽灵：飘尾 + 圆眼
|
||||
ghost: [
|
||||
'..333...',
|
||||
'.31113..',
|
||||
'3111113.',
|
||||
'3155153.',
|
||||
'3111113.',
|
||||
'3111113.',
|
||||
'3111113.',
|
||||
'3.3.33..',
|
||||
],
|
||||
// 忍者：面罩 + 露眼 + 额带
|
||||
ninja: [
|
||||
'.33333..',
|
||||
'3222223.',
|
||||
'3333333.',
|
||||
'3.55.53.',
|
||||
'3333333.',
|
||||
'3111113.',
|
||||
'.31113..',
|
||||
'..333...',
|
||||
],
|
||||
}
|
||||
|
||||
// ---- 4 套配色（主色/副色/描边） ----
|
||||
export const AVATAR_PALETTES = [
|
||||
{ name: '活力橙', c1: '#ff9f43', c2: '#e05657', c3: '#5d3049' }, // 橙发红衣
|
||||
{ name: '海洋蓝', c1: '#54a0ff', c2: '#48dbfb', c3: '#1e2749' }, // 蓝调
|
||||
{ name: '青草绿', c1: '#1dd1a1', c2: '#feca57', c3: '#0c3b2e' }, // 绿调
|
||||
{ name: '梦幻紫', c1: '#a29bfe', c2: '#fd79a8', c3: '#341f97' }, // 紫调
|
||||
]
|
||||
|
||||
// ---- 32 个头像清单：编号 px:01 ~ px:32 ----
|
||||
// 顺序：8 个形象各配 4 套色（boy-橙、boy-蓝、boy-绿、boy-紫、cat-橙……）
|
||||
const SHAPE_ORDER = ['boy', 'girl', 'cat', 'bunny', 'robot', 'alien', 'ghost', 'ninja']
|
||||
|
||||
export const AVATAR_LIST = []
|
||||
let n = 0
|
||||
for (const shape of SHAPE_ORDER) {
|
||||
AVATAR_PALETTES.forEach((pal, pi) => {
|
||||
n++
|
||||
AVATAR_LIST.push({
|
||||
code: 'px:' + String(n).padStart(2, '0'), // px:01 ~ px:32
|
||||
shape,
|
||||
palette: pi,
|
||||
name: `${AVATAR_SHAPES[shape].label || ''}${pal.name}`,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// isPixelAvatar 判断头像值是否为像素头像编码
|
||||
export function isPixelAvatar(v) {
|
||||
return typeof v === 'string' && /^px:\d{2}$/.test(v)
|
||||
}
|
||||
|
||||
// decodePixelAvatar 把 'px:05' 解成 { shape, palette }；非法返回 null
|
||||
export function decodePixelAvatar(code) {
|
||||
if (!isPixelAvatar(code)) return null
|
||||
const idx = parseInt(code.slice(3), 10) - 1
|
||||
if (idx < 0 || idx >= AVATAR_LIST.length) return null
|
||||
return AVATAR_LIST[idx]
|
||||
}
|
||||
71
src/games/starve/climate.js
Normal file
71
src/games/starve/climate.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// 饥荒气候系统：季节推算、昼夜分段、环境温度、天气（雨/雪）、体温
|
||||
import { SEASONS, YEAR_DAYS, SEG_SPLIT, SEG, DAY_LEN } from './data.js'
|
||||
|
||||
// 第 day 天所处季节：{code,name,idx,dayIn(季节内第几天),len,temp,tint}
|
||||
export function seasonOf(day) {
|
||||
let d = ((day - 1) % YEAR_DAYS)
|
||||
for (let i = 0; i < SEASONS.length; i++) {
|
||||
const s = SEASONS[i]
|
||||
if (d < s.days) return { ...s, idx: i, dayIn: d + 1, len: s.days }
|
||||
d -= s.days
|
||||
}
|
||||
return { ...SEASONS[0], idx: 0, dayIn: 1, len: SEASONS[0].days }
|
||||
}
|
||||
|
||||
// 当季昼/昏/夜的秒数分界：[黄昏开始, 夜晚开始]
|
||||
export function daySplit(seasonCode) {
|
||||
const [d, k] = SEG_SPLIT[seasonCode] || SEG_SPLIT.autumn
|
||||
return [d * SEG, (d + k) * SEG]
|
||||
}
|
||||
|
||||
// 当前时相
|
||||
export function phaseOf(seasonCode, dayTime) {
|
||||
const [duskAt, nightAt] = daySplit(seasonCode)
|
||||
return dayTime < duskAt ? 'day' : dayTime < nightAt ? 'dusk' : 'night'
|
||||
}
|
||||
|
||||
// 环境温度：季节基准 + 时相修正 + 降雨降温
|
||||
export function ambientTemp(seasonCode, phase, wxType) {
|
||||
const base = SEASONS.find((s) => s.code === seasonCode)?.temp ?? 16
|
||||
const mod = phase === 'day' ? 6 : phase === 'dusk' ? 0 : -8
|
||||
return base + mod - (wxType === 'rain' ? 5 : 0)
|
||||
}
|
||||
|
||||
// ---- 天气 ----
|
||||
// 每天清晨掷一次天气：返回 {type:'none'|'rain'|'snow', t:剩余秒}
|
||||
export function rollWeather(seasonCode) {
|
||||
if (seasonCode === 'winter') return { type: 'snow', t: DAY_LEN } // 冬季整天飘雪（视觉）
|
||||
const p = seasonCode === 'spring' ? 0.45 : seasonCode === 'autumn' ? 0.25 : 0.05
|
||||
if (Math.random() < p) {
|
||||
return { type: 'rain', t: 40 + Math.random() * 70 }
|
||||
}
|
||||
return { type: 'none', t: 0 }
|
||||
}
|
||||
// 每帧推进天气计时（雪不倒计时，随季节整天存在）
|
||||
export function tickWeather(wx, dt) {
|
||||
if (wx.type === 'rain') {
|
||||
wx.t -= dt
|
||||
if (wx.t <= 0) {
|
||||
wx.type = 'none'
|
||||
wx.t = 0
|
||||
return true // 雨停了
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// ---- 体温 ----
|
||||
// 体温向环境漂移；篝火/火把加热；保暖装备减缓失温；保暖石托底
|
||||
// p: {temp, ...} · heat: 附近火源强度 0~1 · insul: 保暖值（冬帽 120）
|
||||
export function updateBodyTemp(p, ambient, heat, insul, dt) {
|
||||
if (heat > 0) {
|
||||
// 火边取暖：快速升向 50
|
||||
p.temp += (50 - p.temp) * dt * 0.5 * heat
|
||||
} else {
|
||||
// 失温速度受保暖值抑制（升温不受影响）
|
||||
const cooling = ambient < p.temp
|
||||
const k = 0.05 * (cooling ? 30 / (30 + insul) : 1)
|
||||
p.temp += (ambient - p.temp) * dt * k
|
||||
}
|
||||
p.temp = Math.max(-20, Math.min(80, p.temp))
|
||||
}
|
||||
252
src/games/starve/data.js
Normal file
252
src/games/starve/data.js
Normal file
@@ -0,0 +1,252 @@
|
||||
// 饥荒数据表：三围 / 季节昼夜 / 物品 / 食物 / 配方 / 烹饪锅 / 生物 / 掉落
|
||||
// 数值尽量对齐官方 Don't Starve（威尔逊基准 150/150/200、官方食物与伤害耐久表），
|
||||
// 个别 Boss 血量按小游戏节奏缩放（注释标注）
|
||||
export const CAP = { hp: 150, hunger: 150, san: 200 }
|
||||
|
||||
// ---- 昼夜与季节：官方一天 16 段，这里每段 10 秒（一天 160 秒） ----
|
||||
export const SEG = 10
|
||||
export const DAY_LEN = 16 * SEG // 160
|
||||
// 季节顺序与时长（天）：秋 20 → 冬 15 → 春 20 → 夏 15（循环，官方冬季首临第 21 天）
|
||||
export const SEASONS = [
|
||||
{ code: 'autumn', name: '秋', days: 20, temp: 16, tint: '#c98548' },
|
||||
{ code: 'winter', name: '冬', days: 15, temp: -12, tint: '#9fc4dd' },
|
||||
{ code: 'spring', name: '春', days: 20, temp: 14, tint: '#7fb069' },
|
||||
{ code: 'summer', name: '夏', days: 15, temp: 34, tint: '#e0a63c' },
|
||||
]
|
||||
export const YEAR_DAYS = SEASONS.reduce((n, s) => n + s.days, 0)
|
||||
// 各季节 昼/昏/夜 段数（合计 16 段，对应官方季节日长变化）
|
||||
export const SEG_SPLIT = {
|
||||
autumn: [9, 4, 3],
|
||||
winter: [5, 4, 7],
|
||||
spring: [8, 5, 3],
|
||||
summer: [11, 2, 3],
|
||||
}
|
||||
|
||||
// ---- 全局调参（官方数值折算：官方一天 480 秒，这里 160 秒 = 3 倍速流逝） ----
|
||||
export const TUNE = {
|
||||
fistDmg: 10, // 徒手伤害（官方 10）
|
||||
attackGap: 0.5, // 攻击间隔秒
|
||||
hungerRate: 75 / DAY_LEN, // 官方每天消耗 75 饥饿
|
||||
starveHp: 0.6, // 饥饿归零掉血/秒
|
||||
duskSan: 0.25, // 黄昏理智流失/秒
|
||||
nightDarkSan: 2.0, // 夜晚黑暗中理智流失/秒
|
||||
nightLitSan: 0.1, // 夜晚有光时的微量流失/秒
|
||||
rainSan: 0.12, // 雨中理智流失/秒
|
||||
flowerSan: 5, // 采花回理智（官方 +5）
|
||||
shadowKillSan: 15, // 杀暗影回理智（官方爬行恐惧 +15）
|
||||
charlieWarn: 1.5, // 黑暗中查理低语预警秒数
|
||||
charlieHit: 5, // 黑暗中首次遭袭秒数
|
||||
charlieRe: 3, // 后续连击间隔
|
||||
charlieDmg: 100, // 查理单次伤害（官方 100）
|
||||
charlieSan: 20, // 查理袭击附带理智损失
|
||||
freezeHp: 1.25, // 体温 <=0 冰冻掉血/秒（官方 1.25）
|
||||
freezeAt: 0, // 冰冻阈值
|
||||
packSlots: 8, // 背包附加格数
|
||||
invSlots: 15, // 主物品栏格数
|
||||
stackMax: 40, // 堆叠上限（官方 40）
|
||||
roadSpeed: 1.3, // 道路提速（官方 1.3）
|
||||
pigLoyal: 80, // 喂肉结盟时长（秒）
|
||||
potCookTime: 15, // 烹饪锅炖煮秒数
|
||||
// 以下为 mod 可覆盖的调参缺省值
|
||||
gatherMul: 1, // 采集动作间隔倍率（<1 更快）
|
||||
houndGapMul: 1, // 猎犬波间隔倍率（<1 更频繁）
|
||||
houndExtra: 0, // 每波猎犬附加数量
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// 物品表
|
||||
// food: {hunger,hp,san} 官方食物数值 · cook: 烤制产物 · perish: 保鲜期（天，缺省不腐）
|
||||
// equip: hand/body/head 装备位 · dmg: 武器伤害 · uses: 耐久次数 · burn: 计时耐久（秒）
|
||||
// tool: 采集工具类型 · absorb: 护甲减伤比 · armor: 护甲耐久点 · insul: 保暖值
|
||||
// meatv/sweet/mm/veg: 烹饪锅食材属性 · heal: 使用回血 · stack: 堆叠上限（缺省 40，装备 1）
|
||||
// =====================================================================
|
||||
export const ITEMS = {
|
||||
// ---- 材料 ----
|
||||
grass: { name: '草' },
|
||||
twig: { name: '树枝' },
|
||||
log: { name: '木头' },
|
||||
rock: { name: '石头' },
|
||||
flint: { name: '燧石' },
|
||||
gold: { name: '金块' },
|
||||
silk: { name: '蛛丝' },
|
||||
spidergland: { name: '蜘蛛腺体' },
|
||||
rope: { name: '绳子' },
|
||||
petals: { name: '花瓣', food: { hunger: 1, hp: 0, san: 0 }, perish: 6 },
|
||||
reeds: { name: '芦苇' },
|
||||
ash: { name: '灰烬' },
|
||||
beefwool: { name: '牛毛' },
|
||||
pigskin: { name: '猪皮' },
|
||||
rot: { name: '腐烂物' },
|
||||
// ---- 食物（官方数值，raw 肉类 -10 理智 / 怪物肉 -15） ----
|
||||
berry: { name: '浆果', food: { hunger: 9.4, hp: 0, san: 0 }, cook: 'cookedberry', perish: 6, veg: 0.5 },
|
||||
cookedberry: { name: '烤浆果', food: { hunger: 12.5, hp: 1, san: 0 }, perish: 10, veg: 0.5 },
|
||||
morsel: { name: '小肉', food: { hunger: 12.5, hp: 0, san: -10 }, cook: 'cookedmorsel', perish: 6, meatv: 0.5 },
|
||||
cookedmorsel: { name: '烤小肉', food: { hunger: 18.75, hp: 1, san: 0 }, perish: 10, meatv: 0.5 },
|
||||
meat: { name: '大肉', food: { hunger: 25, hp: 1, san: -10 }, cook: 'cookedmeat', perish: 6, meatv: 1 },
|
||||
cookedmeat: { name: '熟肉', food: { hunger: 25, hp: 3, san: 0 }, perish: 10, meatv: 1 },
|
||||
monstermeat: { name: '怪物肉', food: { hunger: 18.75, hp: -20, san: -15 }, cook: 'cookedmonster', perish: 6, meatv: 1, mm: 1 },
|
||||
cookedmonster: { name: '烤怪物肉', food: { hunger: 18.75, hp: -3, san: -10 }, perish: 10, meatv: 1, mm: 1 },
|
||||
froglegs: { name: '蛙腿', food: { hunger: 12.5, hp: 0, san: -10 }, cook: 'cookedfroglegs', perish: 6, meatv: 0.5 },
|
||||
cookedfroglegs: { name: '烤蛙腿', food: { hunger: 12.5, hp: 1, san: 0 }, perish: 10, meatv: 0.5 },
|
||||
honey: { name: '蜂蜜', food: { hunger: 9.4, hp: 3, san: 0 }, perish: 40, sweet: 1 },
|
||||
eyeball: { name: '巨鹿眼球', food: { hunger: 75, hp: 40, san: -15 }, perish: 20, meatv: 1 },
|
||||
// ---- 烹饪锅料理 ----
|
||||
meatballs: { name: '肉丸', food: { hunger: 62.5, hp: 3, san: 5 }, perish: 10 },
|
||||
meatystew: { name: '炖肉汤', food: { hunger: 150, hp: 12, san: 5 }, perish: 10 },
|
||||
honeyham: { name: '蜜汁火腿', food: { hunger: 75, hp: 30, san: 5 }, perish: 15 },
|
||||
honeynuggets: { name: '蜜糖块', food: { hunger: 37.5, hp: 20, san: 5 }, perish: 15 },
|
||||
taffy: { name: '太妃糖', food: { hunger: 25, hp: -3, san: 15 }, perish: 15 },
|
||||
monsterlasagna: { name: '怪物千层饼', food: { hunger: 37.5, hp: -20, san: -20 }, perish: 10 },
|
||||
wetgoop: { name: '湿哒哒糊糊', food: { hunger: 0, hp: 0, san: 0 }, perish: 10 },
|
||||
// ---- 治疗 ----
|
||||
healingsalve: { name: '治疗药膏', heal: 20, stack: 40 },
|
||||
honeypoultice: { name: '蜂蜜药膏', heal: 30, stack: 40 },
|
||||
// ---- 手部装备（官方耐久：斧 100 / 镐 33 / 铲 25 / 矛 150 / 火把计时） ----
|
||||
axe: { name: '斧头', equip: 'hand', tool: 'axe', dmg: 27, uses: 100, stack: 1 },
|
||||
pickaxe: { name: '镐子', equip: 'hand', tool: 'pick', dmg: 27, uses: 33, stack: 1 },
|
||||
shovel: { name: '铲子', equip: 'hand', tool: 'dig', dmg: 17, uses: 25, stack: 1 },
|
||||
spear: { name: '长矛', equip: 'hand', dmg: 34, uses: 150, stack: 1 },
|
||||
tentaclespike: { name: '触手尖矛', equip: 'hand', dmg: 51, uses: 100, stack: 1 },
|
||||
torch: { name: '火把', equip: 'hand', dmg: 17, burn: 60, stack: 1 },
|
||||
// ---- 身体装备 ----
|
||||
backpack: { name: '背包', equip: 'body', pack: true, stack: 1 },
|
||||
logsuit: { name: '木甲', equip: 'body', absorb: 0.8, armor: 315, stack: 1 },
|
||||
// ---- 头部装备 ----
|
||||
garland: { name: '花环', equip: 'head', sanAura: 0.08, burn: 640, stack: 1 },
|
||||
footballhelmet: { name: '猪皮帽', equip: 'head', absorb: 0.8, armor: 315, stack: 1 },
|
||||
winterhat: { name: '冬帽', equip: 'head', insul: 120, stack: 1 },
|
||||
// ---- 特殊 ----
|
||||
trap: { name: '陷阱', place: true, uses: 8, stack: 10 },
|
||||
thermalstone: { name: '保暖石', thermal: true, stack: 1 },
|
||||
}
|
||||
export const ITEM_CODES = Object.keys(ITEMS)
|
||||
export const ITEM_IDX = Object.fromEntries(ITEM_CODES.map((c, i) => [c, i]))
|
||||
export function stackMax(code) {
|
||||
return ITEMS[code]?.stack || TUNE.stackMax
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// 合成表：tech 0=徒手 1=需科学机器 2=需炼金引擎（原型机制：靠近机器合成一次即永久解锁）
|
||||
// =====================================================================
|
||||
export const CRAFT_TABS = [
|
||||
{ code: 'tools', name: '工具', icon: 'axe' },
|
||||
{ code: 'light', name: '光源', icon: 'torch' },
|
||||
{ code: 'surv', name: '生存', icon: 'trap' },
|
||||
{ code: 'fight', name: '战斗', icon: 'spear' },
|
||||
{ code: 'food', name: '食物', icon: 'crockpot' },
|
||||
{ code: 'science', name: '科学', icon: 'sciencemachine' },
|
||||
{ code: 'dress', name: '装扮', icon: 'garland' },
|
||||
]
|
||||
export const RECIPES = [
|
||||
{ code: 'axe', name: '斧头', tab: 'tools', tech: 0, cost: { twig: 1, flint: 1 }, desc: '砍树 · 耐久 100 次' },
|
||||
{ code: 'pickaxe', name: '镐子', tab: 'tools', tech: 0, cost: { twig: 2, flint: 2 }, desc: '采矿 · 耐久 33 次' },
|
||||
{ code: 'shovel', name: '铲子', tab: 'tools', tech: 1, cost: { twig: 2, flint: 2 }, desc: '挖树桩得木头 · 耐久 25 次' },
|
||||
{ code: 'torch', name: '火把', tab: 'light', tech: 0, cost: { grass: 2, twig: 2 }, desc: '手持光源 · 燃烧 60 秒' },
|
||||
{ code: 'campfire', name: '篝火', tab: 'light', tech: 0, cost: { grass: 3, log: 2 }, desc: '原地点燃，可添柴，烧尽留灰烬' },
|
||||
{ code: 'firepit', name: '火堆', tab: 'light', tech: 1, cost: { log: 2, rock: 12 }, desc: '永久石圈火堆，熄灭后可再点燃' },
|
||||
{ code: 'rope', name: '绳子', tab: 'surv', tech: 0, cost: { grass: 3 }, desc: '基础合成材料' },
|
||||
{ code: 'trap', name: '陷阱', tab: 'surv', tech: 0, cost: { grass: 6, twig: 2 }, desc: '放置捕兔 · 耐久 8 次' },
|
||||
{ code: 'backpack', name: '背包', tab: 'surv', tech: 1, cost: { grass: 4, twig: 4 }, desc: '身体装备 · 物品栏 +8 格' },
|
||||
{ code: 'healingsalve', name: '治疗药膏', tab: 'surv', tech: 1, cost: { ash: 1, rock: 1, spidergland: 2 }, desc: '使用回复 20 生命' },
|
||||
{ code: 'honeypoultice', name: '蜂蜜药膏', tab: 'surv', tech: 2, cost: { reeds: 2, honey: 1 }, desc: '使用回复 30 生命' },
|
||||
{ code: 'thermalstone', name: '保暖石', tab: 'surv', tech: 2, cost: { rock: 10, flint: 3, rope: 1 }, desc: '篝火旁充热，随身抵御冰冻' },
|
||||
{ code: 'spear', name: '长矛', tab: 'fight', tech: 1, cost: { twig: 2, rope: 1, flint: 1 }, desc: '伤害 34 · 耐久 150 次' },
|
||||
{ code: 'logsuit', name: '木甲', tab: 'fight', tech: 1, cost: { log: 8, rope: 2 }, desc: '身体护甲 · 减伤 80%' },
|
||||
{ code: 'footballhelmet', name: '猪皮帽', tab: 'fight', tech: 1, cost: { pigskin: 1, rope: 1 }, desc: '头部护甲 · 减伤 80%' },
|
||||
{ code: 'crockpot', name: '烹饪锅', tab: 'food', tech: 1, cost: { rock: 6, twig: 6 }, desc: '放置后投入 4 份食材炖煮料理' },
|
||||
{ code: 'sciencemachine', name: '科学机器', tab: 'science', tech: 0, cost: { gold: 1, log: 4, rock: 4 }, desc: '解锁一级科技（靠近合成）' },
|
||||
{ code: 'alchemyengine', name: '炼金引擎', tab: 'science', tech: 1, cost: { gold: 6, log: 4, rock: 4 }, desc: '解锁二级科技（靠近合成）' },
|
||||
{ code: 'garland', name: '花环', tab: 'dress', tech: 0, cost: { petals: 12 }, desc: '头戴缓慢回复理智，会枯萎' },
|
||||
{ code: 'winterhat', name: '冬帽', tab: 'dress', tech: 2, cost: { silk: 4, beefwool: 2 }, desc: '保暖 · 冬季生存必备' },
|
||||
]
|
||||
|
||||
// 烹饪锅配方：按优先级匹配（meatv 肉度 / sweet 甜度 / mm 怪物肉数）
|
||||
const POT_RULES = [
|
||||
{ dish: 'taffy', ok: (s) => s.sweet >= 3 },
|
||||
{ dish: 'honeyham', ok: (s) => s.sweet >= 1 && s.meatv >= 1.5 },
|
||||
{ dish: 'honeynuggets', ok: (s) => s.sweet >= 1 && s.meatv > 0 },
|
||||
{ dish: 'meatystew', ok: (s) => s.meatv >= 3 },
|
||||
{ dish: 'monsterlasagna', ok: (s) => s.mm >= 2 },
|
||||
{ dish: 'meatballs', ok: (s) => s.meatv >= 0.5 },
|
||||
]
|
||||
// 输入 4 个食材 code，返回料理 code（不满足任何配方 = 湿哒哒糊糊）
|
||||
export function cookPot(codes) {
|
||||
const s = { meatv: 0, sweet: 0, mm: 0, veg: 0 }
|
||||
codes.forEach((c) => {
|
||||
const it = ITEMS[c] || {}
|
||||
s.meatv += it.meatv || 0
|
||||
s.sweet += it.sweet || 0
|
||||
s.mm += it.mm || 0
|
||||
s.veg += it.veg || 0
|
||||
})
|
||||
const hit = POT_RULES.find((r) => r.ok(s))
|
||||
return hit ? hit.dish : 'wetgoop'
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// 生物表（官方血量伤害；树精/巨鹿按小游戏节奏取官方约 1/3）
|
||||
// hostile 主动敌对 · neutral 被打才反击 · friendly 友方（猪人）
|
||||
// =====================================================================
|
||||
export const MON = {
|
||||
spider: { hp: 100, speed: 84, dmg: 20, score: 12, name: '蜘蛛', hostile: true },
|
||||
hound: { hp: 150, speed: 195, dmg: 20, score: 20, name: '猎犬', hostile: true },
|
||||
icehound: { hp: 150, speed: 195, dmg: 20, score: 25, name: '冰猎犬', hostile: true, freeze: true },
|
||||
shadow: { hp: 100, speed: 70, dmg: 20, score: 15, name: '暗影怪', hostile: true },
|
||||
treeguard: { hp: 700, speed: 52, dmg: 50, score: 150, name: '树精', hostile: true, boss: true },
|
||||
frog: { hp: 100, speed: 110, dmg: 10, score: 8, name: '青蛙', hostile: true },
|
||||
bee: { hp: 30, speed: 150, dmg: 10, score: 5, name: '杀人蜂', hostile: true },
|
||||
pig: { hp: 250, speed: 125, dmg: 33, score: 0, name: '猪人', friendly: true },
|
||||
beefalo: { hp: 500, speed: 100, dmg: 34, score: 10, name: '皮弗娄牛', neutral: true },
|
||||
deerclops: { hp: 1600, speed: 70, dmg: 75, score: 400, name: '独眼巨鹿', hostile: true, boss: true },
|
||||
}
|
||||
// 击杀掉落（落地为拾取物）：数组每项 [概率, code, 数量]
|
||||
export const MOB_DROPS = {
|
||||
spider: [[0.5, 'monstermeat', 1], [0.25, 'silk', 1], [0.25, 'spidergland', 1]],
|
||||
hound: [[1, 'monstermeat', 1]],
|
||||
icehound: [[1, 'monstermeat', 1]],
|
||||
shadow: [],
|
||||
treeguard: [[1, 'log', 6]],
|
||||
frog: [[1, 'froglegs', 1]],
|
||||
bee: [[0.5, 'honey', 1]],
|
||||
pig: [[0.75, 'meat', 1], [0.25, 'pigskin', 1]],
|
||||
beefalo: [[1, 'meat', 2], [1, 'beefwool', 1]],
|
||||
deerclops: [[1, 'meat', 3], [1, 'eyeball', 1]],
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// 资源实体模板
|
||||
// hits/tool: 采集次数与所需工具 · hp: 可攻击实体血量 · regrow: 再生秒（冬季暂停）
|
||||
// vanish: 采尽消失 · mobile: 会移动（兔子）
|
||||
// =====================================================================
|
||||
export const RES = {
|
||||
tree: { hits: 3, tool: 'axe', drops: { log: 2 }, size: 42 },
|
||||
rock: { hits: 3, tool: 'pick', drops: { rock: 2, flint: 1 }, size: 28 },
|
||||
goldrock: { hits: 4, tool: 'pick', drops: { rock: 2, gold: 2 }, size: 30 },
|
||||
grass: { hits: 1, drops: { grass: 1 }, size: 18, regrow: 240 },
|
||||
sapling: { hits: 1, drops: { twig: 1 }, size: 20, regrow: 240 },
|
||||
berry: { hits: 1, drops: { berry: 1 }, size: 22, regrow: 400 },
|
||||
reeds: { hits: 1, drops: { reeds: 1 }, size: 20, regrow: 400 },
|
||||
flower: { hits: 1, drops: { petals: 1 }, size: 14, vanish: true },
|
||||
flint: { hits: 1, drops: { flint: 1 }, size: 14, vanish: true },
|
||||
rabbit: { hp: 25, drops: { morsel: 1 }, size: 16, mobile: true },
|
||||
rabbithole: { size: 18, solid: true },
|
||||
spidernest: { hp: 200, size: 36, nest: true },
|
||||
beehive: { hp: 100, size: 30, nest: true },
|
||||
pighouse: { size: 40, struct: true },
|
||||
tentacle: { hp: 250, size: 26, lurk: true },
|
||||
sciencemachine: { size: 34, struct: true, techTier: 1 },
|
||||
alchemyengine: { size: 38, struct: true, techTier: 2 },
|
||||
crockpot: { size: 26, struct: true, pot: true },
|
||||
trap: { size: 22, placeable: true },
|
||||
loot: { size: 12, loot: true },
|
||||
}
|
||||
export const DECOR = { stump: { size: 20 }, rubble: { size: 16 } }
|
||||
|
||||
// 实体/交互对象显示名（动作提示条）
|
||||
export const NAMES = {
|
||||
tree: '树', rock: '岩石', goldrock: '金矿石', grass: '草丛', sapling: '树枝苗', berry: '浆果丛',
|
||||
reeds: '芦苇', flower: '野花', flint: '燧石', rabbit: '兔子', rabbithole: '兔子洞',
|
||||
spidernest: '蜘蛛巢', beehive: '蜂巢', pighouse: '猪屋', tentacle: '触手', trap: '陷阱',
|
||||
sciencemachine: '科学机器', alchemyengine: '炼金引擎', crockpot: '烹饪锅', loot: '掉落物',
|
||||
stump: '树桩', rubble: '碎石',
|
||||
}
|
||||
406
src/games/starve/mobs.js
Normal file
406
src/games/starve/mobs.js
Normal file
@@ -0,0 +1,406 @@
|
||||
// 饥荒生物 AI：单个生物的逐帧行为（主机/单人权威模拟侧调用）
|
||||
// g 为游戏上下文门面（由 StarveGame 构造并逐帧刷新）：
|
||||
// players/monsters/entities/fires 数组引用 · phase/season/time/day 时相
|
||||
// isLand(x,y) · litAt(x,y) · nearestPlayer(x,y) · damagePlayer(p,dmg,label)
|
||||
// addEntity(type,x,y,extra) · removeEntity(ent) · addLoot(x,y,code,n)
|
||||
// removeMob(m) · killMob(m,credit) · smashStructure(ent) · tip(t) · ptip(p,t) · shake(amp)
|
||||
import { MON } from './data.js'
|
||||
|
||||
// 带陆地碰撞的位移：先整体，再退化为单轴滑动
|
||||
export function moveMob(m, dx, dy, g) {
|
||||
const nx = m.x + dx
|
||||
const ny = m.y + dy
|
||||
if (g.isLand(nx, ny)) {
|
||||
m.x = nx
|
||||
m.y = ny
|
||||
} else if (g.isLand(nx, m.y)) {
|
||||
m.x = nx
|
||||
} else if (g.isLand(m.x, ny)) {
|
||||
m.y = ny
|
||||
}
|
||||
}
|
||||
function toward(m, tx, ty, speed, dt, g) {
|
||||
const d = Math.hypot(tx - m.x, ty - m.y) || 1
|
||||
moveMob(m, ((tx - m.x) / d) * speed * dt, ((ty - m.y) / d) * speed * dt, g)
|
||||
m.dir = tx > m.x ? 1 : -1
|
||||
m.moving = true
|
||||
}
|
||||
|
||||
// 敌对生物的受害者集合：活玩家 + 猪人（暗影怪只认玩家）
|
||||
function nearestVictim(m, g, playersOnly = false) {
|
||||
let best = null
|
||||
let bd = Infinity
|
||||
g.players.forEach((p) => {
|
||||
if (p.dead) return
|
||||
const d = Math.hypot(p.x - m.x, p.y - m.y)
|
||||
if (d < bd) { bd = d; best = { kind: 'p', ref: p } }
|
||||
})
|
||||
if (!playersOnly) {
|
||||
g.monsters.forEach((q) => {
|
||||
if (q.kind !== 'pig' || q === m) return
|
||||
const d = Math.hypot(q.x - m.x, q.y - m.y)
|
||||
if (d < bd) { bd = d; best = { kind: 'm', ref: q } }
|
||||
})
|
||||
}
|
||||
return best ? { v: best, d: bd } : null
|
||||
}
|
||||
// 对受害者造成伤害（玩家走减伤管线；猪人直接扣血并反击）
|
||||
function biteVictim(m, victim, dmg, label, g) {
|
||||
if (victim.kind === 'p') {
|
||||
g.damagePlayer(victim.ref, dmg, label)
|
||||
} else {
|
||||
const pig = victim.ref
|
||||
pig.hp -= dmg
|
||||
pig.shake = 0.22
|
||||
pig.targetMob = m // 猪人被咬会还手
|
||||
if (pig.hp <= 0) g.killMob(pig, null)
|
||||
}
|
||||
}
|
||||
// 通用追咬：追近 → 咬一口 → 弹开
|
||||
function chaseBite(m, conf, victim, dist, dt, g, label, onBite) {
|
||||
const ref = victim.ref
|
||||
if (dist > 26) {
|
||||
toward(m, ref.x, ref.y, conf.speed, dt, g)
|
||||
} else if (m.cd <= 0) {
|
||||
m.cd = 1.15
|
||||
biteVictim(m, victim, conf.dmg, label, g)
|
||||
onBite?.(ref, victim.kind)
|
||||
moveMob(m, ((m.x - ref.x) / (dist || 1)) * 60, ((m.y - ref.y) / (dist || 1)) * 60, g)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 单个生物逐帧更新 ----
|
||||
export function updateMob(m, dt, g) {
|
||||
const conf = (g.mon && g.mon[m.kind]) || MON[m.kind] // g.mon = mod 运行时生物表（如噩梦模式倍率）
|
||||
m.moving = false
|
||||
if (m.shake > 0) m.shake -= dt
|
||||
if (m.cd > 0) m.cd -= dt
|
||||
if (m.kind === 'shadow') updShadow(m, conf, dt, g)
|
||||
else if (m.kind === 'spider') updSpider(m, conf, dt, g)
|
||||
else if (m.kind === 'hound' || m.kind === 'icehound') updHound(m, conf, dt, g)
|
||||
else if (m.kind === 'treeguard') updTreeguard(m, conf, dt, g)
|
||||
else if (m.kind === 'pig') updPig(m, conf, dt, g)
|
||||
else if (m.kind === 'beefalo') updBeefalo(m, conf, dt, g)
|
||||
else if (m.kind === 'bee') updBee(m, conf, dt, g)
|
||||
else if (m.kind === 'frog') updFrog(m, conf, dt, g)
|
||||
else if (m.kind === 'deerclops') updDeerclops(m, conf, dt, g)
|
||||
m.x = Math.max(24, Math.min(g.worldW - 24, m.x))
|
||||
m.y = Math.max(24, Math.min(g.worldH - 24, m.y))
|
||||
}
|
||||
|
||||
// 暗影怪：怕光；只袭击玩家；命中附带理智损失
|
||||
function updShadow(m, conf, dt, g) {
|
||||
if (g.litAt(m.x, m.y)) {
|
||||
const f = g.fires.find((f2) => f2.ttl > 0) || g.players.find((p) => !p.dead) || m
|
||||
const d = Math.hypot(m.x - f.x, m.y - f.y) || 1
|
||||
moveMob(m, ((m.x - f.x) / d) * 70 * dt, ((m.y - f.y) / d) * 70 * dt, g)
|
||||
return
|
||||
}
|
||||
const near = nearestVictim(m, g, true)
|
||||
if (!near) return
|
||||
chaseBite(m, conf, near.v, near.d, dt, g, '被暗影咬了', (ref, kind) => {
|
||||
if (kind === 'p') {
|
||||
ref.san = Math.max(0, ref.san - 5)
|
||||
g.ptip(ref, `被暗影咬了 · 生命 -${conf.dmg} 理智 -5`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 蜘蛛：巢边领地怪，白天守巢、夜晚游荡范围扩大；入侵者靠近即追击
|
||||
function updSpider(m, conf, dt, g) {
|
||||
const home = m.nest && g.entities.includes(m.nest) ? m.nest : null
|
||||
const ax = home ? home.x : m.x
|
||||
const ay = home ? home.y : m.y
|
||||
const aggroR = g.phase === 'night' ? 280 : 190
|
||||
const near = nearestVictim(m, g)
|
||||
if (near && Math.hypot(near.v.ref.x - ax, near.v.ref.y - ay) < aggroR) {
|
||||
chaseBite(m, conf, near.v, near.d, dt, g, '被蜘蛛咬了', (ref, kind) => {
|
||||
if (kind === 'p') g.ptip(ref, `被蜘蛛咬了 · 生命 -${conf.dmg}`)
|
||||
})
|
||||
return
|
||||
}
|
||||
m.wanderT -= dt
|
||||
if (m.wanderT <= 0) {
|
||||
m.wanderT = 1.6 + Math.random() * 2
|
||||
const ang = Math.random() * Math.PI * 2
|
||||
const r = Math.random() * (g.phase === 'night' ? 180 : 90)
|
||||
m.tx = ax + Math.cos(ang) * r
|
||||
m.ty = ay + Math.sin(ang) * r
|
||||
}
|
||||
if (m.tx !== undefined) {
|
||||
const d = Math.hypot(m.tx - m.x, m.ty - m.y)
|
||||
if (d > 6) toward(m, m.tx, m.ty, conf.speed * 0.45, dt, g)
|
||||
}
|
||||
}
|
||||
|
||||
// 猎犬/冰猎犬：无脑扑咬最近目标；冰犬命中附带冰冻减速与失温
|
||||
function updHound(m, conf, dt, g) {
|
||||
const near = nearestVictim(m, g)
|
||||
if (!near) return
|
||||
chaseBite(m, conf, near.v, near.d, dt, g, '被猎犬咬了', (ref, kind) => {
|
||||
if (kind === 'p') {
|
||||
if (conf.freeze) {
|
||||
ref.freezeT = 2.2
|
||||
ref.temp = Math.max(-20, ref.temp - 12)
|
||||
g.ptip(ref, `冰猎犬咬了你 · 生命 -${conf.dmg} · 寒气刺骨`)
|
||||
} else {
|
||||
g.ptip(ref, `猎犬咬了你一口 · 生命 -${conf.dmg}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 树精：慢速逼近 → 抬臂前摇 → 拍击（可走位躲开）→ 硬直；远离太久重新扎根
|
||||
function updTreeguard(m, conf, dt, g) {
|
||||
m.t -= dt
|
||||
const near = nearestVictim(m, g, true)
|
||||
if (!near) return
|
||||
const tp = near.v.ref
|
||||
const dist = near.d
|
||||
if (dist > 340) {
|
||||
m.awayT += dt
|
||||
if (m.awayT > 6) {
|
||||
g.removeMob(m)
|
||||
g.addEntity('tree', m.x, m.y)
|
||||
g.tip('树精平息了，重新扎根成一棵树')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
m.awayT = 0
|
||||
}
|
||||
if (m.state === 'chase') {
|
||||
if (dist > 54) toward(m, tp.x, tp.y, conf.speed, dt, g)
|
||||
else {
|
||||
m.state = 'windup'
|
||||
m.t = 0.55
|
||||
}
|
||||
} else if (m.state === 'windup') {
|
||||
if (m.t <= 0) {
|
||||
m.state = 'smash'
|
||||
m.t = 0.35
|
||||
g.shake(6)
|
||||
g.players.forEach((p) => {
|
||||
if (!p.dead && Math.hypot(p.x - m.x, p.y - m.y) < 70) {
|
||||
g.damagePlayer(p, conf.dmg, '被树精拍中了！')
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (m.state === 'smash') {
|
||||
if (m.t <= 0) { m.state = 'recover'; m.t = 0.8 }
|
||||
} else if (m.state === 'recover') {
|
||||
if (m.t <= 0) m.state = 'chase'
|
||||
}
|
||||
}
|
||||
|
||||
// 猪人：白天绕屋游荡；被喂肉结盟跟随并助战；被打会记仇反击；夜晚回屋
|
||||
function updPig(m, conf, dt, g) {
|
||||
if (m.loyalT > 0) m.loyalT -= dt
|
||||
if (m.angryT > 0) m.angryT -= dt
|
||||
// 1) 反击惹它的玩家
|
||||
if (m.angryT > 0 && m.angryAt && !m.angryAt.dead) {
|
||||
const d = Math.hypot(m.angryAt.x - m.x, m.angryAt.y - m.y)
|
||||
chaseBite(m, conf, { kind: 'p', ref: m.angryAt }, d, dt, g, '被猪人揍了', (ref) => {
|
||||
g.ptip(ref, `猪人还手了 · 生命 -${conf.dmg}`)
|
||||
})
|
||||
return
|
||||
}
|
||||
// 2) 与敌对生物作战（结盟时主动搜索主人周边的敌人）
|
||||
if (m.targetMob && (!g.monsters.includes(m.targetMob) || m.targetMob.hp <= 0)) m.targetMob = null
|
||||
if (!m.targetMob && m.loyalT > 0) {
|
||||
const owner = m.owner && !m.owner.dead ? m.owner : null
|
||||
let best = null
|
||||
let bd = 180
|
||||
g.monsters.forEach((q) => {
|
||||
if (!MON[q.kind]?.hostile) return
|
||||
const d = Math.min(
|
||||
Math.hypot(q.x - m.x, q.y - m.y),
|
||||
owner ? Math.hypot(q.x - owner.x, q.y - owner.y) : Infinity
|
||||
)
|
||||
if (d < bd) { bd = d; best = q }
|
||||
})
|
||||
m.targetMob = best
|
||||
}
|
||||
if (m.targetMob) {
|
||||
const q = m.targetMob
|
||||
const d = Math.hypot(q.x - m.x, q.y - m.y)
|
||||
if (d > 30) {
|
||||
toward(m, q.x, q.y, conf.speed, dt, g)
|
||||
} else if (m.cd <= 0) {
|
||||
m.cd = 1
|
||||
q.hp -= conf.dmg
|
||||
q.shake = 0.22
|
||||
if (q.hp <= 0) {
|
||||
g.killMob(q, null)
|
||||
m.targetMob = null
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
// 3) 结盟跟随主人
|
||||
if (m.loyalT > 0 && m.owner && !m.owner.dead) {
|
||||
const d = Math.hypot(m.owner.x - m.x, m.owner.y - m.y)
|
||||
if (d > 70) toward(m, m.owner.x, m.owner.y, conf.speed, dt, g)
|
||||
return
|
||||
}
|
||||
// 4) 夜晚回屋 / 白天绕屋游荡
|
||||
const hx = m.home?.x ?? m.x
|
||||
const hy = m.home?.y ?? m.y
|
||||
if (g.phase === 'night') {
|
||||
if (Math.hypot(hx - m.x, hy - m.y) > 30) toward(m, hx, hy, conf.speed, dt, g)
|
||||
return
|
||||
}
|
||||
m.wanderT -= dt
|
||||
if (m.wanderT <= 0) {
|
||||
m.wanderT = 2 + Math.random() * 3
|
||||
const ang = Math.random() * Math.PI * 2
|
||||
m.tx = hx + Math.cos(ang) * Math.random() * 120
|
||||
m.ty = hy + Math.sin(ang) * Math.random() * 120
|
||||
}
|
||||
if (m.tx !== undefined && Math.hypot(m.tx - m.x, m.ty - m.y) > 8) {
|
||||
toward(m, m.tx, m.ty, conf.speed * 0.4, dt, g)
|
||||
}
|
||||
}
|
||||
|
||||
// 皮弗娄牛：herd 锚点吃草游荡；被打后全群围攻一段时间
|
||||
function updBeefalo(m, conf, dt, g) {
|
||||
if (m.angryT > 0) {
|
||||
m.angryT -= dt
|
||||
if (m.angryAt && !m.angryAt.dead) {
|
||||
const d = Math.hypot(m.angryAt.x - m.x, m.angryAt.y - m.y)
|
||||
chaseBite(m, conf, { kind: 'p', ref: m.angryAt }, d, dt, g, '被牛顶飞了', (ref) => {
|
||||
g.ptip(ref, `皮弗娄牛暴怒冲撞 · 生命 -${conf.dmg}`)
|
||||
})
|
||||
return
|
||||
}
|
||||
m.angryT = 0
|
||||
}
|
||||
const hx = m.home?.x ?? m.x
|
||||
const hy = m.home?.y ?? m.y
|
||||
m.wanderT -= dt
|
||||
if (m.wanderT <= 0) {
|
||||
m.wanderT = 3 + Math.random() * 4
|
||||
const ang = Math.random() * Math.PI * 2
|
||||
m.tx = hx + Math.cos(ang) * Math.random() * 160
|
||||
m.ty = hy + Math.sin(ang) * Math.random() * 160
|
||||
}
|
||||
if (m.tx !== undefined && Math.hypot(m.tx - m.x, m.ty - m.y) > 10) {
|
||||
toward(m, m.tx, m.ty, conf.speed * 0.35, dt, g)
|
||||
}
|
||||
}
|
||||
|
||||
// 杀人蜂：短命防卫者，追蜇惹事者后飞散
|
||||
function updBee(m, conf, dt, g) {
|
||||
m.life -= dt
|
||||
if (m.life <= 0) {
|
||||
g.removeMob(m)
|
||||
return
|
||||
}
|
||||
let victim = null
|
||||
if (m.angryAt && !m.angryAt.dead) victim = { kind: 'p', ref: m.angryAt }
|
||||
else {
|
||||
const near = nearestVictim(m, g, true)
|
||||
if (near && near.d < 220) victim = near.v
|
||||
}
|
||||
if (!victim) {
|
||||
// 无目标：飘回巢并提前散伙
|
||||
m.life -= dt * 2
|
||||
return
|
||||
}
|
||||
const d = Math.hypot(victim.ref.x - m.x, victim.ref.y - m.y)
|
||||
if (d > 22) {
|
||||
toward(m, victim.ref.x, victim.ref.y, conf.speed, dt, g)
|
||||
} else if (m.cd <= 0) {
|
||||
m.cd = 1.4
|
||||
biteVictim(m, victim, conf.dmg, '被蜂蜇了', (ref, kind) => {
|
||||
if (kind === 'p') g.ptip(ref, `被蜂蜇了 · 生命 -${conf.dmg}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 青蛙：近处玩家跳咬，其余原地蹦跶
|
||||
function updFrog(m, conf, dt, g) {
|
||||
const near = nearestVictim(m, g, true)
|
||||
if (near && near.d < 130) {
|
||||
chaseBite(m, conf, near.v, near.d, dt, g, '被青蛙弹了', (ref, kind) => {
|
||||
if (kind === 'p') g.ptip(ref, `青蛙用舌头抽了你 · 生命 -${conf.dmg}`)
|
||||
})
|
||||
return
|
||||
}
|
||||
m.wanderT -= dt
|
||||
if (m.wanderT <= 0) {
|
||||
m.wanderT = 1.5 + Math.random() * 2.5
|
||||
const ang = Math.random() * Math.PI * 2
|
||||
m.tx = m.x + Math.cos(ang) * 50
|
||||
m.ty = m.y + Math.sin(ang) * 50
|
||||
}
|
||||
if (m.tx !== undefined && Math.hypot(m.tx - m.x, m.ty - m.y) > 6) {
|
||||
toward(m, m.tx, m.ty, conf.speed * 0.5, dt, g)
|
||||
}
|
||||
}
|
||||
|
||||
// 独眼巨鹿：优先拆毁玩家附近建筑，其次追人；范围砸击；冬季结束自行离去
|
||||
function updDeerclops(m, conf, dt, g) {
|
||||
m.t -= dt
|
||||
if (g.season !== 'winter') {
|
||||
g.removeMob(m)
|
||||
g.tip('冬天过去了，独眼巨鹿转身离开……')
|
||||
return
|
||||
}
|
||||
// 目标：先找 500 内建筑，否则最近的玩家
|
||||
if (!m.targetEnt || !g.entities.includes(m.targetEnt)) {
|
||||
m.targetEnt = null
|
||||
let bd = 500
|
||||
g.entities.forEach((e) => {
|
||||
if (!(e.struct || e.pot)) return
|
||||
const d = Math.hypot(e.x - m.x, e.y - m.y)
|
||||
if (d < bd) { bd = d; m.targetEnt = e }
|
||||
})
|
||||
}
|
||||
const near = nearestVictim(m, g)
|
||||
let tx
|
||||
let ty
|
||||
let dist
|
||||
if (m.targetEnt) {
|
||||
tx = m.targetEnt.x
|
||||
ty = m.targetEnt.y
|
||||
dist = Math.hypot(tx - m.x, ty - m.y)
|
||||
} else if (near) {
|
||||
tx = near.v.ref.x
|
||||
ty = near.v.ref.y
|
||||
dist = near.d
|
||||
} else return
|
||||
if (m.state === 'chase' || !m.state) {
|
||||
if (dist > 80) toward(m, tx, ty, conf.speed, dt, g)
|
||||
else {
|
||||
m.state = 'windup'
|
||||
m.t = 0.8
|
||||
}
|
||||
} else if (m.state === 'windup') {
|
||||
if (m.t <= 0) {
|
||||
m.state = 'smash'
|
||||
m.t = 0.4
|
||||
g.shake(10)
|
||||
// 范围砸击：玩家/猪人受伤，建筑直接摧毁
|
||||
g.players.forEach((p) => {
|
||||
if (!p.dead && Math.hypot(p.x - m.x, p.y - m.y) < 95) {
|
||||
g.damagePlayer(p, conf.dmg, '被独眼巨鹿砸中了！')
|
||||
}
|
||||
})
|
||||
g.monsters.forEach((q) => {
|
||||
if (q.kind === 'pig' && Math.hypot(q.x - m.x, q.y - m.y) < 95) {
|
||||
q.hp -= conf.dmg
|
||||
if (q.hp <= 0) g.killMob(q, null)
|
||||
}
|
||||
})
|
||||
g.entities.slice().forEach((e) => {
|
||||
if ((e.struct || e.pot) && Math.hypot(e.x - m.x, e.y - m.y) < 95) {
|
||||
g.smashStructure(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (m.state === 'smash') {
|
||||
if (m.t <= 0) { m.state = 'recover'; m.t = 1.1 }
|
||||
} else if (m.state === 'recover') {
|
||||
if (m.t <= 0) m.state = 'chase'
|
||||
}
|
||||
}
|
||||
135
src/games/starve/mods/chest.js
Normal file
135
src/games/starve/mods/chest.js
Normal file
@@ -0,0 +1,135 @@
|
||||
// 宝藏：世界各处散落 6~10 个宝箱，开箱按战利品表获得物资（每箱一次）
|
||||
const TAU = Math.PI * 2
|
||||
|
||||
// 战利品表：[权重, code, 最少, 最多]
|
||||
const LOOT = [
|
||||
[3, 'gold', 2, 4],
|
||||
[3, 'flint', 2, 4],
|
||||
[2, 'rope', 1, 2],
|
||||
[2, 'log', 3, 6],
|
||||
[2, 'honey', 1, 2],
|
||||
[2, 'silk', 2, 3],
|
||||
[1, 'healingsalve', 1, 1],
|
||||
[1, 'trap', 1, 2],
|
||||
[1, 'meatballs', 1, 1],
|
||||
]
|
||||
|
||||
function rollLoot(g) {
|
||||
const total = LOOT.reduce((n, l) => n + l[0], 0)
|
||||
let r = Math.random() * total
|
||||
for (const [w, code, lo, hi] of LOOT) {
|
||||
r -= w
|
||||
if (r <= 0) return [code, g.rand(lo, hi)]
|
||||
}
|
||||
return ['gold', 1]
|
||||
}
|
||||
|
||||
export default {
|
||||
id: 'chest',
|
||||
name: '宝藏',
|
||||
desc: '世界散落宝箱，探索开出物资',
|
||||
factor: 1,
|
||||
tag: 'content',
|
||||
ents: {
|
||||
chest: {
|
||||
name: '宝箱',
|
||||
conf: { size: 26 },
|
||||
init(e) {
|
||||
if (!e.state) e.state = 'closed'
|
||||
},
|
||||
interact(p, e, g) {
|
||||
if (e.state === 'closed') {
|
||||
e.state = 'open'
|
||||
g.markDirty(e)
|
||||
g.swing(p, 'chop')
|
||||
const rolls = g.rand(2, 3)
|
||||
const got = []
|
||||
for (let i = 0; i < rolls; i++) {
|
||||
const [code, n] = rollLoot(g)
|
||||
g.addItem(p, code, n)
|
||||
got.push(`${g.items[code]?.name || code} ×${n}`)
|
||||
}
|
||||
g.addScore(25, p)
|
||||
g.ptip(p, `打开宝箱：${got.join('、')}`)
|
||||
g.shake(1.5)
|
||||
return
|
||||
}
|
||||
g.ptip(p, '空空如也的旧箱子')
|
||||
},
|
||||
draw(ctx, e, env) {
|
||||
const open = e.state === 'open'
|
||||
// 阴影
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.25)'
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(0, 4, 18, 6, 0, 0, TAU)
|
||||
ctx.fill()
|
||||
// 箱体
|
||||
ctx.fillStyle = '#7a5230'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(-16, -12, 32, 18, 3)
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
// 盖子：闭合盖在上方 / 打开向后仰
|
||||
ctx.fillStyle = open ? '#5d3f24' : '#8a5f38'
|
||||
ctx.beginPath()
|
||||
if (open) {
|
||||
ctx.roundRect(-16, -26, 32, 9, 3)
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
// 内部
|
||||
ctx.fillStyle = '#2a1c10'
|
||||
ctx.fillRect(-13, -12, 26, 6)
|
||||
} else {
|
||||
ctx.roundRect(-17, -18, 34, 9, 3)
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// 金属包边 + 锁扣
|
||||
ctx.strokeStyle = '#d8b04a'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(-10, open ? -12 : -18)
|
||||
ctx.lineTo(-10, 6)
|
||||
ctx.moveTo(10, open ? -12 : -18)
|
||||
ctx.lineTo(10, 6)
|
||||
ctx.stroke()
|
||||
if (!open) {
|
||||
ctx.fillStyle = '#d8b04a'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 1.4
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(-3, -12, 6, 7, 1.5)
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
// 微光
|
||||
const tw = 0.5 + Math.sin((env?.time || 0) * 3 + e.id) * 0.5
|
||||
ctx.fillStyle = `rgba(255,230,150,${0.25 + tw * 0.3})`
|
||||
ctx.beginPath()
|
||||
ctx.arc(6, -15, 1.6 + tw, 0, TAU)
|
||||
ctx.fill()
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
hooks: {
|
||||
onWorldGen(g) {
|
||||
const cx = g.worldW / 2
|
||||
const cy = g.worldH / 2
|
||||
const spots = []
|
||||
const target = 6 + g.rand(0, 4)
|
||||
for (let tries = 0; tries < 600 && spots.length < target; tries++) {
|
||||
const x = 60 + Math.random() * (g.worldW - 120)
|
||||
const y = 60 + Math.random() * (g.worldH - 120)
|
||||
if (!g.isLand(x, y)) continue
|
||||
if (Math.hypot(x - cx, y - cy) < 380) continue // 离出生点远一些才有探索感
|
||||
if (spots.some((s) => Math.hypot(s.x - x, s.y - y) < 280)) continue
|
||||
if (g.entities.some((e) => !e.deco && Math.hypot(e.x - x, e.y - y) < 40)) continue
|
||||
spots.push({ x, y })
|
||||
}
|
||||
spots.forEach((s) => g.addEntity('chest', s.x, s.y))
|
||||
if (spots.length) g.tip(`听说这片荒野埋着 ${spots.length} 个宝箱……`)
|
||||
},
|
||||
},
|
||||
}
|
||||
217
src/games/starve/mods/chester.js
Normal file
217
src/games/starve/mods/chester.js
Normal file
@@ -0,0 +1,217 @@
|
||||
// 切斯特：荒野某处藏着眼骨，拾起后切斯特现身跟随；
|
||||
// 它会自动吞掉身边的掉落物（9 格随身仓），点击它把肚子里的东西全吐出来
|
||||
const TAU = Math.PI * 2
|
||||
const STORE_SLOTS = 9
|
||||
|
||||
function ownerOf(g) {
|
||||
return g.players.find((p) => !p.dead && g.countItem(p, 'eyebone') > 0) || null
|
||||
}
|
||||
|
||||
function stackInto(store, code, n, cap) {
|
||||
let left = n
|
||||
// 先叠进已有同类
|
||||
for (const s of store) {
|
||||
if (!s || s.code !== code || s.n >= cap) continue
|
||||
const add = Math.min(cap - s.n, left)
|
||||
s.n += add
|
||||
left -= add
|
||||
if (!left) return 0
|
||||
}
|
||||
// 再开新格
|
||||
for (let i = 0; i < store.length && left; i++) {
|
||||
if (store[i]) continue
|
||||
const add = Math.min(cap, left)
|
||||
store[i] = { code, n: add }
|
||||
left -= add
|
||||
}
|
||||
return left
|
||||
}
|
||||
|
||||
export default {
|
||||
id: 'chester',
|
||||
name: '切斯特',
|
||||
desc: '寻获眼骨召来跟班箱子，自动吞附近掉落物',
|
||||
factor: 1,
|
||||
tag: 'content',
|
||||
items: {
|
||||
eyebone: { name: '眼骨', stack: 1 },
|
||||
},
|
||||
icons: {
|
||||
eyebone: (c) => {
|
||||
c.strokeStyle = '#ece7db'
|
||||
c.lineWidth = 4
|
||||
c.beginPath(); c.moveTo(-4, 12); c.lineTo(4, -4); c.stroke()
|
||||
c.fillStyle = '#ece7db'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.6
|
||||
;[[-7, 12], [-1, 14]].forEach(([x, y]) => {
|
||||
c.beginPath(); c.arc(x, y, 3.4, 0, TAU); c.fill(); c.stroke()
|
||||
})
|
||||
c.beginPath(); c.arc(5, -8, 7, 0, TAU); c.fill(); c.stroke()
|
||||
c.fillStyle = '#fff'
|
||||
c.beginPath(); c.arc(5, -8, 4.6, 0, TAU); c.fill()
|
||||
c.fillStyle = '#4a90c2'
|
||||
c.beginPath(); c.arc(5, -8, 2.6, 0, TAU); c.fill()
|
||||
c.fillStyle = '#1d1409'
|
||||
c.beginPath(); c.arc(5, -8, 1.2, 0, TAU); c.fill()
|
||||
},
|
||||
},
|
||||
mobs: {
|
||||
chester: {
|
||||
conf: { hp: 300, speed: 160, dmg: 0, score: 0, name: '切斯特' },
|
||||
friendly: true,
|
||||
drops: [],
|
||||
update(m, dt, g) {
|
||||
if (!m.store) m.store = Array(STORE_SLOTS).fill(null)
|
||||
// 优先扑向附近掉落物吞掉（眼骨除外；刚吐出的东西有几秒宽限期不回吞）
|
||||
const loot = m.cd <= 0
|
||||
? g.entities.find((e) => e.loot && e.code !== 'eyebone' && !(e.shyUntil > g.time) && Math.hypot(e.x - m.x, e.y - m.y) < 150)
|
||||
: null
|
||||
if (loot) {
|
||||
const d = Math.hypot(loot.x - m.x, loot.y - m.y)
|
||||
if (d > 26) {
|
||||
g.moveToward(m, loot.x, loot.y, 175, dt)
|
||||
} else {
|
||||
const cap = g.items[loot.code]?.stack || g.tune.stackMax
|
||||
const left = stackInto(m.store, loot.code, loot.n, cap)
|
||||
if (left < loot.n) {
|
||||
m.cd = 0.35
|
||||
m.gulpT = 0.5
|
||||
if (left > 0) loot.n = left
|
||||
else g.removeEntity(loot)
|
||||
} else {
|
||||
m.cd = 2 // 仓满吞不下，歇会儿别原地抽搐
|
||||
}
|
||||
}
|
||||
if (m.gulpT > 0) m.gulpT -= dt
|
||||
return
|
||||
}
|
||||
const owner = ownerOf(g)
|
||||
if (owner) {
|
||||
const d = Math.hypot(owner.x - m.x, owner.y - m.y)
|
||||
if (d > 64) {
|
||||
const sprint = d > 220 ? 1.5 : 1
|
||||
g.moveToward(m, owner.x - owner.dir * 40, owner.y + 16, 160 * sprint, dt)
|
||||
}
|
||||
}
|
||||
if (m.gulpT > 0) m.gulpT -= dt
|
||||
},
|
||||
interact(p, m, g) {
|
||||
const has = (m.store || []).filter(Boolean)
|
||||
if (!has.length) {
|
||||
g.ptip(p, '切斯特打了个哈欠（肚子是空的）')
|
||||
return
|
||||
}
|
||||
has.forEach((s) => {
|
||||
const l = g.dropLoot(m.x + g.rand(-24, 24), m.y + g.rand(10, 30), s.code, s.n)
|
||||
if (l) l.shyUntil = g.time + 6
|
||||
})
|
||||
m.store = Array(STORE_SLOTS).fill(null)
|
||||
m.gulpT = 0.5
|
||||
g.ptip(p, `切斯特吐出了 ${has.length} 样东西`)
|
||||
},
|
||||
draw(ctx, m, time) {
|
||||
const hop = m.moving ? Math.abs(Math.sin(time * 9 + m.bob)) * 6 : Math.sin(time * 2.2 + m.bob) * 1.5
|
||||
const squash = m.gulpT > 0 ? 1.15 : 1
|
||||
ctx.save()
|
||||
ctx.translate(0, -hop)
|
||||
ctx.scale(m.dir, 1)
|
||||
// 阴影
|
||||
ctx.restore()
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.25)'
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(0, 2, 16, 5, 0, 0, TAU)
|
||||
ctx.fill()
|
||||
ctx.save()
|
||||
ctx.translate(0, -hop)
|
||||
ctx.scale(m.dir * squash, 1 / squash)
|
||||
// 小短腿
|
||||
ctx.strokeStyle = '#4a2c1a'
|
||||
ctx.lineWidth = 4
|
||||
const leg = m.moving ? Math.sin(time * 12) * 3 : 0
|
||||
ctx.beginPath(); ctx.moveTo(-8, -4); ctx.lineTo(-8 + leg, 2); ctx.moveTo(8, -4); ctx.lineTo(8 - leg, 2); ctx.stroke()
|
||||
// 圆滚滚的身体
|
||||
ctx.fillStyle = '#a85a28'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(0, -16, 15, 14, 0, 0, TAU)
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
// 大嘴（张合）
|
||||
const mouth = m.gulpT > 0 ? 5 : 2 + Math.sin(time * 3 + m.bob) * 1
|
||||
ctx.fillStyle = '#5d2a12'
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(4, -12, 9, mouth, 0.15, 0, TAU)
|
||||
ctx.fill()
|
||||
// 牙
|
||||
ctx.fillStyle = '#ece7db'
|
||||
ctx.beginPath(); ctx.moveTo(-2, -14); ctx.lineTo(0, -10); ctx.lineTo(2, -14); ctx.closePath(); ctx.fill()
|
||||
ctx.beginPath(); ctx.moveTo(7, -14); ctx.lineTo(9, -10); ctx.lineTo(11, -14); ctx.closePath(); ctx.fill()
|
||||
// 眼睛
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 1.4
|
||||
ctx.beginPath(); ctx.arc(-2, -24, 3.4, 0, TAU); ctx.fill(); ctx.stroke()
|
||||
ctx.beginPath(); ctx.arc(7, -23, 3, 0, TAU); ctx.fill(); ctx.stroke()
|
||||
ctx.fillStyle = '#1d1409'
|
||||
ctx.beginPath(); ctx.arc(-1.4, -23.6, 1.4, 0, TAU); ctx.fill()
|
||||
ctx.beginPath(); ctx.arc(7.6, -22.6, 1.2, 0, TAU); ctx.fill()
|
||||
// 角耳朵
|
||||
ctx.strokeStyle = '#7a3f1c'
|
||||
ctx.lineWidth = 3.4
|
||||
ctx.beginPath(); ctx.moveTo(-10, -27); ctx.quadraticCurveTo(-14, -34, -10, -38); ctx.stroke()
|
||||
ctx.beginPath(); ctx.moveTo(4, -28); ctx.quadraticCurveTo(8, -35, 4, -39); ctx.stroke()
|
||||
ctx.restore()
|
||||
},
|
||||
},
|
||||
},
|
||||
hooks: {
|
||||
onWorldGen(g) {
|
||||
// 眼骨落在远离出生点的荒野
|
||||
const cx = g.worldW / 2
|
||||
const cy = g.worldH / 2
|
||||
let best = null
|
||||
for (let tries = 0; tries < 300; tries++) {
|
||||
const x = 80 + Math.random() * (g.worldW - 160)
|
||||
const y = 80 + Math.random() * (g.worldH - 160)
|
||||
if (!g.isLand(x, y)) continue
|
||||
const d = Math.hypot(x - cx, y - cy)
|
||||
if (d > 480 && d < 1100) { best = { x, y }; break }
|
||||
}
|
||||
if (!best) best = g.findLand(cx + 500, cy, 0, 200)
|
||||
g.addEntity('loot', best.x, best.y, { code: 'eyebone', n: 1, fresh: 1 })
|
||||
g.tip('传说荒野某处躺着一根奇怪的眼骨……')
|
||||
},
|
||||
onTick(g) {
|
||||
const owner = ownerOf(g)
|
||||
if (!owner) return
|
||||
if (g.monsters.some((m) => m.kind === 'chester')) return
|
||||
const spot = g.findLand(owner.x + 60, owner.y + 40, 20, 60)
|
||||
g.spawnMob('chester', spot.x, spot.y)
|
||||
g.tip('切斯特闻着眼骨的味道蹦了出来！（它会吞附近的掉落物，点它取回）')
|
||||
},
|
||||
onUseItem(g, p, s) {
|
||||
if (s.code !== 'eyebone') return
|
||||
const ch = g.monsters.find((m) => m.kind === 'chester')
|
||||
if (ch) {
|
||||
const n = (ch.store || []).filter(Boolean).length
|
||||
g.ptip(p, n ? `切斯特肚子里有 ${n} 样东西（点击它取回）` : '切斯特跟在你身边（会自动吞掉落物）')
|
||||
} else {
|
||||
g.ptip(p, '眼骨微微颤动着……切斯特正在赶来')
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 切斯特与仓内物品随存档走（生物本身不入档）
|
||||
save(g) {
|
||||
const ch = g.monsters.find((m) => m.kind === 'chester')
|
||||
if (!ch) return null
|
||||
return { x: Math.round(ch.x), y: Math.round(ch.y), store: (ch.store || []).map((s) => (s ? [s.code, s.n] : 0)) }
|
||||
},
|
||||
load(g, d) {
|
||||
const m = g.spawnMob('chester', d.x, d.y)
|
||||
m.store = (d.store || []).map((v) => (v ? { code: v[0], n: v[1] } : null))
|
||||
while (m.store.length < STORE_SLOTS) m.store.push(null)
|
||||
},
|
||||
},
|
||||
}
|
||||
246
src/games/starve/mods/farm.js
Normal file
246
src/games/starve/mods/farm.js
Normal file
@@ -0,0 +1,246 @@
|
||||
// 农场：锄头开垦农田，播下种子经三阶段生长收获作物
|
||||
// - 锄头（0 级科技合成，耐久 20）：点击使用在面前开垦一块农田
|
||||
// - 种子：采草 15% 掉胡萝卜种子，采浆果丛 25% 掉浆果种子；点击种子播到身边空农田
|
||||
// - 生长：2 天（320 秒）三阶段，冬季暂停；成熟后点击收获 2~3 个作物
|
||||
const TAU = Math.PI * 2
|
||||
const GROW_TOTAL = 320 // 两天
|
||||
|
||||
function stageOf(t) {
|
||||
if (t >= GROW_TOTAL) return 'ready'
|
||||
if (t >= 214) return 'grow2'
|
||||
if (t >= 107) return 'grow1'
|
||||
return 'grow0'
|
||||
}
|
||||
|
||||
function plant(p, plot, seedCode, g) {
|
||||
plot.mx = { seed: seedCode === 'berryseeds' ? 'berry' : 'carrot', t: 0 }
|
||||
plot.state = 'grow0'
|
||||
g.markDirty(plot)
|
||||
g.swing(p, 'dig')
|
||||
g.ptip(p, `种下了${seedCode === 'berryseeds' ? '浆果' : '胡萝卜'}种子`)
|
||||
}
|
||||
|
||||
export default {
|
||||
id: 'farm',
|
||||
name: '农场',
|
||||
desc: '锄头开垦农田，种植浆果与胡萝卜',
|
||||
factor: 1,
|
||||
tag: 'content',
|
||||
items: {
|
||||
hoe: { name: '锄头', stack: 1, uses: 20 },
|
||||
carrotseeds: { name: '胡萝卜种子', stack: 40 },
|
||||
berryseeds: { name: '浆果种子', stack: 40 },
|
||||
carrot: { name: '胡萝卜', food: { hunger: 12.5, hp: 1, san: 0 }, cook: 'cookedcarrot', perish: 10, veg: 1 },
|
||||
cookedcarrot: { name: '烤胡萝卜', food: { hunger: 12.5, hp: 3, san: 0 }, perish: 10, veg: 1 },
|
||||
},
|
||||
recipes: [
|
||||
{ code: 'hoe', name: '锄头', tab: 'tools', tech: 0, cost: { twig: 2, flint: 2 }, desc: '开垦农田 · 耐久 20 次' },
|
||||
],
|
||||
icons: {
|
||||
hoe: (c) => {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 3
|
||||
c.beginPath(); c.moveTo(-8, 12); c.lineTo(6, -10); c.stroke()
|
||||
c.fillStyle = '#8d9097'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.6
|
||||
c.beginPath(); c.moveTo(4, -12); c.lineTo(12, -8); c.lineTo(10, -2); c.lineTo(3, -6); c.closePath()
|
||||
c.fill(); c.stroke()
|
||||
},
|
||||
carrotseeds: (c) => {
|
||||
c.fillStyle = '#c9a36b'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.4
|
||||
;[[-5, 2], [3, -3], [6, 6], [-3, 8], [0, -7]].forEach(([x, y]) => {
|
||||
c.beginPath(); c.ellipse(x, y, 3, 4.2, 0.4, 0, TAU); c.fill(); c.stroke()
|
||||
})
|
||||
c.fillStyle = '#e08a3c'
|
||||
c.beginPath(); c.ellipse(0, -1, 2, 2.6, 0, 0, TAU); c.fill()
|
||||
},
|
||||
berryseeds: (c) => {
|
||||
c.fillStyle = '#b6d29b'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.4
|
||||
;[[-5, 2], [3, -3], [6, 6], [-3, 8], [0, -7]].forEach(([x, y]) => {
|
||||
c.beginPath(); c.ellipse(x, y, 3, 4.2, 0.4, 0, TAU); c.fill(); c.stroke()
|
||||
})
|
||||
c.fillStyle = '#c0455a'
|
||||
c.beginPath(); c.ellipse(0, -1, 2.4, 2.4, 0, 0, TAU); c.fill()
|
||||
},
|
||||
carrot: (c) => {
|
||||
c.fillStyle = '#e08a3c'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.8
|
||||
c.beginPath(); c.moveTo(-6, -4); c.quadraticCurveTo(0, -9, 6, -4); c.lineTo(1, 12); c.closePath()
|
||||
c.fill(); c.stroke()
|
||||
c.strokeStyle = '#8f9a3e'
|
||||
c.lineWidth = 2.4
|
||||
c.beginPath(); c.moveTo(-3, -6); c.lineTo(-6, -13); c.moveTo(0, -7); c.lineTo(0, -14); c.moveTo(3, -6); c.lineTo(6, -13); c.stroke()
|
||||
},
|
||||
cookedcarrot: (c) => {
|
||||
c.fillStyle = '#c0703a'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.8
|
||||
c.beginPath(); c.moveTo(-6, -3); c.quadraticCurveTo(0, -8, 6, -3); c.lineTo(1, 12); c.closePath()
|
||||
c.fill(); c.stroke()
|
||||
c.strokeStyle = '#5a4a3a'
|
||||
c.lineWidth = 1.2
|
||||
c.beginPath(); c.moveTo(-3, 0); c.lineTo(2, 1); c.moveTo(-2, 5); c.lineTo(2, 6); c.stroke()
|
||||
},
|
||||
},
|
||||
ents: {
|
||||
farmplot: {
|
||||
name: '农田',
|
||||
conf: { size: 26 },
|
||||
init(e) {
|
||||
if (!e.state) e.state = 'empty'
|
||||
},
|
||||
update(e, dt, g) {
|
||||
if (!e.mx || e.state === 'empty' || e.state === 'ready') return
|
||||
if (g.season === 'winter') return // 冬季停止生长（与官方一致）
|
||||
e.mx.t += dt
|
||||
const st = stageOf(e.mx.t)
|
||||
if (st !== e.state) {
|
||||
e.state = st
|
||||
g.markDirty(e)
|
||||
if (st === 'ready') g.tip('农田里的作物成熟了！')
|
||||
}
|
||||
},
|
||||
interact(p, e, g) {
|
||||
if (e.state === 'ready') {
|
||||
const crop = e.mx?.seed || 'carrot'
|
||||
const n = g.rand(2, 3)
|
||||
g.addItem(p, crop, n)
|
||||
g.addScore(12, p)
|
||||
g.swing(p, 'chop')
|
||||
g.ptip(p, `收获${crop === 'berry' ? '浆果' : '胡萝卜'} ×${n}`)
|
||||
e.state = 'empty'
|
||||
e.mx = null
|
||||
g.markDirty(e)
|
||||
return
|
||||
}
|
||||
if (e.state === 'empty') {
|
||||
// 身上有种子就直接播种
|
||||
const seed = ['berryseeds', 'carrotseeds'].find((code) => g.countItem(p, code) > 0)
|
||||
if (seed) {
|
||||
g.payCost(p, { [seed]: 1 })
|
||||
plant(p, e, seed, g)
|
||||
} else {
|
||||
g.ptip(p, '空农田：需要种子（采草丛/浆果丛概率获得）')
|
||||
}
|
||||
return
|
||||
}
|
||||
g.ptip(p, '作物生长中……（冬季会暂停）')
|
||||
},
|
||||
draw(ctx, e) {
|
||||
// 垄起的土地
|
||||
ctx.fillStyle = '#6b4a2e'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(0, 0, 24, 14, 0, 0, TAU)
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.strokeStyle = '#553a24'
|
||||
ctx.lineWidth = 2
|
||||
;[-8, 0, 8].forEach((y) => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(-16 + Math.abs(y), y * 0.6)
|
||||
ctx.lineTo(16 - Math.abs(y), y * 0.6)
|
||||
ctx.stroke()
|
||||
})
|
||||
const st = e.state
|
||||
if (st === 'empty' || !st) return
|
||||
const berry = e.mx?.seed === 'berry'
|
||||
if (st === 'grow0') {
|
||||
ctx.strokeStyle = '#7fb069'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -7); ctx.stroke()
|
||||
ctx.fillStyle = '#8f9a3e'
|
||||
ctx.beginPath(); ctx.ellipse(2, -7, 3, 1.8, -0.4, 0, TAU); ctx.fill()
|
||||
} else if (st === 'grow1') {
|
||||
ctx.strokeStyle = '#6f9a52'
|
||||
ctx.lineWidth = 2.4
|
||||
;[-6, 0, 6].forEach((x) => {
|
||||
ctx.beginPath(); ctx.moveTo(x, 2); ctx.lineTo(x * 1.3, -11); ctx.stroke()
|
||||
})
|
||||
} else if (st === 'grow2') {
|
||||
ctx.strokeStyle = '#5d8a45'
|
||||
ctx.lineWidth = 2.8
|
||||
;[-8, 0, 8].forEach((x) => {
|
||||
ctx.beginPath(); ctx.moveTo(x, 2); ctx.quadraticCurveTo(x * 1.4, -10, x * 1.1, -18); ctx.stroke()
|
||||
})
|
||||
ctx.fillStyle = berry ? '#7a9a52' : '#8f9a3e'
|
||||
ctx.beginPath(); ctx.ellipse(0, -16, 9, 5, 0, 0, TAU); ctx.fill()
|
||||
} else {
|
||||
// ready：结出作物
|
||||
ctx.strokeStyle = '#5d8a45'
|
||||
ctx.lineWidth = 2.8
|
||||
;[-9, 0, 9].forEach((x) => {
|
||||
ctx.beginPath(); ctx.moveTo(x, 2); ctx.quadraticCurveTo(x * 1.4, -12, x * 1.1, -20); ctx.stroke()
|
||||
})
|
||||
if (berry) {
|
||||
ctx.fillStyle = '#c0455a'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 1.4
|
||||
;[[-8, -14], [0, -19], [8, -13]].forEach(([x, y]) => {
|
||||
ctx.beginPath(); ctx.arc(x, y, 3.6, 0, TAU); ctx.fill(); ctx.stroke()
|
||||
})
|
||||
} else {
|
||||
ctx.fillStyle = '#e08a3c'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 1.4
|
||||
;[[-8, -4], [0, -5], [8, -4]].forEach(([x, y]) => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x - 3, y); ctx.quadraticCurveTo(x, y - 3, x + 3, y); ctx.lineTo(x, y + 7); ctx.closePath()
|
||||
ctx.fill(); ctx.stroke()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
hooks: {
|
||||
onUseItem(g, p, s, area, i) {
|
||||
if (s.code === 'hoe') {
|
||||
const spot = g.findLand(p.x + p.dir * 46, p.y + 8, 0, 24)
|
||||
const crowded = g.entities.some((e) => !e.deco && !e.loot && Math.hypot(e.x - spot.x, e.y - spot.y) < 34)
|
||||
if (crowded) {
|
||||
g.ptip(p, '这里太挤了，换块空地开垦')
|
||||
return true
|
||||
}
|
||||
g.addEntity('farmplot', spot.x, spot.y)
|
||||
g.swing(p, 'dig')
|
||||
s.dur = (s.dur ?? g.items.hoe.uses) - 1
|
||||
if (s.dur <= 0) {
|
||||
g.consumeAt(p, area, i)
|
||||
g.ptip(p, '开垦出农田 · 锄头用坏了')
|
||||
} else {
|
||||
g.ptip(p, '开垦出一块农田（种子点击播种）')
|
||||
}
|
||||
g.invalidate()
|
||||
return true
|
||||
}
|
||||
if (s.code === 'berryseeds' || s.code === 'carrotseeds') {
|
||||
const plot = g.entities.find((e) => e.type === 'farmplot' && e.state === 'empty' && Math.hypot(e.x - p.x, e.y - p.y) < 80)
|
||||
if (!plot) {
|
||||
g.ptip(p, '需要站在空农田旁播种（先用锄头开垦）')
|
||||
return true
|
||||
}
|
||||
const code = s.code
|
||||
g.consumeAt(p, area, i)
|
||||
plant(p, plot, code, g)
|
||||
return true
|
||||
}
|
||||
},
|
||||
onGather(g, p, e) {
|
||||
if (e.type === 'grass' && Math.random() < 0.15) {
|
||||
g.addItem(p, 'carrotseeds', 1)
|
||||
g.ptip(p, '草丛里翻出了胡萝卜种子！')
|
||||
} else if (e.type === 'berry' && Math.random() < 0.25) {
|
||||
g.addItem(p, 'berryseeds', 1)
|
||||
g.ptip(p, '摘到了一把浆果种子')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
11
src/games/starve/mods/index.js
Normal file
11
src/games/starve/mods/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
// 内置 mod 列表：声明顺序即合并顺序（主客机保持一致，勿随意调换）
|
||||
import qol from './qol.js'
|
||||
import farm from './farm.js'
|
||||
import chest from './chest.js'
|
||||
import chester from './chester.js'
|
||||
import revive from './revive.js'
|
||||
import peaceful from './peaceful.js'
|
||||
import nightmare from './nightmare.js'
|
||||
import magic from './magic.js'
|
||||
|
||||
export const MODS = [qol, farm, chest, chester, revive, peaceful, nightmare, magic]
|
||||
214
src/games/starve/mods/magic.js
Normal file
214
src/games/starve/mods/magic.js
Normal file
@@ -0,0 +1,214 @@
|
||||
// 魔法武器：火魔杖（对最近敌人范围灼烧）+ 回旋镖（直线飞行命中后折返）
|
||||
const TAU = Math.PI * 2
|
||||
const STAFF_RANGE = 280 // 施法距离
|
||||
const STAFF_AOE = 85 // 爆燃半径
|
||||
const STAFF_DMG = 35
|
||||
const BOOM_SPEED = 340
|
||||
const BOOM_RANGE = 270
|
||||
const BOOM_DMG = 20
|
||||
|
||||
function hostileNear(g, x, y, r) {
|
||||
let best = null
|
||||
let bd = r
|
||||
g.monsters.forEach((m) => {
|
||||
if (!g.mon[m.kind]?.hostile) return
|
||||
const d = Math.hypot(m.x - x, m.y - y)
|
||||
if (d < bd) { bd = d; best = m }
|
||||
})
|
||||
return best
|
||||
}
|
||||
|
||||
function useDur(g, p, s, area, i, brokeText) {
|
||||
s.dur = (s.dur ?? g.items[s.code].uses) - 1
|
||||
if (s.dur <= 0) {
|
||||
g.consumeAt(p, area, i)
|
||||
g.ptip(p, brokeText)
|
||||
}
|
||||
g.invalidate()
|
||||
}
|
||||
|
||||
export default {
|
||||
id: 'magic',
|
||||
name: '魔法武器',
|
||||
desc: '火魔杖范围灼烧 · 回旋镖飞掷折返',
|
||||
factor: 1,
|
||||
tag: 'content',
|
||||
items: {
|
||||
firestaff: { name: '火魔杖', stack: 1, uses: 20 },
|
||||
boomerang: { name: '回旋镖', stack: 1, uses: 10 },
|
||||
},
|
||||
recipes: [
|
||||
{ code: 'firestaff', name: '火魔杖', tab: 'fight', tech: 2, cost: { twig: 2, gold: 2, rope: 1 }, desc: `灼烧最近敌人及周围（${STAFF_DMG} 伤害）· 20 次` },
|
||||
{ code: 'boomerang', name: '回旋镖', tab: 'fight', tech: 1, cost: { twig: 2, flint: 1, rope: 1 }, desc: `飞掷命中沿途敌人后折返（${BOOM_DMG} 伤害）· 10 次` },
|
||||
],
|
||||
icons: {
|
||||
firestaff: (c) => {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 3
|
||||
c.beginPath(); c.moveTo(-9, 13); c.lineTo(5, -6); c.stroke()
|
||||
c.fillStyle = '#e0662e'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.6
|
||||
c.beginPath()
|
||||
c.moveTo(7, -14); c.quadraticCurveTo(12, -8, 7, -2); c.quadraticCurveTo(4, -5, 3, -8); c.quadraticCurveTo(4, -12, 7, -14)
|
||||
c.closePath(); c.fill(); c.stroke()
|
||||
c.fillStyle = '#f0c04a'
|
||||
c.beginPath(); c.ellipse(6.6, -8, 2, 3.4, 0.3, 0, TAU); c.fill()
|
||||
},
|
||||
boomerang: (c) => {
|
||||
c.fillStyle = '#c9a36b'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.8
|
||||
c.beginPath()
|
||||
c.moveTo(-10, -10)
|
||||
c.quadraticCurveTo(2, -12, 10, -4)
|
||||
c.quadraticCurveTo(12, 2, 8, 10)
|
||||
c.quadraticCurveTo(4, 0, -4, -3)
|
||||
c.quadraticCurveTo(-9, -5, -10, -10)
|
||||
c.closePath()
|
||||
c.fill(); c.stroke()
|
||||
c.strokeStyle = '#8a6238'
|
||||
c.lineWidth = 1.2
|
||||
c.beginPath(); c.moveTo(-6, -8); c.quadraticCurveTo(3, -8, 8, 6); c.stroke()
|
||||
},
|
||||
},
|
||||
ents: {
|
||||
// 爆燃特效（短寿命，纯视觉）
|
||||
flamefx: {
|
||||
conf: { size: 10 },
|
||||
init(e) {
|
||||
e.deco = true
|
||||
if (!e.mx) e.mx = { t: 0 }
|
||||
},
|
||||
update(e, dt, g) {
|
||||
e.mx.t += dt
|
||||
if (e.mx.t > 0.55) g.removeEntity(e)
|
||||
},
|
||||
draw(ctx, e) {
|
||||
const k = Math.min(1, (e.mx?.t || 0) / 0.55)
|
||||
const r = STAFF_AOE * (0.35 + k * 0.65)
|
||||
ctx.globalAlpha = 1 - k
|
||||
ctx.strokeStyle = '#f0862e'
|
||||
ctx.lineWidth = 5 - k * 3
|
||||
ctx.beginPath(); ctx.arc(0, 0, r, 0, TAU); ctx.stroke()
|
||||
ctx.fillStyle = 'rgba(240,140,50,0.35)'
|
||||
ctx.beginPath(); ctx.arc(0, 0, r * 0.75, 0, TAU); ctx.fill()
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const a = (i / 6) * TAU + k * 2
|
||||
ctx.fillStyle = i % 2 ? '#f0c04a' : '#e0662e'
|
||||
ctx.beginPath()
|
||||
ctx.arc(Math.cos(a) * r * 0.8, Math.sin(a) * r * 0.55 - k * 14, 4 * (1 - k) + 1, 0, TAU)
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.globalAlpha = 1
|
||||
},
|
||||
},
|
||||
// 回旋镖投射物：直线飞出 → 命中或到程折返 → 回到投掷者手里
|
||||
boomerang: {
|
||||
conf: { size: 10 },
|
||||
init(e) {
|
||||
e.deco = true
|
||||
},
|
||||
update(e, dt, g) {
|
||||
const m = e.mx
|
||||
if (!m) { g.removeEntity(e); return }
|
||||
const owner = g.players.find((p) => p.seat === m.seat)
|
||||
if (!owner || owner.dead) { g.removeEntity(e); return }
|
||||
if (m.phase === 'out') {
|
||||
e.x += m.vx * dt
|
||||
e.y += m.vy * dt
|
||||
m.dist += Math.hypot(m.vx, m.vy) * dt
|
||||
const hit = g.monsters.find((mo) => !g.mon[mo.kind]?.friendly && mo.kind !== 'chester' && Math.hypot(mo.x - e.x, mo.y - e.y) < 26)
|
||||
if (hit) {
|
||||
g.damageMob(hit, BOOM_DMG, owner)
|
||||
m.phase = 'back'
|
||||
} else if (m.dist >= BOOM_RANGE) {
|
||||
m.phase = 'back'
|
||||
}
|
||||
} else {
|
||||
const d = Math.hypot(owner.x - e.x, owner.y - e.y) || 1
|
||||
e.x += ((owner.x - e.x) / d) * BOOM_SPEED * dt
|
||||
e.y += ((owner.y - e.y) / d) * BOOM_SPEED * dt
|
||||
if (d < 26) {
|
||||
g.removeEntity(e)
|
||||
g.ptip(owner, '接住了回旋镖')
|
||||
return
|
||||
}
|
||||
}
|
||||
// 位置镜像进 mx，随增量同步给客机（快照的实体更新行不含坐标）
|
||||
m.px = Math.round(e.x)
|
||||
m.py = Math.round(e.y)
|
||||
g.markDirty(e)
|
||||
},
|
||||
draw(ctx, e, env) {
|
||||
// 客机上 e.x/e.y 停留在投出点，用 mx 里的实时坐标纠偏
|
||||
const dx = e.mx?.px != null ? e.mx.px - e.x : 0
|
||||
const dy = e.mx?.py != null ? e.mx.py - e.y : 0
|
||||
ctx.save()
|
||||
ctx.translate(dx, dy - 14)
|
||||
ctx.rotate(((env?.time || 0) * 14) % TAU)
|
||||
ctx.fillStyle = '#c9a36b'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 1.6
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(-9, -9)
|
||||
ctx.quadraticCurveTo(2, -10, 9, -3)
|
||||
ctx.quadraticCurveTo(10, 2, 7, 9)
|
||||
ctx.quadraticCurveTo(3, 0, -4, -3)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.2)'
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(dx, dy + 2, 7, 2.6, 0, 0, TAU)
|
||||
ctx.fill()
|
||||
},
|
||||
},
|
||||
},
|
||||
hooks: {
|
||||
onUseItem(g, p, s, area, i) {
|
||||
if (s.code === 'firestaff') {
|
||||
const target = hostileNear(g, p.x, p.y, STAFF_RANGE)
|
||||
if (!target) {
|
||||
g.ptip(p, '附近没有可灼烧的敌人')
|
||||
return true
|
||||
}
|
||||
g.swing(p, 'attack')
|
||||
p.dir = target.x >= p.x ? 1 : -1
|
||||
g.addEntity('flamefx', target.x, target.y)
|
||||
let hits = 0
|
||||
g.monsters.slice().forEach((m) => {
|
||||
if (!g.mon[m.kind]?.hostile) return
|
||||
if (Math.hypot(m.x - target.x, m.y - target.y) > STAFF_AOE) return
|
||||
hits++
|
||||
g.damageMob(m, STAFF_DMG, p)
|
||||
})
|
||||
g.shake(2)
|
||||
g.ptip(p, `烈焰爆燃！灼烧了 ${hits} 个敌人`)
|
||||
useDur(g, p, s, area, i, '火魔杖燃尽碎裂了')
|
||||
return true
|
||||
}
|
||||
if (s.code === 'boomerang') {
|
||||
// 朝最近敌人方向掷出；没有敌人就朝面向
|
||||
if (g.entities.some((e) => e.type === 'boomerang' && e.mx?.seat === p.seat)) {
|
||||
g.ptip(p, '回旋镖还在飞行中……')
|
||||
return true
|
||||
}
|
||||
const target = hostileNear(g, p.x, p.y, BOOM_RANGE + 60)
|
||||
let vx = p.dir * BOOM_SPEED
|
||||
let vy = 0
|
||||
if (target) {
|
||||
const d = Math.hypot(target.x - p.x, target.y - p.y) || 1
|
||||
vx = ((target.x - p.x) / d) * BOOM_SPEED
|
||||
vy = ((target.y - p.y) / d) * BOOM_SPEED
|
||||
p.dir = target.x >= p.x ? 1 : -1
|
||||
}
|
||||
g.swing(p, 'attack')
|
||||
g.addEntity('boomerang', p.x + p.dir * 14, p.y - 4, { mx: { vx, vy, phase: 'out', dist: 0, seat: p.seat, px: Math.round(p.x), py: Math.round(p.y) } })
|
||||
useDur(g, p, s, area, i, '回旋镖散架了')
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
10
src/games/starve/mods/nightmare.js
Normal file
10
src/games/starve/mods/nightmare.js
Normal file
@@ -0,0 +1,10 @@
|
||||
// 噩梦模式：全体怪物血量伤害 x1.5，猎犬波周期缩短且每波 +1
|
||||
export default {
|
||||
id: 'nightmare',
|
||||
name: '噩梦模式',
|
||||
desc: '怪物血量伤害 ×1.5 · 猎犬波更频繁更多',
|
||||
factor: 1.3,
|
||||
tag: 'rule',
|
||||
monScale: { hp: 1.5, dmg: 1.5 },
|
||||
tune: { houndGapMul: 0.7, houndExtra: 1 },
|
||||
}
|
||||
13
src/games/starve/mods/peaceful.js
Normal file
13
src/games/starve/mods/peaceful.js
Normal file
@@ -0,0 +1,13 @@
|
||||
// 和平模式：取消猎犬波与独眼巨鹿的袭击排程（其余生物照常）
|
||||
export default {
|
||||
id: 'peaceful',
|
||||
name: '和平模式',
|
||||
desc: '不再有猎犬波与独眼巨鹿',
|
||||
factor: 0.7,
|
||||
tag: 'rule',
|
||||
hooks: {
|
||||
onSpawnWave(g, kind) {
|
||||
if (kind === 'hound' || kind === 'deerclops') return false
|
||||
},
|
||||
},
|
||||
}
|
||||
10
src/games/starve/mods/qol.js
Normal file
10
src/games/starve/mods/qol.js
Normal file
@@ -0,0 +1,10 @@
|
||||
// 便利包：全图显示（无战争迷雾）+ 快速采集 + 堆叠上限 99
|
||||
export default {
|
||||
id: 'qol',
|
||||
name: '便利包',
|
||||
desc: '全图显示 · 采集加速 · 堆叠上限 99',
|
||||
factor: 0.7,
|
||||
tag: 'rule',
|
||||
tune: { stackMax: 99, gatherMul: 0.5 },
|
||||
flags: { noFog: true },
|
||||
}
|
||||
99
src/games/starve/mods/registry.js
Normal file
99
src/games/starve/mods/registry.js
Normal file
@@ -0,0 +1,99 @@
|
||||
// Mod 注册表：与游戏核心解耦的加载器
|
||||
// - mod 定义 = 纯数据（物品/配方/实体/生物/图标/调参）+ 钩子函数集
|
||||
// - activateMods() 把选中的 mod 合并成运行时注册表（不改动 data.js 基表）
|
||||
// - 核心只依赖本文件与 index.js；mod 只依赖传入的 g（游戏受控上下文），互不感知实现
|
||||
import {
|
||||
ITEMS, RECIPES, TUNE, MON, MOB_DROPS, RES, NAMES,
|
||||
} from '../data.js'
|
||||
import { MODS } from './index.js'
|
||||
|
||||
// 给开局 UI 用的元数据（不激活任何逻辑）
|
||||
export function modMeta() {
|
||||
return MODS.map(({ id, name, desc, factor, tag }) => ({ id, name, desc, factor: factor || 1, tag: tag || 'content' }))
|
||||
}
|
||||
|
||||
// 激活一组 mod：返回运行时注册表（rt）。合并顺序 = MODS 声明顺序，保证主客机一致
|
||||
export function activateMods(ids = []) {
|
||||
const act = MODS.filter((m) => ids.includes(m.id))
|
||||
const rt = {
|
||||
ids: act.map((m) => m.id),
|
||||
metas: act.map(({ id, name, desc, factor }) => ({ id, name, desc, factor: factor || 1 })),
|
||||
items: { ...ITEMS },
|
||||
recipes: [...RECIPES],
|
||||
tune: { ...TUNE },
|
||||
mon: { ...MON },
|
||||
mobDrops: { ...MOB_DROPS },
|
||||
res: { ...RES },
|
||||
names: { ...NAMES },
|
||||
entKinds: {}, // type -> { conf, name, init, update, interact, draw }
|
||||
mobKinds: {}, // kind -> { conf, friendly, update, interact, draw, drops }
|
||||
iconPainters: {}, // code -> (ctx) => void（40x40 画布，原点居中）
|
||||
hooks: {}, // name -> [{ id, fn }]
|
||||
flags: {},
|
||||
scoreFactor: 1,
|
||||
}
|
||||
let factor = 1
|
||||
act.forEach((mod) => {
|
||||
Object.entries(mod.items || {}).forEach(([code, def]) => {
|
||||
rt.items[code] = def
|
||||
rt.names[code] = def.name
|
||||
})
|
||||
;(mod.recipes || []).forEach((r) => rt.recipes.push(r))
|
||||
Object.assign(rt.tune, mod.tune || {})
|
||||
Object.assign(rt.flags, mod.flags || {})
|
||||
Object.entries(mod.ents || {}).forEach(([type, def]) => {
|
||||
rt.entKinds[type] = def
|
||||
rt.res[type] = def.conf || { size: 20 }
|
||||
if (def.name) rt.names[type] = def.name
|
||||
})
|
||||
Object.entries(mod.mobs || {}).forEach(([kind, def]) => {
|
||||
rt.mobKinds[kind] = def
|
||||
rt.mon[kind] = def.conf
|
||||
rt.mobDrops[kind] = def.drops || []
|
||||
})
|
||||
Object.assign(rt.iconPainters, mod.icons || {})
|
||||
Object.entries(mod.hooks || {}).forEach(([name, fn]) => {
|
||||
;(rt.hooks[name] = rt.hooks[name] || []).push({ id: mod.id, fn })
|
||||
})
|
||||
// 怪物表整体缩放（如噩梦模式）：对当前已合并的所有生物生效
|
||||
if (mod.monScale) {
|
||||
Object.keys(rt.mon).forEach((k) => {
|
||||
const c = rt.mon[k]
|
||||
rt.mon[k] = { ...c, hp: Math.round(c.hp * (mod.monScale.hp || 1)), dmg: Math.round(c.dmg * (mod.monScale.dmg || 1)) }
|
||||
})
|
||||
}
|
||||
factor *= mod.factor || 1
|
||||
})
|
||||
rt.scoreFactor = Math.round(Math.max(0.5, Math.min(1.5, factor)) * 100) / 100
|
||||
rt.itemCodes = Object.keys(rt.items)
|
||||
rt.itemIdx = Object.fromEntries(rt.itemCodes.map((c, i) => [c, i]))
|
||||
return rt
|
||||
}
|
||||
|
||||
// 通知型钩子：全部调用
|
||||
export function callHook(rt, name, ...args) {
|
||||
;(rt.hooks[name] || []).forEach((h) => h.fn(...args))
|
||||
}
|
||||
// 处理型钩子：任一返回 true 即视为已处理（短路）
|
||||
export function callHandled(rt, name, ...args) {
|
||||
return (rt.hooks[name] || []).some((h) => h.fn(...args) === true)
|
||||
}
|
||||
// 否决型钩子：任一返回 false 即取消
|
||||
export function callAllows(rt, name, ...args) {
|
||||
return !(rt.hooks[name] || []).some((h) => h.fn(...args) === false)
|
||||
}
|
||||
// 存档收集/恢复：每个 mod 的自定义状态挂在 modData[modId]
|
||||
export function collectModSaves(rt, g) {
|
||||
const out = {}
|
||||
;(rt.hooks.save || []).forEach((h) => {
|
||||
const d = h.fn(g)
|
||||
if (d != null) out[h.id] = d
|
||||
})
|
||||
return Object.keys(out).length ? out : undefined
|
||||
}
|
||||
export function applyModSaves(rt, g, data) {
|
||||
if (!data) return
|
||||
;(rt.hooks.load || []).forEach((h) => {
|
||||
if (data[h.id] != null) h.fn(g, data[h.id])
|
||||
})
|
||||
}
|
||||
77
src/games/starve/mods/revive.js
Normal file
77
src/games/starve/mods/revive.js
Normal file
@@ -0,0 +1,77 @@
|
||||
// 复活雕像：二级科技建造石像；任何玩家死亡时自动消耗一座，原地复活（半血半饥）
|
||||
// 单人模式下等于多一条命，保住"死亡删档"前的存档
|
||||
const TAU = Math.PI * 2
|
||||
|
||||
export default {
|
||||
id: 'revive',
|
||||
name: '复活雕像',
|
||||
desc: '建造石像，死亡时消耗一座原地复活',
|
||||
factor: 1,
|
||||
tag: 'content',
|
||||
recipes: [
|
||||
{ code: 'revivestatue', name: '复活雕像', tab: 'science', tech: 2, cost: { rock: 12, gold: 4 }, build: true, desc: '死亡时自动消耗，原地复活（半血）' },
|
||||
],
|
||||
icons: {
|
||||
revivestatue: (c) => {
|
||||
c.fillStyle = '#8d9097'
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.8
|
||||
c.beginPath(); c.roundRect(-11, 8, 22, 6, 2); c.fill(); c.stroke()
|
||||
c.beginPath(); c.moveTo(-7, 8); c.lineTo(-5, -4); c.lineTo(5, -4); c.lineTo(7, 8); c.closePath(); c.fill(); c.stroke()
|
||||
c.beginPath(); c.arc(0, -9, 5.5, 0, TAU); c.fill(); c.stroke()
|
||||
c.fillStyle = '#b0b4bc'
|
||||
c.beginPath(); c.arc(-2, -10.5, 1.6, 0, TAU); c.fill()
|
||||
},
|
||||
},
|
||||
ents: {
|
||||
revivestatue: {
|
||||
name: '复活雕像',
|
||||
conf: { size: 34, struct: true },
|
||||
interact(p, e, g) {
|
||||
g.ptip(p, '守望雕像静静伫立（死亡时将消耗它复活）')
|
||||
},
|
||||
draw(ctx, e, env) {
|
||||
// 底座
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.25)'
|
||||
ctx.beginPath(); ctx.ellipse(0, 4, 20, 7, 0, 0, TAU); ctx.fill()
|
||||
ctx.fillStyle = '#7d8087'
|
||||
ctx.strokeStyle = '#1d1409'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath(); ctx.roundRect(-17, -4, 34, 10, 3); ctx.fill(); ctx.stroke()
|
||||
// 身躯（斗篷状）
|
||||
ctx.fillStyle = '#8d9097'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(-11, -4); ctx.quadraticCurveTo(-13, -26, -6, -32)
|
||||
ctx.lineTo(6, -32); ctx.quadraticCurveTo(13, -26, 11, -4)
|
||||
ctx.closePath()
|
||||
ctx.fill(); ctx.stroke()
|
||||
// 头
|
||||
ctx.beginPath(); ctx.arc(0, -38, 8, 0, TAU); ctx.fill(); ctx.stroke()
|
||||
// 高光
|
||||
ctx.fillStyle = '#b0b4bc'
|
||||
ctx.beginPath(); ctx.arc(-3, -40, 2.4, 0, TAU); ctx.fill()
|
||||
ctx.beginPath(); ctx.ellipse(-7, -18, 2.4, 8, 0.2, 0, TAU); ctx.fill()
|
||||
// 怀中微光（生命之火）
|
||||
const tw = 0.5 + Math.sin((env?.time || 0) * 2.4 + e.id) * 0.5
|
||||
ctx.fillStyle = `rgba(120,220,160,${0.35 + tw * 0.35})`
|
||||
ctx.beginPath(); ctx.arc(0, -16, 3.4 + tw * 1.2, 0, TAU); ctx.fill()
|
||||
},
|
||||
},
|
||||
},
|
||||
hooks: {
|
||||
onPlayerDeath(g, p) {
|
||||
const statue = g.entities.find((e) => e.type === 'revivestatue')
|
||||
if (!statue) return
|
||||
g.removeEntity(statue)
|
||||
p.hp = 75
|
||||
p.hunger = 75
|
||||
p.san = 100
|
||||
p.temp = Math.max(p.temp, 12)
|
||||
p.darkT = 0
|
||||
g.ptip(p, '远处的复活雕像碎裂了——你重获新生！')
|
||||
g.tip(`${p.name || '玩家'}被复活雕像救了回来`)
|
||||
g.shake(5)
|
||||
return true
|
||||
},
|
||||
},
|
||||
}
|
||||
1418
src/games/starve/paint.js
Normal file
1418
src/games/starve/paint.js
Normal file
File diff suppressed because it is too large
Load Diff
448
src/games/starve/world.js
Normal file
448
src/games/starve/world.js
Normal file
@@ -0,0 +1,448 @@
|
||||
// 饥荒世界生成：径向噪声岛屿 + 群系 Voronoi + 道路 + 实体铺设 + turf 瓦片图集
|
||||
// 瓦片网格 80px：0=海洋 1=出生草原 2=热带草原 3=草地 4=森林 5=岩石地 6=沼泽
|
||||
// （不依赖 engine 模块，方便 Node 环境独立跑生成测试）
|
||||
function randInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
export const TILE = 80
|
||||
export const GW = 40
|
||||
export const GH = 30
|
||||
export const WORLD = { w: GW * TILE, h: GH * TILE } // 3200 x 2400
|
||||
|
||||
export const BIOMES = {
|
||||
1: { code: 'meadow', name: '出生草原', color: '#4a5d33', map: '#5d7a3d' },
|
||||
2: { code: 'savanna', name: '热带草原', color: '#8a8a3e', map: '#a8a34e' },
|
||||
3: { code: 'grassland', name: '草地', color: '#55703a', map: '#6d9048' },
|
||||
4: { code: 'forest', name: '森林', color: '#33492c', map: '#3d5c36' },
|
||||
5: { code: 'rocky', name: '岩石地', color: '#6e6a5e', map: '#8a8578' },
|
||||
6: { code: 'marsh', name: '沼泽', color: '#3d4438', map: '#4c5646' },
|
||||
}
|
||||
|
||||
export function tileIdx(x, y) {
|
||||
const tx = Math.floor(x / TILE)
|
||||
const ty = Math.floor(y / TILE)
|
||||
if (tx < 0 || tx >= GW || ty < 0 || ty >= GH) return -1
|
||||
return ty * GW + tx
|
||||
}
|
||||
export function isLand(tiles, x, y) {
|
||||
const i = tileIdx(x, y)
|
||||
return i >= 0 && tiles[i] > 0
|
||||
}
|
||||
export function biomeAt(tiles, x, y) {
|
||||
const i = tileIdx(x, y)
|
||||
return i >= 0 ? tiles[i] : 0
|
||||
}
|
||||
export function onRoad(road, x, y) {
|
||||
const i = tileIdx(x, y)
|
||||
return i >= 0 && road[i] === 1
|
||||
}
|
||||
|
||||
// 在 (x,y) 附近 rMin~rMax 环带内找一块陆地（怪物/掉落安全落点）
|
||||
export function findLandNear(tiles, x, y, rMin, rMax, tries = 24) {
|
||||
for (let i = 0; i < tries; i++) {
|
||||
const a = Math.random() * Math.PI * 2
|
||||
const r = rMin + Math.random() * (rMax - rMin)
|
||||
const nx = x + Math.cos(a) * r
|
||||
const ny = y + Math.sin(a) * r
|
||||
if (isLand(tiles, nx, ny)) return { x: nx, y: ny }
|
||||
}
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// 岛屿 + 群系 + 道路生成
|
||||
// =====================================================================
|
||||
export function genIsland() {
|
||||
const tiles = new Uint8Array(GW * GH)
|
||||
const road = new Uint8Array(GW * GH)
|
||||
const cx = GW / 2
|
||||
const cy = GH / 2
|
||||
// 径向噪声轮廓：三组正弦叠加出不规则海岸线
|
||||
const ph = [Math.random() * 7, Math.random() * 7, Math.random() * 7]
|
||||
const landAt = (tx, ty) => {
|
||||
const dx = (tx + 0.5 - cx) / (GW * 0.46)
|
||||
const dy = (ty + 0.5 - cy) / (GH * 0.46)
|
||||
const rad = Math.hypot(dx, dy)
|
||||
const ang = Math.atan2(dy, dx)
|
||||
const edge = 1 + 0.15 * Math.sin(ang * 3 + ph[0]) + 0.11 * Math.sin(ang * 5 + ph[1]) + 0.07 * Math.sin(ang * 8 + ph[2])
|
||||
return rad < edge * 0.9
|
||||
}
|
||||
for (let ty = 0; ty < GH; ty++) {
|
||||
for (let tx = 0; tx < GW; tx++) {
|
||||
if (landAt(tx, ty)) tiles[ty * GW + tx] = 1
|
||||
}
|
||||
}
|
||||
// 出生点周围强制陆地
|
||||
for (let ty = Math.floor(cy) - 3; ty <= Math.floor(cy) + 3; ty++) {
|
||||
for (let tx = Math.floor(cx) - 3; tx <= Math.floor(cx) + 3; tx++) {
|
||||
tiles[ty * GW + tx] = 1
|
||||
}
|
||||
}
|
||||
// 群系簇心：出生草原在中心，其余类型在远处陆地上挑选（相互保持间距）
|
||||
const centers = [{ biome: 1, tx: cx, ty: cy }]
|
||||
const wantTypes = [2, 2, 3, 3, 4, 4, 4, 5, 5, 6, 6] // 热带草原x2 草地x2 森林x3 岩石x2 沼泽x2
|
||||
wantTypes.forEach((biome) => {
|
||||
for (let retry = 0; retry < 60; retry++) {
|
||||
const tx = randInt(2, GW - 3)
|
||||
const ty = randInt(2, GH - 3)
|
||||
if (!tiles[ty * GW + tx]) continue
|
||||
if (Math.hypot(tx - cx, ty - cy) < 6) continue
|
||||
if (centers.some((c) => Math.hypot(c.tx - tx, c.ty - ty) < 5.5)) continue
|
||||
centers.push({ biome, tx, ty })
|
||||
break
|
||||
}
|
||||
})
|
||||
// Voronoi 归属：陆地瓦片染成最近簇心的群系（出生草原簇心加权更近，保证出生区域够大）
|
||||
for (let ty = 0; ty < GH; ty++) {
|
||||
for (let tx = 0; tx < GW; tx++) {
|
||||
const i = ty * GW + tx
|
||||
if (!tiles[i]) continue
|
||||
let best = 1
|
||||
let bd = Infinity
|
||||
centers.forEach((c) => {
|
||||
let d = Math.hypot(c.tx - tx, c.ty - ty)
|
||||
if (c.biome === 1) d *= 0.6
|
||||
if (d < bd) { bd = d; best = c.biome }
|
||||
})
|
||||
tiles[i] = best
|
||||
}
|
||||
}
|
||||
// 道路：从出生点向每个远方簇心铺一条（只在陆地上落笔）
|
||||
centers.slice(1).forEach((c) => {
|
||||
const steps = Math.ceil(Math.hypot(c.tx - cx, c.ty - cy)) * 2
|
||||
for (let s = 0; s <= steps; s++) {
|
||||
const t = s / steps
|
||||
// 轻微弯曲的路径
|
||||
const bend = Math.sin(t * Math.PI) * 1.6 * (c.tx % 2 === 0 ? 1 : -1)
|
||||
const fx = cx + (c.tx - cx) * t + bend * ((c.ty - cy) / (Math.hypot(c.tx - cx, c.ty - cy) || 1))
|
||||
const fy = cy + (c.ty - cy) * t - bend * ((c.tx - cx) / (Math.hypot(c.tx - cx, c.ty - cy) || 1))
|
||||
const tx = Math.round(fx)
|
||||
const ty = Math.round(fy)
|
||||
if (tx < 0 || tx >= GW || ty < 0 || ty >= GH) continue
|
||||
const i = ty * GW + tx
|
||||
if (tiles[i]) road[i] = 1
|
||||
}
|
||||
})
|
||||
return { tiles, road, centers }
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// 实体铺设：按群系密度表逐瓦片掷点（带最小间距），返回放置清单与生物出生点
|
||||
// =====================================================================
|
||||
const DENSITY = {
|
||||
1: { grass: 0.2, sapling: 0.16, flint: 0.06, berry: 0.05, tree: 0.05, flower: 0.1, rabbithole: 0.03 },
|
||||
2: { grass: 0.3, rabbithole: 0.07, sapling: 0.06, flint: 0.03, tree: 0.02, flower: 0.03 },
|
||||
3: { berry: 0.13, flower: 0.15, grass: 0.1, sapling: 0.08, beehive: 0.02, tree: 0.05 },
|
||||
4: { tree: 0.36, sapling: 0.06, grass: 0.04, spidernest: 0.016, flint: 0.03, flower: 0.03 },
|
||||
5: { rock: 0.2, goldrock: 0.07, flint: 0.09, tree: 0.02 },
|
||||
6: { reeds: 0.16, tentacle: 0.045, tree: 0.03, flint: 0.02 },
|
||||
}
|
||||
|
||||
export function planEntities(tiles, road) {
|
||||
const placed = [] // {type,x,y}
|
||||
const grid = new Map() // 空间散列：瓦片 idx -> 该瓦片内放置点
|
||||
const minDist = (x, y, type) => {
|
||||
const tx = Math.floor(x / TILE)
|
||||
const ty = Math.floor(y / TILE)
|
||||
for (let oy = -1; oy <= 1; oy++) {
|
||||
for (let ox = -1; ox <= 1; ox++) {
|
||||
const list = grid.get((ty + oy) * GW + tx + ox)
|
||||
if (!list) continue
|
||||
for (const p of list) {
|
||||
const need = p.type === type ? 30 : 26
|
||||
if (Math.hypot(p.x - x, p.y - y) < need) return false
|
||||
}
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
const put = (type, x, y) => {
|
||||
if (!isLand(tiles, x, y)) return false
|
||||
if (!minDist(x, y, type)) return false
|
||||
const p = { type, x, y }
|
||||
placed.push(p)
|
||||
const i = tileIdx(x, y)
|
||||
if (!grid.has(i)) grid.set(i, [])
|
||||
grid.get(i).push(p)
|
||||
return true
|
||||
}
|
||||
const cx = WORLD.w / 2
|
||||
const cy = WORLD.h / 2
|
||||
// 1) 逐瓦片按群系密度掷点（道路上与出生点近处留空）
|
||||
for (let ty = 0; ty < GH; ty++) {
|
||||
for (let tx = 0; tx < GW; tx++) {
|
||||
const i = ty * GW + tx
|
||||
const biome = tiles[i]
|
||||
if (!biome || road[i]) continue
|
||||
const wx = tx * TILE
|
||||
const wy = ty * TILE
|
||||
if (Math.hypot(wx + 40 - cx, wy + 40 - cy) < 130) continue
|
||||
const table = DENSITY[biome]
|
||||
Object.entries(table).forEach(([type, p]) => {
|
||||
if (Math.random() >= p) return
|
||||
for (let retry = 0; retry < 4; retry++) {
|
||||
const x = wx + 8 + Math.random() * (TILE - 16)
|
||||
const y = wy + 8 + Math.random() * (TILE - 16)
|
||||
if (put(type, x, y)) break
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 2) 出生保底物资（第一晚一定造得出火把与斧头）
|
||||
;[['grass', -90, -40], ['grass', 80, 60], ['grass', -30, 95], ['grass', 110, -30],
|
||||
['sapling', 60, -80], ['sapling', -105, 40], ['sapling', 20, 120],
|
||||
['flint', -60, 80], ['flint', 95, 20], ['berry', -120, -70], ['berry', 130, 90],
|
||||
['tree', -160, 30], ['tree', 150, -100]]
|
||||
.forEach(([type, dx, dy]) => put(type, cx + dx, cy + dy))
|
||||
// 3) 保证关键实体的下限数量
|
||||
const ensure = (type, min, biomes) => {
|
||||
let n = placed.filter((p) => p.type === type).length
|
||||
for (let retry = 0; retry < 300 && n < min; retry++) {
|
||||
const tx = randInt(1, GW - 2)
|
||||
const ty = randInt(1, GH - 2)
|
||||
const i = ty * GW + tx
|
||||
if (!biomes.includes(tiles[i]) || road[i]) continue
|
||||
if (put(type, tx * TILE + 20 + Math.random() * 40, ty * TILE + 20 + Math.random() * 40)) n++
|
||||
}
|
||||
}
|
||||
ensure('spidernest', 2, [4])
|
||||
ensure('beehive', 2, [3])
|
||||
ensure('goldrock', 4, [5])
|
||||
ensure('rabbithole', 5, [1, 2])
|
||||
ensure('tentacle', 4, [6])
|
||||
ensure('reeds', 6, [6])
|
||||
// 4) 猪人村：草地/森林挑 2 处，每处 3 座猪屋围成一圈
|
||||
const villages = []
|
||||
for (let retry = 0; retry < 120 && villages.length < 2; retry++) {
|
||||
const tx = randInt(2, GW - 3)
|
||||
const ty = randInt(2, GH - 3)
|
||||
const i = ty * GW + tx
|
||||
if (tiles[i] !== 3 && tiles[i] !== 4) continue
|
||||
const wx = tx * TILE + 40
|
||||
const wy = ty * TILE + 40
|
||||
if (Math.hypot(wx - cx, wy - cy) < 500) continue
|
||||
if (villages.some((v) => Math.hypot(v.x - wx, v.y - wy) < 900)) continue
|
||||
villages.push({ x: wx, y: wy })
|
||||
for (let k = 0; k < 3; k++) {
|
||||
const a = (k / 3) * Math.PI * 2 + 0.5
|
||||
put('pighouse', wx + Math.cos(a) * 70, wy + Math.sin(a) * 70)
|
||||
}
|
||||
}
|
||||
ensure('pighouse', 3, [3, 4]) // 村落选点/落位失败时的下限保底
|
||||
// 5) 牛群与青蛙出生点（生物由游戏侧生成）
|
||||
const herds = []
|
||||
for (let retry = 0; retry < 120 && herds.length < 2; retry++) {
|
||||
const tx = randInt(2, GW - 3)
|
||||
const ty = randInt(2, GH - 3)
|
||||
if (tiles[ty * GW + tx] !== 2) continue
|
||||
const wx = tx * TILE + 40
|
||||
const wy = ty * TILE + 40
|
||||
if (herds.some((h) => Math.hypot(h.x - wx, h.y - wy) < 800)) continue
|
||||
herds.push({ x: wx, y: wy })
|
||||
}
|
||||
const frogs = []
|
||||
for (let retry = 0; retry < 200 && frogs.length < 8; retry++) {
|
||||
const tx = randInt(1, GW - 2)
|
||||
const ty = randInt(1, GH - 2)
|
||||
if (tiles[ty * GW + tx] !== 6) continue
|
||||
frogs.push({ x: tx * TILE + 10 + Math.random() * 60, y: ty * TILE + 10 + Math.random() * 60 })
|
||||
}
|
||||
return { placed, herds, frogs }
|
||||
}
|
||||
|
||||
// 纯装饰点缀（碎石/蘑菇/草叶），按群系倾向，不可交互
|
||||
export function genDecor(tiles) {
|
||||
const spots = []
|
||||
for (let i = 0; i < 110; i++) {
|
||||
const x = Math.random() * WORLD.w
|
||||
const y = Math.random() * WORLD.h
|
||||
const b = biomeAt(tiles, x, y)
|
||||
if (!b) continue
|
||||
let kind = 'tuft'
|
||||
if (b === 4 || b === 6) kind = Math.random() < 0.55 ? 'mushroom' : 'pebble'
|
||||
else if (b === 5) kind = 'pebble'
|
||||
else if (Math.random() < 0.3) kind = 'pebble'
|
||||
spots.push({ x, y, kind, hue: Math.random() })
|
||||
}
|
||||
return spots
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// turf 瓦片图集：每群系一张 80px 纹理（含冬季雪化变体）+ 道路
|
||||
// =====================================================================
|
||||
function makeTileCv(paint) {
|
||||
const cv = document.createElement('canvas')
|
||||
cv.width = TILE
|
||||
cv.height = TILE
|
||||
const c = cv.getContext('2d')
|
||||
paint(c)
|
||||
return cv
|
||||
}
|
||||
// 伪随机（瓦片纹理内部使用，避免每次生成不一致）
|
||||
function lcg(seed) {
|
||||
let s = seed
|
||||
return () => {
|
||||
s = (s * 1664525 + 1013904223) % 4294967296
|
||||
return s / 4294967296
|
||||
}
|
||||
}
|
||||
export function buildTilePatterns() {
|
||||
const pats = { norm: {}, winter: {} }
|
||||
const speck = (c, rnd, n, colors, rMin = 2, rMax = 7) => {
|
||||
for (let i = 0; i < n; i++) {
|
||||
c.fillStyle = colors[Math.floor(rnd() * colors.length)]
|
||||
c.beginPath()
|
||||
const r = rMin + rnd() * (rMax - rMin)
|
||||
c.ellipse(rnd() * TILE, rnd() * TILE, r, r * 0.6, rnd() * 3, 0, 7)
|
||||
c.fill()
|
||||
}
|
||||
}
|
||||
const defs = {
|
||||
1: (c, rnd) => {
|
||||
c.fillStyle = '#4a5d33'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
speck(c, rnd, 12, ['rgba(96,120,62,0.5)', 'rgba(58,76,40,0.6)'])
|
||||
},
|
||||
2: (c, rnd) => {
|
||||
c.fillStyle = '#8a8a3e'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
speck(c, rnd, 10, ['rgba(168,163,78,0.55)', 'rgba(122,118,46,0.6)'])
|
||||
// 干草细笔
|
||||
c.strokeStyle = 'rgba(200,190,110,0.4)'
|
||||
c.lineWidth = 1.4
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const x = rnd() * TILE
|
||||
const y = rnd() * TILE
|
||||
c.beginPath()
|
||||
c.moveTo(x, y)
|
||||
c.lineTo(x + 2 - rnd() * 4, y - 5 - rnd() * 4)
|
||||
c.stroke()
|
||||
}
|
||||
},
|
||||
3: (c, rnd) => {
|
||||
c.fillStyle = '#55703a'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
speck(c, rnd, 12, ['rgba(120,150,80,0.5)', 'rgba(70,95,48,0.6)'])
|
||||
},
|
||||
4: (c, rnd) => {
|
||||
c.fillStyle = '#33492c'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
speck(c, rnd, 13, ['rgba(38,62,34,0.65)', 'rgba(60,86,48,0.5)'])
|
||||
},
|
||||
5: (c, rnd) => {
|
||||
c.fillStyle = '#6e6a5e'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
speck(c, rnd, 10, ['rgba(130,126,112,0.55)', 'rgba(90,86,76,0.6)'])
|
||||
// 石纹裂缝
|
||||
c.strokeStyle = 'rgba(60,56,50,0.5)'
|
||||
c.lineWidth = 1.2
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const x = rnd() * TILE
|
||||
const y = rnd() * TILE
|
||||
c.beginPath()
|
||||
c.moveTo(x, y)
|
||||
c.lineTo(x + 8 + rnd() * 10, y + 4 - rnd() * 8)
|
||||
c.stroke()
|
||||
}
|
||||
},
|
||||
6: (c, rnd) => {
|
||||
c.fillStyle = '#3d4438'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
speck(c, rnd, 12, ['rgba(76,86,70,0.6)', 'rgba(44,50,40,0.7)'])
|
||||
// 泥水洼
|
||||
c.fillStyle = 'rgba(52,64,66,0.55)'
|
||||
for (let i = 0; i < 3; i++) {
|
||||
c.beginPath()
|
||||
c.ellipse(rnd() * TILE, rnd() * TILE, 6 + rnd() * 8, 3 + rnd() * 4, 0, 0, 7)
|
||||
c.fill()
|
||||
}
|
||||
},
|
||||
}
|
||||
Object.entries(defs).forEach(([id, paint]) => {
|
||||
pats.norm[id] = makeTileCv((c) => paint(c, lcg(+id * 977)))
|
||||
// 冬季变体：同底纹 + 雪覆盖
|
||||
pats.winter[id] = makeTileCv((c) => {
|
||||
paint(c, lcg(+id * 977))
|
||||
c.fillStyle = 'rgba(224,232,240,0.55)'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
const rnd = lcg(+id * 1237)
|
||||
c.fillStyle = 'rgba(244,250,255,0.7)'
|
||||
for (let i = 0; i < 10; i++) {
|
||||
c.beginPath()
|
||||
c.ellipse(rnd() * TILE, rnd() * TILE, 4 + rnd() * 8, 2.5 + rnd() * 5, 0, 0, 7)
|
||||
c.fill()
|
||||
}
|
||||
})
|
||||
})
|
||||
// 道路（叠加在陆地之上，半透明泥土带碎石）
|
||||
pats.road = makeTileCv((c) => {
|
||||
const rnd = lcg(4242)
|
||||
c.fillStyle = 'rgba(146,120,84,0.85)'
|
||||
c.fillRect(0, 0, TILE, TILE)
|
||||
c.fillStyle = 'rgba(110,90,62,0.8)'
|
||||
for (let i = 0; i < 8; i++) {
|
||||
c.beginPath()
|
||||
c.ellipse(rnd() * TILE, rnd() * TILE, 3 + rnd() * 5, 2 + rnd() * 3, 0, 0, 7)
|
||||
c.fill()
|
||||
}
|
||||
c.fillStyle = 'rgba(180,158,120,0.6)'
|
||||
for (let i = 0; i < 6; i++) {
|
||||
c.beginPath()
|
||||
c.arc(rnd() * TILE, rnd() * TILE, 1.5 + rnd() * 2, 0, 7)
|
||||
c.fill()
|
||||
}
|
||||
})
|
||||
return pats
|
||||
}
|
||||
|
||||
// 绘制可视范围内的地面瓦片（海洋底色 + 陆地 turf + 道路 + 岸线 + 近岸波浪）
|
||||
export function drawTiles(ctx, tiles, road, pats, camX, camY, W, H, time, winter) {
|
||||
ctx.fillStyle = winter ? '#26404e' : '#20404c'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
const set = winter ? pats.winter : pats.norm
|
||||
const tx0 = Math.max(0, Math.floor(camX / TILE))
|
||||
const ty0 = Math.max(0, Math.floor(camY / TILE))
|
||||
const tx1 = Math.min(GW - 1, Math.floor((camX + W) / TILE))
|
||||
const ty1 = Math.min(GH - 1, Math.floor((camY + H) / TILE))
|
||||
for (let ty = ty0; ty <= ty1; ty++) {
|
||||
for (let tx = tx0; tx <= tx1; tx++) {
|
||||
const i = ty * GW + tx
|
||||
const b = tiles[i]
|
||||
const sx = tx * TILE - camX
|
||||
const sy = ty * TILE - camY
|
||||
if (!b) {
|
||||
// 近岸波浪：与陆地相邻的海洋瓦片画一两道流动弧线
|
||||
const nearLand =
|
||||
(tx > 0 && tiles[i - 1]) || (tx < GW - 1 && tiles[i + 1]) ||
|
||||
(ty > 0 && tiles[i - GW]) || (ty < GH - 1 && tiles[i + GW])
|
||||
if (nearLand) {
|
||||
const wob = Math.sin(time * 1.4 + tx * 1.7 + ty * 2.3)
|
||||
ctx.strokeStyle = 'rgba(190,220,230,0.35)'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.arc(sx + 24 + wob * 5, sy + 30, 9, Math.PI * 0.15, Math.PI * 0.85)
|
||||
ctx.stroke()
|
||||
if (wob > 0.2) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(sx + 55 - wob * 4, sy + 58, 7, Math.PI * 0.15, Math.PI * 0.85)
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
continue
|
||||
}
|
||||
ctx.drawImage(set[b] || set[1], sx, sy)
|
||||
if (road[i]) {
|
||||
ctx.globalAlpha = 0.9
|
||||
ctx.drawImage(pats.road, sx, sy)
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
// 岸线：陆地瓦片贴海一侧描沙边
|
||||
ctx.fillStyle = winter ? 'rgba(226,234,240,0.9)' : 'rgba(196,178,128,0.9)'
|
||||
if (tx > 0 && !tiles[i - 1]) ctx.fillRect(sx, sy, 4, TILE)
|
||||
if (tx < GW - 1 && !tiles[i + 1]) ctx.fillRect(sx + TILE - 4, sy, 4, TILE)
|
||||
if (ty > 0 && !tiles[i - GW]) ctx.fillRect(sx, sy, TILE, 4)
|
||||
if (ty < GH - 1 && !tiles[i + GW]) ctx.fillRect(sx, sy, TILE, 4)
|
||||
}
|
||||
}
|
||||
}
|
||||
328
src/games/starveSkins.js
Normal file
328
src/games/starveSkins.js
Normal file
@@ -0,0 +1,328 @@
|
||||
// 饥荒人物皮肤模块：30 款皮肤绘制参数 + 通用人物矢量绘制 + 离屏立绘预览
|
||||
// code 与后端 game_skins 种子数据一一对应；StarveGame（本人/队友）与 GamePlay 更衣室共用
|
||||
// hair: spiky=尖刺 flat=平刘海 long=披肩长发 curly=蓬卷 crown=短发+金冠
|
||||
export const SKINS = [
|
||||
{ code: 'wilson', name: '经典威尔逊', hair: 'spiky', hairColor: '#15100c', skinTone: '#f3dfc2', vestColor: '#a33d3d', shirtColor: '#e8e2d4' },
|
||||
{ code: 'willow', name: '篝火少女', hair: 'long', hairColor: '#8a2f22', skinTone: '#f3dfc2', vestColor: '#43506e', shirtColor: '#dfd8c6' },
|
||||
{ code: 'wendy', name: '暮色少女', hair: 'long', hairColor: '#e8d8a8', skinTone: '#f0e4d0', vestColor: '#3d3a52', shirtColor: '#d8d4e2' },
|
||||
{ code: 'flame', name: '火焰行者', hair: 'spiky', hairColor: '#d8501e', skinTone: '#f3dfc2', vestColor: '#e0662a', shirtColor: '#f4e3c2' },
|
||||
{ code: 'ocean', name: '海风水手', hair: 'flat', hairColor: '#2a3648', skinTone: '#f0dcc0', vestColor: '#2f6d8e', shirtColor: '#dfe8ea' },
|
||||
{ code: 'forest', name: '密林猎手', hair: 'curly', hairColor: '#3f2c18', skinTone: '#e8ceac', vestColor: '#3f6b35', shirtColor: '#d8e0c2' },
|
||||
{ code: 'honey', name: '蜜糖甜心', hair: 'curly', hairColor: '#c98a2e', skinTone: '#f6e6cc', vestColor: '#d8a437', shirtColor: '#f4ead0' },
|
||||
{ code: 'dusk', name: '暮紫魔术师', hair: 'flat', hairColor: '#3a2a52', skinTone: '#ecd8c4', vestColor: '#6a4a9e', shirtColor: '#d8cce8' },
|
||||
{ code: 'mint', name: '薄荷学者', hair: 'flat', hairColor: '#3f5548', skinTone: '#f3dfc2', vestColor: '#57a486', shirtColor: '#e6f4ec' },
|
||||
{ code: 'ash', name: '灰烬流浪者', hair: 'spiky', hairColor: '#6a6a72', skinTone: '#e4d2bc', vestColor: '#7a7a84', shirtColor: '#d8d8dc' },
|
||||
{ code: 'sky', name: '晴空飞行员', hair: 'flat', hairColor: '#4a668c', skinTone: '#f0dcc0', vestColor: '#7fa8d8', shirtColor: '#f0f4fa' },
|
||||
{ code: 'rose', name: '蔷薇淑女', hair: 'long', hairColor: '#7e3348', skinTone: '#f6e2d0', vestColor: '#c96a8a', shirtColor: '#f4dce4' },
|
||||
{ code: 'ember', name: '余烬铁匠', hair: 'spiky', hairColor: '#4a2118', skinTone: '#dcb890', vestColor: '#a84020', shirtColor: '#e2c9a8' },
|
||||
{ code: 'sand', name: '沙丘旅人', hair: 'curly', hairColor: '#a8854e', skinTone: '#e0c09a', vestColor: '#c9a86a', shirtColor: '#f2e8d2' },
|
||||
{ code: 'moss', name: '苔原德鲁伊', hair: 'curly', hairColor: '#4c5a2c', skinTone: '#e8d4b4', vestColor: '#6a7a3d', shirtColor: '#dce2c4' },
|
||||
{ code: 'plum', name: '梅子贵妇', hair: 'long', hairColor: '#52284a', skinTone: '#f0dcc8', vestColor: '#8a4a7e', shirtColor: '#e8d4e4' },
|
||||
{ code: 'rust', name: '铁锈机械师', hair: 'flat', hairColor: '#6a3520', skinTone: '#e4c4a0', vestColor: '#a05a2a', shirtColor: '#d8c2a8' },
|
||||
{ code: 'navy', name: '藏青卫士', hair: 'flat', hairColor: '#1e2a44', skinTone: '#ecd4b8', vestColor: '#2c3e68', shirtColor: '#c9d2e4' },
|
||||
{ code: 'blizzard', name: '暴雪求生者', hair: 'spiky', hairColor: '#dfe6f0', skinTone: '#f6ece0', vestColor: '#a8bcd0', shirtColor: '#f4f8fc' },
|
||||
{ code: 'crow', name: '乌鸦信使', hair: 'long', hairColor: '#14121c', skinTone: '#e8d8c8', vestColor: '#2a2534', shirtColor: '#a8a2b4' },
|
||||
{ code: 'lava', name: '熔岩勇士', hair: 'spiky', hairColor: '#6e1408', skinTone: '#e0b898', vestColor: '#c93a10', shirtColor: '#f2b03c' },
|
||||
{ code: 'glacier', name: '冰川猎人', hair: 'flat', hairColor: '#b8d8e8', skinTone: '#f0e8dc', vestColor: '#7fb8d8', shirtColor: '#eef8fc' },
|
||||
{ code: 'swamp', name: '沼泽行者', hair: 'curly', hairColor: '#2c3a20', skinTone: '#d8c4a0', vestColor: '#4a5c2e', shirtColor: '#a8b088' },
|
||||
{ code: 'sunset', name: '落日吟游者', hair: 'long', hairColor: '#c95a2e', skinTone: '#f2dcc0', vestColor: '#e8823c', shirtColor: '#f8d8a8' },
|
||||
{ code: 'thorn', name: '荆棘骑士', hair: 'spiky', hairColor: '#2a3318', skinTone: '#e8d0ac', vestColor: '#54682c', shirtColor: '#c9d0a8' },
|
||||
{ code: 'shadow', name: '暗影刺客', hair: 'spiky', hairColor: '#0c0a12', skinTone: '#d8c8c0', vestColor: '#1e1828', shirtColor: '#3a3448' },
|
||||
{ code: 'gold', name: '鎏金贵族', hair: 'curly', hairColor: '#c9a11e', skinTone: '#f4e4c8', vestColor: '#e0b83a', shirtColor: '#f8ecc2' },
|
||||
{ code: 'blood', name: '血月狂战士', hair: 'long', hairColor: '#3a0a0e', skinTone: '#e0c0a8', vestColor: '#8e1c24', shirtColor: '#d8a8a0' },
|
||||
{ code: 'void', name: '极夜术士', hair: 'flat', hairColor: '#08060e', skinTone: '#d0c4c8', vestColor: '#141020', shirtColor: '#2e2840' },
|
||||
{ code: 'king', name: '饥荒之王', hair: 'crown', hairColor: '#2a1c10', skinTone: '#f0dcc0', vestColor: '#8e2c3a', shirtColor: '#f2e0b8' },
|
||||
]
|
||||
|
||||
export function skinByCode(code) {
|
||||
return SKINS.find((s) => s.code === code) || SKINS[0]
|
||||
}
|
||||
|
||||
// 通用描边填充
|
||||
function fs(c, fill, stroke = '#1d1409', lw = 2) {
|
||||
if (fill) { c.fillStyle = fill; c.fill() }
|
||||
if (stroke) { c.strokeStyle = stroke; c.lineWidth = lw; c.stroke() }
|
||||
}
|
||||
|
||||
// 发型绘制（以头心 (0, headY) 为基准，头半径 8.4）
|
||||
function drawHair(c, skin, headY) {
|
||||
c.fillStyle = skin.hairColor
|
||||
if (skin.hair === 'spiky') {
|
||||
// 威尔逊式尖刺
|
||||
c.beginPath()
|
||||
c.moveTo(-8, headY - 2)
|
||||
c.lineTo(-9, headY - 12)
|
||||
c.lineTo(-4.5, headY - 6.5)
|
||||
c.lineTo(-3, headY - 15)
|
||||
c.lineTo(1, headY - 7)
|
||||
c.lineTo(4, headY - 13)
|
||||
c.lineTo(6.5, headY - 5.5)
|
||||
c.lineTo(8.4, headY - 1)
|
||||
c.quadraticCurveTo(4, headY - 7.5, -8, headY - 2)
|
||||
c.closePath()
|
||||
c.fill()
|
||||
} else if (skin.hair === 'flat') {
|
||||
// 平刘海盖头
|
||||
c.beginPath()
|
||||
c.arc(0, headY - 1.5, 8.6, Math.PI, 0)
|
||||
c.quadraticCurveTo(8, headY - 6, 5, headY - 5.5)
|
||||
c.lineTo(-5, headY - 5.5)
|
||||
c.quadraticCurveTo(-8, headY - 6, -8.6, headY - 1.5)
|
||||
c.closePath()
|
||||
c.fill()
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.2
|
||||
c.beginPath()
|
||||
c.arc(0, headY - 1.5, 8.6, Math.PI * 1.05, -Math.PI * 0.05)
|
||||
c.stroke()
|
||||
} else if (skin.hair === 'long') {
|
||||
// 披肩长发：顶盖 + 两侧垂发
|
||||
c.beginPath()
|
||||
c.arc(0, headY - 2, 8.8, Math.PI, 0)
|
||||
c.closePath()
|
||||
c.fill()
|
||||
c.beginPath()
|
||||
c.moveTo(-8.6, headY - 2)
|
||||
c.quadraticCurveTo(-10.5, headY + 8, -8, headY + 15)
|
||||
c.lineTo(-4.5, headY + 13)
|
||||
c.quadraticCurveTo(-7, headY + 5, -6.4, headY - 1)
|
||||
c.closePath()
|
||||
c.fill()
|
||||
c.beginPath()
|
||||
c.moveTo(8.6, headY - 2)
|
||||
c.quadraticCurveTo(10.5, headY + 8, 8, headY + 15)
|
||||
c.lineTo(4.5, headY + 13)
|
||||
c.quadraticCurveTo(7, headY + 5, 6.4, headY - 1)
|
||||
c.closePath()
|
||||
c.fill()
|
||||
} else if (skin.hair === 'curly') {
|
||||
// 蓬卷：一圈圆团
|
||||
;[[-6, headY - 6, 4.4], [0, headY - 9, 5], [6, headY - 6, 4.4], [-3, headY - 8.5, 4], [3, headY - 8.5, 4]].forEach(([hx, hy, r]) => {
|
||||
c.beginPath()
|
||||
c.arc(hx, hy, r, 0, 7)
|
||||
c.fill()
|
||||
})
|
||||
} else if (skin.hair === 'crown') {
|
||||
// 短发 + 小金冠
|
||||
c.beginPath()
|
||||
c.arc(0, headY - 2.5, 8.5, Math.PI * 1.05, -Math.PI * 0.05)
|
||||
c.quadraticCurveTo(0, headY - 7, -8.2, headY - 3.6)
|
||||
c.closePath()
|
||||
c.fill()
|
||||
c.beginPath()
|
||||
c.moveTo(-5.5, headY - 9)
|
||||
c.lineTo(-5.5, headY - 14)
|
||||
c.lineTo(-2.8, headY - 10.5)
|
||||
c.lineTo(0, headY - 15.5)
|
||||
c.lineTo(2.8, headY - 10.5)
|
||||
c.lineTo(5.5, headY - 14)
|
||||
c.lineTo(5.5, headY - 9)
|
||||
c.closePath()
|
||||
fs(c, '#e8c14d', '#8e6a14', 1.4)
|
||||
}
|
||||
}
|
||||
|
||||
// 手持工具（在前臂末端坐标系内绘制）
|
||||
function drawTool(c, toolCode) {
|
||||
if (!toolCode) return
|
||||
c.save()
|
||||
c.translate(0, 11)
|
||||
c.rotate(-0.5)
|
||||
if (toolCode === 'shovel') {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 3
|
||||
c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -14); c.stroke()
|
||||
c.beginPath()
|
||||
c.moveTo(-4, -14)
|
||||
c.quadraticCurveTo(0, -24, 4, -14)
|
||||
c.closePath()
|
||||
fs(c, '#9aa0a8', '#1d1409', 1.4)
|
||||
} else if (toolCode === 'tentaclespike') {
|
||||
c.strokeStyle = '#6b4a7e'
|
||||
c.lineWidth = 3.4
|
||||
c.beginPath(); c.moveTo(0, 6); c.quadraticCurveTo(2, -8, 0, -20); c.stroke()
|
||||
c.fillStyle = '#e8e2d4'
|
||||
;[[0, -8], [1, -14]].forEach(([x, y]) => {
|
||||
c.beginPath(); c.moveTo(x, y); c.lineTo(x + 4, y - 1); c.lineTo(x + 1, y - 4); c.closePath(); c.fill()
|
||||
})
|
||||
} else if (toolCode === 'torch') {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 3
|
||||
c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -12); c.stroke()
|
||||
c.beginPath()
|
||||
c.moveTo(0, -20)
|
||||
c.quadraticCurveTo(5, -13, 0, -10)
|
||||
c.quadraticCurveTo(-5, -13, 0, -20)
|
||||
fs(c, '#f0923c', '#b5541e', 1.2)
|
||||
} else if (toolCode === 'axe') {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 3
|
||||
c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -13); c.stroke()
|
||||
c.beginPath()
|
||||
c.moveTo(0, -13); c.lineTo(8, -10); c.lineTo(7, -4); c.lineTo(0, -7)
|
||||
c.closePath()
|
||||
fs(c, '#9aa0a8', '#1d1409', 1.4)
|
||||
} else if (toolCode === 'pick') {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 3
|
||||
c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -13); c.stroke()
|
||||
c.beginPath()
|
||||
c.moveTo(-7, -12)
|
||||
c.quadraticCurveTo(0, -19, 7, -12)
|
||||
c.quadraticCurveTo(0, -15, -7, -12)
|
||||
fs(c, '#9aa0a8', '#1d1409', 1.4)
|
||||
} else if (toolCode === 'spear') {
|
||||
c.strokeStyle = '#7a5b33'
|
||||
c.lineWidth = 2.8
|
||||
c.beginPath(); c.moveTo(0, 8); c.lineTo(0, -16); c.stroke()
|
||||
c.beginPath()
|
||||
c.moveTo(-2.6, -15); c.lineTo(0, -23); c.lineTo(2.6, -15)
|
||||
c.closePath()
|
||||
fs(c, '#b0b4bc', '#1d1409', 1.4)
|
||||
}
|
||||
c.restore()
|
||||
}
|
||||
|
||||
// 通用人物绘制：以脚底 (0,0) 为原点，头顶约 -32px
|
||||
// pose = { dir, walking, walkT, swing, breathe, toolCode, ghost, time, act, fall }
|
||||
// act: 动作分化（chop 横劈 / mine 上凿下砸 / dig 下铲 / attack 突刺 / eat 抬手进食），swing 1→0 驱动
|
||||
// fall: 死亡倒地进度 0→1（倒完后由调用方切换为幽灵形态）
|
||||
export function drawPlayerFig(c, skin, pose = {}) {
|
||||
const { dir = 1, walking = false, walkT = 0, swing = 0, breathe = 0, toolCode = '', ghost = false, time = 0, act = '', fall = 0 } = pose
|
||||
c.save()
|
||||
c.scale(dir, 1)
|
||||
c.lineJoin = 'round'
|
||||
c.lineCap = 'round'
|
||||
if (!ghost && fall > 0) {
|
||||
// 死亡倒地：绕脚底向后倒 + 渐隐
|
||||
c.rotate(fall * 1.4)
|
||||
c.globalAlpha = 1 - fall * 0.35
|
||||
}
|
||||
if (ghost) {
|
||||
// 幽灵形态：半透明白影摇曳 + 黑点眼（复刻原版幽灵）
|
||||
const wob = Math.sin(time * 2.4) * 1.6
|
||||
c.globalAlpha = 0.55
|
||||
c.beginPath()
|
||||
c.moveTo(0, -30)
|
||||
c.bezierCurveTo(12, -28, 13, -10, 10 + wob, 2)
|
||||
c.quadraticCurveTo(6, 8, 2, 3)
|
||||
c.quadraticCurveTo(0, 8, -2, 3)
|
||||
c.quadraticCurveTo(-6, 8, -10 - wob, 2)
|
||||
c.bezierCurveTo(-13, -10, -12, -28, 0, -30)
|
||||
fs(c, '#e9ecf4', 'rgba(120,130,160,0.8)', 1.6)
|
||||
c.fillStyle = '#2a2a3a'
|
||||
c.beginPath()
|
||||
c.arc(-3.4, -20, 1.6, 0, 7)
|
||||
c.arc(3.4, -20, 1.6, 0, 7)
|
||||
c.fill()
|
||||
c.globalAlpha = 1
|
||||
c.restore()
|
||||
return
|
||||
}
|
||||
const walkSwing = walking ? Math.sin(walkT * 11) : 0
|
||||
// 腿（深灰裤）
|
||||
c.strokeStyle = '#2b2b33'
|
||||
c.lineWidth = 4.4
|
||||
c.beginPath()
|
||||
c.moveTo(-3, 2)
|
||||
c.lineTo(-3 + walkSwing * 4.5, 15)
|
||||
c.moveTo(3, 2)
|
||||
c.lineTo(3 - walkSwing * 4.5, 15)
|
||||
c.stroke()
|
||||
// 鞋
|
||||
c.fillStyle = '#1d1409'
|
||||
c.beginPath()
|
||||
c.ellipse(-3 + walkSwing * 4.5, 16, 3.4, 2, 0, 0, 7)
|
||||
c.ellipse(3 - walkSwing * 4.5, 16, 3.4, 2, 0, 0, 7)
|
||||
c.fill()
|
||||
// 身体：衬衫 + 两片马甲
|
||||
c.beginPath()
|
||||
c.moveTo(-6, -14 + breathe)
|
||||
c.lineTo(6, -14 + breathe)
|
||||
c.lineTo(7, 4)
|
||||
c.lineTo(-7, 4)
|
||||
c.closePath()
|
||||
fs(c, skin.shirtColor, '#1d1409', 1.8)
|
||||
c.beginPath()
|
||||
c.moveTo(-6.6, -14 + breathe)
|
||||
c.lineTo(-2, -13 + breathe)
|
||||
c.lineTo(-2.6, 4)
|
||||
c.lineTo(-7, 4)
|
||||
c.closePath()
|
||||
fs(c, skin.vestColor, '#1d1409', 1.6)
|
||||
c.beginPath()
|
||||
c.moveTo(6.6, -14 + breathe)
|
||||
c.lineTo(2, -13 + breathe)
|
||||
c.lineTo(2.6, 4)
|
||||
c.lineTo(7, 4)
|
||||
c.closePath()
|
||||
fs(c, skin.vestColor, '#1d1409', 1.6)
|
||||
// 后臂（随走路摆）
|
||||
c.strokeStyle = skin.shirtColor
|
||||
c.lineWidth = 3.6
|
||||
c.beginPath()
|
||||
c.moveTo(-5, -11 + breathe)
|
||||
c.lineTo(-7 - walkSwing * 3, -1 + Math.abs(walkSwing))
|
||||
c.stroke()
|
||||
// 头
|
||||
const headY = -22 + breathe
|
||||
c.beginPath()
|
||||
c.arc(0, headY, 8.4, 0, 7)
|
||||
fs(c, skin.skinTone, '#1d1409', 1.8)
|
||||
// 发型
|
||||
drawHair(c, skin, headY)
|
||||
// 眼睛（竖点）+ 嘴
|
||||
c.strokeStyle = '#1d1409'
|
||||
c.lineWidth = 1.8
|
||||
c.beginPath()
|
||||
c.moveTo(2.4, headY - 2)
|
||||
c.lineTo(2.4, headY + 0.6)
|
||||
c.moveTo(6.4, headY - 2)
|
||||
c.lineTo(6.4, headY + 0.6)
|
||||
c.stroke()
|
||||
c.lineWidth = 1.4
|
||||
c.beginPath()
|
||||
c.arc(4.6, headY + 3.4, 2, 0.3, Math.PI - 0.5)
|
||||
c.stroke()
|
||||
// 前臂 + 手持工具：挥击动作由 swing(1→0) 驱动，act 决定挥法
|
||||
let swingAng = -0.35 + walkSwing * 0.32
|
||||
let thrust = 0
|
||||
if (swing > 0) {
|
||||
const t = 1 - swing
|
||||
if (act === 'mine' || act === 'dig') swingAng = -2.7 + t * 3.2 // 高举下砸/下铲
|
||||
else if (act === 'attack') { swingAng = -1.05; thrust = Math.sin(t * Math.PI) * 8 } // 平持突刺
|
||||
else if (act === 'eat') swingAng = -0.4 - Math.sin(t * Math.PI) * 1.95 // 抬手到嘴边
|
||||
else swingAng = -2.1 + t * 2.7 // 砍树/通用横劈
|
||||
}
|
||||
c.save()
|
||||
c.translate(5 + thrust, -11 + breathe)
|
||||
c.rotate(swingAng)
|
||||
c.strokeStyle = skin.shirtColor
|
||||
c.lineWidth = 3.6
|
||||
c.beginPath()
|
||||
c.moveTo(0, 0)
|
||||
c.lineTo(0, 11)
|
||||
c.stroke()
|
||||
drawTool(c, toolCode)
|
||||
c.restore()
|
||||
c.restore()
|
||||
}
|
||||
|
||||
// 离屏渲染 72px 立绘 dataURL（更衣室/房间座位预览用，带缓存）
|
||||
const previewCache = {}
|
||||
export function renderSkinPreview(code, size = 72) {
|
||||
const key = code + '@' + size
|
||||
if (previewCache[key]) return previewCache[key]
|
||||
const skin = skinByCode(code)
|
||||
const cv = document.createElement('canvas')
|
||||
cv.width = size
|
||||
cv.height = size
|
||||
const c = cv.getContext('2d')
|
||||
c.translate(size / 2, size * 0.86)
|
||||
const scale = size / 52
|
||||
c.scale(scale, scale)
|
||||
drawPlayerFig(c, skin, { dir: 1 })
|
||||
const url = cv.toDataURL()
|
||||
previewCache[key] = url
|
||||
return url
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Logo -->
|
||||
<img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
|
||||
<span class="font-bold">My App</span>
|
||||
</div>
|
||||
|
||||
<!-- Menu -->
|
||||
<nav class="hidden md:flex space-x-4">
|
||||
<a href="#" class="hover:text-gray-300">首页</a>
|
||||
<a href="#" class="hover:text-gray-300">About</a>
|
||||
<a href="#" class="hover:text-gray-300">Services</a>
|
||||
<a href="#" class="hover:text-gray-300">Contact</a>
|
||||
</nav>
|
||||
|
||||
<!-- User Profile -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="text-sm bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
|
||||
Personal Center
|
||||
</button>
|
||||
<img src="https://via.placeholder.com/40" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user