上次我们已经讲解了制作的原理，并且展示了主要代码。

这次我将完整的代码给大家，仅供参考。

HTML部分如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拼图游戏——初级</title>
  6.     <link rel="stylesheet" href="css/button.css">
  7.     <script src="js/jquery.js"></script>
  8.     <script src="js/level1.js"></script>
  9. </head>
  10. <body>
  11. <div class="main">
  12. <div class="left">
  13. <h3>目标图</h3>
  14. <div class="pic" id="mainpic"></div>
  15. <br><br>
  16. <h3>所用时间</h3>
  17. <p id="timer">0分0秒</p>
  18. </div>
  19. <div class="center">
  20.     <table class="picbox" cellspacing="0" cellpadding="1">
  21.     <tbody id="picbox">
  22.     </tbody>
  23.     </table>
  24. </div>
  25. <div class="right">
  26.     <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>
  27.     <a href="level1.html" class="btn btn-sm animated-button victoria-two">初级</a>
  28.     <a href="level2.html" class="btn btn-sm animated-button victoria-three">中级</a>
  29.     <a href="level3.html" class="btn btn-sm animated-button victoria-four">高级</a>
  30. </div>
  31. </div>
  32. <div class="wingame">
  33. <h2>恭喜你完成拼图！</h2>
  34. <div class="pic pic2"></div>
  35. <p>完成耗时：<b id="timer2">0分0秒</b></p>
  36. </div>
  37. </body>
  38. </html>

CSS代码如下

  1. body
  2. {
  3.     background-color: #E8E8E8;
  4. }
  5. .main
  6. {
  7.     margin:0 auto;
  8.     width: 1250px;
  9.     height: 720px;
  10. }
  11. .left
  12. {
  13.     width: 300px;
  14.     height: 700px;
  15.     float: left;;
  16. }
  17. .center
  18. {
  19.     width: 700px;
  20.     height: 700px;
  21.     float: left;
  22. }
  23. .right
  24. {
  25.     width: 250px;
  26.     height: 700px;
  27.     color: red;
  28.     float: right;
  29.  
  30. }
  31. .picbox
  32.     {
  33.         margin: 0 auto;
  34.         border: 1px solid black;
  35.         width: 650px;
  36.         height: 650px;
  37.     }
  38.     .picbpx td
  39.     {
  40.         padding:;
  41.     }
  42.     .border_bg
  43.     {
  44.         background-image:url(../img/border_bg.jpg);
  45.         width: 100px;
  46.         height: 100px;
  47.         background-repeat: repeat;
  48.     }
  49.     .left h3
  50.     {
  51.         text-align: center;;
  52.     }
  53.     #timer
  54.     {
  55.         color: #D24D57;
  56.         text-align: center;
  57.         font-size:23px;
  58.         font-weight: bold;
  59.     }
  60.     .pic
  61.     {
  62.         margin: 20px auto;
  63.         background-size: cover;
  64.         width: 270px;
  65.         height: 250px;
  66.         border: 2px solid #FFF;
  67.     }
  68.     .wingame
  69.     {
  70.         display: none;
  71.         width: 600px;
  72.         height: 300px;
  73.         background-color: rgba(80,100,120,0.5);
  74.         position: fixed;
  75.         top:25vh;
  76.         left: 32vw;
  77.     }
  78.     .pic2
  79.     {
  80.         width: 150px;
  81.         height: 150px;
  82.     }
  83.     .pic2:hover
  84.     {
  85.         cursor:pointer;
  86.     }
  87.     .wingame h2
  88.     {
  89.         text-align: center;
  90.     }
  91.     .wingame p
  92.     {
  93.         font-size: 20px;
  94.         text-align: center;
  95.     }
  96.     .wingame p b
  97.     {
  98.         color: rgb(200,60,60);
  99.     }
  100.  
  101.     /*按钮美化*/
  102. a.animated-button:link, a.animated-button:visited {
  103.     position: relative;
  104.     display: block;
  105.     margin: 30px auto 0;
  106.     padding: 14px 15px;
  107.     color: #fff;
  108.     font-size:14px;
  109.     font-weight: bold;
  110.     text-align: center;
  111.     text-decoration: none;
  112.     text-transform: uppercase;
  113.     overflow: hidden;
  114.     letter-spacing: .08em;
  115.     border-radius:;
  116.     text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  117.     -webkit-transition: all 1s ease;
  118.     -moz-transition: all 1s ease;
  119.     -o-transition: all 1s ease;
  120.     transition: all 1s ease;
  121. }
  122. a.animated-button:link:after, a.animated-button:visited:after {
  123.     content: "";
  124.     position: absolute;
  125.     height: 0%;
  126.     left: 50%;
  127.     top: 50%;
  128.     width: 150%;
  129.     z-index: -1;
  130.     -webkit-transition: all 0.75s ease 0s;
  131.     -moz-transition: all 0.75s ease 0s;
  132.     -o-transition: all 0.75s ease 0s;
  133.     transition: all 0.75s ease 0s;
  134. }
  135. a.animated-button:link:hover, a.animated-button:visited:hover {
  136.     color: #FFF;
  137.     text-shadow: none;
  138. }
  139. a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
  140.     height: 450%;
  141. }
  142. a.animated-button:link, a.animated-button:visited {
  143.     position: relative;
  144.     display: block;
  145.     margin: 30px auto 0;
  146.     padding: 14px 15px;
  147.     color: #000;
  148.     font-size:25px;
  149.     border-radius:;
  150.     font-weight: bold;
  151.     text-align: center;
  152.     text-decoration: none;
  153.     text-transform: uppercase;
  154.     overflow: hidden;
  155.     letter-spacing: .08em;
  156.     text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  157.     -webkit-transition: all 1s ease;
  158.     -moz-transition: all 1s ease;
  159.     -o-transition: all 1s ease;
  160.     transition: all 1s ease;
  161. }
  162.  
  163. /* Victoria Buttons */
  164. a
  165. {
  166.     width: 200px;
  167.     height: 50px;
  168. }
  169. a.animated-button.victoria-one {
  170.     border: 2px solid #D24D57;
  171. }
  172. a.animated-button.victoria-one:after {
  173.     background: #D24D57;
  174.     -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  175.     -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  176.     -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  177.     transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  178. }
  179. a.animated-button.victoria-two {
  180.     border: 2px solid #D24D57;
  181. }
  182. a.animated-button.victoria-two:after {
  183.     background: #D24D57;
  184.     -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  185.     -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  186.     -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  187.     transform: translateX(-50%) translateY(-50%) rotate(25deg);
  188. }
  189. a.animated-button.victoria-three {
  190.     border: 2px solid #D24D57;
  191. }
  192. a.animated-button.victoria-three:after {
  193.     background: #D24D57;
  194.     opacity: .5;
  195.     -moz-transform: translateX(-50%) translateY(-50%);
  196.     -ms-transform: translateX(-50%) translateY(-50%);
  197.     -webkit-transform: translateX(-50%) translateY(-50%);
  198.     transform: translateX(-50%) translateY(-50%);
  199. }
  200. a.animated-button.victoria-three:hover:after {
  201.     height: 140%;
  202.     opacity:;
  203. }
  204. a.animated-button.victoria-four {
  205.     border: 2px solid #D24D57;
  206. }
  207. a.animated-button.victoria-four:after {
  208.     background: #D24D57;
  209.     opacity: .5;
  210.     -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  211.     -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  212.     -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  213.     transform: translateY(-50%) translateX(-50%) rotate(90deg);
  214. }
  215. a.animated-button.victoria-four:hover:after {
  216.     opacity:;
  217.     height: 600% !important;
  218. }
  219. a.animated-button.victoria-five {
  220.     border: 2px solid red;
  221. }
  222. a.animated-button.victoria-five:after {
  223.     background: #D24D57;
  224.     -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  225.     -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  226.     -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  227.     transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  228. }

最后式Js代码：

  1. var picnum=5;
  2. var picData=[];
  3. var a_num=[];
  4. var level="level1";
  5. var isstart=false;
  6. $(document).ready(function(){
  7.     showpicmain();//显示需要拼的目标图
  8.     for(var i=0;i<picnum;i++)//创建拼图表格的行
  9.     {
  10.         $('#picbox').append("<tr></tr>");
  11.     }
  12.     for(var i=0;i<picnum;i++)//创建拼图表格的列
  13.     {
  14.         $('#picbox').children().append("<td></td>");
  15.     }
  16.     $('#startgame').attr("onclick","startgame()");//开始按钮监听事件
  17.     var tds=$('#picbox').children().children();//获得td的数组
  18.     //console.log(tds.length);
  19.  
  20.     for(var i=0;i<tds.length;i++)//为每个td加id和点击事件
  21.     {
  22.         id=i+1;
  23.         tds[i].setAttribute("id",id);
  24.         tds[i].setAttribute("onclick","movepic("+id+")")
  25.     }
  26.     init();
  27.     saveData();
  28.     setBorder();
  29.     setendpic();
  30. });
  31. function setendpic()//加入最后一张图片
  32. {
  33.     temp=picnum*(picnum-1)-1;
  34.     $('#'+temp).css("background-image","url(img/"+level+"/_0"+(picnum-2)*(picnum-2)+".jpg)")
  35. }
  36. function iskong(id)//判断改标签是否为空
  37. {
  38.  
  39.     var bg=$('#'+id).css("background-image");
  40.     if(bg=="none"){
  41.         return true;
  42.     }else
  43.     {
  44.         return false;
  45.     }
  46. }
  47. function movepic(id)//移动图片
  48. {
  49.     if(iskong(id-picnum))
  50.     {
  51.         //alert("moveup");
  52.         move(id,id-picnum);
  53.     }
  54.     else if(iskong(id+picnum))
  55.     {
  56.         //alert("movedown");
  57.         move(id,id+picnum);
  58.     }
  59.     else if(iskong(id-1))
  60.     {
  61.         //alert("moveleft");
  62.         move(id,id-1);
  63.     }
  64.     else if(iskong(id+1))
  65.     {
  66.         //alert("moveright");
  67.         move(id,id+1);
  68.     }
  69.     if(isstart)
  70.     {
  71.         isWin();
  72.     }
  73. }
  74. function setBorder()//设置边界
  75. {
  76.     for(var i=0;i<=picnum;i++)
  77.     {
  78.         $("#"+i).attr({"onclick":null,"class":"border_bg"});
  79.         $("#"+i).css("height","1px");
  80.     }
  81.     for(var i=1;i<=picnum*picnum;i+=picnum)
  82.     {
  83.         $("#"+i).attr({"onclick":null,"class":"border_bg"});
  84.         $("#"+i).css("width","1px");
  85.     }
  86.     for(var i=picnum*(picnum-1)+1;i<=picnum*picnum;i++)
  87.     {
  88.         $("#"+i).attr({"onclick":null,"class":"border_bg"});
  89.         $("#"+i).css("height","1px");
  90.     }
  91.     for(var i=picnum;i<=picnum*picnum;i+=picnum)
  92.     {
  93.         $("#"+i).attr({"onclick":null,"class":"border_bg"});
  94.         $("#"+i).css("width","1px");
  95.     }
  96. }
  97.  
  98. function move(id,target)//移动
  99. {
  100.     //var temp=$('#'+id).css("background-image");
  101.     //temp=$('#'+id).css("background-image","");
  102.     $('#'+target).css("background-size","cover");
  103.     $('#'+target).css("background-image",$('#'+id).css("background-image"));
  104.     $('#'+id).css("background-image","none");
  105. }
  106. var pic=1;
  107. function init()//初始化图片
  108. {
  109.     for(var i=1;i<picnum-1;i++)
  110.       {
  111.         for(var id=1;id<picnum*picnum;id++)
  112.         {
  113.             if(id>picnum*i+1&&id<picnum*(i+1))
  114.         {
  115.             $('#'+id).css("background-size","cover");
  116.             $('#'+id).css("background-image","url(img/"+level+"/_0"+pic+".jpg)");
  117.             if(id==((picnum-1)*picnum)-1)
  118.             {
  119.                 $('#'+id).css("background-image","none");
  120.             }
  121.             pic++;
  122.             //console.log(pic);
  123.         }
  124.         }
  125.       }
  126. }
  127. function saveData()//保存初始数据
  128. {
  129.     for(var i=1;i<picnum-1;i++)
  130.       {
  131.         for(var id=1;id<picnum*picnum;id++)
  132.         {
  133.             if(id>picnum*i+1&&id<picnum*(i+1))
  134.         {
  135.             var temp=$('#'+id).css("background-image");
  136.             picData.push(temp);
  137.         }
  138.         }
  139.       }
  140. }
  141. function startgame()//开始游戏，打乱图片顺序
  142. {
  143.     clearTimeout(timer);
  144.     times=0;timem=0;
  145.     isstart=true;
  146.     var k=0;times=0;timem=0;
  147.     var temp=[];
  148.     for(var i=1;i<(picnum-2)*(picnum-2);i++)
  149.     {
  150.         temp[i-1]=i;
  151.     }
  152.     a_num=getnum(temp);
  153.     for(var i=1;i<picnum-1;i++)
  154.       {
  155.         for(var id=1;id<picnum*picnum;id++)
  156.         {
  157.             if(id>picnum*i+1&&id<picnum*(i+1))
  158.         {
  159.             var temp=$('#'+id).css("background-image","url(img/"+level+"/_0"+a_num[k]+".jpg)");
  160.             k++;
  161.         }
  162.         }
  163.       }
  164.       var temp=picnum*(picnum-1)-1;
  165.       $('#'+temp).css("background-image","none");
  166.  
  167.       gotime();
  168.  
  169. }
  170.  
  171. function getnum(array) //打乱顺序函数
  172. {
  173.     var tmp, current, top =array.length;
  174.     if(top) while(--top){
  175.     current =Math.floor(Math.random() * (top + 1));
  176.     tmp =array[current];
  177.     array[current] =array[top];
  178.     array[top] = tmp;
  179.     }
  180.     return array;
  181. }
  182. function isWin()//判断是否胜利
  183. {
  184.     k=0;
  185.     for(var i=1;i<picnum-1;i++)
  186.       {
  187.         for(var id=1;id<picnum*picnum;id++)
  188.         {
  189.             if(id>picnum*i+1&&id<picnum*(i+1))
  190.         {
  191.             var temp=$('#'+id).css("background-image");
  192.             if(temp==picData[k])
  193.             {
  194.                 k++;
  195.             }
  196.         }
  197.         }
  198.       }
  199.       if(k==(picnum-2)*(picnum-2))
  200.       {
  201.           clearTimeout(timer);
  202.           windo();
  203.       }
  204. }
  205.  
  206. var timem=0;
  207. var times=0;
  208. var timer=null;
  209. function gotime()//开始计时
  210. {
  211.     timer=setTimeout(function(){
  212.         times++;
  213.         if(times>59)
  214.         {
  215.             timem++;
  216.             times=0;
  217.         }
  218.         $('#timer').text(timem+"分"+times+"秒");
  219.         gotime();
  220. },1000);
  221. }
  222. function showpicmain()//显示样本图
  223. {
  224.     $('.pic').css("background-image","url(img/"+level+"/main.jpg)");
  225. }
  226.  
  227. function windo()
  228. {
  229.     $('.wingame').css("display","block");
  230.     $('.pic2').click(function(){
  231.         $('.wingame').css("display","none");
  232.         startgame();
  233.     });
  234.     $('#timer2').text($('#timer').text());
  235. }

OK，就这样吧，不懂得小伙伴看前面两篇文章。

欢迎学习交流。

by 本该如此

HTML+Javascript制作拼图小游戏详解（终）的更多相关文章

  1. HTML+Javascript制作拼图小游戏详解（一）

    本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程. 话不多说,先上图. 首先我们需要写好网页的基本布局(此处涉及简单的HTML和CSS知识). 网页一共分为三个区域,左侧时间显示区, ...

  2. HTML+Javascript制作拼图小游戏详解（二）

    上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...

  3. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  4. java贪吃蛇小游戏详解

    https://blog.csdn.net/u011622021/article/details/81162083

  5. 壁球小游戏详解（附有源码.cpp）

    1.在python中安装pygame 2.将下列源码复制过去,运行. #引用 import pygame, sys #初始化 pygame.init() size = width, height = ...

  6. 教你用Python自制拼图小游戏，一起来制作吧

    摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...

  7. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  8. 使用NGUI实现拖拽功能（拼图小游戏）

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  9. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

随机推荐

  1. 设计模式之Adapter设计模式

    这个设计模式是我这两天刚学的,这儿算是我的读书笔记发布出来是供大家一起学习,后面有我自己的感悟,下面是我网上整理的 以下情况使用适配器模式 • 你想使用一个已经存在的类,而它的接口不符合你的需求. • ...

  2. C语言中以字符串形式输出枚举变量

    C语言中以字符串形式输出枚举变量 摘自:https://blog.csdn.net/haifeilang/article/details/41079255 2014年11月13日 15:17:20 h ...

  3. MySQL之练习题5

    .将所有的课程的名称以及对应的任课老师姓名打印出来,如下: SELECT cname,tname FROM course INNER JOIN teacher WHERE course.teacher ...

  4. asp.net web api 安装swagger

    使用nuget控制台, 输入 Install-Package Swashbuckle,回车,等待安装引用.nuget国内没有镜像,安装比较慢 安装成功后会多出一个引用 右键工程点--属性,左边导航栏选 ...

  5. class和struct

    相同点 实际上可以使用这两个关键字定义任何一个类. 区别 1.struct的默认成员访问说明符为public,class的默认成员访问说明符为private(什么叫默认?就是没有写明public.pr ...

  6. python 编码方式大全 fr = open(filename_r,encoding='cp852')

    7.8.3. Standard Encodings Python comes with a number of codecs built-in, either implemented as C fun ...

  7. jdbcmysql

    做java开发难免会用到数据库,操作数据库也是java开发的核心技术.那我们现在就来谈谈javajdbc来操作mysql数据库吧 第一步:我们需要把mysql的驱动引进来这里引驱动就是把mysql-c ...

  8. wordpaster更新说明

    官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/wordpaster/index.aspx 在线演示:FCKEditor2x示例 ...

  9. SharpMap源代码解析

    1. 简介 SharpMap是基于.net2.0的GIS系统.支持多种.NET开发语言(C# C++ 等).使用属性数据作为注记.符合OpenGIS的简单要素规范(OpenGIS Simple Fea ...

  10. Codeforces735A Ostap and Grasshopper 2016-12-13 11:53 78人阅读 评论(0) 收藏

    A. Ostap and Grasshopper time limit per test 2 seconds memory limit per test 256 megabytes input sta ...