p5.js点击按钮后如何在屏幕显示文本而非控制台输出？

核心问题 #

你的代码仅通过print()将Barb的回复输出到控制台，没有存储回复文本并在draw()循环中绘制它；同时存在textSize()调用顺序错误、文本位置可能被遮挡的问题，导致屏幕无法显示回复。

具体修复步骤 #

1. 添加全局变量存储回复文本
   在代码最顶部的变量声明区添加：

let barbReply = ""; // 用于保存Barb的回复内容

2. 修改按钮点击函数，同步保存回复文本
   将所有correctX和incorrect函数中的print()改为同时赋值给barbReply，示例：

function correct0(){
  barbReply = "Barb says,'Good job!' Hold left click and '2' to advance'";
  print(barbReply);
}

function incorrect(){
  barbReply = "Barb says, 'Hmm...that response to my question does not make sense, please try again!'";
  print(barbReply);
}

（其余correct1至correct4函数执行同样修改）

3. 在draw()中绘制回复文本
   在每个scene的判断块内，绘制完图片和提示文本后，添加回复文本的绘制代码。注意先设置文本样式再调用text()，并选择不被图片/按钮遮挡的位置（比如图片下方、按钮上方区域）：
   以scene == 1为例，修改后代码：

if(scene ==1){
  image(img,0,0,800,600);
  fill(0); // 设置文本为黑色，与浅蓝色背景形成对比
  textSize(19);
  text("Read the options out loud and choose your answer, make sure to check the console for BARB's reply!", 10, 620);
  // 绘制Barb的回复
  text(barbReply, 10, 680);
  // 原有按键判断代码...
}

其余scene块执行类似修改，在提示文本后添加text(barbReply, 10, 680);即可。

4. 修正textSize()调用顺序
   原代码中textSize()在text()之后调用，会导致文本使用默认大小显示。需将textSize()移到对应text()之前，确保样式生效。

额外优化建议 #

• 可在draw()开头统一设置文本样式（如fill(0); textSize(18);），避免每个scene重复编写；
• 若回复文本过长，可在setup()中调用textWrap(WORD)实现自动换行。

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