Game Development Techniques: Pathfinding, Depth Sorting, and Parallax Effects in a 2D Chicken Game

The article details the development of a 2D interactive chicken game, focusing on technical challenges and solutions.

It compares two pathfinding approaches: a ray‑casting method and the A* algorithm, explaining the ray‑casting steps, its drawbacks (high computational cost, non‑optimal paths, limited to simple obstacles), and then presents A* with grid‑based nodes, heuristic (Manhattan distance), open/closed lists, and a JavaScript implementation.

The author describes map discretization into 50×50 cells, obstacle marking, and how the A* yields optimal routes.

To achieve visual depth, the article covers parallax scrolling (different layer speeds), depth sorting based on object bottomY coordinates, and a simple shadow/illustration approach.

Additional systems include a unified timer manager for guiding users, a dual‑renderer architecture (Phaser + Rax), and code snippets for the timer, parallax factors, depth‑sorting logic, and A* node class.

Overall, the piece records the author’s problem‑solving process in game development, contrasting traditional front‑end work with game‑specific techniques.

// A*算法 Node 类，用于存储节点信息 class Node { constructor(parent = null, position = null) { this.parent = parent; // 父节点 this.position = position; // 节点在网格中的坐标位置 this.g = 0; // G值是从起点走到当前格子的成本 this.h = 0; // H值是当前格子到终点的估计成本 this.f = 0; // F值是G值和H值的总和 } // 判断两个节点是否位于同一个位置 isEqual(otherNode) { return this.position[0] === otherNode.position[0] && this.position[1] === otherNode.position[1]; } } // 启发式函数，用于估计到达目标的成本（此处使用曼哈顿距离) function heuristic(nodeA, nodeB) { const d1 = Math.abs(nodeB.position[0] - nodeA.position[0]); const d2 = Math.abs(nodeB.position[1] - nodeA.position[1]); return d1 + d2; } // 获取一个节点的所有可能的邻居（包括对角线上的位置） function getNeighbors(currentNode, grid) { const neighbors = []; // 这里包括了八个方向上的移动 const directions = [ [-1, -1], [-1, 0], [-1, 1], // 左上 左 左下 [0, -1], [0, 1], // 上 下 [1, -1], [1, 0], [1, 1], // 右上 右 右下 ]; // 查看每个方向的邻居是否可通行（非障碍）且在网格范围内 for (const direction of directions) { const neighborPos = [ currentNode.position[0] + direction[0], currentNode.position[1] + direction[1], ]; // 确保位置在网格内且不是障碍物 if ( neighborPos[0] >= 0 && neighborPos[0] < grid.length && neighborPos[1] >= 0 && neighborPos[1] < grid[0].length && grid[neighborPos[0]][neighborPos[1]] === 1 ) { neighbors.push(new Node(currentNode, neighborPos)); } } return neighbors; } // A* 算法主函数 function aStar(grid, start, end) { const startNode = new Node(null, start); const endNode = new Node(null, end); let openSet = [startNode]; // 存储待检查的节点 let closedSet = []; // 存储已检查的节点 while (openSet.length > 0) { console.log('startNode'); // 在openSet中找到F值最低的节点 let lowestIndex = 0; for (let i = 0; i < openSet.length; i++) { if (openSet[i].f < openSet[lowestIndex].f) { lowestIndex = i; } } let currentNode = openSet[lowestIndex]; // 如果当前节点是目的地，那么我们再次构造路径 if (currentNode.isEqual(endNode)) { let path = []; let current = currentNode; while (current != null) { path.push(current.position); current = current.parent; } return path.reverse(); // 把数组反转，因为我们是从终点回溯到起点存储的 } // 当前节点已经被处理过，移出openSet，并加入closedSet openSet.splice(lowestIndex, 1); closedSet.push(currentNode); // 找到所有邻居 let neighbors = getNeighbors(currentNode, grid); for (let neighbor of neighbors) { // 如果邻居是不可访问的或已在closedSet中，忽略它们 // 如果这个邻居在关闭列表中，跳过它 if (closedSet.some(closedNode => closedNode.isEqual(neighbor))) { continue; } // 对角线移动的成本要考虑 √2 // 通过查看相邻节点和当前节点的坐标差来判断是否为对角移动 const isDiagonalMove = Math.abs(currentNode.position[0] - neighbor.position[0]) === 1 && Math.abs(currentNode.position[1] - neighbor.position[1]) === 1; // 对角线移动的成本假定为 √2，其他为1 const tentativeG = currentNode.g + (isDiagonalMove ? Math.sqrt(2) : 1); // 如果新的G值更低，或者邻居节点不在开放列表中 let openNode = openSet.find(openNode => openNode.isEqual(neighbor)); if (!openNode || tentativeG < neighbor.g) { neighbor.g = tentativeG; neighbor.h = heuristic(neighbor, endNode); // H值不变，因为它是启发式估计到终点的成本 neighbor.f = neighbor.g + neighbor.h; neighbor.parent = currentNode; // 如果邻居节点不在开放列表中，加入开放列表 if (!openNode) { openSet.push(neighbor); } } } // 如果循环结束还没有到达终点，表示没有路径到达终点 return []; } }

// 远景x轴速率 export const parallaxFactorFarX = 0.2; // 远景y轴速率 export const parallaxFactorFarY = 0.2; // 初始坐标 export const farOriginXY = [0, -60]; // 近景x轴速率 export const parallaxFactorNearX = 1.8; // 近景y轴速率 export const parallaxFactorNearY = 1.05; // 初始坐标 export const nearOriginXY = [0, gameHeightBounds - 420]; const { scrollX, scrollY } = this.scene.cameras.main; if (scrollX >= 0 && scrollX <= 750 && scrollY >= 0 && this.bgFar && this.bgNear) { this.bgFar.x = -scrollX * parallaxFactorFarX; this.bgFar.y = -scrollY * parallaxFactorFarY + farOriginXY[1]; this.bgNear.x = -scrollX * parallaxFactorNearX; this.bgNear.y = -scrollY * parallaxFactorNearY + nearOriginXY[1]; }

// 划分区间 const divideRegional = (blocks: Array<{ id: number, bottomY: number }>) => { blocks.sort((a, b) => a.bottomY - b.bottomY); return blocks.map((item, idx) => { const nextBottomY = blocks[idx + 1] ? blocks[idx + 1].bottomY : Infinity; return { regional: [(idx + 1) * 100, (idx + 1) * 100 + 100], range: [item.bottomY, nextBottomY], ...item }; }); } // 行走时的判断 const currentY = chicken.getPosition().y + 130; const currentRegion = regionals.find((rengional) => { const [start, end] = rengional.range; return currentY >= start && currentY <= end; }); if (currentRegion) { chicken.setDepth(currentRegion.regional[0] + 1); } else { chicken.setDepth(99); }

function ProcessTimer() { let id = 0; let hasEmit = false; const timers = {}; const flags = {}; const types: any = {}; let func: any; const run = (cb) => { func = cb; }; const startTimer = (type, delayTime) => { // 触发过或者定时器存在 if (hasEmit || timers[type]) return; timers[type] = setTimeout(() => { flags[type] = true; checkTimer(); }, delayTime); }; const checkTimer = () => { const keys = Object.keys(timers) || []; const notSatisfied = keys.find(key => !flags[key]); // 满足所有的条件，出任务触点，只出一次 if (!notSatisfied && !hasEmit) { hasEmit = true; clearAllTimer(); if (func && typeof func === 'function') { func(); } } }; const clearAllTimer = () => { const keys = Object.keys(timers) || []; keys.forEach(key => { clearTimer(key); }); }; const clearTimer = (type) => { flags[type] = false; if (timers[type]) { clearTimeout(timers[type]); timers[type] = null; } }; const create = (delayTime = 8000) => { const type = `timer${id++}`; timers[type] = null; // 所有定时器 flags[type] = false; types[type] = delayTime; return { start: () => { startTimer(type, delayTime); }, end: () => { clearTimer(type); }, type, }; }; const reset = () => { hasEmit = false; } return { create, run, clearAllTimer, reset, }; } export default ProcessTimer;