有人说javascript是玩具一样的语言,在我看来,这门语言确实是很好玩的,至少可以折腾出一些好玩的东东。所以,今天又推出了一个比较好玩的小游戏--拼图,相信大家小时候都玩过,之所以叫做小圆特别版,是因为这是我和小圆@vo_ 小童鞋一起做成的,在此特别为小圆童鞋献上一首歌,我很喜欢的电影《千与千寻》的主题曲《いつも何度でも》(永远同在)。社会如此复杂,生活如此无奈,但我们终究要面对、坚强、独立---这就是《千与千寻》告诉我们的道理。 拼图游戏网址: 拼图 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[j] > 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[blank_num] = pic_arr[td_num]; pic_arr[td_num] = 0; set_pics(); } 谢谢各位! |
[技术| 编程·课件·Linux] 【软院网技术交流】拼图 In JQuery --- 小圆特别版
EagleFlag
· 发布于 2013-07-17 21:21
· 3262 次阅读
转载文章时务必注明原作者及原始链接,并注明「发表于 软院网 RuanYuan.Net 」,并不得对作品进行修改。
vo_ 发表于 2013-7-17 22:03 俺昨天给他变成 我要吃的 那个猪头 像不像千与千寻里面的 哈哈 |
cfyrwang 发表于 2013-7-17 22:47 木有了 这个就是最终版 |
小马 发表于 2013-7-20 12:52 小马哥 我太欣赏你了 |
vo_ 发表于 2013-7-20 23:27 多谢多谢 |