下面是“JS实现的走迷宫小游戏完整实例”的完整攻略：
在HTML中使用一个canvas元素来绘制迷宫，并使用一个button元素来触发游戏。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现的走迷宫小游戏</title>
</head>
<body>
<canvas id="maze" width="400" height="400"></canvas>
<br>
<button id="start">开始游戏</button>
</body>
</html>
为了让游戏界面更美观，可以添加一些CSS样式来修饰canvas元素和button元素。示例代码如下：
#maze {
border: 1px solid #000;
}
button {
font-size: 18px;
}
在HTML中引入一个JS文件，用于实现游戏逻辑。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现的走迷宫小游戏</title>
<script src="maze.js"></script>
</head>
<body>
<canvas id="maze" width="400" height="400"></canvas>
<br>
<button id="start">开始游戏</button>
</body>
</html>
在JS文件中，通过canvas元素的getContext方法获取画布上下文，然后根据迷宫的数据绘制迷宫。示例代码如下：
var canvas = document.getElementById('maze');
var ctx = canvas.getContext('2d');
var maze = [
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 0, 1, 1],
[1, 0, 1, 0, 1, 0, 0, 1],
[1, 0, 1, 0, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1]
];
var cellSize = canvas.width / maze.length;
for (var i = 0; i < maze.length; i++) {
for (var j = 0; j < maze[i].length; j++) {
if (maze[i][j] === 1) {
ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
}
}
}
通过addEventListener方法监听button按钮的点击事件，点击后触发游戏逻辑。示例代码如下：
var button = document.getElementById('start');
button.addEventListener('click', function() {
// 游戏逻辑
});
游戏中，角色的移动是关键。可以通过监听键盘事件来实现角色的移动，当角色移动时需要判断其是否越界，是否碰到墙壁等。示例代码如下：
// 定义角色初始位置
var player = {
x: 1,
y: 1
};
// 监听键盘事件
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // 左
movePlayer(-1, 0);
break;
case 38: // 上
movePlayer(0, -1);
break;
case 39: // 右
movePlayer(1, 0);
break;
case 40: // 下
movePlayer(0, 1);
break;
}
});
// 移动角色，并判断是否越界或碰到墙壁
function movePlayer(dx, dy) {
var newX = player.x + dx;
var newY = player.y + dy;
if (newX >= 0 && newX < maze[0].length && newY >= 0 && newY < maze.length && maze[newY][newX] === 0) {
player.x = newX;
player.y = newY;
if (newX === maze[0].length - 2 && newY === maze.length - 2) {
alert('恭喜你，成功走出迷宫！');
}
drawPlayer();
}
}
// 绘制角色
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x * cellSize, player.y * cellSize, cellSize, cellSize);
}
比如现在我们想让迷宫每行有8个方格而不是7个，可以将迷宫数组里的每一行加上一个1，示例代码如下：
var maze = [
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 1],
[1, 0, 1, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 1],
[1, 0, 1, 0, 1, 1, 0, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1]
];
var cellSize = canvas.width / (maze[0].length - 1);
比如现在我们想让角色的初始位置在迷宫的中心而不是左上角，可以修改player对象的属性值，示例代码如下：
var player = {
x: Math.floor(maze[0].length / 2),
y: Math.floor(maze.length / 2)
};
本文链接：http://task.lmcjl.com/news/934.html