成品效果

body div id=' game ' style='位置： relative '/div/body/* * * js配置*/var config={ width: 300，height: 300，img: ' ./img/fj.jpg '，gamedom :文档。getelementbyid(' game ')，row: 3，//3行col: 3 //3列}//经过计算的一些数据var computed={ num : config。col *配置。第行，//方块数量w: config.width/config.col，//每个小方块的宽度h :配置。高度/配置。row/每个小方块的高度}//方块对象的数组，每个对象中记录了方块的正确坐标、当前坐标唐元素、以及一些实用方法定义变量区块；/** * 为全局变量阻碍赋值*/function setBlocks(){ blocks=[]；var points=getPointsArray()；//该数组用于设置每个方块的正确坐标var shuffledppoints=[.点数];//复制后的数组用于在洗牌后设置方块的当前坐标洗牌（洗牌点数);//洗牌for(var I=0；我分。长度；I){ const point=points[I]；//创建方块对象var b={ left: point.left，top: point.top，crowlft : shuffledppoints[I].左侧，curtop :洗牌分[I].顶部，DOM :文档。创建元素(' div ')，更新(){ this。多姆。风格。transition=' all。5s '；这个。多姆。风格。左=这个。Collft ' px这个。多姆。风格。top=这个。Curtop ' px}，IsCorrect(){返回这个。Curtop===这个。在这上面。Collft===这个。向左；}，isempt : I===分。长度-1//是否应该是空白方块} b . DOM。风格。宽度=计算值。w ' px唐。风格。高度=计算值。h ' px唐。风格。位置='绝对'；唐。风格。边框=' 1px实心# fff '；唐。风格。box size=' border-box '；唐。风格。背景=` URL($ { config。img } ')`；b.dom.style.cursor="指针";唐。风格。背景位置=`-$ { b . left } px-$ { b . top } px `；唐。block=b；唐。onclick=function(){ SwitCh block(这个。块)；} b . update()；街区。push(b)；}}/** * 生成游戏*/函数generateGame(){ config。游戏世界。风格。宽度=配置。宽度' px '；配置。GameDom。风格。高度=配置。高度“px”；配置。GameDom。风格。边框=' 2px实心# 8c c8 c '；配置。GameDom。InnerHTMl=//清空区域用于(块的常量项){ if(！项目。isempty){ config。游戏世界。appendchild(项目。DOM)；} }}/** * 获得所有方块的可取到的坐标数组*/函数getPointsArray(){ var arr=[]；for(var I=0；我计算过了我。推送({左：(I % config。col)*已计算。最大：个解析器。col)*已计算。h })；}返回arr}/** *将某个街区对象的坐标，与空坐标交换* @ param { * }块SwitCh功能块(块){ //找到空坐标var空块=块。find(b=b . isempty)；//判断是否相邻if(数学。ABS(块。空块。数学。ABS(块。curtop-emptyblock。curtop)！==已计算。w){ return；} //交换var bLeft=block . CollFortvar bTop=block . CurtOpblock。Collft=空块。Collft封锁。curtop=emptyblock。curtopemptyblock . Collft=bleftemptyBlock . CurtOp=BTOpblock。update()；emptyblock。update()；if(isWin()){ setTimeout(()={ alert('游戏胜利') }, 500);}}/** * 数组洗牌* @ param { * } arr */函数shuffle(arr){ for(var I=0；我被捕了。长度-1；i ) { var targetIndex=getRandom(0，arr。长度-1)；变温=arr[I]；arr[I]=arr[TargetIndex]；arr[TargetIndex]=temp；} }函数getRandom(min，max){ var dec=max-min；返回数学。地板(数学。random()* dec min)；}/** * 游戏是否胜利*/函数isWin() { for (const b of blocks) { if(！b . IsCorrect()){ return false；} }返回true } setBlocks()；generateGame()；总结

以上是边肖介绍的基于JS的简单滑块拼图。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！