如何在JavaScript游戏中解析关卡规划并通过Canvas渲染为图像？

嘿，我明白你卡在哪了——把这个多行关卡字符串拆成能遍历的结构确实是第一步，我来给你一步步捋清楚怎么做：

首先，咱们先搞定字符串拆分的问题，你的simpleLevelPlan是多行模板字符串，里面的换行符就是天然的行分隔符，我们可以用split('\n')把它拆成每行的数组，不过要注意开头和结尾的空行，得先过滤掉：

let simpleLevelPlan = ` ......................
..##################..
..#................#..
..#...###....###...#..
..#...###....###...#..
..#................#..
..#................#..
..###################..
......................`;

// 拆分并过滤空行，得到有效关卡行数组
const levelRows = simpleLevelPlan.split('\n').filter(line => line.trim() !== '');

接下来就是Canvas绘制的部分了，我们可以设定每个方块的大小（比如tileSize = 20），然后遍历每一行和每个字符，根据字符类型绘制黑色或白色方块：

<!-- 先在HTML里添加Canvas元素 -->
<canvas id="levelCanvas" width="600" height="300"></canvas>

<script>
let simpleLevelPlan = ` ......................
..##################..
..#................#..
..#...###....###...#..
..#...###....###...#..
..#................#..
..#................#..
..###################..
......................`;

const tileSize = 20; // 单个方块的边长
const canvas = document.getElementById('levelCanvas');
const ctx = canvas.getContext('2d');

// 处理关卡字符串，得到有效行数组
const levelRows = simpleLevelPlan.split('\n').filter(line => line.trim() !== '');

// 遍历每一行
levelRows.forEach((row, rowIndex) => {
  // 把当前行的字符串拆成单个字符的数组，逐个遍历
  [...row].forEach((char, colIndex) => {
    // 根据字符设置填充颜色
    ctx.fillStyle = char === '#' ? 'black' : 'white';
    // 计算方块的左上角坐标：行索引对应Y轴，列索引对应X轴
    const x = colIndex * tileSize;
    const y = rowIndex * tileSize;
    // 绘制方块
    ctx.fillRect(x, y, tileSize, tileSize);
  });
});
</script>

关键细节解释： #

• split('\n')：把多行字符串按换行符拆分成数组，每个元素对应一行关卡内容。
• filter(line => line.trim() !== '')：过滤掉原始字符串首尾的空行（这些行没有有效方块标记，不需要处理）。
• [...row]：把单行字符串转换成字符数组，这样就能逐个访问每个位置的方块标记了。
• 坐标计算：行索引对应Canvas的Y轴位置，列索引对应X轴位置，乘以方块大小就能准确定位每个方块的位置。

这样运行之后，Canvas就会根据你的关卡字符串画出对应的黑白方块地图啦～

内容的提问来源于stack exchange，提问作者John Smith