双Sprite同时显示与移动问题求助（JavaScript+HTML）

核心问题排查 #

你的代码里有几个致命问题导致Pounce完全无法显示和操作：

• 全局变量/函数被完全覆盖：你把两个精灵的代码直接复制了两遍，所有全局变量（比如SpriteX、SpriteImage）和函数（比如drawSprite、whenKeyPressed）都被后面的gsu.G代码覆盖，Pounce的逻辑直接失效。
• 按键映射彻底错误：最后一段按键处理代码里，把A键（97）映射成D键的键码（68），D键（100）映射成C键的键码（67），不仅逻辑混乱，还覆盖了之前的方向键处理逻辑。
• 双定时器冲突：两个setInterval同时运行，加上INTERVAL=0会让浏览器疯狂执行渲染，导致画面混乱。
• 局部清除画布留残影：只用clearRect清除单个精灵位置，移动时容易留下残影，且无法保证两个精灵的渲染顺序。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dual Sprite Control</title>
<script type="application/javascript">
var canvas;
var ctx;
var intervalId;

// 封装两个精灵对象，各自独立属性
var pounce = {
  x: 100,
  y: 100,
  width: 32,
  height: 32,
  row: 0,
  col: 0,
  maxRow: 8,
  maxCol: 8,
  image: new Image(),
  keys: {
    left: 37,
    up: 38,
    right: 39,
    down: 40
  }
};

var gsuG = {
  x: 200,
  y: 200,
  width: 32,
  height: 32,
  row: 0,
  col: 0,
  maxRow: 8,
  maxCol: 8,
  image: new Image(),
  keys: {
    left: 65,
    up: 87,
    right: 68,
    down: 83
  }
};

// 设置图片路径
pounce.image.src = "Pounce.png";
gsuG.image.src = "Gsug.png";

function init() {
  canvas = document.getElementById("theCanvas");
  ctx = canvas.getContext("2d");
  
  // 确保两张图片都加载完成后再启动渲染
  var imagesLoaded = 0;
  function checkLoaded() {
    imagesLoaded++;
    if (imagesLoaded === 2) {
      intervalId = setInterval(tick, 16); // 约60fps
    }
  }
  pounce.image.onload = checkLoaded;
  gsuG.image.onload = checkLoaded;
}

function drawSprite(sprite) {
  ctx.drawImage(
    sprite.image,
    sprite.col * sprite.width,
    sprite.row * sprite.height,
    sprite.width,
    sprite.height,
    sprite.x,
    sprite.y,
    sprite.width,
    sprite.height
  );
}

function tick() {
  // 清除整个画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制两个精灵
  drawSprite(pounce);
  drawSprite(gsuG);
}

function handleKeyDown(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;
  
  // 处理Pounce的方向键控制
  switch(key) {
    case pounce.keys.left:
      if (pounce.x > 0) pounce.x--;
      break;
    case pounce.keys.up:
      if (pounce.y > 0) pounce.y--;
      break;
    case pounce.keys.right:
      if (pounce.x < canvas.width - pounce.width) pounce.x++;
      break;
    case pounce.keys.down:
      if (pounce.y < canvas.height - pounce.height) pounce.y++;
      break;
  }
  
  // 处理gsu.G的WASD控制
  switch(key) {
    case gsuG.keys.left:
      if (gsuG.x > 0) gsuG.x--;
      break;
    case gsuG.keys.up:
      if (gsuG.y > 0) gsuG.y--;
      break;
    case gsuG.keys.right:
      if (gsuG.x < canvas.width - gsuG.width) gsuG.x++;
      break;
    case gsuG.keys.down:
      if (gsuG.y < canvas.height - gsuG.height) gsuG.y++;
      break;
  }
}

document.addEventListener("keydown", handleKeyDown);
</script>
</head>
<body onload="init()" bgcolor="#0f0000" text="#ffffff">
<center>
  <canvas id="theCanvas" tabindex="1" width="640" height="480"></canvas>
  <h2>方向键控制Pounce，WASD控制gsu.G</h2>
</center>
</body>
</html>

关键修复说明 #

1. 精灵对象封装：把每个精灵的位置、图片、按键映射都封装成独立对象，彻底避免全局变量冲突。
2. 统一渲染循环：只用一个定时器（约60fps），每次先清除整个画布，再依次绘制两个精灵，保证画面整洁。
3. 正确按键映射：直接使用标准键码（方向键37-40，WASD为87、65、83、68），不需要多余的映射转换。
4. 图片加载校验：确保两张图片都加载完成后再启动渲染，避免出现空白精灵。
5. 边界检测优化：用画布尺寸减去精灵尺寸作为移动边界，避免精灵移出画布。

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