基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码

　　　　　　　　　　　　// 该停下了
　　　　　　　　　　　　return false;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　}

　　var blockX = block.getX();
　　var blockY = block.getY();

　　if (axis === 'x') {
　　　　blockX += offset;
　　}else if (axis === 'y') {
　　　　blockY += offset;
　　}
　　// 方块移动到新的坐标
　　block.setPosition(blockX, blockY);
　　return true;
}

// 验证方块是否可以进行翻转
function checkRotation(block){
　　for(var i = 0; i < block.getChildren().length; i++){
　　　　var node = block.getChildAt(i);
　　　　var childx = node.getPosition().x;
　　　　var childy = node.getPosition().y;

　　　　// 判断翻转后的图形是否会超出范围
　　　　if(childx < leftSize || childx > rightSize || childy > bottomSize){
　　　　　　return false;
　　　　}
　　}

　　return true;
}

在完成方块的位移与变形之后，我们的小游戏就只差最后一步了：对填充满的方块进行消除。在开始的时候，我们就知道所有的信息都是保存在数据模型当中，所以我们要消除方块。只需要将它们从数据模型中删除即可，实现代码如下：

function deleteBlock(block){
　　// 消除已经填充满的方格
　　var yindexs = []; // 要判断的y轴坐标
　　var num = 0;
　　for(var i = 0; i < block.size(); i ++){
　　　　var childNode = block.getChildAt(i);
　　　　var childy = childNode.getPosition().y;
　　　　var nodeList = g2d.getDatasInRect({x:233, y:childy, width:638, height:2}, true, false);
　　　　if (nodeList.length == 15) {
　　　　　　for(var i = 0; i < nodeList.length; i++){
　　　　　　　　gameDM.remove(nodeList.get(i)); // 在数据模型中移除对应的图元
　　　　　　}
　　　　　　num ++;
　　　　　　yindexs.push(childy);
　　　　}
　　}
　　if (yindexs.length > 0) {
　　　　for(var i = 0 ; i < yindexs.length; i++){
　　　　　　// 将被消除图元上方的图元进行组合，并整体向下移动一个位置
　　　　　　var yindex = yindexs[i];
　　　　　　var h = yindex - 133 - offset;
　　　　　　var moveList = g2d.getDatasInRect({x:233, y:133, width:638, height:h}, true, false);
　　　　　　var mblock = new ht.Block();
　　　　　　for(var i = 0; i < moveList.size(); i++){
　　　　　　　　mblock.addChild(moveList.get(i));
　　　　　　}
　　　　　　moveBlock('y', offset, mblock);
　　　　}
　　}
}

到此，一个简单的俄罗斯方块小游戏就实现了。当然，这个游戏还有很多可以拓展的地方，比如：更多的方块类型，游戏分数的统计，下一步预测窗体，游戏背景修改等。这些先不考虑，我们先开始下一步。