js拖拽俄罗斯方块小游戏(一)

分享一个小游戏的编写历程,内容还是有不少的,我就分开来写了哈。使用的是cocos2d-js引擎,观看此教程要有一点基础会比较容易的,这个小游戏参照了1010!这个游戏了。

这是一个拖拽类游戏,拖拽元素使用的是类俄罗斯方块。

github地址:https://github.com/lzuntalented/DragBlock
github上的内容只更新到当前教程的内容
演示地址:http://lzuntalented.github.io/lz/1010/publish/html5/index.html
演示项目中还存在一些问题,在后面教程会对此进行修复的

演示图片:

教程效果图

demo效果图

步骤:
1.创建网格背景,将这个网格放置到视图的正中心位置上。
2.默认每个网格是灰色的背景,后面方块精灵会覆盖在网格上面。为了记住这个状态,需要把网格使用一个二维数组保存下每个网格点的状态,0表示未覆盖可用,1表示该点已被使用。

/**
     * 创建网格背景
     * */
    createGridView : function(){

        var x_offset = (cc.winSize.width - PublicData.item_width * PublicData.gridview_col) / 2;
        var y_offset = (cc.winSize.height - PublicData.item_height * PublicData.gridview_row) / 2 + PublicData.item_height;

        for(var i = 0 ; i < PublicData.gridview_row ; i++){
            var tmp = [];

            for(var j = 0  ; j < PublicData.gridview_col ; j++){
                tmp.push(0);//填充状态0网格未被覆盖 1该网格已被覆盖

                var sprite = new cc.Sprite(res.Color_0_png);
                sprite.attr({
                    x : PublicData.item_width * j + x_offset,
                    y : PublicData.item_height * i + y_offset,
                    anchorX : 0,
                    anchorY : 1
                });
                this.addChild(sprite);
            }

            this.map.push(tmp);//填充状态数组

        }
    },

3.创建底部三个可供拖拽的方块精灵。方块精灵需要有一些属性:类型表示这个是哪种方块,方块方向,还要定义一个方块的数据结构,以便后面在消除的时候方便计算。此数据结构以左上角为原点 , 用坐标系的第四象限表示。

    /**
     * 绘制方块
     * ##
     * ##
     */
    drawTian : function(){
        /*绘制田方块的各个点*/
        this.drawPoint();
        this.drawPoint(
            cc.p(PublicData.item_width,0)
        );
        this.drawPoint(
            cc.p(0,-PublicData.item_height)
        );
        this.drawPoint(
            cc.p(PublicData.item_width , -PublicData.item_height)
        );

        this.width = PublicData.item_width * 2;//定义该方块宽度
        this.height = PublicData.item_height * 2;//定义该方块高度

        /*定义该方块的数据结构*/
        this.vector.push([0,0]);
        this.vector.push([0,1]);
        this.vector.push([-1,0]);
        this.vector.push([-1,1]);
    },

先写到这,把基本框架先搭出来,后面再慢慢补充哈!

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

js拖拽俄罗斯方块小游戏(一)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭