基于jQuery的俄罗斯方块

 代码是其次，可能有很多不足，而且有一个功能没有实现，那就是方块的变形，没有想到一个很完美的解决方案。下面说一下我的思路，因为当时做的时候，并没有看其他人

的思路，故而不知道自己是否走了弯路，先制作四个基础小方块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);
})
})
}) 

 

转载于:https://www.cnblogs.com/ccjs/p/3936863.html