20多行js代码写一个最简单的3x3拼图游戏

原创 2011年12月19日 15:49:54

按惯例,截图是必须的:

20多行js代码写一个最简单的3x3拼图游戏

玩法:方向键

胜负:排列出12345678_就算胜利了!

兼容各浏览器,使用了“逆序和”判定,来保证一定有解。

接下来是js代码,不需要HTML配合了,直接放入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.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, 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>
<a href="javascript:void(p=8,d=gd(),t1.value=v())">重玩</a>


补充:写了一个美化版,基本功能一样,样式美化了一下。直接体验就轻轻点击这里

<style type="text/css">
#jigsaw {width:141px;border:solid 1px #666;text-align:center;font-size:22px;line-height:40px;padding:5px 0 0 5px;}
#jigsaw > div {width:40px;height:40px;margin:0 5px 5px 0;border:solid 1px #666;display:inline-block;cursor:default;}
#replay {font-size:16px;}
#success {font-size:16px;color:green;display:none;}
</style>

<div id="jigsaw"></div>
<p>
<button id="replay" type="button">再来一局</button>
<span id="success">拼图成功!</span>
</p>

<script>
!function (){
	var p, d;
	function $$(id){return document.getElementById(id);}
	function gd(){
		$$('success').style.display='none';
		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);
		d=arr.concat(0);
		p=8;
		v();
	}
	function v(){
		return $$('jigsaw').innerHTML=(d+'').replace(/(\d+)\D*/g,'<div>$1</div>').replace(/\b0\b/,' ');
	}
	document.onkeyup = function (e){
		var k = (e||window.event).keyCode-36, 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, v();
			d+''=='1,2,3,4,5,6,7,8,0' && ($$('success').style.display='inline');
		}
	};
	document.getElementById("replay").onclick=gd;
	gd();
}();
</script>

补充:重新写了一个任意行列的版本,做了一些增强,看这里《30多行js代码写一个M*N拼图游戏》,能任选M*N布局,即时切换,即时replay.

30多行js代码写一个M*N拼图游戏

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

一个简单的JS拼图游戏

一天在手机上玩吸血鬼日记的拼图游戏,就心血来潮的想自己来用JS实现一个,代码如下: 拼图游戏 .containor{border:1px solid #999;position:abso...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Javascript: 实现拼图游戏

注:本人网页项目github:linwh8需求规格: 1.UI(10分): UI与效果图完全一致;或者,自由发挥,设计出更加漂亮、合理的UI(可以使用其他图片); 2.正常移动(20分): ...
  • linwh8
  • linwh8
  • 2016年10月24日 00:11
  • 1701

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

(游戏及源代码)C#拼图游戏

大家好,这次我要为大家带来的是一个用C#写的WinForm游戏,名字叫做拼图游戏。拼图游戏想必大家肯定玩过,玩法我就不赘述了。 首先向大家展示一下运行效果图吧:       ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js 移动端 指尖摩擦小游戏源码

指尖摩擦 ...
  • for_cxc
  • for_cxc
  • 2016年03月29日 13:29
  • 330

九宫格,拼图游戏完整源码

代码如下:(需要 引入 jquery .js和 vue.js): html> html lang="en"> head> meta charset="UTF-8"> title>...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:20多行js代码写一个最简单的3x3拼图游戏
举报原因:
原因补充:

(最多只允许输入30个字)