css.game-box{display:flex;弹性包装：包装；文本对齐：居中；.game-item{宽度：1.25rem;高度：0.3rem；背景：黄色；:全部为0.2s；&.game-begin{背景：t透明的;}&.active{border:1pxsolidblack;}}}效果图开始做动画效果新建一个Game类，有一个run方法和一个finish方法开始以不同的速度运行动画，使用requestAnimationFrame和setInterval有点不合适，所以：可以使用setTimeout+speed参数来控制动画的速度classGame{constructor(idx){this.idx=idx;这个.speed=400;}addIdx(){}speedControl(){}finish(){}run(cb){this.speedControl();setTimeout(()=>{this.addIdx();!this.isFinish&&this.run(cb);},this.speed);涉及到运行结束的通知，需要先做减速动画，然后停在对应的num，然后调用回调函数，所以先暂存结束回调和终点，设置动画减速。finish(num,finishCb){this.oil=false;this.endIdx=num;this.finishCb=finishCb;}速度控制默认速度为加速度（this.oil=true）达到预期速度停止加速，当减速时同理。为了达到easing的结束效果，结束时间经过：到达最小速度，到达结束位置。speedUp(){this.speed-=60;}speedDown(){this.speed+=200;}speedControl(){if(this.speed>this.Max_Speed){if(this.oil){this.speedUp();}}if(!this.oil){if(this.speed{game.finish(2,this.gameFinish)},3000);}}最后附加上完整游戏代码：classGame{constructor(idx){this.idx=idx;这个.speed=400;这个.oil=true;this.isFinish=false;this.endIdx=null;this.finishCb=function(){}//常量this.Max_Speed=100;这个.Min_Speed=500;this.Order_List=[0,1,2,5,8,7,6,3];this.Game_Box_Num=8;}speedUp(){this.speed-=60;}speedDown(){this.speed+=200;}speedControl(){if(this.speed>this.Max_Speed){if(this.oil){这个。加速（）;}}if(!this.oil){if(this.speed{this.addIdx();!this.isFinish&&this.run(cb);},this.speed);}}导出默认游戏；大体效果主要功能已经实现，想更漂亮改一下CSS就行了，动画时间也需要调试（避嫌，具体结果无法提供--）。最后译者写了一个React+Hooks的UI库，方便大家学习使用。React+Hooks项目欢迎关注公众号《前端进阶教程》认真学习前端，共同进步。