RSS订阅 微信
当前位置：前端ABC > Html与Css教程 > 正文

实现一个网页版九宫格拼图小游戏

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

1.拼图.html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>前端ABC-拼图游戏</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();  
}

 

欢迎分享本文，转载请保留出处：前端ABC » 实现一个网页版九宫格拼图小游戏

分享到：更多 ()
标签：

相关推荐

发表评论 0

取消