前言老板说我上班玩游戏我说我是在测试自动驾驶算法…一、从摸鱼被抓到技术展示上周五下午4点半我正在调试一个小游戏——用JS模拟自动驾驶汽车。老板突然站在我身后眉头紧锁。“上班时间玩游戏”我心跳漏了一拍但瞬间冷静下来点开了代码编辑器“老板我在测试我们自动驾驶项目的核心算法。您看这是路径规划模块…”我指着屏幕上那几行让小车自动避障的代码老板的表情从质疑变成了好奇。5分钟后他拉过椅子坐了下来“这个转弯逻辑怎么优化的”一周后这个小游戏成了公司的午休必备连前端、后端、测试的同事都在排行榜上较劲。今天我把这个项目的完整代码和设计思路公开让你也能在测试算法的名义下光明正大地玩学习游戏。二、核心代码50行实现自动驾驶AI先看最核心的部分——自动驾驶的大脑javascriptclass 自动驾驶AI {constructor() {this.决策历史 [];this.学习率 0.1;}做出决策(前方障碍物, 左侧障碍物, 右侧障碍物, 当前速度) { // 紧急制动前方有障碍物且距离过近 if (前方障碍物 前方障碍物.距离 当前速度 * 2) { this.记录决策(紧急制动, false); return { 动作: 刹车, 力度: 1.0 }; } // 寻找最佳路径 let 最佳方向 this.评估方向([ { 方向: 左转, 安全度: !左侧障碍物 ? 1.0 : 0.3 }, { 方向: 保持, 安全度: !前方障碍物 ? 0.7 : 0.1 }, { 方向: 右转, 安全度: !右侧障碍物 ? 1.0 : 0.3 } ]); // 根据历史优化决策 const 优化决策 this.从历史学习(最佳方向); this.记录决策(优化决策.方向, true); return { 动作: 优化决策.方向, 力度: 优化决策.安全度, 理由: ${前方障碍物 ? 前方有障碍 : 道路畅通}, 选择${优化决策.方向} }; } 评估方向(方向列表) { return 方向列表.reduce((最佳, 当前) 当前.安全度 最佳.安全度 ? 当前 : 最佳 ); } 从历史学习(决策) { // 简单强化学习成功的决策更可能被重复 const 历史成功 this.决策历史 .filter(d d.成功 d.方向 决策.方向) .length; if (历史成功 2) { 决策.安全度 this.学习率; } return 决策; } 记录决策(方向, 成功) { this.决策历史.push({ 方向, 成功, 时间: Date.now() }); // 只保留最近100条记录 if (this.决策历史.length 100) { this.决策历史.shift(); } }}这个AI会学习它记得哪些决策成功了下次更可能选择相同的动作。这不就是机器学习的基本原理吗三、完整游戏代码复制即玩html无人驾驶测试平台 自动驾驶测试平台得分:0距离:0m速度:0km/h模式:自动驾驶 自动驾驶 手动驾驶自动驾驶决策:等待指令...script // 初始化 const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); let 自动驾驶模式 true; let 游戏运行中 true; let 得分 0; let 距离 0; let 速度 5; // 车辆类 class 车辆 { constructor() { this.x canvas.width / 2 - 25; this.y canvas.height - 100; this.width 50; this.height 80; this.color #e74c3c; this.速度 速度; this.AI new 自动驾驶AI(); } 绘制() { // 车身 ctx.fillStyle this.color; ctx.fillRect(this.x, this.y, this.width, this.height); // 车窗 ctx.fillStyle #3498db; ctx.fillRect(this.x 5, this.y 10, this.width - 10, 25); // 车灯 ctx.fillStyle #f1c40f; ctx.fillRect(this.x 5, this.y, 10, 10); ctx.fillRect(this.x this.width - 15, this.y, 10, 10); // 车轮 ctx.fillStyle #2c3e50; ctx.fillRect(this.x - 5, this.y 20, 5, 40); ctx.fillRect(this.x this.width, this.y 20, 5, 40); } 移动(方向) { if (方向 左 this.x 0) this.x - 8; if (方向 右 this.x canvas.width - this.width) this.x 8; } AI决策(障碍物列表) { const 前方障碍物 障碍物列表.find(o o.y this.y Math.abs(o.x o.width/2 - (this.x this.width/2)) 60 ); const 左侧障碍物 障碍物列表.find(o o.y this.y o.x o.width this.x - 30 o.x this.x ); const 右侧障碍物 障碍物列表.find(o o.y this.y o.x this.x this.width 30 o.x o.width this.x this.width ); const 决策 this.AI.做出决策(前方障碍物, 左侧障碍物, 右侧障碍物, this.速度); document.getElementById(decision).textContent 决策.理由; if (决策.动作 左转) this.移动(左); if (决策.动作 右转) this.移动(右); if (决策.动作 刹车) this.速度 * 0.8; return 决策; } } // 障碍物类 class 障碍物 { constructor() { this.width Math.random() * 80 40; this.height 40; this.x Math.random() * (canvas.width - this.width); this.y -this.height; this.速度 3 Math.random() * 2; this.color hsl(${Math.random() * 60 20}, 70%, 50%); this.类型 Math.random() 0.7 ? 锥桶 : 箱子; } 更新() { this.y this.速度; return this.y canvas.height; } 绘制() { ctx.fillStyle this.color; if (this.类型 锥桶) { // 绘制锥桶 ctx.beginPath(); ctx.moveTo(this.x this.width/2, this.y); ctx.lineTo(this.x, this.y this.height); ctx.lineTo(this.x this.width, this.y this.height); ctx.closePath(); ctx.fill(); // 条纹 ctx.fillStyle white; ctx.fillRect(this.x this.width/2 - 5, this.y 10, 10, 5); } else { // 绘制箱子 ctx.fillRect(this.x, this.y, this.width, this.height); // 箱子纹理 ctx.strokeStyle rgba(0,0,0,0.3); ctx.lineWidth 2; ctx.strokeRect(this.x 5, this.y 5, this.width - 10, this.height - 10); } } 是否碰撞(车辆) { return this.x 车辆.x 车辆.width this.x this.width 车辆.x this.y 车辆.y 车辆.height this.y this.height 车辆.y; } } // 自动驾驶AI类 class 自动驾驶AI { constructor() { this.决策历史 []; this.学习率 0.1; } 做出决策(前方障碍物, 左侧障碍物, 右侧障碍物, 当前速度) { if (前方障碍物 前方障碍物.y - 我的车辆.y 当前速度 * 15) { this.记录决策(紧急制动, false); return { 动作: 刹车, 理由: ⚠️ 前方紧急障碍物 }; } let 方向评估 [ { 方向: 左转, 安全度: !左侧障碍物 ? 1.0 : 0.3 }, { 方向: 保持, 安全度: !前方障碍物 ? 0.7 : 0.1 }, { 方向: 右转, 安全度: !右侧障碍物 ? 1.0 : 0.3 } ]; let 最佳决策 方向评估.reduce((最佳, 当前) 当前.安全度 最佳.安全度 ? 当前 : 最佳 ); const 优化决策 this.从历史学习(最佳决策); this.记录决策(优化决策.方向, true); return { 动作: 优化决策.方向, 理由: ${前方障碍物 ? 前方有障碍 : 道路畅通}, AI选择${优化决策.方向} }; } 从历史学习(决策) { const 历史成功 this.决策历史 .filter(d d.成功 d.方向 决策.方向) .length; if (历史成功 2) { 决策.安全度 this.学习率; 决策.安全度 Math.min(决策.安全度, 1.0); } return 决策; } 记录决策(方向, 成功) { this.决策历史.push({ 方向, 成功, 时间: Date.now() }); if (this.决策历史.length 100) { this.决策历史.shift(); } } } // 游戏对象 const 我的车辆 new 车辆(); let 障碍物列表 []; let 障碍物计时器 0; let 帧计数器 0; // 游戏主循环 function 游戏循环() { if (!游戏运行中) return; // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制道路 绘制道路(); // 生成新障碍物 障碍物计时器; if (障碍物计时器 60 - 得分 * 0.1) { 障碍物列表.push(new 障碍物()); 障碍物计时器 0; } // 更新和绘制障碍物 障碍物列表.forEach((障碍物, 索引) { const 已移出 障碍物.更新(); 障碍物.绘制(); // 碰撞检测 if (障碍物.是否碰撞(我的车辆)) { 游戏运行中 false; alert( 碰撞发生\n最终得分${得分}\n行驶距离${距离}m\n\nAI学习次数${我的车辆.AI.决策历史.length}); } // 移出屏幕的障碍物 if (已移出) { 障碍物列表.splice(索引, 1); 得分 10; 速度 0.01; } }); // 更新车辆 if (自动驾驶模式) { 我的车辆.AI决策(障碍物列表); } 我的车辆.绘制(); // 更新UI 距离 速度 * 0.1; document.getElementById(score).textContent 得分; document.getElementById(distance).textContent Math.floor(距离); document.getElementById(speed).textContent Math.floor(速度 * 20); // 每1000帧增加难度 帧计数器; if (帧计数器 % 1000 0) { document.getElementById(decision).textContent AI正在适应更高难度...; } requestAnimationFrame(游戏循环); } // 辅助函数 function 绘制道路() { // 道路背景 ctx.fillStyle #34495e; ctx.fillRect(0, 0, canvas.width, canvas.height); // 道路中线虚线 ctx.strokeStyle #f1c40f; ctx.lineWidth 4; ctx.setLineDash([20, 20]); ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); ctx.setLineDash([]); // 道路边缘 ctx.strokeStyle white; ctx.lineWidth 3; ctx.beginPath(); ctx.moveTo(100, 0); ctx.lineTo(100, canvas.height); ctx.moveTo(canvas.width - 100, 0); ctx.lineTo(canvas.width - 100, canvas.height); ctx.stroke(); } function 切换模式(模式) { 自动驾驶模式 模式 auto; document.getElementById(mode).textContent 自动驾驶模式 ? 自动驾驶 : 手动驾驶; // 更新按钮样式 document.querySelectorAll(.mode-btn).forEach(btn btn.classList.remove(active)); document.querySelector(.mode-btn.${模式}).classList.add(active); document.getElementById(decision).textContent 自动驾驶模式 ? AI已接管控制权 : 手动控制模式; } // 事件监听 document.addEventListener(keydown, (e) { if (!自动驾驶模式) { if (e.key ArrowLeft) 我的车辆.移动(左); if (e.key ArrowRight) 我的车辆.移动(右); if (e.key ArrowUp) 速度 Math.min(速度 0.5, 10); if (e.key ArrowDown) 速度 Math.max(速度 - 0.5, 3); } // R键重新开始 if (e.key r !游戏运行中) { 游戏运行中 true; 得分 0; 距离 0; 速度 5; 障碍物列表 []; 我的车辆.x canvas.width / 2 - 25; 游戏循环(); } }); // 启动游戏 游戏循环(); /script四、如何在测试的名义下玩游戏给老板看的专业术语表“游戏” → “自动驾驶仿真平台”“得分” → “算法性能评估指标”“障碍物” → “道路异常事件”“AI学习” → “神经网络优化过程”“重新开始” → “重置测试环境”写进日报的工作内容text今日工作优化了路径规划算法的决策函数score从500提升到1200增加了强化学习模块AI能根据历史数据优化决策测试了在不同速度下的避障成功率验证了算法在复杂路况下的鲁棒性明日计划引入CNN识别更多障碍物类型优化紧急制动算法的响应时间回答同事疑问的标准话术“这不是游戏是Tesla开源算法的简化实现”“我在测试不同参数对避障成功率的影响”“这个可视化能帮我们理解自动驾驶的决策过程”“你要不要试试我的’测试平台’顺便帮我收集点数据”五、真正的学习价值这个游戏确实有技术含量状态机设计AI如何评估不同动作的价值碰撞检测矩形碰撞的数学原理游戏循环requestAnimationFrame的最佳实践性能优化对象池管理障碍物UI/UX设计如何展示复杂数据最有趣的是强化学习的简单实现AI会记住成功的决策并加强它。虽然简化了但思想是相通的。六、办公室传播秘诀我做了三件事让这个项目火遍全公司排行榜系统每天邮件发送前10名分享功能生成驾驶报告发到群里自定义障碍物可以用同事头像做障碍物慎用上周五的团建我们甚至办了场自动驾驶大赛冠军是个测试妹子——她用数据分析的方法找到了最优参数组合。七、最后的技术思考老板后来真的让我把这个算法用到公司的IoT项目里。虽然生产环境的代码复杂得多但核心思想一样基于传感器数据实时决策持续学习。现在你可以光明正大地测试自动驾驶算法了。如果被质疑就指着屏幕上的AI决策日志说“看它刚刚学会了新的避障策略。”记住重要的不是代码本身而是你如何定义和解释这段代码。游戏已就绪开始你的算法测试吧 在评论区分享你的最高分和AI的有趣决策。点赞过500我公开多车协同避障的版本——那个才是真正的技术挑战