【散分】又花了一晚上写了个javascript拼图游戏

wujinjian2008n 2009-12-08 11:52:46
加精
拼图游戏，在ie7 ，火狐，谷歌 测试通过。

<!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 runat="server">

    <title>无标题页</title>

    <script type="text/javascript">

        var mapBlock=3; //3 * 3 个单元格

        var mapWH=300;  //地图的大小

		var tabobj;

		var imgsrc="http://i3.6.cn/cvbnm/35/b7/8f/4e78358bc9f1b80a62a749d04bf409d8.jpg";

        

		var backgroundPositionArr;



        function createMap()

        {

			backgroundPositionArr=new Array();

			document.getElementById("imgid").src=imgsrc;



            tabobj=document.createElement("table");

            tabobj.style.width=mapWH+"px";

            tabobj.style.height=mapWH+"px";

            

            tabobj.border="0";

			tabobj.cellspacing="0";

			tabobj.style.backgroundColor="rgb(223,223,223)";



            var tbodyobj=document.createElement("tbody");

            

            for(var i=0;i<mapBlock;i++)

            {

                var trobj=document.createElement("tr");

                

                for(var j=0;j<mapBlock;j++)

                {

                    var tdobj=document.createElement("td");

                    tdobj.id=i+"_"+j



					if(!(i==mapBlock-1 && j==mapBlock-1))

					{

						tdobj.style.backgroundImage="url("+imgsrc+")";

						tdobj.style.backgroundRepeat="no-repeat";

						tdobj.style.backgroundPosition=(-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px";



						backgroundPositionArr.push((-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px");

					}

                   

                    var txt=document.createTextNode(" ");

                    tdobj.appendChild(txt);

                    

                    trobj.appendChild(tdobj);

                }

                

                tbodyobj.appendChild(trobj);

            }

            

            tabobj.appendChild(tbodyobj);

            

            document.getElementById("map_div").appendChild(tabobj);



			randomMap();



			setMessageDivSize();



			startDate();

			nowDate();

        }



        function setMessageDivSize()

        {

            document.getElementById("message_div").style.width="180px";

            document.getElementById("message_div").style.height=document.getElementById("map_div").offsetHeight-2+"px";

        }



        function startDate()

        {

            document.getElementById("startDate").value=new Date().toLocaleTimeString();

        }



        function nowDate()

        {

            document.getElementById("nowDate").value=new Date().toLocaleTimeString();



            setTimeout("nowDate()",1000);

        }



        function yxbs()

        {

            document.getElementById("yxbs").value=document.getElementById("yxbs").value-0+1;

        }

		

		function keyDown(e)

		{

			var keyvalue=e.keyCode;



			if(keyvalue==38)   //上

			{

				blockMove(1,0);

			}

			else if(keyvalue==39)  //右

			{

				blockMove(0,-1);

			}

			else if(keyvalue==40)   //下

			{

				blockMove(-1,0);

			}

			else if(keyvalue==37) //  左

			{

				blockMove(0,1);

			}

		}



		function blockMove(x,y)

		{

			var blockx=-1;

			var blocky=-1;



			for(var i=0;i<mapBlock;i++)

			{

				for(var j=0;j<mapBlock;j++)

				{

					if(document.getElementById(i+"_"+j).style.backgroundImage=="")

					{

						blockx=i;

						blocky=j;



						break;

					}

				}

				if(blockx!=-1 && blocky!=-1)

					break;

			}



			if(blockx+x>mapBlock-1 || blockx+x<0 || blocky+y>mapBlock-1 || blocky+y<0)

				return;

			else

			{

				document.getElementById(blockx+"_"+blocky).style.backgroundImage="url("+imgsrc+")";

				document.getElementById(blockx+"_"+blocky).style.backgroundPosition=document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundPosition;

				document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundImage="";



				isWin();

				yxbs();

			}

		}



		function randomMap()

		{

			var randomarr=new Array();

			var maparr=new Array();



			for(var i=0;i<mapBlock*mapBlock-1;i++)

			{

				randomarr[i]=i;

			}



			for(var i=mapBlock*mapBlock-2;i>=0;i--)

			{

				var a=Math.round(Math.random()*i);

				maparr.push(randomarr[a]);

				

				randomarr.splice(a,1);

			}



			for(var i=0;i<mapBlock;i++)

			{

				for(var j=0;j<mapBlock;j++)

				{

					if(!(i==mapBlock-1 && j==mapBlock-1))

					{

						document.getElementById(i+"_"+j).style.backgroundPosition=backgroundPositionArr[maparr.pop()];

					}

				}

			}

		}



		function isWin()

		{

			var k=0;

			var iswin=false;



			for(var i=0;i<mapBlock;i++)

			{

				for(var j=0;j<mapBlock;j++)

				{

					if(!(i==mapBlock-1 && j==mapBlock-1))

					{//alert(document.getElementById(i+"_"+j).style.backgroundPosition+"  == "+backgroundPositionArr[k]);

						if(document.getElementById(i+"_"+j).style.backgroundPosition==backgroundPositionArr[k])

						{

							iswin=true;

						}

						else

						{

							iswin=false;

							break;

						}

						k++;

					}

				}

				if(iswin==false)

					break;

			}



			if(iswin)

			{

				alert("恭喜你赢了！");

				window.location.href=window.location.href;

			}

		}



		function setGameNan()

		{

			document.getElementById("map_div").removeChild(tabobj);

			

			mapBlock=document.getElementById("yxn").options[document.getElementById("yxn").selectedIndex].value-0;

			createMap();



			tabobj.focus();

		}

    </script>

</head>

<body onload="createMap()" onkeydown="keyDown(event)"  style="font-size:10pt;">

    <form id="form1">

        <center>

            <br>

            <table>

                <tr>

                    <td>

                        <div id="map_div" style="border:rgb(231,24,220) solid 1px">

                        </div>

                    </td>

                    <td>

                        <div id="message_div" style="border:rgb(231,24,220) solid 1px" align="center">

                            <br><font color="red"><b>拼图游戏</b></font><br>

                            开始时间:<input type="text" id="startDate" readonly style="width:80px"><br>

                            现在时间:<input type="text" id="nowDate" readonly style="width:80px"><br>

                            游戏步数:<input type="text" id="yxbs" readonly value="0" style="width:80px"><br>

							游戏难度:<select id="yxn" style="width:86px" onchange="setGameNan()">

										<option value="3">3 * 3</option>

										<option value="4">4 * 4</option>

										<option value="5">5 * 5</option>

										<option value="6">6 * 6</option>

										<option value="10">10 * 10</option>

									 </select>

									 <br><br>



                            <font color="red"><b>游戏规则</b></font><br>

                            (1)只要拼成如下图你就赢了:

                            <br><br>

                            <img id="imgid" width="100px" height="100px" border="1">

                        </div>

                    </td>

                </tr>

            </table>

            <br>

        </center>

    </form>

</body>

</html>
...全文
48240 450 打赏 收藏 转发到动态 举报
写回复
用AI写文章
450 条回复
切换为时间正序
请发表友善的回复…
发表回复
cuixiping 2011-09-23
  • 打赏
  • 举报
 回复
写这种游戏的一个老问题：判断无解！
很多人是不判断的，这给游戏玩家的体验很不好，玩半天发现根本无解。

明显楼主的代码没有这种判断。

所有随机局面当中，有50％是无解的，50％有解。
cuixiping 2011-09-23
  • 打赏
  • 举报
 回复
[Quote=引用 49 楼 wujinjian2008n 的回复:]

引用 46 楼 liuyar 的回复:
楼主的程序设计思想已经够强了，建议多学学JS的面向对象和闭包，会让你的水平更高！


现在看书根本就看不进去，你说的太对了，js我只会 函数式 的编程
[/Quote]js根本就是为函数式编程而设计的，函数式并没有什么不好，盲目崇拜OO和闭包是一个误区。
这是一个相当简单的游戏，为什么一定要搞得那么复杂呢，不能为了OO而OO。
这个游戏而言，函数式是最合适的。
曹西 2011-09-22
  • 打赏
  • 举报
 回复
好贴子，我给挖出来，
carlkn01 2011-09-22
  • 打赏
  • 举报
 回复
牛啊~！
非洲咸鱼王 2011-07-27
  • 打赏
  • 举报
 回复
我了个去，这也太牛了吧
QQ1136494105 2011-06-16
  • 打赏
  • 举报
 回复
我测试怎么用不了啊
quan356270259 2010-10-21
  • 打赏
  • 举报
 回复
楼主好牛比啊！保存了。狂顶……………………
CaiRanNova 2010-10-19
  • 打赏
  • 举报
 回复
不能移动图片
gseven0312 2010-07-21
  • 打赏
  • 举报
 回复
我最讨厌
chunchun0034 2010-06-26
  • 打赏
  • 举报
 回复
.......
maycxd 2010-06-18
  • 打赏
  • 举报
 回复
很膜拜楼主的JS功底
su503083725 2010-06-17
  • 打赏
  • 举报
 回复
大哥你真牛！
wanghai2012 2010-06-17
  • 打赏
  • 举报
 回复
好强 够看一晚上的了
snrtiagw 2010-06-16
  • 打赏
  • 举报
 回复
图片是网上资源啊？？要是没网呢？
snrtiagw 2010-06-16
  • 打赏
  • 举报
 回复
太强大了 顶飞
jingkunli 2010-06-13
  • 打赏
  • 举报
 回复
非常不错!
longissuperman 2010-06-03
  • 打赏
  • 举报
 回复
怎么没看到资源啊，我想看看怎么写的
捷哥1999 2010-05-25
  • 打赏
  • 举报
 回复
高手，必须要顶！
xmy8882040810 2010-05-25
  • 打赏
  • 举报
 回复
可以将你的代码公开吗？ 真的觉得很好 我会说明转载来自您的空间 可以吗？
tomerry 2010-05-02
  • 打赏
  • 举报
 回复
请问 楼主怎样才能 达到你这种水平啊？
加载更多回复（430）
从程序员到项目经理
然而，从Javascript到Java充其量只是工具的更新，而从程序员到项目经理，却是一个脱胎换骨的过程。从Javascript到Java，是一个取巧的方法；而从程序员到项目经理，却并无捷径可走，必须从内而外的改变和提升。 一．...
TowardsDataScience 博客中文翻译 2016~2018（一百一十七）
总的来说，这是一个非常好的一天，内容非常棒(少一些技术，多一些社会/经济/政治/社会)。信噪比很好，没有任何形式的供应商推销演示(我看到的)，并且受到了来自技术和商业社区各个部分的优秀、积极的观众的光顾。...
TowardsDataScience 博客中文翻译 2016~2018（二百二十一）
在完成了人工智能纳米学位的第一个学期后，我报名参加了第二个学期，明确期望学习更多关于深度神经网络的知识，特别是关于卷积和递归神经网络的知识。此外，中途停止也不符合逻辑:-)通常，数据需要在地理基础上理解...
TowardsDataScience 博客中文翻译 2019（二百二十三）
最近，图吸引了机器学习社区过多的注意力。...此外，节点可以有一个概率解释，并代表随机变量。这些特殊的图被称为概率图模型，其中如果没有联系，两个 r.v .就是独立的。例如，神经网络是一种特定的图形模型。
TowardsDataScience 博客中文翻译 2016~2018（三百二十六）
如果你刚刚起步，你不需要花一大笔钱从名牌大学获得硕士或博士学位。你几乎可以免费开始。有很多像 Coursera、Udemy、Udacity 等平台可以让你立刻进入这个领域。谷歌搜索一下，你的旅程就开始了！人工智能可以实现...
JavaScript

87,995

社区成员

224,710

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章