日期:2014-05-17  浏览次数:20426 次

一段JS代码,请大家分析下其中的“时间”“步数”变量是那些?怎么传递给PHP变量!
这是一个从网上找的“拼图”代码。感觉还不错,就把他嵌入了我的PHP主页里面,当一个小应用

当然,我希望当游戏成功完成时,能把“时间”“步数”2个变量传递出来,然后输出给用户

但是这段JS代码还真看不懂

所以来请教大家,其中的“时间”“步数”变量是那些?怎么再传递给PHP变量!

HTML code
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS重现_经典拼板游戏</title>
</head>
<body>
<style>
*{margin:0;padding:0;}
.shell{margin:20px auto;position:relative;width:499px;height:299px;border:#666 10px solid;background:#FAFAFA;}
.shell p{position:absolute;width:99px;height:99px;background:url(meitu.jpg) no-repeat 0 0;cursor:pointer;}
.bar{margin:0 auto;width:499px;font:600 16px/1.8em Verdana;}
.bar em{font-style:normal;margin-right:10px;color:#F00;}
#showall{font:12px/1.8em Verdana;cursor:pointer;}
#show{background:url(meitu.jpg) no-repeat 0 0;}
</style>
<div id="shell" class="shell"></div>
<div id="bar" class="bar">
    <b>计时:</b><em id="times">00:00</em>
    <b>步数:</b><em id="steps">0</em>
    <select id="hard">
        <option value="1">入门模式</option>
        <option value="7">简单模式</option>
        <option value="81">一般模式</option>
        <option value="201">困难模式</option>
        <option value="501">超难模式</option>
    </select>
    <b id="showall">查看原图</b>
</div>
<div id="show" class="shell" style="display:none;"></div>
<script type="text/javascript">
speller={
    init:function(n){
        this.hard=n||5;
        this.step=this.useTime=0;
        this.blank=14;
        this.createGrid();
        clearInterval(this.timer);
        this.timer=setInterval(function(){
            speller.useTime++;/* 累加时间并格式化显示 */
            document.getElementById("times").innerHTML=('0'+parseInt(speller.useTime/60)).slice(-2)+':'+('0'+speller.useTime%60).slice(-2);
        },1000);
    }
    ,createGrid:function(){
        var X=function(n){return n%5*100;},Y=function(n){return parseInt(n/5)*100;};
        for(var i=0,html=[];i<15;i++){
            html.push('<p onclick="speller.move(this);" id="'+i+'" class="'+i+'"  style="left:'+X(i)+'px;top:'+Y(i)+'px;background-position:-'+X(i)+'px -'+Y(i)+'px;"></p>');
        }
        document.getElementById("shell").innerHTML=html.join('');
        this.random();
    }
    ,random:function(p){
        var ps=document.getElementById("shell").getElementsByTagName("P"),l=ps.length,me=this;
        ps[this.blank].style.display="none";
        var en=function(n){
            var arr=[];
            if(n<14 && n%5!=4){arr.push(n+1);}
            if(n>0 && n%5!=0){arr.push(n-1);}
            if(n>4){arr.push(n-5);}
            if(n<10){arr.push(n+5);}
            return arr[parseInt(Math.random()*arr.length)]*1;
        }
        var getp=function(n){for(var i=0;i<l;i++){if(ps[i].className==n){return ps[i];}}}
        for(var i=0;i<me.hard;i++){
            this.move2(getp(en(this.blank*1)));
        }
    }
    ,move2:function(p){
        var pos=p.className*1,POS=this.blank*1,abs=Math.abs(pos-POS),max=pos>POS?pos:POS;
        p.style.top=parseInt(POS/5)*100+"px";
        p.style.left=POS%5*100+"px";
        p.className=POS;this.blank=pos;
    }
    ,move:function(p){
        var pos=p.className*1,POS=this.blank*1,abs=Math.abs(pos-POS),max=pos>POS?pos:POS;
        if(abs==5){
            this.fx(parseInt(pos/5)*100