// globalConfig.js // ============================================================================ // ============================================================================ // 提供整个程序使用的全局变量。 // 这其中的大部分内容应该是配置。 // 整个游戏引擎的时间倍速乘数。 // 后来江枫团队决定优化本游戏并达到稳定且很好的运行。 // 江枫在2025.04.2日开始优化汉化版 2025.08.18停止汉化 // 2025.7.21 22.52 本次更新 let gameSpeed = 1; // 颜色 const BLUE = { r: 0x67, g: 0xd7, b: 0xf0 }; const GREEN = { r: 0xa6, g: 0xe0, b: 0x2c }; const PINK = { r: 0xfa, g: 0x24, b: 0x73 }; const ORANGE = { r: 0xfe, g: 0x95, b: 0x22 }; const allColors = [BLUE, GREEN, PINK, ORANGE]; // 游戏玩法初始化 const getSpawnDelay = () => { const spawnDelayMax = 1400; const spawnDelayMin = 550; const spawnDelay = spawnDelayMax - state.game.cubeCount * 3.1; return Math.max(spawnDelay, spawnDelayMin); } const doubleStrongEnableScore = 2000; // 在发射某个方块之前必须粉碎的立方体数量。 const slowmoThreshold = 10; const strongThreshold = 25; const spinnerThreshold = 25; // 交互状态 let pointerIsDown = false; // 主要指针在屏幕坐标中的上一次已知位置。 let pointerScreen = { x: 0, y: 0 }; // 与 pointerScreen 相同，但在 rAF（requestAnimationFrame）中转换为场景坐标 let pointerScene = { x: 0, y: 0 }; // 指针在被计为‘滑动’之前的最小速度。 const minPointerSpeed = 60; // 点击速度会影响目标被击中后的方向。这个数值会减弱游戏数度。 const hitDampening = 0.1; // 篮板接收阴影，并且是实体在 Z 轴上最远的负方向位置。 const backboardZ = -400; const shadowColor = '#262e36'; // 必须到目标值才能被粉碎。 const airDrag = 0.022; const gravity = 0.3; // 江枫配置 const sparkColor = 'rgba(170,221,255,.9)'; const sparkThickness = 2.2; const airDragSpark = 0.1; // 跟踪指针位置以显示轨迹 const touchTrailColor = 'rgba(170,221,255,.62)'; const touchTrailThickness = 7; const touchPointLife = 120; const touchPoints = []; // 游戏内目标的大小。这会影响渲染的大小和命中区域。 const targetRadius = 40; const targetHitRadius = 50; const makeTargetGlueColor = target => { // 计算目标对象的透明度（alpha 值），公式是（目标生命值 - 1）除以（目标最大生命值 - 1）; // rgba(170,221,255,${alpha.toFixed(3)}) // 返回一个 rgba 颜色值，其中红色、绿色、蓝色的值分别是 170、221、255，透明度（alpha）取 alpha 变量的值并保留三位小数。; return 'rgb(170,221,255)'; }; // 目标碎片的大小 const fragRadius = targetRadius / 3; // 在 setup.js 和 interaction.js 中需要游戏画布元素 const canvas = document.querySelector('#c'); // 三维摄像机配置 // 适配影响透视效果 const cameraDistance = 900; // 不影响透视效果 const sceneScale = 1; // 在这个距离范围内，离摄像机过近的物体会逐渐变为透明状态。 // const cameraFadeStartZ = 0.8*cameraDistance - 6*targetRadius; 代码解释： // 定义一个名为 “cameraFadeStartZ” 的常量，其值等于摄像机距离（cameraDistance）乘以 0.8，再减去目标半径（targetRadius）的 6 倍。这个公式通常用于计算摄像机淡出效果的起始位置，当物体在这个范围内时会逐渐变为透明。 const cameraFadeStartZ = 0.45 * cameraDistance; const cameraFadeEndZ = 0.65 * cameraDistance; const cameraFadeRange = cameraFadeEndZ - cameraFadeStartZ; // 全局变量，用于累积每帧中的所有顶点和多边形。 const allVertices = []; const allPolys = []; const allShadowVertices = []; const allShadowPolys = []; // state.js // ============================================================================ // ============================================================================ /////////// // 枚举 // /////////// // 全局状态 const GAME_MODE_RANKED = Symbol('GAME_MODE_RANKED'); const GAME_MODE_CASUAL = Symbol('GAME_MODE_CASUAL'); // 可用菜单 const MENU_MAIN = Symbol('MENU_MAIN'); const MENU_PAUSE = Symbol('MENU_PAUSE'); const MENU_SCORE = Symbol('MENU_SCORE'); ////////////////// // 全局状态 // ////////////////// const state = { game: { mode: GAME_MODE_RANKED, // 当前游戏的运行时间。 time: 0, // Player score. score: 0, // 游戏中被打碎的立方体总数。 cubeCount: 0 }, menus: { // 设置为 null 以隐藏所有菜单 active: MENU_MAIN } }; //////////////////////////// // 全局状态选择器 // //////////////////////////// const isInGame = () => !state.menus.active; const isMenuVisible = () => !!state.menus.active; const isCasualGame = () => state.game.mode === GAME_MODE_CASUAL; const isPaused = () => state.menus.active === MENU_PAUSE; /////////////////// // 本地存储 // /////////////////// const highScoreKey = '__menja__highScore'; const getHighScore = () => { const raw = localStorage.getItem(highScoreKey); return raw ? parseInt(raw, 10) : 0; }; const setHighScore = score => localStorage.setItem(highScoreKey, String(score)) // utils.js // ============================================================================ // ============================================================================ const invariant = (condition, message) => { if (!condition) throw new Error(message); }; ///////// // DOM // ///////// const $ = selector => document.querySelector(selector); const handleClick = (element, handler) => element.addEventListener('click', handler); const handlePointerDown = (element, handler) => { element.addEventListener('touchstart', handler); element.addEventListener('mousedown', handler); }; //////////////////////// // 格式化辅助工具 // //////////////////////// // Converts a number into a formatted string with thousand separators. const formatNumber = num => num.toLocaleString(); //////////////////// // 数学常量 // //////////////////// const PI = Math.PI; const TAU = Math.PI * 2; const ETA = Math.PI * 0.5; ////////////////// // 数学辅助工具 // ////////////////// // 将数值限制在最小值和最大值之间（包括边界值） const clamp = (num, min, max) => Math.min(Math.max(num, min), max); // 通过特定的比例在线性范围内在数字 a 和 b 之间进行插值。 // mix >= 0 && mix <= 1 const lerp = (a, b, mix) => (b - a) * mix + a; //////////////////// // 伪随机辅助 // //////////////////// // 生成一个在最小值（包含）和最大值（不包含）之间的随机数 const random = (min, max) => Math.random() * (max - min) + min; // 生成一个介于最小值和最大值之间的随机整数，可能包含这两个边界值 const randomInt = (min, max) => ((Math.random() * (max - min + 1)) | 0) + min; // 从数组中返回一个随机元素 const pickOne = arr => arr[Math.random() * arr.length | 0]; /////////////////// // 颜色辅助工具 // /////////////////// // 将一个 { r, g, b } 颜色对象转换为一个6位的十六进制代码。 const colorToHex = color => { return '#' + (color.r | 0).toString(16).padStart(2, '0') + (color.g | 0).toString(16).padStart(2, '0') + (color.b | 0).toString(16).padStart(2, '0'); }; // 在 { r, g, b } 颜色对象上进行操作。 // 返回字符串形式的十六进制代码 // 亮度必须在 0 到 1 之间。0 表示纯黑色，1 表示纯白色。 const shadeColor = (color, lightness) => { let other, mix; if (lightness < 0.5) { other = 0; mix = 1 - (lightness * 2); } else { other = 255; mix = lightness * 2 - 1; } return '#' + (lerp(color.r, other, mix) | 0).toString(16).padStart(2, '0') + (lerp(color.g, other, mix) | 0).toString(16).padStart(2, '0') + (lerp(color.b, other, mix) | 0).toString(16).padStart(2, '0'); }; //////////////////// // 时间辅助工具 // //////////////////// const _allCooldowns = []; const makeCooldown = (rechargeTime, units = 1) => { let timeRemaining = 0; let lastTime = 0; const initialOptions = { rechargeTime, units }; const updateTime = () => { const now = state.game.time; // 如果时间出现倒退的情况，那么就重新设置剩余的时间。 if (now < lastTime) { timeRemaining = 0; } else { // 更新方块... timeRemaining -= now - lastTime; if (timeRemaining < 0) timeRemaining = 0; } lastTime = now; }; const canUse = () => { updateTime(); return timeRemaining <= (rechargeTime * (units - 1)); }; const cooldown = { canUse, useIfAble() { const usable = canUse(); if (usable) timeRemaining += rechargeTime; return usable; }, mutate(options) { if (options.rechargeTime) { // 应用充值时间增量，以便更改立即生效 timeRemaining -= rechargeTime - options.rechargeTime; if (timeRemaining < 0) timeRemaining = 0; rechargeTime = options.rechargeTime; } if (options.units) units = options.units; }, reset() { timeRemaining = 0; lastTime = 0; this.mutate(initialOptions); } }; _allCooldowns.push(cooldown); return cooldown; }; const resetAllCooldowns = () => _allCooldowns.forEach(cooldown => cooldown.reset()); const makeSpawner = ({ chance, cooldownPerSpawn, maxSpawns }) => { const cooldown = makeCooldown(cooldownPerSpawn, maxSpawns); return { shouldSpawn() { return Math.random() <= chance && cooldown.useIfAble(); }, mutate(options) { if (options.chance) chance = options.chance; cooldown.mutate({ rechargeTime: options.cooldownPerSpawn, units: options.maxSpawns }); } }; }; //////////////////// // 向量辅助工具 // //////////////////// const normalize = v => { const mag = Math.hypot(v.x, v.y, v.z); return { x: v.x / mag, y: v.y / mag, z: v.z / mag }; } // 柯里化数学助手 const add = a => b => a + b; // Curried vector helpers const scaleVector = scale => vector => { vector.x *= scale; vector.y *= scale; vector.z *= scale; }; //////////////// // 3D辅助 // //////////////// // 克隆数组以及所有顶点 function cloneVertices(vertices) { return vertices.map(v => ({ x: v.x, y: v.y, z: v.z })); } // 将一个数组中的顶点数据复制到另一个数组中 // 数组的长度必须相同 function copyVerticesTo(arr1, arr2) { const len = arr1.length; for (let i = 0; i < len; i++) { const v1 = arr1[i]; const v2 = arr2[i]; v2.x = v1.x; v2.y = v1.y; v2.z = v1.z; } } // 计算三角形的中点 // 改变给定poly的middle属性 function computeTriMiddle(poly) { const v = poly.vertices; poly.middle.x = (v[0].x + v[1].x + v[2].x) / 3; poly.middle.y = (v[0].y + v[1].y + v[2].y) / 3; poly.middle.z = (v[0].z + v[1].z + v[2].z) / 3; } // 计算四边形的中点 // 改变给定poly的middle属性 function computeQuadMiddle(poly) { const v = poly.vertices; poly.middle.x = (v[0].x + v[1].x + v[2].x + v[3].x) / 4; poly.middle.y = (v[0].y + v[1].y + v[2].y + v[3].y) / 4; poly.middle.z = (v[0].z + v[1].z + v[2].z + v[3].z) / 4; } function computePolyMiddle(poly) { if (poly.vertices.length === 3) { computeTriMiddle(poly); } else { computeQuadMiddle(poly); } } // 计算任意多边形（三角形或四边形）的中点到摄像机的距离 // 设置给定poly的depth属性” // 还会触发中点计算，这个计算过程会改变poly对象的middle属性。 function computePolyDepth(poly) { computePolyMiddle(poly); const dX = poly.middle.x; const dY = poly.middle.y; const dZ = poly.middle.z - cameraDistance; poly.depth = Math.hypot(dX, dY, dZ); } // 计算任意多边形的法向量。使用归一化的向量叉乘。 // 改变给定poly的normalName属性” function computePolyNormal(poly, normalName) { // Store quick refs to vertices const v1 = poly.vertices[0]; const v2 = poly.vertices[1]; const v3 = poly.vertices[2]; // 按照绕序计算顶点的差值 const ax = v1.x - v2.x; const ay = v1.y - v2.y; const az = v1.z - v2.z; const bx = v1.x - v3.x; const by = v1.y - v3.y; const bz = v1.z - v3.z; // Cross product 向量积 const nx = ay * bz - az * by; const ny = az * bx - ax * bz; const nz = ax * by - ay * bx; // 计算法线的大小并进行归一化 const mag = Math.hypot(nx, ny, nz); const polyNormal = poly[normalName]; polyNormal.x = nx / mag; polyNormal.y = ny / mag; polyNormal.z = nz / mag; } // 对所有给定的顶点应用平移/旋转/缩放操作 // 如果vertices（顶点数组）和target（目标数组）是同一个数组，那么vertices中的顶点数据将会在原地（即在原数组中）被修改。 // 如果 vertices 和 target 是不同的数组，那么 vertices 不会被修改，相反，会修改另一个东西 // 从vertices中转换得到的值将被写入target数组。 function transformVertices(vertices, target, tX, tY, tZ, rX, rY, rZ, sX, sY, sZ) { // 矩阵乘法中的常数项只需要计算一次，即可用于所有顶点。 const sinX = Math.sin(rX); const cosX = Math.cos(rX); const sinY = Math.sin(rY); const cosY = Math.cos(rY); const sinZ = Math.sin(rZ); const cosZ = Math.cos(rZ); // 使用 map() 一样使用 forEach()，但使用一个（可复用的）目标数组 vertices.forEach((v, i) => { const targetVertex = target[i]; // X axis rotation X轴旋转 const x1 = v.x; const y1 = v.z * sinX + v.y * cosX; const z1 = v.z * cosX - v.y * sinX; // Y axis rotation Y轴旋转 const x2 = x1 * cosY - z1 * sinY; const y2 = y1; const z2 = x1 * sinY + z1 * cosY; // Z axis rotation X轴旋转 const x3 = x2 * cosZ - y2 * sinZ; const y3 = x2 * sinZ + y2 * cosZ; const z3 = z2; // 缩放、平移并设置变换。 targetVertex.x = x3 * sX + tX; targetVertex.y = y3 * sY + tY; targetVertex.z = z3 * sZ + tZ; }); } // 3D projection on a single vertex. (字面意思) // 直接修改顶点 const projectVertex = v => { const focalLength = cameraDistance * sceneScale; const depth = focalLength / (cameraDistance - v.z); v.x = v.x * depth; v.y = v.y * depth; }; // 3D projection on a single vertex. (字面意思) // 修改次要目标顶点的数据 const projectVertexTo = (v, target) => { const focalLength = cameraDistance * sceneScale; const depth = focalLength / (cameraDistance - v.z); target.x = v.x * depth; target.y = v.y * depth; }; // PERF.js // ============================================================================ // ============================================================================ // 空操作哑函数 // 我将这些函数用于特殊构建版本，以实现自定义性能分析 const PERF_START = () => { }; const PERF_END = () => { }; const PERF_UPDATE = () => { }; // 3dModels.js // ============================================================================ // ============================================================================ // 定义一次模型。原点是模型的中心 // 一个简单的立方体，8 个顶点，6 个四边形 // 默认边长为 2 个单位，可以通过 `scale` 来调整 function makeCubeModel({ scale = 1 }) { return { vertices: [ // top { x: -scale, y: -scale, z: scale }, { x: scale, y: -scale, z: scale }, { x: scale, y: scale, z: scale }, { x: -scale, y: scale, z: scale }, // bottom { x: -scale, y: -scale, z: -scale }, { x: scale, y: -scale, z: -scale }, { x: scale, y: scale, z: -scale }, { x: -scale, y: scale, z: -scale } ], polys: [ // z = 1 { vIndexes: [0, 1, 2, 3] }, // z = -1 { vIndexes: [7, 6, 5, 4] }, // y = 1 { vIndexes: [3, 2, 6, 7] }, // y = -1 { vIndexes: [4, 5, 1, 0] }, // x = 1 { vIndexes: [5, 6, 2, 1] }, // x = -1 { vIndexes: [0, 3, 7, 4] } ] }; } // 优化程度不足——生成了大量重复的顶点数据 function makeRecursiveCubeModel({ recursionLevel, splitFn, color, scale = 1 }) { const getScaleAtLevel = level => 1 / (3 ** level); // 我们可以手动建模第 0 级。它只是一个单一的、居中的立方体 let cubeOrigins = [{ x: 0, y: 0, z: 0 }]; // 递归地用较小的立方体替换立方体 for (let i = 1; i <= recursionLevel; i++) { const scale = getScaleAtLevel(i) * 2; const cubeOrigins2 = []; cubeOrigins.forEach(origin => { cubeOrigins2.push(...splitFn(origin, scale)); }); cubeOrigins = cubeOrigins2; } const finalModel = { vertices: [], polys: [] }; // 生成一个立方体模型并对其进行缩放 const cubeModel = makeCubeModel({ scale: 1 }); cubeModel.vertices.forEach(scaleVector(getScaleAtLevel(recursionLevel))); // 计算原点的 x、y 或 z 值将到达的最大距离 // 与 `Math.max(...cubeOrigins.map(o => o.x))` 得出的结果相同，但速度要快得多 const maxComponent = getScaleAtLevel(recursionLevel) * (3 ** recursionLevel - 1); // 在每个原点放置立方体几何体 cubeOrigins.forEach((origin, cubeIndex) => { // 要计算遮挡（阴影），找出最大的原点分 // 找出原点分量的绝对值最大的，并将其归一化到 `maxComponent` 相对大小 const occlusion = Math.max( Math.abs(origin.x), Math.abs(origin.y), Math.abs(origin.z) ) / maxComponent; // 在较低的迭代次数下，遮挡效果看起来更好一些，可以稍微调亮 const occlusionLighter = recursionLevel > 2 ? occlusion : (occlusion + 0.8) / 1.8; // 克隆、将顶点平移到原点并应用缩放 finalModel.vertices.push( ...cubeModel.vertices.map(v => ({ x: (v.x + origin.x) * scale, y: (v.y + origin.y) * scale, z: (v.z + origin.z) * scale })) ); // 克隆多边形，移动引用的顶点索引，并计算颜色 finalModel.polys.push( ...cubeModel.polys.map(poly => ({ vIndexes: poly.vIndexes.map(add(cubeIndex * 8)) })) ); }); return finalModel; } // o: Vector3D - 立方体原点（中心）的位置 // s: Vector3D - 确定门格尔海绵的大小 function mengerSpongeSplit(o, s) { return [ // 顶部 { x: o.x + s, y: o.y - s, z: o.z + s }, { x: o.x + s, y: o.y - s, z: o.z + 0 }, { x: o.x + s, y: o.y - s, z: o.z - s }, { x: o.x + 0, y: o.y - s, z: o.z + s }, { x: o.x + 0, y: o.y - s, z: o.z - s }, { x: o.x - s, y: o.y - s, z: o.z + s }, { x: o.x - s, y: o.y - s, z: o.z + 0 }, { x: o.x - s, y: o.y - s, z: o.z - s }, // 底部 { x: o.x + s, y: o.y + s, z: o.z + s }, { x: o.x + s, y: o.y + s, z: o.z + 0 }, { x: o.x + s, y: o.y + s, z: o.z - s }, { x: o.x + 0, y: o.y + s, z: o.z + s }, { x: o.x + 0, y: o.y + s, z: o.z - s }, { x: o.x - s, y: o.y + s, z: o.z + s }, { x: o.x - s, y: o.y + s, z: o.z + 0 }, { x: o.x - s, y: o.y + s, z: o.z - s }, // 中间 { x: o.x + s, y: o.y + 0, z: o.z + s }, { x: o.x + s, y: o.y + 0, z: o.z - s }, { x: o.x - s, y: o.y + 0, z: o.z + s }, { x: o.x - s, y: o.y + 0, z: o.z - s } ]; } // 用于通过在阈值范围内合并重复顶点来优化模型的助手函数 // 以及删除所有共享相同顶点的多边形 // 直接修改模型 function optimizeModel(model, threshold = 0.0001) { const { vertices, polys } = model; const compareVertices = (v1, v2) => ( Math.abs(v1.x - v2.x) < threshold && Math.abs(v1.y - v2.y) < threshold && Math.abs(v1.z - v2.z) < threshold ); const comparePolys = (p1, p2) => { const v1 = p1.vIndexes; const v2 = p2.vIndexes; return ( ( v1[0] === v2[0] || v1[0] === v2[1] || v1[0] === v2[2] || v1[0] === v2[3] ) && ( v1[1] === v2[0] || v1[1] === v2[1] || v1[1] === v2[2] || v1[1] === v2[3] ) && ( v1[2] === v2[0] || v1[2] === v2[1] || v1[2] === v2[2] || v1[2] === v2[3] ) && ( v1[3] === v2[0] || v1[3] === v2[1] || v1[3] === v2[2] || v1[3] === v2[3] ) ); }; vertices.forEach((v, i) => { v.originalIndexes = [i]; }); for (let i = vertices.length - 1; i >= 0; i--) { for (let ii = i - 1; ii >= 0; ii--) { const v1 = vertices[i]; const v2 = vertices[ii]; if (compareVertices(v1, v2)) { vertices.splice(i, 1); v2.originalIndexes.push(...v1.originalIndexes); break; } } } vertices.forEach((v, i) => { polys.forEach(p => { p.vIndexes.forEach((vi, ii, arr) => { const vo = v.originalIndexes; if (vo.includes(vi)) { arr[ii] = i; } }); }); }); polys.forEach(p => { const vi = p.vIndexes; p.sum = vi[0] + vi[1] + vi[2] + vi[3]; }); polys.sort((a, b) => b.sum - a.sum); // 假设： // 1. 每个多边形要么没有重复，要么有 1 个重复 // 2. 如果两个多边形相等，那么它们都是隐藏的（两个立方体接触） // 因此都可以被移除 for (let i = polys.length - 1; i >= 0; i--) { for (let ii = i - 1; ii >= 0; ii--) { const p1 = polys[i]; const p2 = polys[ii]; if (p1.sum !== p2.sum) break; if (comparePolys(p1, p2)) { polys.splice(i, 1); polys.splice(ii, 1); i--; break; } } } return model; } // Entity.js // ============================================================================ // ============================================================================ class Entity { constructor({ model, color, wireframe = false }) { const vertices = cloneVertices(model.vertices); const shadowVertices = cloneVertices(model.vertices); const colorHex = colorToHex(color); const darkColorHex = shadeColor(color, 0.4); const polys = model.polys.map(p => ({ vertices: p.vIndexes.map(vIndex => vertices[vIndex]), color: color, // 自定义 rgb 颜色对象 wireframe: wireframe, strokeWidth: wireframe ? 2 : 0, // 设置为非零值以绘制描边 strokeColor: colorHex, // 必须是 CSS 颜色字符串 strokeColorDark: darkColorHex, // 必须是 CSS 颜色字符串 depth: 0, middle: { x: 0, y: 0, z: 0 }, normalWorld: { x: 0, y: 0, z: 0 }, normalCamera: { x: 0, y: 0, z: 0 } })); const shadowPolys = model.polys.map(p => ({ vertices: p.vIndexes.map(vIndex => shadowVertices[vIndex]), wireframe: wireframe, normalWorld: { x: 0, y: 0, z: 0 } })); this.projected = {}; // 将存储二维投影数据 this.model = model; this.vertices = vertices; this.polys = polys; this.shadowVertices = shadowVertices; this.shadowPolys = shadowPolys; this.reset(); } // 更好的命名：重置实体、重置变换、重置实体变换 reset() { this.x = 0; this.y = 0; this.z = 0; this.xD = 0; this.yD = 0; this.zD = 0; this.rotateX = 0; this.rotateY = 0; this.rotateZ = 0; this.rotateXD = 0; this.rotateYD = 0; this.rotateZD = 0; this.scaleX = 1; this.scaleY = 1; this.scaleZ = 1; this.projected.x = 0; this.projected.y = 0; } transform() { transformVertices( this.model.vertices, this.vertices, this.x, this.y, this.z, this.rotateX, this.rotateY, this.rotateZ, this.scaleX, this.scaleY, this.scaleZ ); copyVerticesTo(this.vertices, this.shadowVertices); } // 将原点点进行投影，存储为 `projected` 属性 project() { projectVertexTo(this, this.projected); } } // getTarget.js // ============================================================================ // ============================================================================ // 全部激活的目标 const targets = []; // 按照颜色对目标实例进行分组，使用映射（Map）来实现 // 键是颜色对象，值是目标数组。 // 另外，单独对线框实例进行分组 const targetPool = new Map(allColors.map(c => ([c, []]))); const targetWireframePool = new Map(allColors.map(c => ([c, []]))); const getTarget = (() => { const slowmoSpawner = makeSpawner({ chance: 0.5, cooldownPerSpawn: 10000, maxSpawns: 1 }); let doubleStrong = false; const strongSpawner = makeSpawner({ chance: 0.3, cooldownPerSpawn: 12000, maxSpawns: 1 }); const spinnerSpawner = makeSpawner({ chance: 0.1, cooldownPerSpawn: 10000, maxSpawns: 1 }); // 已缓存的数组实例，无需每次都分配内存 const axisOptions = [ ['x', 'y'], ['y', 'z'], ['z', 'x'] ]; function getTargetOfStyle(color, wireframe) { const pool = wireframe ? targetWireframePool : targetPool; let target = pool.get(color).pop(); if (!target) { target = new Entity({ model: optimizeModel(makeRecursiveCubeModel({ recursionLevel: 1, splitFn: mengerSpongeSplit, scale: targetRadius })), color: color, wireframe: wireframe }); // 初始化将要使用的任何属性。 // 这些属性在被回收时不会自动重置。 target.color = color; target.wireframe = wireframe; // 一些属性尚未确定其最终值。 // 用任何正确类型的值进行初始化 target.hit = false; target.maxHealth = 0; target.health = 0; } return target; } return function getTarget() { if (doubleStrong && state.game.score <= doubleStrongEnableScore) { doubleStrong = false; // 生成器在游戏重置时会自动重置 } else if (!doubleStrong && state.game.score > doubleStrongEnableScore) { doubleStrong = true; strongSpawner.mutate({ maxSpawns: 2 }); } // 目标参数 // -------------------------------- let color = pickOne([BLUE, GREEN, ORANGE]); let wireframe = false; let health = 1; let maxHealth = 3; const spinner = state.game.cubeCount >= spinnerThreshold && isInGame() && spinnerSpawner.shouldSpawn(); // 目标参数覆盖 // -------------------------------- if (state.game.cubeCount >= slowmoThreshold && slowmoSpawner.shouldSpawn()) { color = BLUE; wireframe = true; } else if (state.game.cubeCount >= strongThreshold && strongSpawner.shouldSpawn()) { color = PINK; health = 3; } // 目标创建 // -------------------------------- const target = getTargetOfStyle(color, wireframe); target.hit = false; target.maxHealth = maxHealth; target.health = health; updateTargetHealth(target, 0); const spinSpeeds = [ Math.random() * 0.1 - 0.05, Math.random() * 0.1 - 0.05 ]; if (spinner) { // 变成了绕着一个随机轴旋转 spinSpeeds[0] = -0.25; spinSpeeds[1] = 0; target.rotateZ = random(0, TAU); } const axes = pickOne(axisOptions); spinSpeeds.forEach((spinSpeed, i) => { switch (axes[i]) { case 'x': target.rotateXD = spinSpeed; break; case 'y': target.rotateYD = spinSpeed; break; case 'z': target.rotateZD = spinSpeed; break; } }); return target; } })(); const updateTargetHealth = (target, healthDelta) => { target.health += healthDelta; // 只在非线框目标上更新描边效果 // 当前显示的 '粘合效果'（glue）仅用于临时展示值目前没有理由让线框目标拥有高生命值 // 因此这个方案是可行的 if (!target.wireframe) { const strokeWidth = target.health - 1; const strokeColor = makeTargetGlueColor(target); for (let p of target.polys) { p.strokeWidth = strokeWidth; p.strokeColor = strokeColor; } } }; const returnTarget = target => { target.reset(); const pool = target.wireframe ? targetWireframePool : targetPool; pool.get(target.color).push(target); }; function resetAllTargets() { while (targets.length) { returnTarget(targets.pop()); } } // createBurst.js // ============================================================================ // ============================================================================ // 追踪所有活动中的方块碎片 const frags = []; // 使用 Map 结构按颜色池化非活跃碎片 // 键（keys）是颜色对象，值（values）是碎片组成的数组 // // 同时将线框实例单独进行池化管理 const fragPool = new Map(allColors.map(c => ([c, []]))); const fragWireframePool = new Map(allColors.map(c => ([c, []]))); const createBurst = (() => { // 预先计算一些要在所有突发中重复使用的私有数据 const basePositions = mengerSpongeSplit({ x: 0, y: 0, z: 0 }, fragRadius * 2); const positions = cloneVertices(basePositions); const prevPositions = cloneVertices(basePositions); const velocities = cloneVertices(basePositions); const basePositionNormals = basePositions.map(normalize); const positionNormals = cloneVertices(basePositionNormals); const fragCount = basePositions.length; function getFragForTarget(target) { const pool = target.wireframe ? fragWireframePool : fragPool; let frag = pool.get(target.color).pop(); if (!frag) { frag = new Entity({ model: makeCubeModel({ scale: fragRadius }), color: target.color, wireframe: target.wireframe }); frag.color = target.color; frag.wireframe = target.wireframe; } return frag; } return (target, force = 1) => { // 计算片段位置，以及之前的位置 // 当仍然是更大目标的一部分时 transformVertices( basePositions, positions, target.x, target.y, target.z, target.rotateX, target.rotateY, target.rotateZ, 1, 1, 1 ); transformVertices( basePositions, prevPositions, target.x - target.xD, target.y - target.yD, target.z - target.zD, target.rotateX - target.rotateXD, target.rotateY - target.rotateYD, target.rotateZ - target.rotateZD, 1, 1, 1 ); // 根据之前的位置计算每个片段的速度 // 将写入 'velocities' 数组 for (let i = 0; i < fragCount; i++) { const position = positions[i]; const prevPosition = prevPositions[i]; const velocity = velocities[i]; velocity.x = position.x - prevPosition.x; velocity.y = position.y - prevPosition.y; velocity.z = position.z - prevPosition.z; } // 将目标旋转应用于法线 transformVertices( basePositionNormals, positionNormals, 0, 0, 0, target.rotateX, target.rotateY, target.rotateZ, 1, 1, 1 ); for (let i = 0; i < fragCount; i++) { const position = positions[i]; const velocity = velocities[i]; const normal = positionNormals[i]; const frag = getFragForTarget(target); frag.x = position.x; frag.y = position.y; frag.z = position.z; frag.rotateX = target.rotateX; frag.rotateY = target.rotateY; frag.rotateZ = target.rotateZ; const burstSpeed = 2 * force; const randSpeed = 2 * force; const rotateScale = 0.015; frag.xD = velocity.x + (normal.x * burstSpeed) + (Math.random() * randSpeed); frag.yD = velocity.y + (normal.y * burstSpeed) + (Math.random() * randSpeed); frag.zD = velocity.z + (normal.z * burstSpeed) + (Math.random() * randSpeed); frag.rotateXD = frag.xD * rotateScale; frag.rotateYD = frag.yD * rotateScale; frag.rotateZD = frag.zD * rotateScale; frags.push(frag); }; } })(); const returnFrag = frag => { frag.reset(); const pool = frag.wireframe ? fragWireframePool : fragPool; pool.get(frag.color).push(frag); }; // sparks.js // ============================================================================ // ============================================================================ const sparks = []; const sparkPool = []; function addSpark(x, y, xD, yD) { const spark = sparkPool.pop() || {}; spark.x = x + xD * 0.5; spark.y = y + yD * 0.5; spark.xD = xD; spark.yD = yD; spark.life = random(200, 300); spark.maxLife = spark.life; sparks.push(spark); return spark; } // 球形火花爆发 function sparkBurst(x, y, count, maxSpeed) { const angleInc = TAU / count; for (let i = 0; i < count; i++) { const angle = i * angleInc + angleInc * Math.random(); const speed = (1 - Math.random() ** 3) * maxSpeed; addSpark( x, y, Math.sin(angle) * speed, Math.cos(angle) * speed ); } } // 使目标从所有顶点“泄漏”火花 // 这用于创建目标胶水“脱落”的效果 let glueShedVertices; function glueShedSparks(target) { if (!glueShedVertices) { glueShedVertices = cloneVertices(target.vertices); } else { copyVerticesTo(target.vertices, glueShedVertices); } glueShedVertices.forEach(v => { if (Math.random() < 0.4) { projectVertex(v); addSpark( v.x, v.y, random(-12, 12), random(-12, 12) ); } }); } function returnSpark(spark) { sparkPool.push(spark); } // hud.js // ============================================================================ // ============================================================================ const hudContainerNode = $('.hud'); function setHudVisibility(visible) { if (visible) { hudContainerNode.style.display = 'block'; } else { hudContainerNode.style.display = 'none'; } } /////////// // 得分 // /////////// const scoreNode = $('.score-lbl'); const cubeCountNode = $('.cube-count-lbl'); function renderScoreHud() { if (isCasualGame()) { scoreNode.style.display = 'none'; cubeCountNode.style.opacity = 1; } else { scoreNode.innerText = `得分: ${state.game.score}`; scoreNode.style.display = 'block'; cubeCountNode.style.opacity = 0.65; } cubeCountNode.innerText = `当前已切快: ${state.game.cubeCount}`; } renderScoreHud(); ////////////////// // 暂停按钮 // ////////////////// handlePointerDown($('.pause-btn'), () => pauseGame()); //////////////////// // 慢动作状态 // //////////////////// const slowmoNode = $('.slowmo'); const slowmoBarNode = $('.slowmo__bar'); function renderSlowmoStatus(percentRemaining) { slowmoNode.style.opacity = percentRemaining === 0 ? 0 : 1; slowmoBarNode.style.transform = `scaleX(${percentRemaining.toFixed(3)})`; } // menus.js // ============================================================================ // ============================================================================ // 顶级菜单容器 const menuContainerNode = $('.menus'); const menuMainNode = $('.menu--main'); const menuPauseNode = $('.menu--pause'); const menuScoreNode = $('.menu--score'); const finalScoreLblNode = $('.final-score-lbl'); const highScoreLblNode = $('.high-score-lbl'); function showMenu(node) { node.classList.add('active'); } function hideMenu(node) { node.classList.remove('active'); } function renderMenus() { hideMenu(menuMainNode); hideMenu(menuPauseNode); hideMenu(menuScoreNode); switch (state.menus.active) { case MENU_MAIN: showMenu(menuMainNode); break; case MENU_PAUSE: showMenu(menuPauseNode); break; case MENU_SCORE: finalScoreLblNode.textContent = formatNumber(state.game.score); if (state.game.score > getHighScore()) { highScoreLblNode.textContent = '最高得分'; } else { highScoreLblNode.textContent = `最高得分: ${formatNumber(getHighScore())}`; } showMenu(menuScoreNode); break; } setHudVisibility(!isMenuVisible()); menuContainerNode.classList.toggle('has-active', isMenuVisible()); menuContainerNode.classList.toggle('interactive-mode', isMenuVisible() && pointerIsDown); } renderMenus(); //////////////////// // 按钮作 // //////////////////// // 主菜单 handleClick($('.play-normal-btn'), () => { setGameMode(GAME_MODE_RANKED); setActiveMenu(null); resetGame(); }); handleClick($('.play-casual-btn'), () => { setGameMode(GAME_MODE_CASUAL); setActiveMenu(null); resetGame(); }); // 暂停菜单 handleClick($('.resume-btn'), () => resumeGame()); handleClick($('.menu-btn--pause'), () => setActiveMenu(MENU_MAIN)); // 菜单 handleClick($('.play-again-btn'), () => { setActiveMenu(null); resetGame(); }); handleClick($('.menu-btn--score'), () => setActiveMenu(MENU_MAIN)); // actions.js // ============================================================================ // ============================================================================ ////////////////// // 菜单 // ////////////////// function setActiveMenu(menu) { state.menus.active = menu; renderMenus(); } ///////////////// // HUD ACTIONS // ///////////////// function setScore(score) { state.game.score = score; renderScoreHud(); } function incrementScore(inc) { if (isInGame()) { state.game.score += inc; if (state.game.score < 0) { state.game.score = 0; } renderScoreHud(); } } function setCubeCount(count) { state.game.cubeCount = count; renderScoreHud(); } function incrementCubeCount(inc) { if (isInGame()) { state.game.cubeCount += inc; renderScoreHud(); } } ////////////////// // 游戏动作 // ////////////////// function setGameMode(mode) { state.game.mode = mode; } function resetGame() { resetAllTargets(); state.game.time = 0; resetAllCooldowns(); setScore(0); setCubeCount(0); spawnTime = getSpawnDelay(); } function pauseGame() { isInGame() && setActiveMenu(MENU_PAUSE); } function resumeGame() { isPaused() && setActiveMenu(null); } function endGame() { setActiveMenu(MENU_SCORE); handleCanvasPointerUp(); // 如果需要，在渲染分数菜单后更新高分 if (state.game.score > getHighScore()) { setHighScore(state.game.score); } } //////////////////////// // 键盘快捷键 // //////////////////////// window.addEventListener('keydown', event => { if (event.key === 'p') { isPaused() ? resumeGame() : pauseGame(); } }); // tick.js // ============================================================================ // ============================================================================ let spawnTime = 0; const maxSpawnX = 450; const pointerDelta = { x: 0, y: 0 }; const pointerDeltaScaled = { x: 0, y: 0 }; // 临时慢动作状态。一旦稳定下来，就应该重新安置 const slowmoDuration = 1500; let slowmoRemaining = 0; let spawnExtra = 0; const spawnExtraDelay = 300; let targetSpeed = 1; function tick(width, height, simTime, simSpeed, lag) { PERF_START('frame'); PERF_START('tick'); state.game.time += simTime; if (slowmoRemaining > 0) { slowmoRemaining -= simTime; if (slowmoRemaining < 0) { slowmoRemaining = 0; } targetSpeed = pointerIsDown ? 0.075 : 0.3; } else { const menuPointerDown = isMenuVisible() && pointerIsDown; targetSpeed = menuPointerDown ? 0.025 : 1; } renderSlowmoStatus(slowmoRemaining / slowmoDuration); gameSpeed += (targetSpeed - gameSpeed) / 22 * lag; gameSpeed = clamp(gameSpeed, 0, 1); const centerX = width / 2; const centerY = height / 2; const simAirDrag = 1 - (airDrag * simSpeed); const simAirDragSpark = 1 - (airDragSpark * simSpeed); // 指针跟踪 // ------------------- // Compute speed and x/y deltas. // There is also a "scaled" variant taking game speed into account. This serves two purposes: // - Lag won't create large spikes in speed/deltas // - In slow mo, speed is increased proportionately to match "reality". Without this boost, // it feels like your actions are dampened in slow mo. const forceMultiplier = 1 / (simSpeed * 0.75 + 0.25); pointerDelta.x = 0; pointerDelta.y = 0; pointerDeltaScaled.x = 0; pointerDeltaScaled.y = 0; const lastPointer = touchPoints[touchPoints.length - 1]; if (pointerIsDown && lastPointer && !lastPointer.touchBreak) { pointerDelta.x = (pointerScene.x - lastPointer.x); pointerDelta.y = (pointerScene.y - lastPointer.y); pointerDeltaScaled.x = pointerDelta.x * forceMultiplier; pointerDeltaScaled.y = pointerDelta.y * forceMultiplier; } const pointerSpeed = Math.hypot(pointerDelta.x, pointerDelta.y); const pointerSpeedScaled = pointerSpeed * forceMultiplier; // Track points for later calculations, including drawing trail. touchPoints.forEach(p => p.life -= simTime); if (pointerIsDown) { touchPoints.push({ x: pointerScene.x, y: pointerScene.y, life: touchPointLife }); } while (touchPoints[0] && touchPoints[0].life <= 0) { touchPoints.shift(); } // Entity Manipulation // -------------------- PERF_START('entities'); // Spawn targets spawnTime -= simTime; if (spawnTime <= 0) { if (spawnExtra > 0) { spawnExtra--; spawnTime = spawnExtraDelay; } else { spawnTime = getSpawnDelay(); } const target = getTarget(); const spawnRadius = Math.min(centerX * 0.8, maxSpawnX); target.x = (Math.random() * spawnRadius * 2 - spawnRadius); target.y = centerY + targetHitRadius; target.z = (Math.random() * targetRadius * 2 - targetRadius); target.xD = Math.random() * (target.x * -2 / 120); target.yD = -20; targets.push(target); } // 为目标设置动画并在屏幕外删除 const leftBound = -centerX + targetRadius; const rightBound = centerX - targetRadius; const ceiling = -centerY - 120; const boundDamping = 0.4; targetLoop: for (let i = targets.length - 1; i >= 0; i--) { const target = targets[i]; target.x += target.xD * simSpeed; target.y += target.yD * simSpeed; if (target.y < ceiling) { target.y = ceiling; target.yD = 0; } if (target.x < leftBound) { target.x = leftBound; target.xD *= -boundDamping; } else if (target.x > rightBound) { target.x = rightBound; target.xD *= -boundDamping; } if (target.z < backboardZ) { target.z = backboardZ; target.zD *= -boundDamping; } target.yD += gravity * simSpeed; target.rotateX += target.rotateXD * simSpeed; target.rotateY += target.rotateYD * simSpeed; target.rotateZ += target.rotateZD * simSpeed; target.transform(); target.project(); // 如果离开屏幕，则删除 if (target.projected.y > centerY + targetHitRadius * 2) { targets.splice(i, 1); returnTarget(target); if (isInGame()) { if (isCasualGame()) { incrementScore(-25); } else { endGame(); } } continue; } // 如果指针移动得非常快，我们希望沿路径进行命中测试多个点。 // 我们不能使用缩放的指针速度来确定这一点，因为我们关心的是实际屏幕 // 覆盖的距离。 const hitTestCount = Math.ceil(pointerSpeed / targetRadius * 2); // 从“1”开始循环并使用“<=”检查，因此我们跳过 0% 并最终达到 100%。 // 这省略了上一个点位置，并包括最近的点位置。 for (let ii = 1; ii <= hitTestCount; ii++) { const percent = 1 - (ii / hitTestCount); const hitX = pointerScene.x - pointerDelta.x * percent; const hitY = pointerScene.y - pointerDelta.y * percent; const distance = Math.hypot( hitX - target.projected.x, hitY - target.projected.y ); if (distance <= targetHitRadius) { // 打！（尽管我们不想允许在多个连续帧上命中） if (!target.hit) { target.hit = true; target.xD += pointerDeltaScaled.x * hitDampening; target.yD += pointerDeltaScaled.y * hitDampening; target.rotateXD += pointerDeltaScaled.y * 0.001; target.rotateYD += pointerDeltaScaled.x * 0.001; const sparkSpeed = 7 + pointerSpeedScaled * 0.125; if (pointerSpeedScaled > minPointerSpeed) { target.health--; incrementScore(10); if (target.health <= 0) { incrementCubeCount(1); createBurst(target, forceMultiplier); sparkBurst(hitX, hitY, 8, sparkSpeed); if (target.wireframe) { slowmoRemaining = slowmoDuration; spawnTime = 0; spawnExtra = 2; } targets.splice(i, 1); returnTarget(target); } else { sparkBurst(hitX, hitY, 8, sparkSpeed); glueShedSparks(target); updateTargetHealth(target, 0); } } else { incrementScore(5); sparkBurst(hitX, hitY, 3, sparkSpeed); } } // 断开电流循环并继续外部循环。 // 这将跳到处理下一个目标。 continue targetLoop; } } // 此代码仅在目标未被“命中”时运行。 target.hit = false; } // 为片段设置动画并在屏幕外删除。 const fragBackboardZ = backboardZ + fragRadius; // 允许片段在屏幕外移动到两侧一段时间，因为阴影仍然可见。 const fragLeftBound = -width; const fragRightBound = width; for (let i = frags.length - 1; i >= 0; i--) { const frag = frags[i]; frag.x += frag.xD * simSpeed; frag.y += frag.yD * simSpeed; frag.z += frag.zD * simSpeed; frag.xD *= simAirDrag; frag.yD *= simAirDrag; frag.zD *= simAirDrag; if (frag.y < ceiling) { frag.y = ceiling; frag.yD = 0; } if (frag.z < fragBackboardZ) { frag.z = fragBackboardZ; frag.zD *= -boundDamping; } frag.yD += gravity * simSpeed; frag.rotateX += frag.rotateXD * simSpeed; frag.rotateY += frag.rotateYD * simSpeed; frag.rotateZ += frag.rotateZD * simSpeed; frag.transform(); frag.project(); // 移除条件 if ( // 屏幕底部 frag.projected.y > centerY + targetHitRadius || // 屏幕侧面 frag.projected.x < fragLeftBound || frag.projected.x > fragRightBound || // 离相机太近 frag.z > cameraFadeEndZ ) { frags.splice(i, 1); returnFrag(frag); continue; } } // 2D 火花 for (let i = sparks.length - 1; i >= 0; i--) { const spark = sparks[i]; spark.life -= simTime; if (spark.life <= 0) { sparks.splice(i, 1); returnSpark(spark); continue; } spark.x += spark.xD * simSpeed; spark.y += spark.yD * simSpeed; spark.xD *= simAirDragSpark; spark.yD *= simAirDragSpark; spark.yD += gravity * simSpeed; } PERF_END('entities'); // 3D 变换 // ------------------- PERF_START('3D'); // 聚合所有场景顶点/多边形 allVertices.length = 0; allPolys.length = 0; allShadowVertices.length = 0; allShadowPolys.length = 0; targets.forEach(entity => { allVertices.push(...entity.vertices); allPolys.push(...entity.polys); allShadowVertices.push(...entity.shadowVertices); allShadowPolys.push(...entity.shadowPolys); }); frags.forEach(entity => { allVertices.push(...entity.vertices); allPolys.push(...entity.polys); allShadowVertices.push(...entity.shadowVertices); allShadowPolys.push(...entity.shadowPolys); }); // 场景计算/转换 allPolys.forEach(p => computePolyNormal(p, 'normalWorld')); allPolys.forEach(computePolyDepth); allPolys.sort((a, b) => b.depth - a.depth); // 透视投影 allVertices.forEach(projectVertex); allPolys.forEach(p => computePolyNormal(p, 'normalCamera')); PERF_END('3D'); PERF_START('shadows'); // 将阴影顶点旋转到光源透视 transformVertices( allShadowVertices, allShadowVertices, 0, 0, 0, TAU / 8, 0, 0, 1, 1, 1 ); allShadowPolys.forEach(p => computePolyNormal(p, 'normalWorld')); const shadowDistanceMult = Math.hypot(1, 1); const shadowVerticesLength = allShadowVertices.length; for (let i = 0; i < shadowVerticesLength; i++) { const distance = allVertices[i].z - backboardZ; allShadowVertices[i].z -= shadowDistanceMult * distance; } transformVertices( allShadowVertices, allShadowVertices, 0, 0, 0, -TAU / 8, 0, 0, 1, 1, 1 ); allShadowVertices.forEach(projectVertex); PERF_END('shadows'); PERF_END('tick'); } // draw.js // ============================================================================ // ============================================================================ function draw(ctx, width, height, viewScale) { PERF_START('draw'); const halfW = width / 2; const halfH = height / 2; // 3D 多边形 // --------------- ctx.lineJoin = 'bevel'; PERF_START('drawShadows'); ctx.fillStyle = shadowColor; ctx.strokeStyle = shadowColor; allShadowPolys.forEach(p => { if (p.wireframe) { ctx.lineWidth = 2; ctx.beginPath(); const { vertices } = p; const vCount = vertices.length; const firstV = vertices[0]; ctx.moveTo(firstV.x, firstV.y); for (let i = 1; i < vCount; i++) { const v = vertices[i]; ctx.lineTo(v.x, v.y); } ctx.closePath(); ctx.stroke(); } else { ctx.beginPath(); const { vertices } = p; const vCount = vertices.length; const firstV = vertices[0]; ctx.moveTo(firstV.x, firstV.y); for (let i = 1; i < vCount; i++) { const v = vertices[i]; ctx.lineTo(v.x, v.y); } ctx.closePath(); ctx.fill(); } }); PERF_END('drawShadows'); PERF_START('drawPolys'); allPolys.forEach(p => { if (!p.wireframe && p.normalCamera.z < 0) return; if (p.strokeWidth !== 0) { ctx.lineWidth = p.normalCamera.z < 0 ? p.strokeWidth * 0.5 : p.strokeWidth; ctx.strokeStyle = p.normalCamera.z < 0 ? p.strokeColorDark : p.strokeColor; } const { vertices } = p; const lastV = vertices[vertices.length - 1]; const fadeOut = p.middle.z > cameraFadeStartZ; if (!p.wireframe) { const normalLight = p.normalWorld.y * 0.5 + p.normalWorld.z * -0.5; const lightness = normalLight > 0 ? 0.1 : ((normalLight ** 32 - normalLight) / 2) * 0.9 + 0.1; ctx.fillStyle = shadeColor(p.color, lightness); } // 淡出靠近摄像机的多边形。'globalAlpha' 必须稍后重置。 if (fadeOut) { // 如果多边形非常靠近摄像机（在'cameraFadeRange'之外），则alpha // 可以变为负值，其外观为 alpha = 1。因此，我们将其限制在 0。 ctx.globalAlpha = Math.max(0, 1 - (p.middle.z - cameraFadeStartZ) / cameraFadeRange); } ctx.beginPath(); ctx.moveTo(lastV.x, lastV.y); for (let v of vertices) { ctx.lineTo(v.x, v.y); } if (!p.wireframe) { ctx.fill(); } if (p.strokeWidth !== 0) { ctx.stroke(); } if (fadeOut) { ctx.globalAlpha = 1; } }); PERF_END('drawPolys'); PERF_START('draw2D'); // 2D 火花 // --------------- ctx.strokeStyle = sparkColor; ctx.lineWidth = sparkThickness; ctx.beginPath(); sparks.forEach(spark => { ctx.moveTo(spark.x, spark.y); // 火花死亡时将火花缩小到零长度。 // 当生命接近 0（根曲线）时加速收缩。 // 请注意，随着时间的推移，火花已经随着速度的减慢而变小 // 从阻尼中下降。所以这就像双重缩小。为了应对这种情况 // 稍微保持火花更大更长时间，我们还将增加规模 // 应用根曲线后一点。 const scale = (spark.life / spark.maxLife) ** 0.5 * 1.5; ctx.lineTo(spark.x - spark.xD * scale, spark.y - spark.yD * scale); }); ctx.stroke(); // 触摸笔触 // --------------- ctx.strokeStyle = touchTrailColor; const touchPointCount = touchPoints.length; for (let i = 1; i < touchPointCount; i++) { const current = touchPoints[i]; const prev = touchPoints[i - 1]; if (current.touchBreak || prev.touchBreak) { continue; } const scale = current.life / touchPointLife; ctx.lineWidth = scale * touchTrailThickness; ctx.beginPath(); ctx.moveTo(prev.x, prev.y); ctx.lineTo(current.x, current.y); ctx.stroke(); } PERF_END('draw2D'); PERF_END('draw'); PERF_END('frame'); // 显示性能更新。 PERF_UPDATE(); } // canvas.js // ============================================================================ // ============================================================================ function setupCanvases() { const ctx = canvas.getContext('2d'); // devicePixelRatio 别名 const dpr = window.devicePixelRatio || 1; // 视图将被缩放，以便对象在所有屏幕尺寸上显示大小相似。 let viewScale; // 尺寸（考虑 viewScale！) let width, height; function handleResize() { const w = window.innerWidth; const h = window.innerHeight; viewScale = h / 1000; width = w / viewScale; height = h / viewScale; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; } // 设置初始大小 handleResize(); // 调整全屏画布大小 window.addEventListener('resize', handleResize); // 运行游戏循环 let lastTimestamp = 0; function frameHandler(timestamp) { let frameTime = timestamp - lastTimestamp; lastTimestamp = timestamp; // 始终将另一帧排队 raf(); // 如果游戏暂停，我们仍将跟踪 frameTime（上图），但所有其他 // 可以避免游戏逻辑和绘图。 if (isPaused()) return; // 确保不报告负数时间（第一帧可能很奇怪） if (frameTime < 0) { frameTime = 17; } // - 将最小帧速率限制为 15fps[~68ms]（假设 60fps[~17ms] 为“正常”） else if (frameTime > 68) { frameTime = 68; } const halfW = width / 2; const halfH = height / 2; // Convert pointer position from screen to scene coords. pointerScene.x = pointerScreen.x / viewScale - halfW; pointerScene.y = pointerScreen.y / viewScale - halfH; const lag = frameTime / 16.6667; const simTime = gameSpeed * frameTime; const simSpeed = gameSpeed * lag; tick(width, height, simTime, simSpeed, lag); // Auto clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Auto scale drawing for high res displays, and incorporate `viewScale`. // Also shift canvas so (0, 0) is the middle of the screen. // This just works with 3D perspective projection. const drawScale = dpr * viewScale; ctx.scale(drawScale, drawScale); ctx.translate(halfW, halfH); draw(ctx, width, height, viewScale); ctx.setTransform(1, 0, 0, 1, 0, 0); } const raf = () => requestAnimationFrame(frameHandler); // Start loop raf(); } // interaction.js // ============================================================================ // ============================================================================ // Interaction // ----------------------------- function handleCanvasPointerDown(x, y) { if (!pointerIsDown) { pointerIsDown = true; pointerScreen.x = x; pointerScreen.y = y; // On when menus are open, point down/up toggles an interactive mode. // We just need to rerender the menu system for it to respond. if (isMenuVisible()) renderMenus(); } } function handleCanvasPointerUp() { if (pointerIsDown) { pointerIsDown = false; touchPoints.push({ touchBreak: true, life: touchPointLife }); // On when menus are open, point down/up toggles an interactive mode. // We just need to rerender the menu system for it to respond. if (isMenuVisible()) renderMenus(); } } function handleCanvasPointerMove(x, y) { if (pointerIsDown) { pointerScreen.x = x; pointerScreen.y = y; } } // Use pointer events if available, otherwise fallback to touch events (for iOS). if ('PointerEvent' in window) { canvas.addEventListener('pointerdown', event => { event.isPrimary && handleCanvasPointerDown(event.clientX, event.clientY); }); canvas.addEventListener('pointerup', event => { event.isPrimary && handleCanvasPointerUp(); }); canvas.addEventListener('pointermove', event => { event.isPrimary && handleCanvasPointerMove(event.clientX, event.clientY); }); // We also need to know if the mouse leaves the page. For this game, it's best if that // cancels a swipe, so essentially acts as a "mouseup" event. document.body.addEventListener('mouseleave', handleCanvasPointerUp); } else { let activeTouchId = null; canvas.addEventListener('touchstart', event => { if (!pointerIsDown) { const touch = event.changedTouches[0]; activeTouchId = touch.identifier; handleCanvasPointerDown(touch.clientX, touch.clientY); } }); canvas.addEventListener('touchend', event => { for (let touch of event.changedTouches) { if (touch.identifier === activeTouchId) { handleCanvasPointerUp(); break; } } }); canvas.addEventListener('touchmove', event => { for (let touch of event.changedTouches) { if (touch.identifier === activeTouchId) { handleCanvasPointerMove(touch.clientX, touch.clientY); event.preventDefault(); break; } } }, { passive: false }); } // index.js // ============================================================================ // ============================================================================ setupCanvases();

作品预览「切块游戏（自研修改优化稳定版）」