使用javascript制作俄罗斯方块游戏(3)

原创 2015年02月11日 12:37:37

之前已经建立好了基本的结构,现在可以真正进入设计编码阶段,在此我们建立一个js类,专门用于控制方块的移动和反转,代码如下

function MoveShape(controls) {
    this.controls = controls;
    return this;
}

MoveShape.prototype = {
    constructor: MoveShape,

    turnShape: function () {
        var list = this.getCurrentActivePiece();
        var currentNextTurn = list.infos[0].NextTurn;
        var currentTurn = list.infos[0].CurrentTurn;

        if (currentNextTurn == "O") return;//对于方块不做处理
        //获取翻转的下一个图形
        var nextShape = tetrisShape[currentNextTurn];
        //获取当前的形状
        var currentShape = tetrisShape[currentTurn];
        //获取翻转范围
        var region = this.getShapeRegion(list, currentShape);

        //检查范围是否超出
        if (region.MinI < 0 || region.MinJ < 0 || region.MaxI > (map.Row - 1) || region.MaxJ > (map.Column - 1)) {
            return;
        }

        //开始翻转
        this.turn(region, list, nextShape);
    },
    
    turn: function (region, list, nextShape) {
        var currentBackColor = list.infos[0].BackColor;
        var mini = region.MinI == 0 ? region.MinI : region.MinI - 1;
        var startIndex = map.column * mini;
        var maxi = region.MaxI < (map.row - 1) ? region.MaxI + 1 : region.MaxI;
        var endIndex = map.column * maxi;

        if (startIndex < 0) return;

        //检查是否可以翻转
        var checkCount = 0;
        for (var i = startIndex; i < endIndex; i++) {
            var elem = base.getAttributeValue(this.controls[i]);
            if (elem.I >= region.MinI && elem.I <= region.MaxI && elem.J >= region.MinJ && elem.J <= region.MaxJ) {
                var a = elem.I - region.MinI;
                var b = elem.J - region.MinJ;
                var t = nextShape.Shape[a][b];
                if (t == 1) {
                    checkCount++;
                }

                var count = this.checkPiece(list.infos, elem);
                if (count == 0) {
                    if (elem.Val == 1 && !elem.IsActive) {
                        return;
                    }
                }
            }
        }
        
        if (checkCount < 4) {
            return;
        }

        //重置以前的图形
        for (i = 0; i < list.infos.length; i++)
        {
            var info = list.infos[i];
            info.Val = 0;
            info.IsActive = false;
            info.BackColor = map.mapColor;
            info.NextTurn = "";
            info.CurrentTurn = "";
            list.pieces[i].className = map.mapColor;
            base.setAttributeValue(list.pieces[i], info);
        }
        //开始翻转
        for (i = startIndex; i < endIndex; i++) {
            elem = base.getAttributeValue(this.controls[i]);
            if (elem.I >= region.MinI && elem.I <= region.MaxI && elem.J >= region.MinJ && elem.J <= region.MaxJ)
            {
                var x = elem.I - region.MinI;
                var y = elem.J - region.MinJ;
                var num = nextShape.Shape[x][y];
                if (num == 1)
                {
                    var panel = this.controls[i];
                    elem.Val = 1;
                    elem.IsActive = true;
                    elem.BackColor = currentBackColor;
                    elem.NextTurn = nextShape.NextTurn;
                    elem.CurrentTurn = nextShape.CurrentTurn;
                    panel.className = currentBackColor;
                    base.setAttributeValue(panel, elem);
                }
            }
        }
    },
    
    checkPiece: function(infos, data) {
        var count = 0;
        for (var index in infos) {
            if (infos[index].I == data.I && infos[index].J == data.J) {
                count++;
            }
        }
        return count;
    },
    
    getMinOrMaxI: function(infos, status) {
        var tmp = [];
        for (var j = 0; j < infos.length; j++) {
            tmp.push(infos[j].I);
        }
        return status ? Math.min.apply(null, tmp) : Math.max.apply(null, tmp);
    },
    
    getMinOrMaxJ: function (infos, status) {
        var tmp = [];
        for (var j = 0; j < infos.length; j++) {
            tmp.push(infos[j].J);
        }
        return status ? Math.min.apply(null, tmp) : Math.max.apply(null, tmp);
    },
    
    resetDiv: function() {
        var len = this.controls.length;
        for (var i = 0; i < len; i++) {
            var piece = this.controls[i];
            var data = base.getAttributeValue(piece);
            piece.className = map.mapColor;
            data.Val = 0;
            data.IsActive = false;
            base.setAttributeValue(piece, data);
        }
    },

    getCurrentActivePiece: function() {
        var pieces = [];
        var infos = [];
        var count = this.controls.length;
        for (var i = 0; i < count; i++) {
            var piece = this.controls[i];
            var data = base.getAttributeValue(piece);
            if (data.IsActive) {
                pieces.push(piece);
                infos.push(data);
                if (infos.length == 4) {
                    break;
                }
            }
        }
        return { "pieces": pieces, "infos": infos };
    },
    
    getShapeRegion: function (list, currentShape) {
        var maxI = this.getMinOrMaxI(list.infos,false);
        var minI = this.getMinOrMaxI(list.infos,true);
        var maxJ = this.getMinOrMaxJ(list.infos, false);
        var minJ = this.getMinOrMaxJ(list.infos, true);

        maxI += currentShape.Offset.Bottom;
        minI -= currentShape.Offset.Top;
        maxJ += currentShape.Offset.Right;
        minJ -= currentShape.Offset.Left;
        return {
            MaxI: maxI,
            MaxJ: maxJ,
            MinI: minI,
            MinJ: minJ
        };
    },
    
    getMoveList: function(orientation) {
        var list = this.getCurrentActivePiece();
        list.nextShspe = this.getNextShspe(orientation, list.infos);
        return list;
    },
    
    getNextShspe: function(orientation, infos) {
        var minI = this.getMinOrMaxI(infos, true);
        var num = minI == 0 ? minI : minI - 1;
        var startIndex = map.column * num;

        var count = this.controls.length;
        var nextInfo = [];
        var nextPiece = [];
        var status = false;
        for (var index in infos) {
            var info = infos[index];
            for (var i = startIndex; i < count; i++) {
                var elem = this.controls[i];
                var data = base.getAttributeValue(elem);
                switch (orientation) {
                    case "down":
                        status = data.I == (info.I + 1) && data.J == info.J;
                        break;
                    case "left":
                        status = data.I == info.I && (data.J + 1) == info.J;
                        break;
                    case "right":
                        status = data.I == info.I && (data.J - 1) == info.J;
                        break;
                }
                if (status) {
                    nextInfo.push(data);
                    nextPiece.push(this.controls[i]);
                    break;
                }
            }
        }
        return { "nextInfos": nextInfo, "nextPieces": nextPiece };
    },
    
    fixedDiv: function(list) {
        var count = list.infos.length;
        for (var i = 0; i < count; i++) {
            var elem = list.infos[i];
            var panel = list.pieces[i];
            elem.IsActive = false;
            base.setAttributeValue(panel, elem);
        }
    },
    
    exchangeStyle: function(list) {
        var currentBackColor = list.infos[0].BackColor;
        var currentNextTurn = list.infos[0].NextTurn;
        var currentTurn = list.infos[0].CurrentTurn;

        var currentCount = list.infos.length;
        var nextCount = list.nextShspe.nextInfos.length;
        for (var i = 0; i < currentCount; i++) {
            var data = list.infos[i];
            data.Val = 0;
            data.IsActive = false;
            data.BackColor = map.mapColor;
            data.NextTurn = "";
            data.CurrentTurn = "";
            base.setAttributeValue(list.pieces[i], data);
            list.pieces[i].className = map.mapColor;
        }
        for (i = 0; i < nextCount; i++) {
            data = list.nextShspe.nextInfos[i];
            data.Val = 1;
            data.IsActive = true;
            data.BackColor = currentBackColor;
            data.NextTurn = currentNextTurn;
            data.CurrentTurn = currentTurn;
            base.setAttributeValue(list.nextShspe.nextPieces[i], data);
            list.nextShspe.nextPieces[i].className = currentBackColor;
        }
    },
    
    cleanOutPanel: function() {
        //保存需要清除的panel
        var elems = [];

        //保存ElementInfo
        var infos = [];

        var row = map.row-1;
        var column = map.column;
        for (var i = row; i >= 0; i--)//反向遍历,从最后一行开始
        {
            var addStatus = true;
            var checkNum = 0;
            for (var j = 0; j < column; j++)
            {
                //检查此行是否已经填充满
                var index = i*column + j;
                //var elem = (ElementInfo) Controls[index].Tag;
                var elem = base.getAttributeValue(this.controls[index]);
                if (elem.Val != 0) continue;
                checkNum++;
                addStatus = false;
            }

            if (checkNum == column)
            {
                //此行没有一个被填充的div,表示已经遍历完毕
                break;
            }

            if (!addStatus) continue; 
            //保存可以被清除的panel
            for (j = 0; j < column; j++)
            {
                index = i * column + j;
                elems.push(this.controls[index]);
            }
        }
        // 清除一行中全部被填充的div
        for (var panel in elems)
        {//清除一行中全部被填充的div
            var info = base.getAttributeValue(elems[panel]);
            info.Val = 0;
            info.IsActive = false;
            info.BackColor = map.mapColor;
            info.NextTurn = "";
            info.CurrentTurn = "";
            elems[panel].className = map.mapColor;
            base.setAttributeValue(elems[panel], info);
            infos.push(info);
        }
        this.moveDownPanel(infos);
    },
    
    isContain: function(arr,obj) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == obj) {
                return true;
            }
        }
        return false;
    },
    
    moveDownPanel: function (panels) {
        if (panels.length <= 0) return;

        var row = map.row-1;
        var column = map.column;
        var me = this;

        function tmpFunc() {
            var t = [];
            for (var k = 0; k < panels.length; k++) {
                if (!me.isContain(t, panels[k].I)) {
                    t.push(panels[k].I);
                }
            }
            return t.sort(function(x, y) {
                if (x > y)
                    return -1;
                if (x < y)
                    return 1;
            });
        }

        var rows = tmpFunc();

        var count = rows.length;

        var indexs = [];
        var spans = [];
        if (count == 1)
        {
            indexs.push(rows[0]);
            spans.push(1);
        }
        else if (count == 4)
        {
            indexs.push(rows[0]);
            spans.push(4);
        }
        else if (count == 2)
        {
            var tmp = rows[0] - rows[1];
            if (tmp == 1)
            {
                indexs.push(rows[0]);
                spans.push(2);
            }
            else
            {
                indexs.push(rows[0]);
                spans.push(1);
                indexs.push(rows[1] + 1);
                spans.push(2);
            }
        }
        else if (count == 3)
        {
            tmp = rows[0] - rows[1];
            var tmp1 = rows[1] - rows[2];


            if (tmp == tmp1)
            {
                indexs.push(rows[0]);
                spans.push(3);
            }
            else if (tmp == 1 && tmp1 != 1)
            {
                indexs.push(rows[0]);
                spans.push(2);
                indexs.push(rows[2] + 2);
                spans.push(3);
            }
            else if (tmp != 1 && tmp1 == 1)
            {
                indexs.push(rows[0]);
                spans.push(1);
                indexs.push(rows[1]+1);
                spans.push(3);
            }
        }

        for (var item = 0; item < indexs.length; item++)
        {
            var status = false;
            var idx = indexs[item];
            var span = spans[item];
            for (var i = row; i >= 0; i--) //反向遍历,从最后一行开始
            {
                if (i == (idx - span) && !status)
                {
                    status = true;
                }
                if (status)
                {
                    var checkNum = 0;
                    var breakStatus = false;
                    for (var j = 0; j < column; j++)
                    {
                        var index = i * column + j;
                        var panel = this.controls[index];
                        var info = base.getAttributeValue(panel);
                        if (info.Val == 1)
                        {
                            var nextShape = this.collectionShapeQuery(info, idx);
                            this.cleanExchangeStyle({
                                infos: [info],
                                pieces: [panel],
                                nextShspe: nextShape
                            });
                        }
                        else
                        {
                            checkNum++;
                        }
                        if (checkNum == column)
                        {//发现空行
                            breakStatus = true;
                            break;
                        }
                    }
                    if (breakStatus)
                    {
                        break;
                    }
                    idx--;
                }
            }
        }
    },
    
    collectionShapeQuery: function(info, index) {
        var nextShape = { nextInfos: [], nextPieces: [] };

        var startIndex = map.column * info.I;

        var count = this.controls.length;

        for (var i = startIndex; i < count; i++) {
            var elem = base.getAttributeValue(this.controls[i]);
            if (elem.I == index && elem.J == info.J) {
                nextShape.nextInfos.push(elem);
                nextShape.nextPieces.push(this.controls[i]);
                break;
            }
        }
        return nextShape;
    },
    
    cleanExchangeStyle: function(list) {
        var currentBackColor = list.infos[0].BackColor;
        var currentNextTurn = list.infos[0].NextTurn;
        var currentTurn = list.infos[0].CurrentTurn;

        var currentCount = list.infos.length;
        var nextCount = list.nextShspe.nextInfos.length;
        for (var i = 0; i < currentCount; i++)
        {
            var info = list.infos[i];
            info.Val = 0;
            info.IsActive = false;
            info.BackColor = map.mapColor;
            info.NextTurn = "";
            info.CurrentTurn = "";
            list.pieces[i].className = map.mapColor;
            base.setAttributeValue(list.pieces[i], info);
        }
        for (i = 0; i < nextCount; i++)
        {
            info = list.nextShspe.nextInfos[i];
            info.Val = 1;
            info.IsActive = false;
            info.BackColor = currentBackColor;
            info.NextTurn = currentNextTurn;
            info.CurrentTurn = currentTurn;
            base.setAttributeValue(list.nextShspe.nextPieces[i], info);
            list.nextShspe.nextPieces[i].className = currentBackColor;
        }
    }
};
这样就完成了对方块的控制,好了距离成功又近了一步,下一篇中我们来完成这个游戏。

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016-04-10 00:08:30
  • 2241

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm...
  • yaerfeng
  • yaerfeng
  • 2014-04-28 09:52:37
  • 52906

JS写俄罗斯方块完美注释版

JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者:...
  • sunxing007
  • sunxing007
  • 2008-11-19 00:35:00
  • 15214

Scratch项目式学习-俄罗斯方块游戏

信息社会,编程就和传统的“读、写、算”一样,是一种必备的基本能力,而这种能力可以从儿童编程开始。本课程以俄罗斯方块游戏作为项目,按照项目开发的流程作为课程框架,从游戏的分析和设计入手,确定游戏的背景、角色和规则;然后从准备素材到功能模块编程到调试,体验完整的项目开发过程。学习者会不断地遇到问题,分析原因,训练工程思维,提升解决问题的能力。
  • 2017年04月23日 22:39

使用Unity制作俄罗斯方块游戏

1. 操作环境    Unity3D 4.1.0版本、Win 7    备注:该方法并非本人原创,我也是根据别人的代码来学习的。 2. 思路分析    该方法中,只有2个脚本,一个是控制方块的...
  • xiaodiao062
  • xiaodiao062
  • 2014-06-13 16:18:30
  • 1487

Flash8俄罗斯方块实现中的难点和技巧

  俄罗斯方块是一个很经典的游戏,编程实现也不是很难,但并不是每个程序员都能编写出这个游戏。也许很多人(包括我在内)在编写前对这个游戏或多或少存在一些疑问,比如方块如何旋转变形,如何判断下落等,也许正...
  • hbuxiaoshe
  • hbuxiaoshe
  • 2010-11-12 16:01:00
  • 3540

Qt小游戏开发:俄罗斯方块

作为一个即将步入游戏行业的新人,手写经典小游戏是必备技能哦。 预览 由于录屏软件的问题,颜色和帧率与实际有所出入,不过不影响。 步骤 1 新建工程 建一个基类为QWidget的QT gui...
  • u012234115
  • u012234115
  • 2015-05-25 10:43:57
  • 3149

纯js实现俄罗斯方块详解与源码

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯...
  • d1105260363
  • d1105260363
  • 2017-08-23 17:54:45
  • 891

js版俄罗斯方块

  • 2014年03月17日 16:30
  • 23KB
  • 下载

Unity 开发日记/教程 俄罗斯方块 (二) 搭建方块UI和生成方块.

接前文. 本教程全部功能都使用Unity内置UGUI来完成,素材也仅使用其内置的5个默认素材. 首先,创建一个画布,根据要输出的显示器尺寸进行基本设置. 然后创建一个用于显示的正方形基本单元,...
  • neverwind
  • neverwind
  • 2017-07-10 19:15:00
  • 1258
收藏助手
不良信息举报
您举报文章:使用javascript制作俄罗斯方块游戏(3)
举报原因:
原因补充:

(最多只允许输入30个字)