首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2014-01-05 
20多行js代码写一个最简单的3x3拼图游戏,兼容各浏览器,排除无解情况JS就是方便啊,没事的时候玩玩,有益健康

20多行js代码写一个最简单的3x3拼图游戏,兼容各浏览器,排除无解情况
JS就是方便啊,没事的时候玩玩,有益健康。
这个本来是在论坛回一个帖子的,做了一些改进。
我的博客没什么人气,就放这里来一下。这里最大缺点是发布后自己不能编辑。

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

玩法:方向键
胜负:排列出12345678_就算胜利了!
兼容各浏览器,使用了“逆序和”判定,来保证一定有解。

直接体验就轻轻点击这里。
如果有好心人帮我顶一下博客那边的帖子,就很感激了。

<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>

[解决办法]
我一开始还以为按方向键是_ 按照方向键移动。。。谁知道是相反的。。看来是个人理解问题
[解决办法]
运行不了啊。
[解决办法]
不错 ~~~ 
[解决办法]
引用:
引用:
运行不了啊。
不太可能,我测过的





<!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>



这样的啊,运行不了。
[解决办法]
不错,楼主厉害。。。。
[解决办法]
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();

[解决办法]
看看,有点意思。

热点排行