随机移动的小方块

前段时间在问答里面看到一个问题，一个方块在每次上下左右移动一步的情况下，经过n步移动到终点。
试着写了一个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
			body{
				margin:0;
				padding:0;
			}
			#box{
				position:absolute;
				left:0;
				top:0;
				width:30px;
				height:30px;
				background-color:#f00;
			}
			.contaier{
				width:210px;
				height:210px;
				border-right:1px solid #333;
				border-bottom:1px solid #333;
				padding:0;
				margin:0;
			} .contaier dd{
				width:29px;
				height:29px;
				border-top:1px solid #333;
				border-left:1px solid #333;
				float:left;
				margin:0;
			}
			.step{
				margin-top:10px;
			}
			#step{
				width:50px;
			}
		</style>
	</head>
	<body>

		<dl class="contaier">
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
		</dl>
		<div class="step">
			请输入步骤：<input type="text" id="step" /><input type="button" value="go" id="start" />
		</div>

		<div id="box"></div>
		<p>红色方块经过n步后，移动到最后一格</p>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load('mootools','1.2.1');
		</script>
		<script type="text/javascript">
			var Box = function(id,n,temp){
				this.id = id;
				this.n = n.toInt();
				this.temp = temp;
			}
			Box.prototype.randomTemp = function(){
				if (!this.n) {
						return alert('请填写步骤数')
					}
					if(this.n<this.temp*2){
						return alert(this.n+'小于最少步骤数，请填写大一点 的数字')
					}
					var n = this.n;
					var temp = this.temp;
					var x=[];
					var y=[];
					var s={
						'x':[],
						'y':[],
					}
					x[n-1]=null;

					//x,y前半段,和=temp;
					(temp*2).times(function(i){
						if(i<temp){
							x[i]=1;
							y[i]=0;
						}else{
							x[i]=0;
							y[i]=1;
						}
					});

					//x,y的后半段，后半段和=0;
					var i = temp*2;
					var l = n;
					if(l-i == 0){return s;}
					while(i<l){
						if(i+1 == l){
							x[i]=0;
							y[i]=0;
							return s;
						}
						x[i] = $random(1,4);
						x[i] = x[i] == 3 ? -1 : x[i] ==2 ? 0 : x[i]==1 ? 0 : 1;
						y[i] = x[i] == 0 ? -1 : 0;
						x[i+1] = 0-x[i];
						y[i+1] = 0-y[i];
						i = i+2;
					}

					//对x,y两个数组进行随机排序 , 且满足：
					//  0 <= x[0]+x[1] + ... + x[n] <= temp;
					//  0 <= y[0]+y[1] + ... + y[n] <= temp;
					var p=0;
					var h={
						x:0,
						y:0
					};
					(n).times(function(i){
						if(l==0){return;}
						p= $random(1,l) -1;
						h.x = h.x + x[p];
						h.y = h.y + y[p];
						while( h.x<0 || h.x>temp || h.y<0 || h.y>temp){
							h.x = h.x -x[p];
							h.y = h.y -y[p];
							p= $random(1,l) -1;
							h.x = h.x + x[p];
							h.y = h.y + y[p];
						}
						s.x[i] = x[p];
						s.y[i] = y[p];
						x.splice(p,1);
						y.splice(p,1);
						l--;
					});
					return s;
			};
			Box.prototype.move = function(){
				if(!$(this.id)){
						return
					}
					var that = this;
					var id = $(this.id);
					this.left = 0;
					this.top = 0;
					var i=0;
					var s = this.randomTemp();
					this.m = new Fx.Morph(id,{
						link:'chain',
						onComplete:function(){
							i++;
							if(i==s.x.length){return}
							return that.go(s.x[i],s.y[i]);
						}
					});
					return this.go(s.x[i],s.y[i]);
			}
			Box.prototype.go = function(x,y){
				    this.left += x*30;
					this.top += y*30;
					return this.m.start({
						'left':this.left,
						'top':this.top
					})
			}

			window.addEvent('domready',function(){


				var div_x = new Element('p');
			    var div_y = new Element('p');

				$('start').addEvent('click',function(e){
					e.stop();

					var n = $('step').value;
					if (!n) {
						return alert('请填写步骤数')
					}
					if(n<6*2){
						return alert(n+'小于最少步骤数，请填写大一点 的数字')
					}

					var b = new Box('box',n.toInt(), 6);
					b.move();



					//x,y两个数组值
					div_x.set('text','x= '+ b.randomTemp().x);
					div_y.set('text','y= '+b.randomTemp().y);
					$$('body')[0].adopt(div_x, div_y);
				})



			})
		</script>
	</body>
</html>