20多行js代码写一个最简单的3x3拼图游戏，兼容各浏览器，排除无解情况

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style> </head>
<body>
<script>  
function gd(){  
var arr=[1,2,3,4,5,6,7,8].sort(function(){return Math.random()>.5});  
for(var i=0,k=0,n=arr.length;i<n;i++)  
for(var j=i+1;j<n;j++)  
arr[i]>arr[j] && (k=1-k);  
k && (i=arr[n-2]) && (arr[n-2]=arr[n-1]) && (arr[n-1]=i);  
return [arr.slice(0,3),arr.slice(3,6),arr.slice(6).concat('_')];  
}  
var r=2,c=2,sp='\r\n',d=gd();  
document.writeln('<textarea id="t1" readonly style="overflow:hidden;width:70px;height:70px;">'+d.join(sp)+'</textarea>');  
var t1=document.getElementById("t1");  
document.onkeyup = function (e){  
var k = (e||window.event).keyCode, t, rr2=r, cc2=c;  
if(k==37||k==39){  
c2 += 38-k;  
if(c2<0||c2>2)return;  
}else if(k==38||k==40){  
r2 += 39-k;  
if(r2<0||r2>2)return;  
}else return;  
t = d[r][c];  
d[r][c] = d[r2][c2];  
d[r=r2][c=c2] = t;  
t1.value = d.join(sp);  
if(t1.value.match(/^1,2,3[^\d]*4,5,6[^0]*_$/)){  
alert('YOU WIN !');  
}  
}  
</script>
</body>
</html>这样的啊，运行不了。

解决方案 »

  1.   

    <!doctype html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    </style> </head>
    <body>
    <script>  
    function gd(){  
    var arr=[1,2,3,4,5,6,7,8].sort(function(){return Math.random()>.5});  
    for(var i=0,k=0,n=arr.length;i<n;i++)  
    for(var j=i+1;j<n;j++)  
    arr[i]>arr[j] && (k=1-k);  
    k && (i=arr[n-2]) && (arr[n-2]=arr[n-1]) && (arr[n-1]=i);  
    return [arr.slice(0,3),arr.slice(3,6),arr.slice(6).concat('_')];  
    }  
    var r=2,c=2,sp='\r\n',d=gd();  
    document.writeln('<textarea id="t1" readonly style="overflow:hidden;width:70px;height:70px;">'+d.join(sp)+'</textarea>');  
    var t1=document.getElementById("t1");  
    document.onkeyup = function (e){  
    var k = (e||window.event).keyCode, t, rr2=r, cc2=c;  
    if(k==37||k==39){  
    c2 += 38-k;  
    if(c2<0||c2>2)return;  
    }else if(k==38||k==40){  
    r2 += 39-k;  
    if(r2<0||r2>2)return;  
    }else return;  
    t = d[r][c];  
    d[r][c] = d[r2][c2];  
    d[r=r2][c=c2] = t;  
    t1.value = d.join(sp);  
    if(t1.value.match(/^1,2,3[^\d]*4,5,6[^0]*_$/)){  
    alert('YOU WIN !');  
    }  
    }  
    </script>
    </body>
    </html>这样的啊，运行不了。
      

  2.   

    rr2=r, cc2=c; ->r2=r, c2=c; 
      

  3.   

    确实，不好意思，笔误了。多谢。不过我给的demo网址是可以了，可能发帖的时候搞错了。
      

  4.   

    不好意思啊，有个笔误。
    zswang已经指出了。
    rr2=r, cc2=c; 
    改为
    r2=r, c2=c; 
      

  5.   

    http://jsfiddle.net/GdpSt/1/修改成可以变高宽的方式：
    var points = [],
        temp, j = 1,
        colCount = 15,
        rowCount = 7,
        current = [rowCount - 1, colCount - 1],
        len = String(rowCount * colCount).length;for(var row = rowCount; row--;){
        var lines = [];
        points.push(lines);
        for(var col = colCount; col--;){
            lines.push((new Array(len).join(0) + j++).slice(-len));
        }
    }
    points[current[0]][current[1]] = new Array(len + 1).join('_');var success = points.join('\n');
        
    function move(direction){
        if (!(/^[0-3]$/.test(direction))) return;
        var offset = [[-1, 0], [0, -1], [+1, 0], [0, +1]][direction],
            next = [current[0] + offset[0], current[1] + offset[1]];
        if (!points[next[0]] || !points[next[0]][next[1]]) return;
        points[current[0]][current[1]] = points[next[0]][next[1]];
        points[next[0]][next[1]] = new Array(len + 1).join('_');
        current = next;
        return true;
    }
    for(var i = rowCount * colCount * 4; i--;){
        move(0 | (Math.random() * 4));
    }
    var t1 = document.getElementById("t1");
    t1.value = points.join('\n');
    t1.onkeyup = function(e){
        if (move(40 - (e || event).keyCode) && success == (t1.value = temp = points.join('\n'))){
            t1.onkeyup = alert('YOU WIN !');
        }
    };
    t1.focus();
      

  6.   

    我好像没哪个板块有编辑权限。我老百姓啊！确实可以再短，我重新改了一下，现在更简短了，也修正了p2227所提的问题。
    <script>
    function gd(){
        var arr=[1,2,3,4,5,6,7,8].sort(function(){return Math.random()>.5});
        for(var i=0,k=0,n=arr.length;i<n;i++)
            for(var j=i+1;j<n;j++)
                arr[i]>arr[j] && (k=1-k);
        k && (i=arr[n-2]) && (arr[n-2]=arr[n-1]) && (arr[n-1]=i);
        return arr.concat(0);
    }
    function v(){
        return (d+'').replace(0,' ').replace(/(.{5}),/g,'$1\r\n');
    }
    document.writeln('<textarea id="t1" readonly autocomplete="off" style="overflow:hidden;width:70px;height:70px;"></textarea>');
    var p=8, d=gd(), t1=document.getElementById("t1");
    setTimeout('t1.value=v()',10);
    document.onkeyup = function (e){
        var k = (e||window.event).keyCode-36, t, q;
        if(k==1 && (p%3<2) || k==3 && (p%3>0) || k==2 && p<6 || k==4 && p>2){
            q=p+(k>2?1:-1)*(k%2*2-3);
            d[p]=d[q], d[p=q]=0;
            if((t1.value=v()).match(/^1,2,3[^\d]*4,5,6[^0]* $/))
                alert('YOU WIN !');
        }
    }
    </script>直接体验就轻轻点击这里。
    BLOG上的代码也更新了。
    这里的帖子没法改，就算了。
      

  7.   

    你的offset和判断win的方法很好，提醒了我。
    另外，你的len = String(rowCount * colCount).length;有bug，你试试2x5，10x10之类的布局就会多出一个0。
     应该改为 len = String(rowCount * colCount -1).length;你是通过从结果来移动若干次，保证有解，但是空格不在末尾了，如果要把空格移回末尾，还要两个循环。下面贴上我的任意行列版本（代码变长了）<div id="t1" style="border:1px solid black; padding:5px; display:inline-block;"></div>
    <script>
    var t1=document.getElementById("t1");
    function layout(M,N){
        R=M; C=N; r=R-1; c=C-1; D=[]; n=R*C-1;
        w = (n+'').length;
        rgx = new RegExp('(.{'+(w*C+c-1)+'}),','g');
        space = new Array(w+1).join('_');
        zero = new Array(w).join(0);
        replay();
    }
    function replay(){
        i=n;
        while(i--){
            D[i]=(zero+(i+1)).slice(-w);
        }
        D[n] = space;
        ok = D+'';
        while(++i<n){
            j=D[rnd = Math.random()*(n-1)|0];
            D[rnd]=D[i];
            D[i]=j;
        }
        for(i=0,k=0;i<n;i++)
            for(j=i+1;j<n;j++)
                D[i]>D[j] && (k=1-k);
        k && (i=D[n-2]) && (D[n-2]=D[n-1]) && (D[n-1]=i);
        t1.innerHTML = (D+'').replace(rgx,'$1<br>');
    }
    function move(dir){
        if (dir>=0&&dir<4) {
            k = [[0,1],[1,0],[0,-1],[-1,0]][dir], r2 = r+k[0], c2 = c+k[1];
            if (r2+1 && r2<R && c2+1 && c2<C)
            return D[r*C+c] = D[r2*C+c2],
                D[(r=r2)*C+(c=c2)] = space,
                t1.innerHTML = (D+'').replace(rgx,'$1<br>');
        }
    }
    document.onkeyup = function (e){
        if(move((e||window.event).keyCode-37) && (D+'')==ok && alert('YOU WIN !'));
    }
    layout(4,4);
    </script>
      

  8.   

    忘了放demo地址，补上。直接体验就轻轻点击这里。
      

  9.   

    16楼 谢谢啦  代码只需要改最后下面就能出现自己想要DIY的行数列数拼图！非常棒！