let x, y; // 精灵的位置

let currentImage; // 当前显示的图像

let hasChanged; // 是否已经改变过图像

​

function preload() {

  img = loadImage('tuan.png'); // 加载第一个图像

  img2 = loadImage('tuan2.png'); // 加载第二个图像

}

​

function setup() {

  createCanvas(400, 400);

  x = width / 2; // 初始位置为画布中心

  y = height / 2;

  currentImage = img; // 初始图像为tuan

  hasChanged = false; // 初始时没有改变过图像

}

​

function draw() {

  background(220);

  drawGrid(); // 绘制九宫格

  image(currentImage, x, y, 50, 50); // 根据当前图像和精灵的位置绘制图像

  // 键盘输入处理

  if (keyIsDown(87)) { // W键

    y -= 5; // 向上移动

  }

  if (keyIsDown(83)) { // S键

    y += 5; // 向下移动

  }

  if (keyIsDown(65)) { // A键

    x -= 5; // 向左移动

  }

  if (keyIsDown(68)) { // D键

    x += 5; // 向右移动

  }

​

  // 检测是否进入左上角的格子

  if (x < width / 3 && y < height / 3) {

    if (!hasChanged) { // 如果还没有改变过图像

      currentImage = img2; // 改变图像为tuan2

      hasChanged = true; // 标记已改变图像

      setTimeout(() => {

        currentImage = img; // 半秒后恢复为tuan

      }, 500);

    }

  } else {

    hasChanged = false; // 一旦离开格子，重置标志

  }

}

​

// 绘制九宫格的函数

function drawGrid() {

  for (let i = 1; i < 3; i++) {

    line(width / 3 * i, 0, width / 3 * i, height); // 垂直线

    line(0, height / 3 * i, width, height / 3 * i); // 水平线

  }

}

​