NodeJS终端画布中点位置错误：如何将点放置到正确位置？

问题根源 #

你的代码存在三个核心问题导致点位置错误：

• 二维数组索引顺序颠倒：canvas是按行构建的二维数组，canvas[y]对应y坐标的行，行内的元素对应x坐标位置。但你在createAPointIntoTheCanvas中误用了canvas[x][y]，把x和y的索引顺序搞反了。
• 画布输出格式错误：canvas.join(" ")会将所有行数组直接用空格拼接，破坏了画布的行结构，导致显示混乱。
• 循环变量未声明：createCanvas里的i和j没有用let/const声明，会成为全局变量，可能引发意外问题。

修正后的代码 #

let canvas = []
let canvasHeight = process.stdout.getWindowSize()[1] - 25
let canvasWidth = process.stdout.getWindowSize()[0]

function createCanvas() {
    // 用let声明循环变量，避免全局作用域污染
    for (let i = 0; i < canvasHeight; i++) {
        const row = []
        for (let j = 0; j < canvasWidth; j++) {
            row.push(" ")
        }
        canvas.push(row)
    }
}
createCanvas()

function createAPointIntoTheCanvas(x, y) {
    if (x >= 0 && x < canvasWidth && y >= 0 && y < canvasHeight) {
        // 修正索引顺序：先取y对应的行，再设置x位置的元素
        canvas[y][x] = "+"
    }
}
createAPointIntoTheCanvas(5, 5)

// 将每行转为字符串，用换行符拼接行结构，正确输出画布
console.log(canvas.map(row => row.join('')).join('\n'))

修复说明 #

1. 修正索引顺序后，createAPointIntoTheCanvas(5,5)会准确在x=5、y=5的位置绘制"+"；
2. 输出时通过map将每行数组转为字符串，再用\n拼接，保证画布的行结构正常显示；
3. 给循环变量添加let声明，避免全局变量污染。

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