网页版九宫格拼图游戏

来源：互联网发布：跟团游推荐知乎编辑：程序博客网时间：2024/05/16 10:50

实例:网页版九宫格拼图游戏

一个九宫格的拼图小游戏，根据html,css,javascript简单完成。

最后完成图如下

项目文件列表如下

附上各文件源代码

1.拼图.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="拼图.css" type="text/css" rel="stylesheet"></head><body>    <div id="Container">        <div id="game">            <div id="m1" onclick="move(1)">1</div>            <div id="m2" onclick="move(2)">2</div>            <div id="m3" onclick="move(3)">3</div>            <div id="m4" onclick="move(4)">4</div>            <div id="m5" onclick="move(5)">5</div>            <div id="m6" onclick="move(6)">6</div>            <div id="m7" onclick="move(7)">7</div>            <div id="m8" onclick="move(8)">8</div>        </div>        <div id="Control">            <p id="timeArea">                <span id="timeText">总用时</span>                <span id="time"></span>            </p>            <p id="button">                <span id="start" onclick="start()">开始</span>                <span id="reStart" onclick="reset()">重置</span>            </p>        </div>    </div><script src="拼图.js" type="text/javascript"></script></body></html>

2.拼图.css

*{    padding: 0;    margin: 0;    border: 0;}body{    width: 100%;    height: 100%;}#Container{    position: relative;    width: 620px;    height: 420px;    margin: 0 auto;    margin-top: 100px;    border-radius: 1px;}#game{    position: absolute;    width: 450px;    height: 450px;    border-radius: 5px;    display: inline-block;    background-color: #ffe171;   box-shadow: 0 0 10px #ffe171;}#game div{    height: 149px;    width: 149px;    position: absolute;    box-shadow: 1px 1px 2px #777;    background-color: #0D8BBD;    color: white;    text-align: center;    font-size: 150px;    line-height: 150px;    cursor: pointer;    transition: 0.3s;}#game div:hover{    color: #ffe171;}#Control{    width: 150px;    height: 450px;    display: inline-block;    float: right;}#Control span{    height: 25px;    font-size: 20px;    color: #222;    margin-top: 30px;    transition:0.3s;}#Control span:hover{    color: wheat;}#start{    display: inline-block;    font-size: 28px;    width: 100px;    height: 28px;    text-align: center;    background-color: #00a0df;    color: #ffe171;    text-shadow: 1px 1px 2px #ffe171;    border-radius: 5px;    box-shadow: 2px 2px 5px #4c98f5;    cursor: pointer;}#reStart{    display: inline-block;    font-size: 28px;    width: 100px;    height: 28px;    text-align: center;    background-color: #00a0df;    color: #ffe171;    text-shadow: 1px 1px 2px #ffe171;    border-radius: 5px;    box-shadow: 2px 2px 5px #4c98f5;    cursor: pointer;}#m1{    left: 0;    top: 0;}#m2{    left: 150px;    top: 0;}#m3{    left: 300px;    top: 0;}#m4{    left: 0;    top:150px;}#m5{    left: 150px;    top: 150px;}#m6{    left: 300px;    top: 150px;}#m7{    left: 0px;    top: 300px;}#m8{    left: 150px;    top: 300px;}

3.拼图.js

/** * Created by YHJ1997 on 2017/2/26. */var time=0;var pause=false;var set_Timer;var d=new Array(10);//保存大DIV当前装的小DIV的编号var d_direct=new Array(    [0],//为了逻辑更简单，第一个元素我们不用，我们从下标1开始使用    [2,4],//大DIV编号为1的DIV可以去的位置，比如第一块可以去2,4号位置    [1,3,5],    [2,6],    [1,5,7],    [2,4,6,8],    [3,5,9],    [4,8],    [5,7,9],    [6,8]);var d_xy=new Array(    [0],    [0,0],    [150,0],    [300,0],    [0,150],    [150,150],    [300,150],    [0,300],    [150,300],    [300,300])d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0;function move(id){    var i=1;    for(i;i<10;++i){        if(d[i]==id){            break;        }    }    var target_d=0;    target_d=whereCanTo(i);    if(target_d!=0){        d[i]=0;        d[target_d]=id;        document.getElementById("m"+id).style.left=d_xy[target_d][0]+"px";        document.getElementById("m"+id).style.top=d_xy[target_d][1]+"px";    }    var finish_flag=true;    for(var k=1; k<9; ++k){        if( d[k] != k){            finish_flag=false;            break;            //如果大DIV保存的编号和它本身的编号不同，则表示还不是全部按照顺序排的，那么设置为false，跳出循环，后面不用再判断了，因为只要一个不符，就没完成游戏        }    }    if(finish_flag==true){        if(!pause)            start();        alert("congratulation");    }}function whereCanTo(cur_div){    //判断是否可移动函数，参数是大DIV的编号，不是小DIV的编号，因为小DIV编号跟可以去哪没关系，小DIV是会动的    var j=0;    var move_flag=false;    for(j=0; j<d_direct[cur_div].length; ++j){        //把所有可能去的位置循环遍历一下        if( d[ d_direct[cur_div][j] ] == 0 ){            move_flag=true;            break;        }        //如果目标的值为0，说明目标位置没有装小DIV，则可以移动，跳出循环    }    if(move_flag == true){        return d_direct[cur_div][j];    }else{        return 0;    }    //可以移动，则返回目标位置的编号，否则返回0，表示不可移动}function timer(){    time+=1;//一秒钟加一，单位是秒    var min=parseInt(time/60);//把秒转换为分钟，一分钟60秒，取商就是分钟    var sec=time%60;//取余就是秒    document.getElementById("time").innerHTML=min+"分"+sec+"秒";//然后把时间更新显示出来}//开始暂停函数function start(){    if(pause){        document.getElementById("start").innerHTML="暂停";//把按钮文字设置为暂停        pause=false;//暂停表示设置为false        set_timer=setInterval(timer,1000);//启动定时        //如果当前是暂停，则开始    }else{        document.getElementById("start").innerHTML="开始";        pause=true;        clearInterval(set_timer);    }}//重置函数function reset(){    time=0;//把时间设置为0    random_d();//把方块随机打乱函数    if(pause)//如果暂停，则开始计时        start();}//随机打乱方块函数，我们的思路是从第九块开始，随机生成一个数，然后他们两块对调一下function random_d(){    for(var i=9; i>1; --i){        var to=parseInt(Math.random()*(i-1)+1);//产生随机数，范围为1到i，不能超出范围，因为没这个id的DIV        if(d[i]!=0){            document.getElementById("m"+d[i]).style.left=d_xy[to][0]+"px";            document.getElementById("m"+d[i]).style.top=d_xy[to][1]+"px";        }        //把当前的DIV位置设置为随机产生的DIV的位置        if(d[to]!=0){            document.getElementById("m"+d[to]).style.left=d_xy[i][0]+"px";            document.getElementById("m"+d[to]).style.top=d_xy[i][1]+"px";        }        //把随机产生的DIV的位置设置为当前的DIV的位置        var tem=d[to];        d[to]=d[i];        d[i]=tem;        //然后把它们两个的DIV保存的编号对调一下    }}//初始化函数，页面加载的时候调用重置函数，重新开始window.onload=function(){    reset();}

0 0