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

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

HTML部分如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>拼图游戏——初级</title>

    <link rel="stylesheet" href="css/button.css">

    <script src="js/jquery.js"></script>

    <script src="js/level1.js"></script>

</head>

<body>

<div class="main">

<div class="left">

<h3>目标图</h3>

<div class="pic" id="mainpic"></div>

<br><br>

<h3>所用时间</h3>

<p id="timer">0分0秒</p>

</div>

<div class="center">

    <table class="picbox" cellspacing="0" cellpadding="1">

    <tbody id="picbox">

    </tbody>

    </table>

</div>

<div class="right">

    <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>

    <a href="level1.html" class="btn btn-sm animated-button victoria-two">初级</a>

    <a href="level2.html" class="btn btn-sm animated-button victoria-three">中级</a>

    <a href="level3.html" class="btn btn-sm animated-button victoria-four">高级</a>

</div>

</div>

<div class="wingame">

<h2>恭喜你完成拼图！</h2>

<div class="pic pic2"></div>

<p>完成耗时：<b id="timer2">0分0秒</b></p>

</div>

</body>

</html>

CSS代码如下

body

{

    background-color: #E8E8E8;

}

.main

{

    margin:0 auto;

    width: 1250px;

    height: 720px;

}

.left

{

    width: 300px;

    height: 700px;

    float: left;;

}

.center

{

    width: 700px;

    height: 700px;

    float: left;

}

.right

{

    width: 250px;

    height: 700px;

    color: red;

    float: right;

}

.picbox

    {

        margin: 0 auto;

        border: 1px solid black;

        width: 650px;

        height: 650px;

    }

    .picbpx td

    {

        padding:;

    }

    .border_bg

    {

        background-image:url(../img/border_bg.jpg);

        width: 100px;

        height: 100px;

        background-repeat: repeat;

    }

    .left h3

    {

        text-align: center;;

    }

    #timer

    {

        color: #D24D57;

        text-align: center;

        font-size:23px;

        font-weight: bold;

    }

    .pic

    {

        margin: 20px auto;

        background-size: cover;

        width: 270px;

        height: 250px;

        border: 2px solid #FFF;

    }

    .wingame

    {

        display: none;

        width: 600px;

        height: 300px;

        background-color: rgba(80,100,120,0.5);

        position: fixed;

        top:25vh;

        left: 32vw;

    }

    .pic2

    {

        width: 150px;

        height: 150px;

    }

    .pic2:hover

    {

        cursor:pointer;

    }

    .wingame h2

    {

        text-align: center;

    }

    .wingame p

    {

        font-size: 20px;

        text-align: center;

    }

    .wingame p b

    {

        color: rgb(200,60,60);

    }

    /*按钮美化*/

a.animated-button:link, a.animated-button:visited {

    position: relative;

    display: block;

    margin: 30px auto 0;

    padding: 14px 15px;

    color: #fff;

    font-size:14px;

    font-weight: bold;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    overflow: hidden;

    letter-spacing: .08em;

    border-radius:;

    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);

    -webkit-transition: all 1s ease;

    -moz-transition: all 1s ease;

    -o-transition: all 1s ease;

    transition: all 1s ease;

}

a.animated-button:link:after, a.animated-button:visited:after {

    content: "";

    position: absolute;

    height: 0%;

    left: 50%;

    top: 50%;

    width: 150%;

    z-index: -1;

    -webkit-transition: all 0.75s ease 0s;

    -moz-transition: all 0.75s ease 0s;

    -o-transition: all 0.75s ease 0s;

    transition: all 0.75s ease 0s;

}

a.animated-button:link:hover, a.animated-button:visited:hover {

    color: #FFF;

    text-shadow: none;

}

a.animated-button:link:hover:after, a.animated-button:visited:hover:after {

    height: 450%;

}

a.animated-button:link, a.animated-button:visited {

    position: relative;

    display: block;

    margin: 30px auto 0;

    padding: 14px 15px;

    color: #000;

    font-size:25px;

    border-radius:;

    font-weight: bold;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    overflow: hidden;

    letter-spacing: .08em;

    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);

    -webkit-transition: all 1s ease;

    -moz-transition: all 1s ease;

    -o-transition: all 1s ease;

    transition: all 1s ease;

}

/* Victoria Buttons */

a

{

    width: 200px;

    height: 50px;

}

a.animated-button.victoria-one {

    border: 2px solid #D24D57;

}

a.animated-button.victoria-one:after {

    background: #D24D57;

    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

    transform: translateX(-50%) translateY(-50%) rotate(-25deg);

}

a.animated-button.victoria-two {

    border: 2px solid #D24D57;

}

a.animated-button.victoria-two:after {

    background: #D24D57;

    -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);

    -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);

    -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);

    transform: translateX(-50%) translateY(-50%) rotate(25deg);

}

a.animated-button.victoria-three {

    border: 2px solid #D24D57;

}

a.animated-button.victoria-three:after {

    background: #D24D57;

    opacity: .5;

    -moz-transform: translateX(-50%) translateY(-50%);

    -ms-transform: translateX(-50%) translateY(-50%);

    -webkit-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

}

a.animated-button.victoria-three:hover:after {

    height: 140%;

    opacity:;

}

a.animated-button.victoria-four {

    border: 2px solid #D24D57;

}

a.animated-button.victoria-four:after {

    background: #D24D57;

    opacity: .5;

    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    transform: translateY(-50%) translateX(-50%) rotate(90deg);

}

a.animated-button.victoria-four:hover:after {

    opacity:;

    height: 600% !important;

}

a.animated-button.victoria-five {

    border: 2px solid red;

}

a.animated-button.victoria-five:after {

    background: #D24D57;

    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

    transform: translateX(-50%) translateY(-50%) rotate(-25deg);

}

最后式Js代码：

var picnum=5;

var picData=[];

var a_num=[];

var level="level1";

var isstart=false;

$(document).ready(function(){

    showpicmain();//显示需要拼的目标图

    for(var i=0;i<picnum;i++)//创建拼图表格的行

    {

        $('#picbox').append("<tr></tr>");

    }

    for(var i=0;i<picnum;i++)//创建拼图表格的列

    {

        $('#picbox').children().append("<td></td>");

    }

    $('#startgame').attr("onclick","startgame()");//开始按钮监听事件

    var tds=$('#picbox').children().children();//获得td的数组

    //console.log(tds.length);

    for(var i=0;i<tds.length;i++)//为每个td加id和点击事件

    {

        id=i+1;

        tds[i].setAttribute("id",id);

        tds[i].setAttribute("onclick","movepic("+id+")")

    }

    init();

    saveData();

    setBorder();

    setendpic();

});

function setendpic()//加入最后一张图片

{

    temp=picnum*(picnum-1)-1;

    $('#'+temp).css("background-image","url(img/"+level+"/_0"+(picnum-2)*(picnum-2)+".jpg)")

}

function iskong(id)//判断改标签是否为空

{

    var bg=$('#'+id).css("background-image");

    if(bg=="none"){

        return true;

    }else

    {

        return false;

    }

}

function movepic(id)//移动图片

{

    if(iskong(id-picnum))

    {

        //alert("moveup");

        move(id,id-picnum);

    }

    else if(iskong(id+picnum))

    {

        //alert("movedown");

        move(id,id+picnum);

    }

    else if(iskong(id-1))

    {

        //alert("moveleft");

        move(id,id-1);

    }

    else if(iskong(id+1))

    {

        //alert("moveright");

        move(id,id+1);

    }

    if(isstart)

    {

        isWin();

    }

}

function setBorder()//设置边界

{

    for(var i=0;i<=picnum;i++)

    {

        $("#"+i).attr({"onclick":null,"class":"border_bg"});

        $("#"+i).css("height","1px");

    }

    for(var i=1;i<=picnum*picnum;i+=picnum)

    {

        $("#"+i).attr({"onclick":null,"class":"border_bg"});

        $("#"+i).css("width","1px");

    }

    for(var i=picnum*(picnum-1)+1;i<=picnum*picnum;i++)

    {

        $("#"+i).attr({"onclick":null,"class":"border_bg"});

        $("#"+i).css("height","1px");

    }

    for(var i=picnum;i<=picnum*picnum;i+=picnum)

    {

        $("#"+i).attr({"onclick":null,"class":"border_bg"});

        $("#"+i).css("width","1px");

    }

}

function move(id,target)//移动

{

    //var temp=$('#'+id).css("background-image");

    //temp=$('#'+id).css("background-image","");

    $('#'+target).css("background-size","cover");

    $('#'+target).css("background-image",$('#'+id).css("background-image"));

    $('#'+id).css("background-image","none");

}

var pic=1;

function init()//初始化图片

{

    for(var i=1;i<picnum-1;i++)

      {

        for(var id=1;id<picnum*picnum;id++)

        {

            if(id>picnum*i+1&&id<picnum*(i+1))

        {

            $('#'+id).css("background-size","cover");

            $('#'+id).css("background-image","url(img/"+level+"/_0"+pic+".jpg)");

            if(id==((picnum-1)*picnum)-1)

            {

                $('#'+id).css("background-image","none");

            }

            pic++;

            //console.log(pic);

        }

        }

      }

}

function saveData()//保存初始数据

{

    for(var i=1;i<picnum-1;i++)

      {

        for(var id=1;id<picnum*picnum;id++)

        {

            if(id>picnum*i+1&&id<picnum*(i+1))

        {

            var temp=$('#'+id).css("background-image");

            picData.push(temp);

        }

        }

      }

}

function startgame()//开始游戏，打乱图片顺序

{

    clearTimeout(timer);

    times=0;timem=0;

    isstart=true;

    var k=0;times=0;timem=0;

    var temp=[];

    for(var i=1;i<(picnum-2)*(picnum-2);i++)

    {

        temp[i-1]=i;

    }

    a_num=getnum(temp);

    for(var i=1;i<picnum-1;i++)

      {

        for(var id=1;id<picnum*picnum;id++)

        {

            if(id>picnum*i+1&&id<picnum*(i+1))

        {

            var temp=$('#'+id).css("background-image","url(img/"+level+"/_0"+a_num[k]+".jpg)");

            k++;

        }

        }

      }

      var temp=picnum*(picnum-1)-1;

      $('#'+temp).css("background-image","none");

      gotime();

}

function getnum(array) //打乱顺序函数

{

    var tmp, current, top =array.length;

    if(top) while(--top){

    current =Math.floor(Math.random() * (top + 1));

    tmp =array[current];

    array[current] =array[top];

    array[top] = tmp;

    }

    return array;

}

function isWin()//判断是否胜利

{

    k=0;

    for(var i=1;i<picnum-1;i++)

      {

        for(var id=1;id<picnum*picnum;id++)

        {

            if(id>picnum*i+1&&id<picnum*(i+1))

        {

            var temp=$('#'+id).css("background-image");

            if(temp==picData[k])

            {

                k++;

            }

        }

        }

      }

      if(k==(picnum-2)*(picnum-2))

      {

          clearTimeout(timer);

          windo();

      }

}

var timem=0;

var times=0;

var timer=null;

function gotime()//开始计时

{

    timer=setTimeout(function(){

        times++;

        if(times>59)

        {

            timem++;

            times=0;

        }

        $('#timer').text(timem+"分"+times+"秒");

        gotime();

},1000);

}

function showpicmain()//显示样本图

{

    $('.pic').css("background-image","url(img/"+level+"/main.jpg)");

}

function windo()

{

    $('.wingame').css("display","block");

    $('.pic2').click(function(){

        $('.wingame').css("display","none");

        startgame();

    });

    $('#timer2').text($('#timer').text());

}

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. <Linux多线程服务端编程>学习记录

    使用智能指针解决多线程下 类的解析冲突问题 有这样一个场景 使用StockFactory记录Stock的信息  容器是map<string,smart_ptr>; 代码如下: #inclu ...

  2. 2018.10.12 NOIP模拟 数据结构（线段树）

    传送门 sb线段树题居然还卡常. 修改操作直接更新区间最小值和区间标记下传即可. 询问加起来最多5e65e65e6个数. 因此直接询问5e65e65e6次最小值就行了. 代码

  3. Navicat for oracle cannot load OCI DLL

    Navicat for oracle 提示 cannot load OCI DLL87,126,193 instant client package is required for basic and ...

  4. python编码（五）

    说说区位码.GB2312.内码和代码页 目前Windows的内核已经采用Unicode编码,这样在内核上可以支持全世界所有的语言文字.但是由于现有的大量程序和文档都采用了某种特定语言的编码,例如GBK ...

  5. 大文件webuploader的基本使用

    webuploader的简单使用 需要的文件   自备  百度很多 webuploader.js  uploader.swf  jQuery <!DOCTYPE html> <htm ...

  6. Visual C++中的ADO编程

    摘  要:本文介绍了微软推出的以ActiveX技术为基础的ADO数据存取技术,分析了ADO的工作原理,并用Visual C++说明了ADO数据访问技术的实现方法. 关键字:ADO:连接对象:OLE D ...

  7. Spark应用程序的运行架构几种说

    (1)简单的说: 由driver向集群申请资源,集群分配资源,启动executor.driver将spark应用程序的代码和文件传送给executor.executor上运行task,运行完之后将结果 ...

  8. hdu 4994 前后有序Nim游戏

    http://acm.hdu.edu.cn/showproblem.php?pid=4994 Nim游戏变成从前往后有序的,谁是winner? 如果当前堆数目为1,玩家没有选择,只能取走.遇到到不为1 ...

  9. D3_book 11.1 pie

    <!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...

  10. jquery 方法学习

    遍历 .add():将元素添加到jquery对象 argument:selector, element, html, jqueryObject $('li').add('p').css('backgr ...