微信小程序实现推箱子游戏

import levels from '../../utils/levels' Page({ data: { gameMap: [], currentLevel: 0, playerPos: { x: 0, y: 0 }, originalMap: [] }, onLoad() { this.initLevel(this.data.currentLevel); }, initLevel(levelIndex) { const level = levels[levelIndex]; const gameMap = JSON.parse(JSON.stringify(level.map)); this.originalMap = JSON.parse(JSON.stringify(level.map)); // 找到玩家位置 for (let i = 0; i < level.rows; i++) { for (let j = 0; j < level.cols; j++) { if (gameMap[i][j] === 4) { this.setData({ playerPos: { x: j, y: i } }); break; } } } this.setData({ gameMap, originalMap: this.originalMap }); }, movePlayer(dx, dy) { const { playerPos, gameMap } = this.data; const newX = playerPos.x + dx; const newY = playerPos.y + dy; // 检查是否可以移动 if (gameMap[newY][newX] === 1) return; // 撞墙 // 推箱子 if (gameMap[newY][newX] === 2 || gameMap[newY][newX] === 5) { const nextX = newX + dx; const nextY = newY + dy; if (gameMap[nextY][nextX] === 1 || gameMap[nextY][nextX] === 2 || gameMap[nextY][nextX] === 5) return; // 移动箱子 gameMap[nextY][nextX] = gameMap[nextY][nextX] === 3 ? 5 : 2; gameMap[newY][newX] = gameMap[newY][newX] === 5 ? 3 : 0; } // 移动玩家时保持目标点 const currentCellIsTarget = gameMap[playerPos.y][playerPos.x] === 4 && this.originalMap[playerPos.y][playerPos.x] === 3; // 如果玩家当前在目标点上，离开时恢复目标点 gameMap[playerPos.y][playerPos.x] = currentCellIsTarget ? 3 : 0; // 如果玩家要移动到目标点上，显示玩家，但记住下面是目标点 gameMap[newY][newX] = 4; this.setData({ gameMap, playerPos: { x: newX, y: newY } }); this.checkWin(); }, moveUp() { this.movePlayer(0, -1); }, moveDown() { this.movePlayer(0, 1); }, moveLeft() { this.movePlayer(-1, 0); }, moveRight() { this.movePlayer(1, 0); }, checkWin() { const { gameMap } = this.data; let allBoxesOnTarget = true; let hasBox = false; // 检查是否所有箱子都在目标点上 for (let i = 0; i < gameMap.length; i++) { for (let j = 0; j < gameMap[i].length; j++) { // 如果还有箱子没在标点上 if (gameMap[i][j] === 2) { hasBox = true; allBoxesOnTarget = false; break; } // 统计有箱子的情况 if (gameMap[i][j] === 5) { hasBox = true; } } if (!allBoxesOnTarget) break; } // 必须要有箱子且所有箱子都在目标点上才算胜利 if (hasBox && allBoxesOnTarget) { wx.showModal({ title: '恭喜', content: '你完成了这一关！', success: () => { if (this.data.currentLevel < levels.length - 1) { this.setData({ currentLevel: this.data.currentLevel + 1 }); this.initLevel(this.data.currentLevel); } else { wx.showToast({ title: '你已完成所有关卡！', icon: 'success' }); } } }); } }, // 添加获取图片路径的方法 getCellImage(cell) { const images = { 0: '/assets/images/floor.png', 1: '/assets/images/wall.png', 2: '/assets/images/box.png', 3: '/assets/images/target.png', 4: '/assets/images/player.png', 5: '/assets/images/box.png' // 箱子在目标点上时的图片 }; return images[cell]; }, resetLevel() { this.initLevel(this.data.currentLevel); wx.showToast({ title: '已重置关卡', icon: 'none' }); } });