HTML+Javascript制作拼图小游戏详解（终）

时间：2022-08-23 08:26:03

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

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

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 本该如此

相关文章