【软院网技术交流】拼图 In JQuery --- 小圆特别版
有人说javascript是玩具一样的语言，在我看来，这门语言确实是很好玩的，至少可以折腾出一些好玩的东东。所以，今天又推出了一个比较好玩的小游戏--拼图，相信大家小时候都玩过，之所以叫做小圆特别版，是因为这是我和小圆@vo_ 小童鞋一起做成的，在此特别为小圆童鞋献上一首歌，我很喜欢的电影《千与千寻》的主题曲《いつも何度でも》（永远同在）。社会如此复杂，生活如此无奈，但我们终究要面对、坚强、独立---这就是《千与千寻》告诉我们的道理。http://www.xiami.com/widget/6156900_1770389166/singlePlayer.swf
拼图游戏网址： 拼图 In jQuery -- 小圆特别版 大家先感受一下。(http://www.ruanyuan.net/tech_demo/wjf/pintu/index.html)
拼图的初始情形如上图所示，随机打乱的小方格，通过空白块的上下移动使拼图还原。
在网页上实现，自然会考虑一下几个问题：
1、使用什么样的数据结构来存储？
2、怎么构成一个有效的随机初始情形？
3、怎样判断小方格是否可以移动？
这些问题解决了，拼图也就自然做出来了。当然这只是一个初步的框架，这个问题最关键的部分是：对于任意的初始条件，设计一种算法，使拼图还原，制作的时候自己想出了两种方法，但是都太过拙劣，过二、三天再补充。 后来查阅了一些资料，发现这在人工智能中还是个比较经典的问题，所以发这个帖子算作是抛砖引玉，希望大家能参与进来一起，提出自己的想法和思路。比较经典的方法是采用A*算法，这个网址有比较详细的介绍：http://www.gamedev.net/page/resources/_/technical/artificial-intelligence/a-pathfinding-for-beginners-r2003，我比较疑惑的是对于这个问题怎样构造h函数和g函数。望各位指点一二。
另外上一个连连看的帖子中林师兄@jose 提出来新的思路，多谢师兄指点，恕我愚钝，至今未能想出来，等实现了再更新。
1、采用什么样的数据结构
直观上看，有3行3列，自然会想到使用二维数组，但进一步思考就好发现，一维数组就可以了，用 除数 和 余数，例如 7,7/3=2,7/3=1, 对应的就是第三行第二列（行列都是从0开始）
2、怎样构成一个有效的随机初始情形？
js有生成的随机数的函数，生成一个随机的一位数组是很容易的事，但是，我实现好以后，有时候生成的拼图无论如何也拼不成，我查了下资料，跟数列的奇偶性有关，哈哈，奇偶性，线性代数中大家的老朋友了。我是这样理解这个问题的，我们可以把这个数组看成一个数列，最终的结果是1,2,3,4,5,6,7,8,0，这是个偶数列，每次移动方格不会改变数列的奇偶性，所以如果初始成一个奇数列，那么永远都不会拼出来了。所以必须加一步检测生成数列的奇偶性，用逆序数就可以。
我最近在读一本书，吴军博士的《数学之美》，收获极大，许许多多的问题归根到底就是数学问题，强烈建议大家读一读。
具体源码如下：
var get_arr = function(){
var get_random = function(){
var arr = [];
for(i=0; i<8; i++){
ran_num = Math.floor(Math.random()*10);
while(che_same_num(arr, ran_num)){
ran_num = Math.floor(Math.random()*10);
}
arr.push(ran_num);
}
arr.push(0);
arr.push(9);
return arr;
}
var che_same_num = function(arr, num){
if(num == 0)
return true;
if(num == 9)
return true;
for(i=0; i<arr.length; i++){
if(arr == num)
return true;
}
return false;
}
var che_odd_arr = function(arr){
var inverse_number = 0;
for(i=0; i<arr.length-2; i++){
for(j=0; j<=i; j++){
if(arr > arr)
inverse_number++;
}
}
return inverse_number%2 ? true:false;
}
var arr = get_random();
while(che_odd_arr(arr)){
arr = get_random();
}
return arr;
}
3、怎样判断小方格是否可以移动？
这个比较简单，只要检测被点击的图片上下左右有没有空格即可，逻辑判断。我写得有点复杂，哪位大神能帮我改改？
if(((td_row==blankbox_row) && (td_col>blankbox_col?td_col==blankbox_col+1:td_col==blankbox_col-1)) || ((td_col==blankbox_col) && (td_row>blankbox_row?td_row==blankbox_row+1:td_row==blankbox_row-1))){
pic_arr = pic_arr;
pic_arr = 0;
set_pics();
}
谢谢各位！
居然真出来一个小圆特别版 感动的内牛满面不能自已{:6_190:} 居然真出来一个小圆特别版 感动的内牛满面不能自已{:6_190:} 太有爱了沙发板凳果断是我的{:7_282:} 本帖最后由 vo_ 于 2013-7-17 21:30 编辑
面对 坚强独立小游戏很好小分子说的很对 歌也很有爱~~~~挺喜欢这个歌 准备在线玩一把先~~{:7_282:} 很强大的样子，羞愧啊 vo_ 发表于 2013-7-17 21:22
居然真出来一个小圆特别版 感动的内牛满面不能自已
如果用的是你的图片。。真的就是小圆特别版了。。。 啊峰 说起千与千寻 请看你头像{:5_136:} xywhere 发表于 2013-7-17 21:49
啊峰 说起千与千寻 请看你头像
一世英名差点就被你毁了啊~~~ cfyrwang 发表于 2013-7-17 21:47
如果用的是你的图片。。真的就是小圆特别版了。。。
那我就去撞南墙。。。。。。。{:8_361:} EagleFlag 发表于 2013-7-17 21:55
一世英名差点就被你毁了啊~~~
你的头像肿么了{:7_269:} 依然是蓝蓝海面一点白啊~~ 各种高端，只有顶贴 没有看帖的份了 vo_ 发表于 2013-7-17 22:01
那我就去撞南墙。。。。。。。
说好的小圆特别版。。好期待的说。。。 来个正真的小圆特别版吧。。。后排小板凳围观。。 真厉害。。。。。。。。 vo_ 发表于 2013-7-17 22:03
你的头像肿么了 依然是蓝蓝海面一点白啊~~
俺昨天给他变成 我要吃的 那个猪头 像不像千与千寻里面的哈哈{:5_136:} 我想知道那部分代码是小圆写得，那部分是介峰叔叔写的~ 小马 发表于 2013-7-18 20:44
我想知道那部分代码是小圆写得，那部分是介峰叔叔写的~
这个私下悄悄告诉你好了 讲出来我好丢人的说{:7_234:} cfyrwang 发表于 2013-7-17 22:47
说好的小圆特别版。。好期待的说。。。
木有了这个就是最终版{:7_233:} vo_ 发表于 2013-7-18 21:44
这个私下悄悄告诉你好了 讲出来我好丢人的说
你这句话其实都可以私底下和我说的。。。 小马 发表于 2013-7-19 21:38
你这句话其实都可以私底下和我说的。。。
你当没听见好了。。。{:5_117:} vo_ 发表于 2013-7-19 21:58
你当没听见好了。。。
你说什么了？我看不见啊，好奇怪 小马 发表于 2013-7-20 12:52
你说什么了？我看不见啊，好奇怪
小马哥 我太欣赏你了{:6_170:} 小马 发表于 2013-7-20 12:52
你说什么了？我看不见啊，好奇怪
小马哥 我太欣赏你了{:6_170:} 状态空间的搜索问题，可以参考《人工智能：一种现代方法》。
F = G + H其实是一个很泛泛而谈的公式。地图游戏的G很明显就是移动的步数，的H就是每个方块离目标位置的距离总和。搜索方法有爬山、退火、剪枝、遗传算法等等。
如果给出一个一定能解出来的算法，那也很简单，就是从2*2（最小子问题）——2*3——3*3……可以猜一下小规模的情况下，这样大多数情况是比搜索算法快的。但是大到什么规模用什么快，这就可以做个实验了。 vo_ 发表于 2013-7-20 23:27
小马哥 我太欣赏你了
多谢多谢 最近也在学Jquery```
页:
[1]