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

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

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. mysql实现分页的几种方式

    mysql实现分页的几种方式: 第一种:使用框架自带的pageable来进行分页 package com.cellstrain.icell.repository.repositoryImpl; imp ...

  2. 2018.09.09 UVa10529 - Dumb Bones（期望dp）

    传送门 期望dp好题. f[i]表示摆放i个的最小花费,于是f[i]可以从f[j]与f[i-j+1]转移过来了. 代码: #include<bits/stdc++.h> #define N ...

  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操作数据库-数据表

    数据表: 数据类型: 帮助的三种形式: 在cmd中输入: help 要帮助的主题词,或 ? 要帮助的主题词 或  \h 要帮助的主题词 . 数据表的创建: CREATE database IF NOT ...

  5. mysql图文安装教程（win7 32位 亲测）

    一.下载mysql:http://www.mysql.com/downloads/ 弹出: 你需要有一个 Oracle Web 帐户,没有的话,注册一个: 勾选许可: 输入搜索条件: 下载MySQL ...

  6. 获取手机的唯一标示uuid

    NSString *idfv = [[[UIDevice currentDevice] identifierForVendor] UUIDString];

  7. Sensor Fusion-based Exploration in Home Environments using Information, Driving and Localization Gains(基于传感器融合的使用信息、驾驶和定位增益在家庭环境中的探索)

    Authors: Joong-Tae Park, Jae-Bok Song Department:Department  of  Mechanical  Engineering,  Korea  Un ...

  8. （连通图 模板题）迷宫城堡--hdu--1269

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1269 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  9. CGA裁剪算法之线段裁剪算法

    CGA裁剪算法之线段裁剪算法 常用的线段裁剪算法有三种:[1]Cohen_SutherLand裁剪算法,[2]中点分割裁剪算法,[3]参数化方法. 1. Cohen_SutherLand裁剪算法 为了 ...

  10. hdu1251 && hud 1247 （字典树）

    hdu1251 题目 这道题,主要是在主函数的输入输出上犹豫了. #include<stdio.h> #include<cstring> #include<iostrea ...