机器人走迷宫游戏脚本
机器人迷宫寻宝
游戏控制
手动控制
游戏信息
步数: 0
状态: 等待开始
class MazeGame {
constructor {
this.size = 15;
this.maze = [];
this.robotPos = {x:1, y:1};
this.treasurePos = {x:13, y:13};
this.steps = 0;
thisit;
init {
this.generateMaze;
this.renderMaze;
this.setupControls;
generateMaze {
// 初始化空白迷宫
this.maze = Array(this.size).fill.map( =>
Array(this.size).fill(0));
// 随机生成墙壁(30%概率)
for(let y=0; ythis.maze[y][x] = 1; // 1表示墙壁
renderMaze {
const mazeEl = document.getElementById('maze');
mazeElnerHTML = '';
mazeEl.style.gridTemplateColumns = `repeat(${this.size}, 40px)`;
for(let y=0; ycell.className = 'cell w-10 h-10 flex items-center justify-center';
if(this.maze[y][x] === 1) {
cell.className += ' bg-gray-800';
} else if(x === this.robotPos.x && y === this.robotPos.y) {
cell.className += ' robot bg-cover bg-center';
} else if(x === this.treasurePos.x && y === this.treasurePos.y) {
cell.className += ' treasure bg-cover bg-center';
} else {
cell.className += ' bg-white';
mazeEl.appendChild(cell);
setupControls {
document.getElementById('generateBtn').addEventListener('click', => {
this.generateMaze;
this.robotPos = {x:1, y:1};
this.treasurePos = {x:13, y:13};
this.steps = 0;
document.getElementById('steps').textContent = this.steps;
document.getElementById('status').textContent = '游戏中';
this.renderMaze;
});
document.querySelectorAll('.moveBtn').forEach(btn => {
btn.addEventListener('click', => this.moveRobot(btn.dataset.dir));
});
document.getElementById('solveBtn').addEventListener('click', => {
this.solveMaze;
});
moveRobot(direction) {
let newX = this.robotPos.x;
let newY = this.robotPos.y;
switch(direction) {
case 'up': newY--; break;
case 'down': newY++; break;
case 'left': newX--; break;
case 'right': newX++; break;
if(this.isValidMove(newX, newY)) {
this.robotPos = {x: newX, y: newY};
this.steps++;
document.getElementById('steps').textContent = this.steps;
this.renderMaze;
if(newX === this.treasurePos.x && newY === this.treasurePos.y) {
document.getElementById('status').textContent = '恭喜找到宝藏!';
isValidMove(x, y) {
return x >= 0 && x < this.size &&
y >= 0 && y < this.size &&
this.maze[y][x] !== 1;
solveMaze {
// A寻路算法实现
const path = this.findPath;
if(path.length > 0) {
this.animateSolution(path);
} else {
document.getElementById('status').textContent = '无法找到路径';
findPath {
// 简化的A算法实现
const openSet = [this.robotPos];
const cameFrom = {};
const gScore = {[this.getKey(this.robotPos)]: 0};
const fScore = {[this.getKey(this.robotPos)]: this.heuristic(this.robotPos)};
while(openSet.length > 0) {
openSet.sort((a,b) => fScore[this.getKey(a)]
const current = openSet.shift;
if(current.x === this.treasurePos.x && current.y === this.treasurePos.y) {
return this.reconstructPath(cameFrom, current);
const neighbors = this.getNeighbors(current);
for(const neighbor of neighbors) {
const tentativeGScore = gScore[this.getKey(current)] + 1;
const neighborKey = this.getKey(neighbor);
if(tentativeGScore < (gScore[neighborKey] || Infinity)) {
cameFrom[neighborKey] = current;
gScore[neighborKey] = tentativeGScore;
fScore[neighborKey] = tentativeGScore + this.heuristic(neighbor);
if(!openSet.some(p => p.x === neighbor.x && p.y === neighbor.y)) {
openSet.push(neighbor);
return [];
heuristic(pos) {
return Math.abs(pos.x
Math.abs(pos.y
getNeighbors(pos) {
const dirs = [{x:0,y:-1}, {x:1,y:0}, {x:0,y:1}, {x:-1,y:0}];
return dirs
.map(d => ({x: pos.x + d.x, y: pos.y + d.y}))
.filter(p => this.isValidMove(p.x, p.y));
getKey(pos) {
return `${pos.x},${pos.y}`;
reconstructPath(cameFrom, current) {
const path = [current];
while(this.getKey(current) in cameFrom) {
current = cameFrom[this.getKey(current)];
path.unshift(current);
return path;
animateSolution(path) {
let i = 0;
const interval = setInterval( => {
if(i < path.length) {
this.robotPos = path[i];
this.renderMaze;
i++;
} else {
clearInterval(interval);
if(this.robotPos.x === this.treasurePos.x &&
this.robotPos.y === this.treasurePos.y) {
document.getElementById('status').textContent = '自动寻路完成!';
}, 200);
// 初始化游戏
new MazeGame;
网页游戏无需额外依赖