html5 博看,【分享】HTML5制作俄罗斯方块

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

五、游戏模型

我们有了游戏的数据模型，我们就可以读写他们了。所谓读好理解，所谓写就是改变他们，改变的方法当然是用户的操作了。

下面给出 GameModel 类，他维护三个主要的数据：

1、一个形状的编号，就是用户可以操作移动的那个形状

2、形状的全局位置，用 row col 表示

3、一个 Map，用它完成碰撞检测，添加等操作

另外，还抽象出几个用户的操作动作：

1、left：左移。将形状的全局坐标 col 减少 1 。请思考一下，这样就可以了吗？当然不行，我们还需要进行碰撞检测，如果已经在最左边，则放弃处理。

2、right：右移。同上。

3、rotate：旋转。同上。

4、down：下落。同上。下落过程中的碰撞检测有所不同，一旦发生碰撞，我们不能再放弃处理了，而是要将当前形状加入到空间中。

5、GameOver：下落过程中还需要进行一个检测就是游戏是否结束。如果当前形状在出生地点刚一下落就发生碰撞，说明已经到顶部了，则游戏结束。

有了上面的分析，我们就可以给出 GameModel 的代码：

GameModel 代码 /*

* 说明：GameModel 类

*/

function GameModel(w,h){

this.map=new Map(w,h);

this.born();

}

//出生一个新的形状

GameModel.prototype.born=function(){

//随机选择一个形状

this.shape_id=Math.floor(Math.random()*7)+1;

this.data=Shapes[this.shape_id];

//重置形状的位置为出生地点

this.row=1;

this.col=Math.floor(this.map.width/2);

//通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置

onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));

}

//向左移动

GameModel.prototype.left=function(){

this.col--;

var temp=translate(this.data,this.row,this.col);

if(this.map.isCollide(temp))

//发生碰撞则放弃移动

this.col++;

else

//通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置

onMove(this.shape_id,this.map,temp);

}

//向右移动

GameModel.prototype.right=function(){

this.col++;

var temp=translate(this.data,this.row,this.col);

if(this.map.isCollide(temp))

this.col--;

else

onMove(this.shape_id,this.map,temp);

}

//旋转

GameModel.prototype.rotate=function(){

//正方形不旋转

if(this.shape_id==SquareShape) return;

//获得旋转后的数据

var copy=rotate(this.data);

//转换坐标系

var temp=translate(copy,this.row,this.col);

//发生碰撞则放弃旋转

if(this.map.isCollide(temp))

return;

//将旋转后的数据设为当前数据

this.data=copy;

//通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置

onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));

}

//下落

GameModel.prototype.down=function(){

var old=translate(this.data,this.row,this.col);

this.row++;

var temp=translate(this.data,this.row,this.col);

if(this.map.isCollide(temp)){

//发生碰撞则放弃下落

this.row--;

//如果在 1 也无法下落，说明游戏结束

if(this.row==1) {

//通知游戏结束

//onGameOver();

alert("Game Over")

return;

}

//无法下落则将当前形状加入到 Map 中

this.map.appendShape(this.shape_id,old);

//出生一个新的形状

this.born();

}

else

//通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置

onMove(this.shape_id,this.map,temp);

}