代码是其次，可能有很多不足，而且有一个功能没有实现，那就是方块的变形，没有想到一个很完美的解决方案。下面说一下我的思路，因为当时做的时候，并没有看其他人
的思路，故而不知道自己是否走了弯路，先制作四个基础小方块model，所有的积木都是由这四个方块组合而成。感觉问题的难点就在于判定运动终止，这里我设定了一条基线，
最开始基线的值就是为整个框架的高度，当model的top值等于整个高度时，运动停止，而判定左右运动的条件同理，当运动落至底部的时候，更新基线，即将四个model的坐标，插入基线之中，不过这里考虑了消除功能，故而插入的时候，根据top值不同，插入一个以top值为属性名的对象之中。其逻辑关系整体如下，当方块每一次移动，都预先判断，下一个坐标是否在基线之中，如果是，则停止运动，并且将该坐标插入基线之中，达到更新基线的目的，反之则继续运动。而当方块运动停止后，需要判断保存基线的对象的每一个属性值是否构筑城完整的数字链，即同一行中，每一列都有方块存在，如果存在即进行消去操作，消去之后，需要进行更新基线操作。
领悟，感觉JS真的是单线程的语言，很明显的是，当我向两侧运动，并且碰触到框架两侧，一直按着向右或者向左的方向键时，方块根本不能会下坠，会一直执行向两侧运动的程序，不知道是不是我的方案有错。。
下面贴代码，仅提供思路。。
define(function(require,exports,module){
require("jquery"); var fly={ time:null, //定时器 state:1, //控制状态，判定能否继续运动 moving:0, //是否处于运动过程中 movingxy:[], //运动坐标 mode:[], //四个运动模块 stopAxis:{ }, //基线坐标 xyz:{ 1:[[60,0],[80,0],[100,0],[120,0]], 2:[[100,0],[100,20],[100,40],[100,60]], 3:[[80,0],[100,0],[80,20],[100,20]], //田 | 4:[[100,0],[80,20],[100,20],[120,20]], //土 5:[[120,0],[80,20],[100,20],[120,20]], 6:[[80,0],[80,20],[100,20],[100,40]], 7:[[100,0],[80,20],[100,20],[80,40]] }, creat:function(x){ var md="<a class='mode'></a>"; this.mode[0]=($(md).css({"left":x[0][0]+"px","top":x[0][1]+"px"})); this.mode[1]=($(md).css({"left":x[1][0]+"px","top":x[1][1]+"px"})); this.mode[2]=($(md).css({"left":x[2][0]+"px","top":x[2][1]+"px"})); this.mode[3]=($(md).css({"left":x[3][0]+"px","top":x[3][1]+"px"}));},
start:function(x,y,wh){ this.movingxy[0]=([this.mode[0].css("left").replace("px",""),this.mode[0].css("top").replace("px","")]) this.movingxy[1]=([this.mode[1].css("left").replace("px",""),this.mode[1].css("top").replace("px","")]) this.movingxy[2]=([this.mode[2].css("left").replace("px",""),this.mode[2].css("top").replace("px","")]) this.movingxy[3]=([this.mode[3].css("left").replace("px",""),this.mode[3].css("top").replace("px","")]) for(var i=0;i<4;i++){ fly.ifmove(fly.movingxy[i],x,y) if(this.state==0){ break; } } //console.log(fly.state) if (fly.state == 1) { $(".mode").css({ "left": "+=" + x, "top": "+=" + y }); } else { clearInterval(fly.time); fly.state = 1; if (wh == false) { $(".mode").attr("class", "mode_stop"); //移除MODE，变化为普通方块 fly.insert(fly.movingxy); if(fly.delet()){ alert("GAME OVER"); return false; } this.moving=0; if(this.moving==0){ fly.creat(fly.xyz[Math.floor(Math.random()*7+1)]); $("#fy").append(fly.mode[0],fly.mode[1],fly.mode[2],fly.mode[3]); fly.time=setInterval(function(){ fly.start(0,20,false) },700) fly.moving=1; } }else{ fly.time=setInterval(function(){ fly.start(0,20,false) },700) fly.moving=1; }}
}, control:function(){ $(document).bind("keydown",function(event){ switch(event.keyCode){ case 37: fly.start(-20,0,true);break; case 39: fly.start(20,0,true);break; case 40: fly.start(0,20,false);break; case 17: } }) }, ifmove:function(axis,x,y){ rexy=[parseInt(axis[0])+x,parseInt(axis[1])+y]; if(rexy[0]==-20||rexy[0]==200||rexy[1]==300){ fly.state=0; return false; } if(fly.stopAxis.hasOwnProperty(rexy[1])){ for(var n=0;n<fly.stopAxis[rexy[1]].length;n++){ if(rexy.join("")==fly.stopAxis[rexy[1]][n].join("")){ fly.state=0; return false; } } } return false; /* for(var i in fly.stopAxis){ if(rexy.join("")==fly.stopAxis[i].join("")){ fly.state=0; return false; } }*/ }, insert:function(array){ //插入基线 for(var i=0;i<4;i++){ //console.log(array[i][0]+"||"+array[i][1]) if(!fly.stopAxis.hasOwnProperty(array[i][1])){ fly.stopAxis[array[i][1]]=new Array(); } fly.stopAxis[array[i][1]].push(array[i]); fly.mode[i].attr("topName",fly.movingxy[i][1]); //console.log(fly.stopAxis) } }, delet: function(){ //消去模块 var kzy = {}; for (var i in fly.stopAxis) { if(i==0){ return true; } if (fly.stopAxis[i].length == 10) { fly.stopAxis[i] = []; $(".mode_stop[topName=" + i + "]").remove(); //消除基线 var score=parseInt($("#oo").text())+10; $("#oo").text(score); for (var x in fly.stopAxis) { //整体下降 if (x < i) { $(".mode_stop[topName=" + x + "]").css("top", "+=20"); for (var k = 0; k < fly.stopAxis[x].length; k++) { fly.stopAxis[x][k][1] = parseInt(fly.stopAxis[x][k][1]) + 20; } //console.log(x) kzy[parseInt(x) + 20] = fly.stopAxis[x]; fly.stopAxis[x]=[]; } } } } for(var m in fly.stopAxis){ //重构基线 if(kzy.hasOwnProperty(m)){ fly.stopAxis[m]=kzy[m]; } } }, }; $(function(){ $("#start").bind("click",function(){ if(fly.moving==0){ this.mode=[]; fly.creat(fly.xyz[Math.floor(Math.random()*7+1)]); clearInterval(fly.time); $("#fy").append(fly.mode[0],fly.mode[1],fly.mode[2],fly.mode[3]); fly.time=setInterval(function(){ fly.start(0,+20,false); },700); fly.moving=1; } }) fly.control() $("#stop").bind("click",function(){ clearInterval(fly.time); }) }) })