摘要:javascript 小游戏小技巧教学4(简易密室游戏part5-随机谜题提示)

有没有玩过一些密室解谜游戏，

他的解答不是固定的?

接下来就是要教这个技巧!

虽然有些谜题是纯文字内容，游戏通常讲究美感，因此我通常都是用图片做范例(用div的背景)。

首先看我们原本的范例，我们给的提示是这个图：

而我的目标是希望每个人看到的三个颜色排列不同。

这有两种做法，但是概念差不多：

作法一：将三种图案重叠在一起，当我们使用随机变量时，显示变量的结果并隐藏另外两个。

作法二：将三个图案在三个位置的座标记录起来，等随机变量出来时，将图案位置移动到你对应的位置。

第一种作法的好处是如果你有DreamWeaver或者frontPage之类的网页编辑软件，可以直接将图片拉到指定的位置，然后再用getById('id').style.display=""none;做切换。

缺点就是，如果你的提示图样有10种，而你的位置有5个，那么这个提示就会有10x5=50个图案!!!

图案越多越耗网页资讯读取速度，所以我比较建议第二种作法。当然，如果你图片少，第一种作法是蛮简单的(因为位置只要在网页编辑软件拉就可以了)

首先将我们的提示图片分成四个部分：

作法一：

http://www.googledrive.com/host/0B7hg_8WvMyfJfjZ5V3hFTXlHT0FHUjNvYU44NFY3TThaSDEzWS1OZFZqYmk3NTQ0ZUlQa0E

通常网页使用的图片文件类型都是png，所以从这个范例开始我会把图片改成使用png。

使用png的好处就是背景是透明的。

设计时可以将第一排排好后，用display:none;隐藏(用class或者)，然后再排第二排，排好再隐藏第二排，以此类推。

记得使用z-index修改组件的顺序，所以hint(那张写着color的纸)一定要在这些提示的后面。

范例下载:lesson4_5_1.zip

你会发现虽然只要切换显示的图案，前置作业的排版就花好多时间呀!而这还只是三个花样(红、绿、蓝)而已呢!

但是最恼人的应该是我的body里面多了这么多div......

虽然使用了数组让hint与提示的显示可以修改的更简单:

getById("btnRun").onclick=function(){
			hint=new Array(0,0,0);					//这行是为了测试效果用，实际在游戏上要拿掉这行!!!(因为只有重新玩游戏才会重设解答)
			hint=randomUnique(hint,0);
			//alert(hint[0]+","+hint[1]+","+hint[2]);		可以用这个来看看三个变量的值(你也可以尝试把上面改成hint=Math.random()*3+1来看看有没有parseInt的不同)
			for(var i in hint){
				if(hint[i]==1){
					show(red[i]);
					hide(blue[i]);
					hide(green[i]);
				}else if(hint[i]==2){
					show(blue[i]);
					hide(red[i]);
					hide(green[i]);
				}else if(hint[i]==3){
					show(green[i]);
					hide(red[i]);
					hide(blue[i]);
				}
			}
			alert("你的答案是"+result(hint[0])+","+result(hint[1])+","+result(hint[2]));
		}

不过div那么多看了也很累....要想想几个提示和几个位置就要有相乘的div(3x3=9个div)......

如果使用方法二，我们的div只要算图样就可以了(3个图样红、绿、蓝所以3个div)。

作法二：

作法二又分两种，一种是用变量记录每个图案在位置1时的座标(left与right)，另一种则是用javascript改变图案的style。

变量的方法：

http://www.googledrive.com/host/0B7hg_8WvMyfJfjNkSi1faE83T01JUG1tWFFueTByZEpFMHQ1UmlRV2FYRjhjX0RJRW05eUE

原本不用循环是这样写的：

if(hint[0]==1){
				getById("r").style.left=location.red[0][0]+"px";
				getById("r").style.top=location.red[0][1]+"px";
			}else if(hint[0]==2){
				getById("b").style.left=location.blue[0][0]+"px";
				getById("b").style.top=location.blue[0][1]+"px";
			}else if(hint[0]==3){
				getById("g").style.left=location.green[0][0]+"px";
				getById("g").style.top=location.green[0][1]+"px";
			}
			if(hint[1]==1){
				getById("r").style.left=location.red[1][0]+"px";
				getById("r").style.top=location.red[1][1]+"px";
			}else if(hint[1]==2){
				getById("b").style.left=location.blue[1][0]+"px";
				getById("b").style.top=location.blue[1][1]+"px";
			}else if(hint[1]==3){
				getById("g").style.left=location.green[1][0]+"px";
				getById("g").style.top=location.green[1][1]+"px";
			}
			if(hint[2]==1){
				getById("r").style.left=location.red[2][0]+"px";
				getById("r").style.top=location.red[2][1]+"px";
			}else if(hint[2]==2){
				getById("b").style.left=location.blue[2][0]+"px";
				getById("b").style.top=location.blue[2][1]+"px";
			}else if(hint[2]==3){
				getById("g").style.left=location.green[2][0]+"px";
				getById("g").style.top=location.green[2][1]+"px";
			}

了解其规则性后才改成这样：

for(var i in hint){
				if(hint[i]==1){
					getById("r").style.left=location.red[i][0]+"px";
					getById("r").style.top=location.red[i][1]+"px";
				}else if(hint[i]==2){
					getById("b").style.left=location.blue[i][0]+"px";
					getById("b").style.top=location.blue[i][1]+"px";
				}else if(hint[i]==3){
					getById("g").style.left=location.green[i][0]+"px";
					getById("g").style.top=location.green[i][1]+"px";
				}
			}

虽然一开始还是要找位置，倘若你的图案大小都一样，其实位置就不用这么复杂了~

此范例是因为我的每个图案大小(长宽)不同，才会造成位置上有些许差异。

因此建议在提示部分的图案让大小是一样的才不会每个图案都要找位置~

此范例下载:lesson4_5_2.zip

再来是改变css(style)的方法:

变量的方法让我们在css删除不少，

但是用css的方法呢，则是要借助这些已经设定好位置的style。

因此结果就是:

http://www.googledrive.com/host/0B7hg_8WvMyfJflJwcG5sZUFtYzhidjlMWmV5YUhiNEExQ0JwbDlaYXppQ2tBRnRlcTJUbW8

一样，循环的部分本来是这样写:

if(hint[0]==1){
				getById("r").className=style.red[0];
			}else if(hint[0]==2){
				getById("b").className=style.blue[0];
			}else if(hint[0]==3){
				getById("g").className=style.green[0];
			}
			if(hint[1]==1){
				getById("r").className=style.red[1];
			}else if(hint[1]==2){
				getById("b").className=style.blue[1];
			}else if(hint[1]==3){
				getById("g").className=style.green[1];
			}
			if(hint[2]==1){
				getById("r").className=style.red[2];
			}else if(hint[2]==2){
				getById("b").className=style.blue[2];
			}else if(hint[2]==3){
				getById("g").className=style.green[2];
			}

了解规则性后才改成这样:

for(var i in hint){
				if(hint[i]==1){
					getById("r").className=style.red[i];
				}else if(hint[i]==2){
					getById("b").className=style.blue[i];
				}else if(hint[i]==3){
					getById("g").className=style.green[i];
				}
			}

此范例下载:lesson4_5_3.zip

至于哪个比较好用?就见仁见智了。

我个人比较喜欢变量的方法，因为不是每个程序语言都有像html的css有已经配套好的排版方式，所以用变量的话每个程序语言都适用。

但是最好不要用第一种的n个div的方法就是~

原文:大专栏  javascript 小游戏小技巧教学4(简易密室游戏part5-随机谜题提示)