Code.org GameLab中图形无法显示的问题求助

在Code.org GameLab中，图形不显示的核心原因是绘图指令的位置错误：

GameLab的draw()函数是程序的渲染循环，每秒会自动执行约60次，每次执行前都会清空画布。你把rect()、text()这类静态绘图代码放在了draw()函数外面，这些代码只会在程序启动时执行一次，之后每次draw()运行都会清屏，导致静态图形瞬间消失，无法持续显示。

另外，虽然精灵的drawSprites()放在了draw()里，但你设置的char.x = char.x + 50会让角色每秒移动3000像素，很快就会飞出画布，可能也会让你误以为精灵没显示。

修正后的代码 #

var bg = createSprite(200, 200);
bg.setAnimation("bg");
var char = createSprite(100, 100);
char.setAnimation("guy3");
var guy = createSprite(300, 270);
guy.setAnimation("guy2");

function draw() {
  // 先绘制静态图形
  fill("brown");
  noStroke();
  rect(40, 150, 200, 25);
  rect(250, 300, 200, 25);
  
  stroke("black");
  fill("white");
  textSize(40);
  text("yea obv", 15, 250);
  text("wow this is good", 20, 50);
  
  // 调整角色移动速度，避免瞬间飞出屏幕
  char.x = char.x + 1;
  // 绘制所有精灵
  drawSprites();
}

关键注意点 #

• 所有需要持续显示的绘图指令（rect、text、fill等）必须放在draw()函数内部，确保每次渲染循环都能重新绘制。
• drawSprites()要放在draw()里，才能每次循环都渲染精灵。
• 控制角色移动速度，避免因速度过快导致角色瞬间离开可视区域。

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