您的位置：首页 > Web前端 > JavaScript

js做拼图游戏存在随机生成的图形，有时不可还原的问题

2011-06-30 15:04 477 查看

本人最近忽然心血来潮，想做个个简单的游戏，做什么游戏比较简单易实现呢，偶然想起小时候玩的拼图游戏，索性做一个玩玩，结果很快就做出来的一个，思想是控制每个小图的id，通过交换id来来实现图片移动，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zcolor-comevc</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function confuseArray1(array){//生成随机图片
var arrlength=array.length;//获取数组长度
var tmparr;
var tmparray= new Array;
for(var i=0;i<arrlength;i++){
var tid1 = parseInt(array.length*Math.random());//获取从0到数组长度的随机值
tmparr = array[tid];
array[tid] = array[arrlength-1];
array[arrlength-1] = tmparr;
array.pop();//数组将最后一个值也就是选中的值消掉，防止重复
tmparray.push(tmparr);
}
return  tmparray;
};
</script>
<script type="text/javascript">

$(document).ready(function(){

var id;
var value1=9;
var value2;
id="item9";//默认第九个图片为空白
var flag=false;
var array=new Array("item1","item2","item3","item4","item5","item6","item7","item8")//把前8个小图的id装进数组
array=confuseArray1(array);//产生随机id
var i=0;
$('li').each(function(){
if(i<8)
$(this).find('a').attr('id',array[i]);
i++;
});
$("li").click(function(){
//判断当前对象是否临近空白图片，因为是每3个图片为一行，总共9个小图区域，所以相对位置差是1、3才可以移动（假如换行了位置差还是1的还要做判断） value2=$('li').index($(this))+1;
switch(value2)
{
case value1-1:
if (value2%3!=0)
{flag=true;}
else{flag=false;}
break;
case value1+1:
if (value1%3!=0)
{flag=true;}
else{flag=false;}
break;
case value1+3:
flag=true;
break;
case value1-3:
flag=true;
break;
default :
flag=false;
break;
}
if(flag)//根据上面的判断，如果可以移动则交换位置（交换id而已）
{
var a=$(this).find('a').attr('id');
id1="#"+id;
$(id1).attr('id',a);
$(this).find('a').attr('id',id);
value1=value2;
}
});
})
</script>
<style>
ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(image/menu_color.jpg); border:1px solid #F0F;}
li {list-style-type:none; width:100px; height:100px; float:left}
li  a{ display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(image/menu_color.jpg) no-repeat 500px 500px; cursor:pointer;}
a#item1{background-position: 0 0; }
a#item2 {background-position: -100px 0;}
a#item3 {background-position: -200px 0;}
a#item4{background-position: 0 -100px;}
a#item5 {background-position: -100px -100px;}
a#item6 {background-position: -200px -100px;}
a#item7 {background-position: 0 -200px;}
a#item8 {background-position: -100px -200px;}
a#item9 {background-color:#fff;}
</style>
</head>

</head>

<body>

<div id="main">

<ul>
<li><a id="item1"  title="Item 1"> </a></li>
<li><a id="item2"  title="Item 2"> </a></li>
<li><a id="item3"  title="Item 3"> </a></li>
<li><a id="item4"  title="Item 4"> </a></li>
<li><a id="item5"  title="Item 5"> </a></li>
<li><a id="item6" title="Item 6"> </a></li>
<li><a id="item7"  title="Item 7"> </a></li>
<li><a id="item8" title="Item 8"> </a></li>
<li><a id="item9"  title="Item 9" > </a></li>

</ul>

</div>

</html>

效果是出来了，可以拼图游戏了，但是还没结束，发现通过随机生成的图形，并不能每次都能拼图成功，有时候拼到最后，发现始终剩下两张相邻的小图是错位的，怎么移动也不能还原，这就引发了问题！——假如随机导致的最后结果是一对相邻图片错位，是不能拼图成功的，如果是两对图片错位就可以，所以必须是偶数对才能拼成功！
所以接下来修改了哈js随机数组：
function confuseArray1(array){
var arrlength=array.length;//获取数组长度
var tmparr;
var tmparray= new Array;
for(var i=0;i<arrlength;i++){
var tid1 = parseInt(array.length*Math.random());//获取从0到数组长度的随机值
var tid2 = parseInt(array.length*Math.random());//获取从0到数组长度的随机值
while(tid1==tid2)
{tid2 = parseInt(array.length*Math.random());}//不能交换同一个数
tmparr = array[tid1];//交换数组
array[tid1] = array[tid2];
array[tid2] = tmparr;
}
return array;
};

这样做的目的就是随机的交换图片偶数次，这样就可以了，而且试了多次每次都可以拼图成功....

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航