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

原创 2016年08月07日 09:53:53

分享一个小游戏的编写历程,内容还是有不少的,我就分开来写了哈。使用的是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]);
    },

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

俄罗斯方块游戏新玩法(拖动方块)C#源码GDI绘图源码

  • 2016年06月03日 16:02
  • 1.7MB
  • 下载

俄罗斯方块的源码实现

介绍俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏,它由俄罗斯人阿列克谢·帕基特诺夫发明,故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之...
  • u011889952
  • u011889952
  • 2015年03月24日 20:13
  • 957

【Cocos2d-js之旅】1-贪吃蛇

这两天前辈要我用cocos2d-js做一个贪吃蛇,记录一下代码 joyStick.js var joyStick = cc.Layer.extend( {ctor:function() { ...
  • aaa1995421
  • aaa1995421
  • 2016年11月17日 10:48
  • 337

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

这是一个拖拽类游戏,拖拽元素使用的是类俄罗斯方块。
  • u012601195
  • u012601195
  • 2016年08月07日 09:53
  • 795

原生js小项目---拖拽小方块--- js菜单栏

学习js到了这里就可以开始尝试做一些小的项目了拖拽小方块HTML部分省去 js拖拽方块, js菜单栏 function getStyle(elem, prop, fakeNode) { if(...
  • c_kite
  • c_kite
  • 2016年12月08日 11:58
  • 1004

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

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

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

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

Java版俄罗斯方块

Java版俄罗斯方块 08年写的一个Java版俄罗斯方块程序 界面做的中规中矩,每种形状颜色都不相同 程序控制还可以,没什么大的Bug 消磨时间的时候可以Down下来玩玩 下载链接:htt...
  • zhaohuihua
  • zhaohuihua
  • 2010年05月23日 10:16
  • 7514

俄罗斯方块机器人版

没事写的,自动摆放算法比较简单,大约为新手水平,以后会继续改进。。。 自动摆放算法:尽量消行,尽量往低了放,尽量不留空。。 #include #include #include #include...
  • xinghongduo
  • xinghongduo
  • 2010年11月21日 09:43
  • 888

使用Java实现小游戏:俄罗斯方块

使用Java实现小游戏:俄罗斯方块使用一个二维数组保存游戏的地图:// 游戏地图格子,每个格子保存一个方块,数组纪录方块的状态 private State map[][] = new State[ro...
  • zhliro
  • zhliro
  • 2015年05月15日 16:43
  • 3355
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js拖拽俄罗斯方块小游戏(一)
举报原因:
原因补充:

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