如何在Pygame中使用含W的字符串定义关卡并完成绘制展示

以下提供三种不同场景下的实现方式：

1. 控制台快速验证（开发调试用） #

适合快速验证关卡结构是否正确，无需额外渲染逻辑：
首先定义标准二维关卡结构（每一项对应一行关卡内容）：

// W代表墙体，空格代表可通行区域
const level = [
  "WWWWWWWWWW",
  "W        W",
  "W  WWWW  W",
  "W        W",
  "WWWWWWWWWW"
]

直接遍历逐行打印即可：

level.forEach(row => console.log(row))

控制台会直接输出可视化的关卡轮廓。
如果你的level是一维数组，每个元素对应单个格子，可先按关卡宽度拆分后输出：

const levelWidth = 10 // 替换为你的实际关卡宽度
const level = ['W','W','W', /* 其余元素略 */]
for(let i = 0; i < level.length; i += levelWidth) {
  console.log(level.slice(i, i + levelWidth).join(''))
}

2. 浏览器DOM渲染（轻量场景用） #

不需要游戏引擎的轻量场景，直接用DOM元素拼接渲染：

<!-- 关卡容器 -->
<div id="level-box"></div>
<style>
#level-box {
  line-height: 0;
}
.grid {
  display: inline-block;
  width: 18px;
  height: 18px;
}
.wall {
  background-color: #555;
}
.floor {
  background-color: #f0f0f0;
}
</style>
<script>
const level = [
  "WWWWWWWWWW",
  "W        W",
  "W  WWWW  W",
  "W        W",
  "WWWWWWWWWW"
]
const box = document.getElementById('level-box')
level.forEach(row => {
  const rowEl = document.createElement('div')
  row.split('').forEach(char => {
    const grid = document.createElement('div')
    grid.className = `grid ${char === 'W' ? 'wall' : 'floor'}`
    rowEl.appendChild(grid)
  })
  box.appendChild(rowEl)
})
</script>

运行后页面会直接展示完整的关卡布局，你可以自行调整grid的宽高和颜色来匹配游戏风格。

3. Canvas渲染（2D游戏正式场景用） #

原生Canvas2D游戏适用，性能更高，适配关卡动态更新的需求：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const gridSize = 20 // 单个格子的像素大小

const level = [
  "WWWWWWWWWW",
  "W        W",
  "W  WWWW  W",
  "W        W",
  "WWWWWWWWWW"
]

level.forEach((row, rowIdx) => {
  row.split('').forEach((char, colIdx) => {
    const x = colIdx * gridSize
    const y = rowIdx * gridSize
    ctx.fillStyle = char === 'W' ? '#555' : '#f0f0f0'
    ctx.fillRect(x, y, gridSize, gridSize)
  })
})

后续需要新增其他关卡元素时，仅需要新增对应字符的判断分支即可。

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