Canvas中playerCar对象无法随键盘更新位置的技术求助

嘿，我帮你找到问题的根源啦！你的playerCar没法跟着按键移动，主要是两个小问题在搞鬼：

问题分析 #

• 对象坐标未同步：你修改的是全局的keyX和keyY，但playerCar对象自己的x、y属性根本没被更新，所以调用draw()时还是用的初始坐标，自然不会动。
• 画布未清除：每次绘制新汽车前没有清除画布，旧的红色矩形还留在原地，就算坐标更新了，视觉上也看不出移动效果。

修改后的完整代码 #

var canvas = document.getElementById('plot');
var context;
// 去掉全局keyX/keyY，直接操作playerCar的属性，更符合对象模式
playerCar = new car(100, 100, 'red');
playerCar2 = new car(350, 100, 'blue');

init();
render(); // 统一初始渲染

document.addEventListener('keydown', function(event){
 var keyPressed = event.keyCode;
 // 直接修改playerCar的坐标，省去全局变量
 switch(keyPressed){
 case 104: playerCar.y -= 1; break; // 上
 case 98: playerCar.y += 1; break; // 下
 case 100: playerCar.x -= 1; break; // 左
 case 102: playerCar.x += 1; break; // 右
 }
 render(); // 每次按键后重新渲染整个画面
 console.log('playerCar X = ' + playerCar.x);
 console.log('playerCar Y = ' + playerCar.y);
});

function init(){
 context = canvas.getContext('2d');
}

// 统一渲染函数：负责清除画布、绘制背景、绘制所有元素
function render() {
 // 清除整个画布，把旧的内容全部擦掉
 context.clearRect(0, 0, canvas.width, canvas.height);
 // 重新绘制绿色背景
 context.fillStyle = "green";
 context.fillRect(1, 1, canvas.width, canvas.height);
 // 绘制所有汽车
 playerCar.draw();
 playerCar2.draw();
}

function car (x, y, color){
 // 把汽车尺寸改成构造函数内的局部变量，避免全局污染
 var carWidth = 150;
 var carHeight = 100;
 this.x = x;
 this.y = y;
 this.color = color;
 this.draw = function (){
 context.fillStyle = this.color;
 context.fillRect(this.x, this.y, carWidth, carHeight);
 }
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="plot" width="800" height="800"></canvas>
<script src="index.js"></script>
</body>
</html>

关键改动说明 #

1. 去掉全局keyX/keyY，直接操作对象属性：
   既然用了对象模式，直接修改playerCar.x和playerCar.y更贴合设计思路，减少全局变量，后续扩展多辆可控汽车也更方便。

2. 新增统一的render()函数：
   把清除画布、绘制背景、绘制所有汽车的逻辑整合在一起，每次需要更新画面时只调用render()，确保旧图形被完全清除，新图形基于最新坐标绘制。

3. 优化构造函数变量作用域：
   把carWidth和carHeight放到car构造函数内部作为局部变量，避免变成全局变量导致后续创建的汽车对象共享同一尺寸（虽然当前场景没问题，但这是面向对象编程的好习惯）。

4. 初始渲染调用render()：
   确保初始画面也是通过统一的渲染流程生成的，保持代码一致性。

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