CodeHS游戏开发clearScreen清屏报错及代码精简方案咨询

一、clearScreen报错无法清屏问题 #

原因 #

• 所有界面元素（Sky、Sun等）均在titleScreen函数内部用var声明，属于函数局部变量，仅能在titleScreen内部访问，clearScreen的作用域下不存在这些变量，因此触发未定义报错。
• clearScreen开头调用titleScreen()属于逻辑错误，清屏前重新渲染标题页，完全达不到清屏效果。

解决方案 #

直接使用CodeHS内置的removeAll()方法即可一键清空画布所有已添加元素，无需逐个手动删除，修改后的clearScreen代码如下：

function clearScreen() {
    // 清空画布所有元素
    removeAll();
    // 清屏后加载第一关
    level1();
}

如果确实需要保留逐个删除的逻辑，可将所有界面元素声明为全局变量：在代码最顶部和brown变量一起声明所有元素变量，在titleScreen内部赋值时去掉var关键字即可。

二、窗户生成函数封装方案 #

窗户的尺寸、样式完全统一，仅坐标不同，可封装通用生成函数，替换重复的10次窗户创建代码：

第一步：封装创建函数 #

// 通用窗户生成函数，入参为窗户左上角的x、y坐标
function createWindow(posX, posY) {
    var newWindow = new Rectangle(35, 35);
    newWindow.setPosition(posX, posY);
    newWindow.setColor(Color.white);
    add(newWindow);
}

第二步：替换原有重复代码 #

删除原来10个Window1到Window10的创建代码，替换为循环调用封装好的函数即可：

// 生成5行2列的所有窗户
for (var row = 0; row < 5; row++) {
    // 每行两个窗户，y坐标随行数递增
    var currentY = 110 + row * 45;
    createWindow(60, currentY);
    createWindow(105, currentY);
}

修改后代码量大幅减少，后续调整窗户样式仅需要修改createWindow函数内部逻辑即可，维护效率更高。

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