效果如下：我们可以看到页面了大体的结构已经出现，也就是骨架已经搭好了，现在需要用css来加强样式；3.2CSS创建页面风格整体背景设置body{background-color:silver;/*设置页面背景颜色为银色*/}游戏界面风格设置#container{background-color:white;width:600px;margin:auto;padding:20px;text-align:center;box-shadow:10px10px15pxblack;}游戏时间面板样式设置#timeBox{margin:10px0;font-size:18px;}游戏按钮样式设置button{width:200px;height:50px;margin:10px0;border:0;outline:none;font-size:25px;font-weight:bold;color:white;background-color:lightcoral;}鼠标悬停时的按钮样式设置button:hover{background-color:coral;}设置好界面的整体风格后，我们得到一个完整的界面，如下图：可以看到整体静态界面已经搭建3.3js搭建交互效果3.3.1对象获取和图片设置target对象获取varc=document.getElementById('myCanvas');//获取canvas对象varctx=c.getContext('2d');//获取2D上下文对象在图片加载时声明拼图的图片素材来源varimg=newImage();img.src="image/pintu.jpg";img.onload=function(){//generateNum();//printTherandompuzzledrawCanvas();//在画布上绘制拼图}3.3.2初始化拼图，素材图片需要分为3行3列的9个小方块随机放置在画布上；为了在游戏过程中找出当前区域中的哪个方块应该显示在图片中，首先将原始图片上的9个小方块区域编号；定义初始块位置varnum=[[00,01,02],[10,11,12],[20,21,22]];打乱拼图的位置functiongenerateNum(){//循环50次使拼图Shufflefor(vari=0;i<50;i++){//随机抽取其中一个数据vari1=Math.round(Math.random()*2);varj1=Math.round(Math.random()*2);//随机选择其中一条数据vari2=Math.round(Math.random()*2);varj2=Math.round(Math.random()*2);//交换它们的位置vartemp=num[i1][j1];num[i1][j1]=num[i2][j2];num[i2][j2]=temp;}}绘制拼图自定义名称的drawCanvas()方法用于在画布上绘制拼图后的图片；functiondrawCanvas(){//清空画布ctx.clearRect(0,0,300,300);//使用双for循环绘制3x3拼图for(vari=0;i<3;i++){for(varj=0;j<3;j++){if(num[i][j]!=22){//获取值的十位，即在哪一行varrow=parseInt(num[i][j]/10);//获取数组的个位数，即第哪一列varcol=num[i][j]%10;//绘制在canvas的相关位置上ctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);//w:300/3=100(小图宽度)}}}}如下：3.3.3事件绑定监听鼠标监听事件c．onmousedown=function(e){varbound=c.getBoundingClientRect();//获取画布边界varx=e.pageX-bound.left;//获取鼠标在画布上的坐标位置(x,y)vary=e.pageY-bound.top;varrow=parseInt(y/w);//将x和y转换成varcol的几行几列=parseInt(x/w);if(num[row][col]!=22){//如果当前点击的不是空白区域detectBox(row,col);//移动点击的框drawCanvas();//重绘画布varisWin=checkWin();//检查游戏是否成功if(isWin){//如果游戏成功clearInterval(timer);//清除定时器ctx.drawImage(img,0,0);//绘制完整图片ctx.font="bold68pxserif";//设置字体为粗体,字号68,serifctx.fillStyle="red";//设置填充色为红色ctx.fillText("游戏是successful!",20,150);//显示提示语句}}}点击框移动functiondetectBox(i,j){//如果点击的框不在最上面一行if(i>0){//检测是否空白区域在当前方块的正上方if(num[i-1][j]==22){//交换空白区域和当前方块的位置num[i-1][j]=num[i][j];num[i][j]=22;return;}}//如果点击的方块不在底线if(i<2){//检查空白区域是否在当前方块的正下方if(num[i+1][j]==22){//将空白区域的位置与当前方块交换num[i+1][j]=num[i][j];num[i][j]=22;return;}}//如果点击的方块不在最左边A列if(j>0){//检查空白区域是否在当前方块的左边if(num[i][j-1]==22){//交换空白区域和当前方块的位置num[i][j-1]=num[i][j];num[i][j]=22;return;}}//如果点击的方块不在最右边的列if(j<2){//检查空白区域是否在当前方块的右侧if(num[i][j+1]==22){//交换位置空白区域和当前方格数num[i][j+1]=num[i][j];num[i][j]=22;return;}}}3.3.4游戏计时自定义函数getCurrentTime()用于游戏计时；functiongetCurrentTime(){s=parseInt(s);//将时分秒转为整数，用于自增或赋值m=parseInt(m);h=parseInt(h);s++;//每隔一个变量s先自增1if(s==60){s=0;//如果秒到了60，就回到0m++;//分钟加1}if(m==60){m=0;//如果分钟同样到60，会返回0h++;//小时递增1}//修改时分秒显示效果保持两位数if(s<10)s="0"+s;if(m<10)m="0"+m;if(h<10)h="0"+h;time.innerHTML=h+":"+m+":"+s;//显示当前计时时间page}在JavaScript中使用setInterval()方法每1秒调用一次getCurrentTime()方法，达到更新效果；vartimer=setInterval("getCurrentTime()",1000)3.3.5游戏成功与重启游戏成功判断及显示效果实现自定义函数checkWin()用于判断游戏是否成功；functionrestartGame(){clearInterval(timer);//清除定时器s=0;//清除时间m=0;h=0;getCurrentTime();//重新显示时间timer=setInterval("getCurrentTime()",1000);generateNum();//重新打乱拼图的顺序drawCanvas();//绘制拼图}如果成功，使用clearInterval()方法清除定时器然后在画布上绘制完整的图片，使用fillText()方法绘制“游戏成功”的文字图案；if(isWin){//如果游戏成功clearInterval(timer);//清空定时器ctx.drawImage(img,0,0);//绘制完整图片ctx.font="bold68pxserif";//设置字体加粗，字号68，serifctx.fillStyle="red";//设置填充色为红色ctx.fillText("游戏成功！",20,150);//显示提示语句}3.4最终效果演示静态效果如上图，至于游戏是否成功，这里小伙伴们可以自行操作；4.总结一下这个案例我们使用新的HTML5featurecanvas来创建一个简单的9格拼图游戏，一般不会特别复杂。主要是图像分割方块移动事件的绑定和重新游戏的初始化操作。理清了游戏逻辑之后，代码的编写其实并不难。有兴趣的朋友可以试试。