p5.js中keyIsDown实现图片切换失效问题求助

你的需求完全可行，但当前代码的逻辑错误导致了后续按键无法切换图片。

问题根源 #

第一次按下W键时，你执行了player = player2，这会让player和player2两个变量指向同一张图片对象。之后进入else分支时，player2 = player只是把player2重新指向它自己，没有任何实际意义。后续再按下按键时，player = player2相当于给变量赋值同一个对象，自然看不到图片切换效果。

解决方案 #

不要直接互相赋值图片变量，而是用一个状态变量来记录当前显示的是哪张图片，每次按键时切换这个状态即可。另外要注意：keyIsDown会在按键按住的每⼀帧都触发，所以需要额外处理防止重复切换；如果只是需要“按下一次切换一次”，用keyPressed事件会更简单。

方案1：结合keyIsDown（处理持续触发问题）

let player;
let player2;
let showPlayer1 = true; // 状态变量：标记当前显示player还是player2
let yPlayer = 300;
let vy = 0;
const jump = 10;

function preload() {
  player = loadImage('player.png');
  player2 = loadImage('player2.png');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // 根据状态绘制对应图片
  image(showPlayer1 ? player : player2, 100, yPlayer);
  
  // 处理玩家移动与重力
  yPlayer += vy;
  if (yPlayer > 300) {
    yPlayer = 300;
    vy = 0;
  }
  
  movePlayer();
}

function movePlayer() {
  // 用静态变量记录上一帧按键状态，防止按住时重复切换
  static let wasKeyDown = false;
  
  if (keyIsDown(87) && yPlayer === 300) {
    if (!wasKeyDown) {
      vy = -jump;
      showPlayer1 = !showPlayer1; // 切换图片状态
      wasKeyDown = true;
    }
  } else {
    wasKeyDown = false;
  }
}

方案2：用keyPressed事件（更适合单次触发场景）

如果你的需求只是“按下W键一次，切换一次图片”，keyPressed事件会更简洁，因为它只在按键按下的瞬间触发一次：

let player;
let player2;
let showPlayer1 = true;
let yPlayer = 300;
let vy = 0;
const jump = 10;

function preload() {
  player = loadImage('player.png');
  player2 = loadImage('player2.png');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  image(showPlayer1 ? player : player2, 100, yPlayer);
  
  // 处理移动与重力
  yPlayer += vy;
  if (yPlayer > 300) {
    yPlayer = 300;
    vy = 0;
  }
}

function keyPressed() {
  if (keyCode === 87 && yPlayer === 300) {
    vy = -jump;
    showPlayer1 = !showPlayer1; // 切换图片状态
  }
}

内容的提问来源于stack exchange，提问作者Danilo Nascimento D.M